Initial commit

2025-10-02 08:54:03 +02:00
commit ea54638227
1642 changed files with 53677 additions and 0 deletions
--- a/frontend/src/lib/components/pagebuilder/DefaultImage.svelte
+++ b/frontend/src/lib/components/pagebuilder/DefaultImage.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+    import { onMount } from "svelte"
+    import { register } from "swiper/element/bundle"
+    import MedialibImage from "../widgets/MedialibImage.svelte"
+    export let images: string[]
+    export let imageHoverEffect: boolean
+    export let forceFullHeight: boolean
+    register(false)
+    let swiper: any
+    onMount(async () => {
+        if (swiper !== undefined) {
+            const response = await fetch("/dist/index.css"),
+                cssText = await response.text(),
+                params = {
+                    injectStyles: [cssText],
+                }
+            Object.assign(swiper, params)
+            swiper.initialize()
+        }
+    })
+</script>
+
+{#if images.length > 1}
+    <div class="default-swiper">
+        <swiper-container
+            bind:this="{swiper}"
+            slides-per-view="1"
+            loop="{true}"
+            direction="horizontal"
+            effect="slide"
+            autoplay-delay="2500"
+            mousewheel="{true}"
+            navigation="{true}"
+            init="{false}"
+            speed="600"
+            class="relative"
+        >
+            {#each images as image (image)}
+                <swiper-slide class="relative">
+                    <div
+                        class:imageHoverEffect="{imageHoverEffect}"
+                        class="image-container"
+                    >
+                        <MedialibImage
+                            id="{image}"
+                            filter="{typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}"
+                        />
+                    </div>
+                </swiper-slide>
+            {/each}
+        </swiper-container>
+    </div>
+{:else if images[0]}
+    <div
+        class="image-container single flex"
+        class:forceFullHeight="{forceFullHeight}"
+        class:imageHoverEffect="{imageHoverEffect}"
+    >
+        <MedialibImage
+            id="{images[0]}"
+            filter="{typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}"
+        />
+    </div>
+{/if}
+
+<style lang="less">
+    @import "../../assets/css/variables.less";
+
+    :global .default-swiper {
+        flex: 2 !important;
+        .swiper-button-prev,
+        .swiper-button-next {
+            transform-origin: left;
+            color: #333;
+            transform: scale(0.3);
+            background-color: rgba(255, 255, 255, 0.6);
+            top: 50%;
+            padding: 10px;
+            height: 70px;
+            width: 70px;
+            border-radius: 50px;
+        }
+        .swiper-button-prev {
+            left: 6%;
+        }
+        .swiper-button-next {
+            right: 6%;
+            transform-origin: right;
+        }
+
+        swiper-container {
+            width: 100%;
+            swiper-slide {
+                width: 100% !important;
+            }
+        }
+    }
+
+    .image-container {
+        max-width: 100%;
+        width: 100%;
+        height: 100%;
+
+        overflow: visible;
+        max-width: @body-maxwidth;
+        display: flex;
+        align-items: flex-end;
+        :global &.imageHoverEffect:hover img {
+            transform: scale(1.05);
+            transform-origin: center;
+        }
+        :global & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+        :global &.forceFullHeight img {
+            width: unset;
+        }
+        @media @mobile {
+            :global & > img {
+                height: 90% !important;
+            }
+        }
+    }
+</style>