112 lines
3.0 KiB
Svelte
112 lines
3.0 KiB
Svelte
<style lang="scss">
|
|
@import "../../style/molecules/toast";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { onMount } from 'svelte'
|
|
import { fade, fly } from 'svelte/transition'
|
|
import { quartOut } from 'svelte/easing'
|
|
import { browser } from '$app/environment'
|
|
import { cx } from 'classix'
|
|
// Components
|
|
import Button from '$components/atoms/Button.svelte'
|
|
import Image from '$components/atoms/Image.svelte'
|
|
|
|
export let id: string
|
|
export let type: 'global' | 'local'
|
|
export let text: string
|
|
export let cta: {
|
|
label: string
|
|
url: string
|
|
color: string
|
|
} = undefined
|
|
export let images: { id: string, title: string }[] = undefined
|
|
export let show = false
|
|
|
|
$: if (browser) {
|
|
show = !localStorage.getItem(`toast-${id}`)
|
|
}
|
|
|
|
// 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)
|
|
}
|
|
|
|
// Close toast
|
|
const close = () => {
|
|
localStorage.setItem(`toast-${id}`, 'closed')
|
|
show = false
|
|
}
|
|
|
|
$: classes = cx(
|
|
'toast',
|
|
`toast--${type}`,
|
|
'shadow-small',
|
|
$$props.class,
|
|
)
|
|
|
|
|
|
onMount(() => {
|
|
if (images.length > 1) {
|
|
incrementCurrentImageIndex()
|
|
}
|
|
|
|
return () => {
|
|
// Clear rotating words timeout
|
|
if (imagesLoop) {
|
|
clearTimeout(imagesLoop)
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
{#if show}
|
|
<div
|
|
class={classes}
|
|
in:fly={{ y: '10%', duration: 1200, easing: quartOut }}
|
|
out:fade={{ duration: 800, easing: quartOut }}
|
|
>
|
|
{#if images}
|
|
<div class="media">
|
|
<a href={cta.url}>
|
|
{#each images as { id, title }, index}
|
|
<Image
|
|
class={index === currentImageIndex ? 'is-visible' : null}
|
|
{id}
|
|
sizeKey="square"
|
|
sizes={{
|
|
small: { width: 200, height: 200 },
|
|
large: { width: 350, height: 350 },
|
|
}}
|
|
alt={title}
|
|
/>
|
|
{/each}
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="content">
|
|
<p class="text">{@html text}</p>
|
|
|
|
{#if cta}
|
|
<Button
|
|
size="xsmall"
|
|
text={cta.label}
|
|
url={cta.url}
|
|
color="pink"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
|
|
<button class="close" on:click={close} title="Close">
|
|
<svg width="10" height="10">
|
|
<use xlink:href="#cross" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{/if}
|