115 lines
3.6 KiB
Svelte
115 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import { fade } from "svelte/transition"
|
|
|
|
import { getGalleries } from "../../api"
|
|
import { apiBaseURL } from "../../config"
|
|
|
|
import Modal from "./Modal.svelte"
|
|
|
|
export let article
|
|
let galleries: Gallery[]
|
|
|
|
const loadLinkedGalleries = async () => {
|
|
galleries = await getGalleries(article?.galleries)
|
|
}
|
|
loadLinkedGalleries()
|
|
|
|
let selectedImage = null
|
|
let selectedGallery = null
|
|
const showDetails = (gallery, image) => {
|
|
selectedImage = image
|
|
selectedGallery = gallery
|
|
console.log(selectedGallery.items.indexOf(image))
|
|
}
|
|
const closeDetails = () => {
|
|
selectedImage = null
|
|
selectedGallery = null
|
|
}
|
|
|
|
const next = () => {
|
|
let nextImage
|
|
let nextIndex = selectedGallery.items.indexOf(selectedImage) + 1
|
|
if (!selectedGallery.items[nextIndex]) {
|
|
nextImage = selectedGallery.items[0]
|
|
} else {
|
|
nextImage = selectedGallery.items[nextIndex]
|
|
}
|
|
selectedImage = nextImage
|
|
}
|
|
|
|
const prev = () => {
|
|
let prevImage
|
|
let prevIndex = selectedGallery.items.indexOf(selectedImage) - 1
|
|
if (prevIndex < 0) {
|
|
prevImage = selectedGallery.items[selectedGallery.items.length - 1]
|
|
} else {
|
|
prevImage = selectedGallery.items[prevIndex]
|
|
}
|
|
selectedImage = prevImage
|
|
}
|
|
|
|
const handleKeydown = (e) => {
|
|
if (e.keyCode === 37) {
|
|
prev()
|
|
}
|
|
if (e.keyCode === 39) {
|
|
next()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window on:keydown="{handleKeydown}" />
|
|
|
|
<section class="galleries">
|
|
{#each galleries || [] as gallery}
|
|
<div class="gallery gallery-{gallery.variant}">
|
|
{#each gallery.items || [] as image, index}
|
|
<div
|
|
class="gallery-item"
|
|
on:click="{() => showDetails(gallery, image)}"
|
|
>
|
|
<img
|
|
src="{apiBaseURL}galleries/{gallery.id}/{image.file
|
|
.src}?filter=s"
|
|
alt="{image.alt ? image.alt : image.title}"
|
|
/>
|
|
{#if gallery.variant === "simple-with-title"}
|
|
<div class="gallery-item-title">
|
|
{image.title}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
|
|
{#if selectedGallery && selectedImage}
|
|
<Modal show="{selectedGallery && selectedImage}">
|
|
<div transition:fade class="gallery-image-details">
|
|
<img
|
|
src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage
|
|
.file.src}?filter=l"
|
|
alt="{selectedImage.alt
|
|
? selectedImage.alt
|
|
: selectedImage.title}"
|
|
on:click="{closeDetails}"
|
|
/>
|
|
<div class="gallery-info">
|
|
{#if selectedImage.title}
|
|
<div class="gallery-title">
|
|
{selectedImage.title}
|
|
</div>
|
|
{/if}
|
|
{#if selectedImage.description}
|
|
<div class="gallery-description">
|
|
{selectedImage.description}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div class="prev" on:click|preventDefault="{prev}">‹</div>
|
|
<div class="next" on:click|preventDefault="{next}">›</div>
|
|
</div>
|
|
</Modal>
|
|
{/if}
|
|
</section>
|