diff --git a/src/components/organisms/ShopModule.svelte b/src/components/organisms/ShopModule.svelte index c301fa2..abf39f1 100644 --- a/src/components/organisms/ShopModule.svelte +++ b/src/components/organisms/ShopModule.svelte @@ -8,12 +8,6 @@ import Button from '$components/atoms/Button.svelte' import Image from '$components/atoms/Image.svelte' - interface Location { - slug: string - name: string - has_poster: boolean - } - const { locations, shop } = getContext('global') const locationsWithPoster = locations // Filter locations with posters only @@ -23,22 +17,43 @@ // Return name only .map((loc: Location) => loc.name) + export let images: any[] = shop.module_images + export let title: string = shop.module_title + export let text: string = shop.module_text + export let textBottom: string = undefined + export let buttonText: string = 'Shop' + export let url: string = '/shop' + export let enabled: boolean = true + + if (textBottom !== null && textBottom !== undefined) { + textBottom = `Posters available for ${locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.` + } + + interface Location { + slug: string + name: string + has_poster: boolean + } // Image rotation let imagesLoop: ReturnType let currentImageIndex = 0 const incrementCurrentImageIndex = () => { - currentImageIndex = currentImageIndex === shop.module_images.length - 1 ? 0 : currentImageIndex + 1 + currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1 imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000) } onMount(() => { - incrementCurrentImageIndex() + if (images.length > 1) { + incrementCurrentImageIndex() + } return () => { // Clear rotating words timeout - clearTimeout(imagesLoop) + if (imagesLoop) { + clearTimeout(imagesLoop) + } } }) @@ -46,9 +61,9 @@
\ No newline at end of file diff --git a/src/style/organisms/_shop.scss b/src/style/organisms/_shop.scss index c8f4310..0882948 100644 --- a/src/style/organisms/_shop.scss +++ b/src/style/organisms/_shop.scss @@ -18,12 +18,19 @@ } } + // Images &__images { position: relative; overflow: hidden; min-height: 256px; + a { + display: block; + width: 100%; + height: 100%; + } + :global(picture) { position: absolute; top: 0; @@ -34,6 +41,9 @@ transform: scale3d(1.075, 1.075, 1.075); transition: opacity 0.8s, transform 1.6s var(--ease-quart); } + :global(img) { + object-position: center 32%; + } :global(.is-visible) { opacity: 1;