XXErste Collections für eine Media-Library. Weitere Collections für spätere neue Projekte hinzugefügt. (alles WorkInProgress)

2022-04-01 14:14:45 +02:00
parent 2ab447274a
commit 969ebabd18
8 changed files with 810 additions and 10 deletions
--- a/src/components/page/Galleries.svelte
+++ b/src/components/page/Galleries.svelte
@@ -0,0 +1,114 @@
+<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}">&#8249;</div>
+                <div class="next" on:click|preventDefault="{next}">&#8250;</div>
+            </div>
+        </Modal>
+    {/if}
+</section>