🔥 Filter locations from clicked continent on Locations

src/animations/crossfade.ts

@@ -0,0 +1,26 @@
+import { crossfade } from 'svelte/transition'
+import { quartOut } from 'svelte/easing'
+
+// Crossfade transition
+export const [send, receive] = crossfade({
+    // duration: 1200,
+    duration: d => Math.sqrt(d * 200),
+    fallback (node, params) {
+        const {
+            duration = 600,
+            easing = quartOut,
+            start = 0.85
+        } = params
+        const style = getComputedStyle(node)
+        const transform = style.transform === 'none' ? '' : style.transform
+        const sd = 1 - start
+        return {
+            duration,
+            easing,
+            css: (t, u) => `
+                transform: ${transform} scale(${1 - (sd * u)});
+                opacity: ${t}
+            `
+        }
+    }
+})

src/components/molecules/Location.svelte

@@ -10,11 +10,10 @@
     export let location: any
 
     const { settings: { limit_new }}: any = getContext('global')
-    const { name, slug, country, date_updated } = location
 
     // Location date limit
     const dateNowOffset = dayjs().subtract(limit_new, 'day')
-    const dateLocationUpdated = dayjs(date_updated)
+    const dateLocationUpdated = dayjs(location.date_updated)
     const isNew = dateLocationUpdated.isAfter(dateNowOffset)
 
     let locationEl: HTMLElement
@@ -51,19 +50,19 @@
 <div class="location" role="listitem" bind:this={locationEl}
     style="--offset-x: {$offset.x}px; --offset-y: {$offset.y}px; --rotate: {$offset.x * 0.125}deg"
 >
-    <a href="/{country.slug}/{slug}"
+    <a href="/{location.country.slug}/{location.slug}"
         on:mousemove={handleMouseMove}
         on:mouseleave={handleMouseLeave}
         sveltekit-noscroll
     >
-        <Image class="location__flag" id={country.flag.id} alt="Flag of {country.name}" width={32} height={32} />
+        <Image class="location__flag" id={location.country.flag.id} alt="Flag of {location.country.name}" width={32} height={32} />
         <div class="text">
             <dl>
                 <dt class="location__name">
-                    {name}
+                    {location.name}
                 </dt>
                 <dd class="location__country text-label">
-                    {country.name}
+                    {location.country.name}
                 </dd>
             </dl>
             {#if isNew}
@@ -73,10 +72,10 @@
     </a>
     {#if location.photos.length}
         <div class="location__photos">
-            {#each location.photos as photo, index}
+            {#each location.photos as { image }, index}
                 <Image
                     class={index === photoIndex ? 'is-visible' : null}
-                    id={photo.image.id} alt={photo.image.title}
+                    id={image.id} alt={image.title}
                     width={340} height={226} quality={70}
                 />
             {/each}

src/components/organisms/Locations.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
     import { getContext } from 'svelte'
+    import { flip } from 'svelte/animate'
+    import { quartOut } from 'svelte/easing'
+    import { send, receive } from '$animations/crossfade'
+    import { throttle } from '$utils/functions'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Location from '$components/molecules/Location.svelte'
@@ -7,6 +11,30 @@
     export let locations: any
 
     const { continents, settings: { explore_list }} = getContext('global')
+
+    // Continents filtering logic
+    let currentContinent: string = undefined
+    $: filteredLocations = locations.filter(({ country: { continent }}: any) => {
+        if (!currentContinent) {
+            // Show all locations by default
+            return true
+        } else {
+            // Location's continent matches the clicked continent
+            return continent.slug === currentContinent
+        }
+    })
+
+
+    /**
+     * Filter locations from continent
+     */
+    const filterLocation = throttle((continent: string) => {
+        if (continent !== currentContinent) {
+            currentContinent = continent
+        } else {
+            currentContinent = undefined
+        }
+    }, 700)
 </script>
 
 <div class="browse" id="locations">
@@ -16,17 +44,24 @@
 
     <ul class="browse__continents" role="navigation">
         {#each continents as { name, slug }}
-            <li>
-                <Button tag="button" text={name} class="button--small" />
+            <li class:is-disabled={currentContinent && currentContinent !== slug}>
+                <Button
+                    tag="button" text={name} class="button--small"
+                    on:click={() => filterLocation(slug)}
+                />
             </li>
         {/each}
     </ul>
 
-    <div class="browse__locations" role="list">
-        {#each locations as location}
-            <Location
-                location={location}
-            />
+    <ul class="browse__locations" role="list">
+        {#each filteredLocations as location (location)}
+            <li
+                animate:flip={{ duration: 1000, easing: quartOut }}
+                in:receive={{ key: location.slug }}
+                out:send={{ key: location.slug }}
+            >
+                <Location {location} />
+            </li>
         {/each}
-    </div>
+    </ul>
 </div>

src/routes/__layout.svelte

@@ -37,6 +37,7 @@
                         name
                         slug
                         flag { id }
+                        continent { slug }
                     }
                     date_updated
                     photos (sort: "-date_created", limit: ${import.meta.env.VITE_PREVIEW_COUNT}) {

src/style/organisms/_locations.scss

@@ -31,6 +31,12 @@
         li {
             display: block;
             margin: 0 8px;
+            transition: opacity 0.5s var(--ease-quart);
+        }
+
+        // Disabled button
+        .is-disabled {
+            opacity: 0.4;
         }
     }
 
@@ -56,7 +62,8 @@
             margin-top: 104px;
         }
 
-        .location {
+        li {
+            display: block;
             margin-bottom: 40px;
 
             @include bp (mob-lg) {

svelte.config.js

@@ -17,6 +17,7 @@ const config = {
             resolve: {
                 alias: {
                     $components: resolve('src/components'),
+                    $animations: resolve('src/animations'),
                     $modules: resolve('src/modules'),
                     $utils: resolve('src/utils'),
                 }