Update and rework project structure with new pagebuilder concept. (based on RK Architekten and SFU Politik configs and sources)

src/components/__UNUSED__/widgets/ContentMediaFile.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import Image from "./Image.svelte"
+
+    export let collectionName: string = null
+    export let entryId: string = null
+    export let mediaFile: TibiArticleMediaFile = null
+    export let cssClass: string = ""
+</script>
+
+<Image collectionName="{collectionName}" entryId="{entryId}" file="{mediaFile.file}" cssClass="{cssClass}" />

src/components/__UNUSED__/widgets/Galleries.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+    import { fade } from "svelte/transition"
+
+    import { getGalleries } from "../../api"
+    import { apiBaseURL } from "../../config"
+
+    import Modal from "../__UNUSED__/widgets/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>

src/components/__UNUSED__/widgets/GeneralMediaImage.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { generalInfo } from "../../store"
+    import { apiBaseURL } from "../../config"
+
+    export let id: string = null
+    export let cssClass: string = ""
+</script>
+
+{#if id}
+    {#each $generalInfo?.media?.mediaFiles || [] as mediaFile}
+        {#if mediaFile.id === id && mediaFile.file}
+            {#if mediaFile.file.src.includes(";base64,")}
+                <img
+                    src="{mediaFile.file.src}"
+                    alt="{mediaFile.alternateText ? mediaFile.alternateText + ' - ' : ''}"
+                    class="{cssClass}"
+                />
+            {:else}
+                <img
+                    src="{`${apiBaseURL}general/${$generalInfo?.id}/${mediaFile.file.src}?filter=l`}"
+                    alt="{mediaFile.alternateText ? mediaFile.alternateText : mediaFile.file.path}"
+                    class="{cssClass}"
+                />
+            {/if}
+        {/if}
+    {/each}
+{/if}

src/components/__UNUSED__/widgets/GoogleMaps.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { generalInfo, ccTags } from "../../../store"
+
+    $: iframeTitle =
+        $generalInfo?.person?.salutation +
+        " " +
+        $generalInfo?.person?.firstname +
+        " " +
+        $generalInfo?.person?.lastname +
+        " - " +
+        $generalInfo?.person?.additional
+</script>
+
+{#if $ccTags?.includes("googleMaps")}
+    <iframe
+        id="googleMaps"
+        title="{iframeTitle}"
+        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1342.4197187151062!2d10.4164909278422!3d50.56856037791808!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2a509772539d6c1b!2sDr.%20med.%20Christine%20Wedekind!5e0!3m2!1sde!2sde!4v1652861335963!5m2!1sde!2sde"
+        allowfullscreen
+        loading="lazy"
+        referrerpolicy="no-referrer-when-downgrade"></iframe>
+{/if}

src/components/__UNUSED__/widgets/Modal.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { scale } from "svelte/transition"
+
+    export let show: boolean = false
+    export let size: string = "md"
+
+    const clickOnBackground = () => {
+        show = false
+    }
+</script>
+
+<div class="modal-wrapper" class:show on:click="{clickOnBackground}">
+    <div class="modal modal-{size}" transition:scale on:click|stopPropagation="{() => {}}">
+        {#if $$slots.close}
+            <div class="modal-close">
+                <slot name="close" />
+            </div>
+        {/if}
+        {#if $$slots.header}
+            <div class="modal-header">
+                <slot name="header" />
+            </div>
+        {/if}
+        {#if $$slots.default}
+            <div class="modal-content">
+                <slot />
+            </div>
+        {/if}
+        {#if $$slots.header}
+            <div class="modal-footer">
+                <slot name="footer" />
+            </div>
+        {/if}
+    </div>
+</div>

src/components/__UNUSED__/widgets/details/Default.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    export let entry: TibiArticle
+</script>
+
+{#if entry}
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="article-details {entry?.article?.general?.type}">
+                    {#if entry?.article?.content?.title}
+                        <h1 class="article-title">{@html entry?.article?.content?.title}</h1>
+                    {/if}
+
+                    {#if entry?.article?.content?.subtitle}
+                        <div class="article-subtitle">{@html entry?.article?.content?.subtitle}</div>
+                    {/if}
+
+                    {#if entry?.article?.content?.types?.teaser}
+                        <div class="article-teaser">{@html entry?.article?.content?.types?.teaser}</div>
+                    {/if}
+
+                    {#if entry?.article?.content?.types?.details}
+                        <div class="article-details">{@html entry?.article?.content?.types?.details}</div>
+                    {/if}
+                </div>
+            </div>
+        </div>
+    </div>
+{/if}

src/components/__UNUSED__/widgets/details/News.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    export let entry: TibiArticle
+</script>
+
+{#if entry}
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="article-details {entry?.article?.general?.type}">
+                    {#if entry?.article?.content?.title}
+                        <h1 class="article-title">{@html entry?.article?.content?.title}</h1>
+                    {/if}
+
+                    {#if entry?.article?.content?.subtitle}
+                        <div class="article-subtitle">{@html entry?.article?.content?.subtitle}</div>
+                    {/if}
+
+                    {#if entry?.article?.content?.types?.teaser}
+                        <div class="article-teaser">{@html entry?.article?.content?.types?.teaser}</div>
+                    {/if}
+
+                    {#if entry?.article?.content?.types?.details}
+                        <div class="article-details">{@html entry?.article?.content?.types?.details}</div>
+                    {/if}
+                </div>
+            </div>
+        </div>
+    </div>
+{/if}

src/components/__UNUSED__/widgets/details/index.ts

@@ -0,0 +1,7 @@
+import Default from "./Default.svelte"
+import News from "./News.svelte"
+
+export default {
+    default: Default,
+    news: News,
+}