93 lines
3.0 KiB
Svelte
93 lines
3.0 KiB
Svelte
<style lang="scss">
|
|
@import "../../style/organisms/shop";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { getContext, onMount } from 'svelte'
|
|
// Components
|
|
import Button from '$components/atoms/Button.svelte'
|
|
import Image from '$components/atoms/Image.svelte'
|
|
|
|
const { locations, shop } = getContext('global')
|
|
const locationsWithPoster = locations
|
|
// Filter locations with posters only
|
|
.filter((loc: Location) => loc.has_poster)
|
|
// Sort locations alphabetically from slug (a>z)
|
|
.sort((a: Location, b: Location) => a.slug.localeCompare(b.slug))
|
|
// 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 = `Posters available for ${locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.`
|
|
}
|
|
|
|
interface Location {
|
|
slug: string
|
|
name: string
|
|
has_poster: boolean
|
|
}
|
|
|
|
// Image rotation
|
|
let imagesLoop: ReturnType<typeof setTimeout>
|
|
let currentImageIndex = 0
|
|
|
|
const incrementCurrentImageIndex = () => {
|
|
currentImageIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1
|
|
imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
|
|
}
|
|
|
|
onMount(() => {
|
|
if (images.length > 1) {
|
|
incrementCurrentImageIndex()
|
|
}
|
|
|
|
return () => {
|
|
// Clear rotating words timeout
|
|
if (imagesLoop) {
|
|
clearTimeout(imagesLoop)
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<div class="shop shadow-box-dark" class:has-no-bottom={!textBottom}>
|
|
<div class="content">
|
|
<div class="shop__images">
|
|
{#if images}
|
|
<a href={enabled ? url : undefined} title="Visit our shop" sveltekit:noscroll sveltekit:prefetch>
|
|
{#each images as { directus_files_id: { id, title }}, index}
|
|
<Image
|
|
class={index === currentImageIndex ? 'is-visible' : null}
|
|
{id}
|
|
sizeKey="square"
|
|
sizes={{
|
|
small: { width: 400, height: 400 },
|
|
large: { width: 800, height: 800 },
|
|
}}
|
|
alt={title}
|
|
/>
|
|
{/each}
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="shop__content">
|
|
<h3 class="title-medium">{title}</h3>
|
|
<p class="text-small">{text}</p>
|
|
{#if enabled}
|
|
<Button {url} text={buttonText} color="pinklight" />
|
|
{/if}
|
|
{#if textBottom}
|
|
<p class="detail">{textBottom}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div> |