48 lines
1.2 KiB
Svelte
48 lines
1.2 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte'
|
|
|
|
// Props
|
|
export let currentIndex = 0
|
|
export let className = null
|
|
|
|
// Variables
|
|
let counter
|
|
const numbers = [...Array(10).keys()]
|
|
|
|
// Reactive variables depending on currentIndex
|
|
$: actualIndex = currentIndex + 1
|
|
$: amount = String(actualIndex).length
|
|
$: index = (actualIndex < 10) ? String(actualIndex).padStart(2, '0') : String(actualIndex)
|
|
$: digits = index.split('')
|
|
|
|
|
|
// Set columns height
|
|
const setColumnHeight = () => {
|
|
// Set each digit column's height = its spans combined (in order to translate in tens of %)
|
|
counter.querySelectorAll('div').forEach(column => {
|
|
const spans = column.querySelectorAll('span')
|
|
column.style.height = spans[0].offsetHeight * spans.length + 'px'
|
|
})
|
|
}
|
|
|
|
|
|
/*
|
|
** Run code when mounted
|
|
*/
|
|
onMount(() => {
|
|
setColumnHeight()
|
|
})
|
|
</script>
|
|
|
|
<svelte:window on:resize={setColumnHeight} />
|
|
|
|
<div class="counter {className}" bind:this={counter}>
|
|
{#each digits as digit}
|
|
<div class="counter__column" style="transform: translateY(-{digit}0%);">
|
|
{#each numbers as number}
|
|
<span>{number}</span>
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</div>
|