diff --git a/src/atoms/Counter.svelte b/src/atoms/Counter.svelte index 4595a08..3edb8fe 100644 --- a/src/atoms/Counter.svelte +++ b/src/atoms/Counter.svelte @@ -6,12 +6,14 @@ 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('') - let counter - const numbers = [...Array(10).keys()] /* diff --git a/src/atoms/ToggleLayout.svelte b/src/atoms/ToggleLayout.svelte index 154915b..593e250 100644 --- a/src/atoms/ToggleLayout.svelte +++ b/src/atoms/ToggleLayout.svelte @@ -2,6 +2,7 @@ import { onMount } from 'svelte' // Variables + let toggleEl let toggleLayout let layoutSetting @@ -17,17 +18,16 @@ const layoutGridClass = 'photos--grid' const layoutListClass = 'photos--list' const grid = document.querySelector('.photos') - const toggle = document.querySelector('.toggle') - const pill = toggle.querySelector('.pill') + const pill = toggleEl.querySelector('.pill') // Change active pill const toggleAnimate = (elem, pill, toggle) => { pill.style.width = Math.round(elem.getBoundingClientRect().width) + 'px' - pill.style.left = Math.round(elem.getBoundingClientRect().left - toggle.getBoundingClientRect().left) + 'px' + pill.style.left = Math.round(elem.getBoundingClientRect().left - toggleEl.getBoundingClientRect().left) + 'px' } // Init of first option - toggleAnimate(document.querySelector(`.toggle [data-layout="${layoutSetting}"]`), pill, toggle) + toggleAnimate(toggleEl.querySelector(`[data-layout="${layoutSetting}"]`), pill, toggleEl) // Toggle layout toggleLayout = event => { @@ -48,10 +48,10 @@ } // Animate the active pill - toggleAnimate(clicked, pill, toggle) + toggleAnimate(clicked, pill, toggleEl) // Add/Remove active classes - document.querySelectorAll('.toggle button').forEach(button => button.classList.remove('active')) + toggleEl.querySelectorAll('button').forEach(button => button.classList.remove('active')) clicked.classList.add('active') // Remember this setting @@ -60,7 +60,7 @@ }) -
+

See more photos

- {:else} - {#if $currentLocation} + {:else if $currentLocation}

That's all folks!

Come back later to check out
new photos of {$currentLocation.name}

{/if} - {/if}