wm-fontis-tibi-2023/frontend/src/lib/components/Pagebuilder/Homepage.svelte

<script lang="ts">
    import { pages } from "../../store"
    import { register } from "swiper/element/bundle"
    import { onMount } from "svelte"
    import TextLink from "../widgets/textLink.svelte"

    let teasers = Object.values($pages)?.map((page) => ({ teaser: page.teaser, path: page.path }))

    register(false)
    let swiper

    function handleMouseOver() {
        console.log("test")
    }

    function handleMouseOut() {}

    onMount(async () => {
        if (swiper !== undefined) {
            const response = await fetch("/dist/index.css")
            const cssText = await response.text()

            const params = {
                injectStyles: [cssText],
            }

            Object.assign(swiper, params)
            swiper.initialize()

            // Add the 'active' class to the h1 of the first slide
            const firstSlideH1 = document.querySelector(".swiper-slide-active .titles h1")
            if (firstSlideH1) {
                firstSlideH1.classList.add("active")
            }
        }
    })

    function handleSlideChange() {
        document.querySelectorAll(".titles h1").forEach((h1) => {
            h1.classList.remove("active")
        })

        setTimeout(() => {
            const activeSlideUnderline = document.querySelector(".swiper-slide-active .titles h1")
            if (activeSlideUnderline) {
                activeSlideUnderline.classList.add("active")
            }
        }, 600)
    }
    let teaser = teasers[0]
</script>

{#if teaser}
    <div class="container">
        <swiper-container
            bind:this="{swiper}"
            slides-per-view="1"
            loop="{true}"
            direction="horizontal"
            effect="slide"
            navigation="{true}"
            init="{false}"
            autoplay="{{
                delay: 4000, // 5000ms = 5s
                pauseOnMouseEnter: true,
            }}"
            speed="600"
            on:focus
            on:blur
            on:slidechange="{() => handleSlideChange()}"
            on:mouseenter="{() => handleMouseOver()}"
            on:mouseleave="{() => handleMouseOut()}"
            class="relative"
        >
            {#each teasers as teaser}
                {#if teaser?.teaser?.showTeaser}
                    <swiper-slide class="relative">
                        <div class="inner-container">
                            <div class="titles">
                                <h2>{teaser?.teaser?.subTitle}</h2>
                                <h1>
                                    {teaser?.teaser?.teaserTitle}
                                    <div class="underline"></div>
                                </h1>
                            </div>
                            <div class="description">
                                <div class="placeholder"></div>
                                <TextLink description="{teaser?.teaser?.teaserDescription}" path="{teaser?.path}" />
                                <div class="placeholder"></div>
                            </div>
                        </div>
                    </swiper-slide>
                {/if}
            {/each}
        </swiper-container>
    </div>
{/if}

<style lang="less">
    @import "../../assets/css/main.less";

    .container {
        padding: 20px 0px 150px 0px;
        min-height: 100vh;
        display: flex;
        align-items: center;
        .inner-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: fit-content;

            .titles {
                font-weight: normal;
                h1 {
                    font-size: 2rem;
                    padding: 10px 0px;
                    margin: 10px 0px 20px 0px;
                    line-height: 1;
                    position: relative;
                }

                h2 {
                    font-size: 1.2rem;
                    line-height: 1;
                }
            }
            .description {
                display: flex;
                flex-direction: row;
                & > div {
                    flex: 0 0 5%;
                    min-width: 0px;
                }
                & > div:nth-child(2) {
                    flex: 0 0 90%;
                    min-width: 0px;
                }
            }
            @media @tablet {
                .titles {
                    font-weight: normal;
                    h1 {
                        font-size: 4rem;
                        padding: 20px 0px;
                        margin: 20px 0px 40px 0px;
                    }
                    h2 {
                        font-size: 1.6rem;
                    }
                }
                .description {
                    display: flex;
                    flex-direction: row;
                    & > div {
                        flex: 0 0 25%;
                        min-width: 0px;
                    }
                    & > div:nth-child(2) {
                        flex: 0 0 50%;
                        min-width: 0px;
                    }
                }
            }

            @media @desktop {
                .titles {
                    font-weight: normal;
                    h1 {
                        font-size: 5rem;
                        padding: 20px 0px;
                        margin: 20px 0px 40px 0px;
                    }
                    h2 {
                        font-size: 1.6rem;
                    }
                }

                .description {
                    display: flex;
                    flex-direction: row;
                    & > div {
                        flex: 0 0 33.33%;
                        min-width: 0px;
                    }
                }
                .titles {
                }
            }
        }
    }
</style>