chore: merge components and stylesheets in same directory name

2024-07-24 10:59:34 +02:00
parent a9d937a2b5
commit cb7d83978d
92 changed files with 533 additions and 531 deletions
--- a/apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte
+++ b/apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte
@@ -0,0 +1,120 @@
+<style lang="scss">
+    @import "./PostersGrid";
+</style>
+
+<script lang="ts">
+    import { getContext, onMount } from 'svelte'
+    import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'
+    // Components
+    import Poster from '$components/molecules/Poster/Poster.svelte'
+    import { debounce } from 'utils/actions'
+
+    export let posters: any = []
+
+    let innerWidth: number
+    let carouselEl: HTMLElement
+    let carousel: EmblaCarouselType
+    let currentSlide = 0
+    let carouselDots = []
+
+    const { shopProducts }: any = getContext('shop')
+
+
+    /** Navigate to specific slide */
+    const goToSlide = (index = 0) => {
+        carousel.scrollTo(index)
+    }
+
+    /** Init Carousel */
+    const initCarousel = () => {
+        if (innerWidth < 1200) {
+            if (!carousel) {
+                carousel = EmblaCarousel(carouselEl, {
+                    slidesToScroll: innerWidth < 550 ? 1 : 2,
+                })
+
+                // On init
+                carousel.on('init', () => {
+                    // Define amounts of dots
+                    carouselDots = carousel.scrollSnapList()
+                })
+                // On slide change
+                carousel.on('select', () => {
+                    // Define current slide
+                    currentSlide = carousel.selectedScrollSnap()
+                })
+                // On resize
+                carousel.on('resize', () => {
+                    // Redefine options
+                    carousel.reInit({
+                        slidesToScroll: innerWidth < 550 ? 1 : 2
+                    })
+                    // Define amounts of dots
+                    carouselDots = carousel.scrollSnapList()
+                    // Define current slide
+                    currentSlide = carousel.selectedScrollSnap()
+                })
+            }
+        } else {
+            if (carousel) {
+                destroyCarousel()
+            }
+        }
+    }
+
+    /** Destroy carousel */
+    const destroyCarousel = () => {
+        carousel.destroy()
+        carousel = undefined
+    }
+
+    /** Destroy carousel for larger screens */
+    const handleResize = debounce(initCarousel, 200)
+
+
+    onMount(() => {
+        if (innerWidth < 1200) {
+            initCarousel()
+        }
+
+        // Destroy
+        return () => {
+            if (carousel) {
+                carousel.destroy()
+            }
+        }
+    })
+</script>
+
+<svelte:window
+    bind:innerWidth
+    on:resize={handleResize}
+/>
+
+<section class="shop-page__posters grid">
+    <h3>View all of our available posters</h3>
+
+    {#if posters}
+        <div class="set" bind:this={carouselEl}>
+            <div class="set__content">
+                {#each posters as { location, photos_product }}
+                    <Poster
+                        location={location}
+                        image={photos_product.length && photos_product[1].directus_files_id}
+                        product={shopProducts.find(item => item.slug.includes(location.slug))}
+                    />
+                {/each}
+            </div>
+
+            {#if carousel}
+                <ul class="set__dots">
+                    {#each carouselDots as _, index}
+                        <li class:is-active={index === currentSlide}>
+                            <button on:click={() => goToSlide(index)} aria-label="Go to slide #{index + 1}" />
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
+        </div>
+    {/if}
+</section>