WIP React > Svelte

Put most of the developed design into Svelte

src/organisms/Locations.svelte

@@ -0,0 +1,103 @@
+<script context="module">
+    import Shuffle from 'shufflejs'
+</script>
+
+<script>
+    import { onMount } from 'svelte'
+    import { locations, countries, continents } from '../store'
+    // import { zoomFadeIn, zoomFadeOut } from '../animations'
+
+    // Components
+    import Location from '../molecules/Location'
+
+    // Define continents to show
+    let continentsToShow = []
+    $continents.forEach(cont => !!cont.countries && continentsToShow.push(cont))
+
+    // Create the filterable list of locations
+    let filterLocations
+    onMount(() => {
+        // filterLocations = new Shuffle(document.getElementById('continents'), {
+        //     itemSelector: '.location',
+        //     // sizer: '#locations_list',
+        //     speed: 400,
+        //     staggerAmount: 50
+        // })
+    })
+
+    // // On click on continents
+    const toggleContinents = (event, continent = '') => {
+        // Change the filter
+        // filterLocations.filter(continent.id)
+
+        // Change active classes
+        const continents = document.querySelectorAll('#continents a')
+        if (!continent) {
+            continents.forEach(cont => cont.classList.remove('disabled'))
+        } else {
+            continents.forEach(cont => cont.classList.add('disabled'))
+            event.currentTarget.classList.remove('disabled')
+        }
+    }
+</script>
+
+<div class="browse wrap">
+    <div class="description">
+        <p>Browse all the cities and countries</p>
+    </div>
+
+    <ul class="browse__continents" id="continents">
+        <li>
+            <button class="button-outline" on:click|preventDefault={e => toggleContinents(e)}>All</button>
+        </li>
+        {#each continentsToShow as continent}
+        <li>
+            <button class="button-outline" on:click|preventDefault={e => toggleContinents(e, continent)}>
+                <span>{continent.name}</span>
+            </button>
+        </li>
+        {/each}
+    </ul>
+
+    <div class="browse__locations" id="locations_list">
+    {#each $locations as location}
+        <Location
+            name={location.name}
+            slug={location.slug}
+            country={location.country}
+        />
+    {/each}
+    </div>
+</div>
+
+<!-- <div class="buttons is-centered" id="continents">
+    <button class="button is-rounded is-danger" on:click={e => toggleContinents(e)}>All</button>
+    {#each continentsToShow as continent}
+    {#if continent.countries}
+    <button class="button is-rounded is-danger is-outlined" on:click={e => toggleContinents(e, continent)}>{continent.name}</button>
+    {/if}
+    {/each}
+</div>
+
+<div class="columns" id="locations_list">
+    {#each $locations as location}
+    <div class="column is-one-third animate" data-groups='["{location.country.continent.id}"]'>
+        <div class="card">
+            <div class="card-content">
+                <a class="media" href="/location/{location.country.slug}/{location.slug}">
+                    <figure class="media-left">
+                        <span class="icon is-medium has-text-danger">
+                            <img src={location.country.flag.full_url} alt={location.country.flag.full_url} width="32" height="32">
+                        </span>
+                    </figure>
+
+                    <div class="media-content">
+                        <span class="title is-5">{location.name}</span><br>
+                        {location.region}, {location.country.name}<br>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+    {/each}
+</div> -->