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

<script lang="ts">
    import { mediaLibrary, pages, scrollToRowNr, team } from "../../store"
    import Homepage from "./Homepage.svelte"
    import Pagebuilder from "./Pagebuilder.svelte"
    import { apiBaseURL } from "../../../config"
    import { onMount } from "svelte"

    export let path: string
    export let homepage = false
    export let image: FileField
    let page: Page
    let personPage = false
    function initPage() {
        if ($pages[path]) {
            page = $pages[path]
        } else if (
            Object.values($team)
                .map((p) => p.path == path)
                .includes(true)
        ) {
            page = Object.values($team).find((p) => p.path == path)
            personPage = true
        }
    }

    onMount(() => {
        if ($scrollToRowNr !== -1) {
            if (!$scrollToRowNr) {
                $scrollToRowNr = -1
                return
            }
            let element = document.getElementById("row-" + $scrollToRowNr)
            if (!element) {
                $scrollToRowNr = -1
                return
            }

            element?.scrollIntoView({
                behavior: "smooth",
            })
            $scrollToRowNr = -1
        }
    })

    $: {
        if (Object.keys($pages).length || Object.keys($team).length) {
            initPage()
        }
    }
</script>

<svelte:head>
    {#key page}
        <!-- Title -->
        {#if page?.pageTitle}
            <title>{page.pageTitle}</title>
        {:else if page?.meta?.title}
            <title>{page.meta.title}</title>
        {/if}

        <!-- Description -->
        {#if page?.meta?.description}
            <meta name="description" content="{page.meta.description}" />
        {/if}

        <!-- Keywords -->
        {#if page?.meta?.keywords}
            <meta name="keywords" content="{page.meta.keywords}" />
        {/if}

        {#if page?.active === false}
            <meta name="robots" content="noindex" />
        {/if}
    {/key}
</svelte:head>
<div class="rows" class:HP="{path == '/'}">
    {#if page}
        {#if path == "/"}<Homepage />{/if}
        {#each page.rows as row, i}
            <div
                class="row"
                id="row-{i}"
                style="{path == '/' && i == page.rows.length - 1
                    ? 'padding-bottom: 300px; margin-bottom: -40px;'
                    : ''} {row.noBottomMargin ? 'margin-bottom: 0px; padding-bottom: 0px;' : ''} {row.noTopMargin
                    ? 'margin-top: 0px; padding-top: 0px;'
                    : ''}"
            >
                {#if row.backgroundImage && $mediaLibrary[row.backgroundImage]}
                    <div class="background-image">
                        <img
                            src="{`${apiBaseURL}medialib/${row?.backgroundImage}/${
                                $mediaLibrary?.[row?.backgroundImage]?.file?.src
                            }`}"
                            alt="img"
                        />
                    </div>
                {/if}
                <div class="content" class:bright="{row.backgroundImage}">
                    <Pagebuilder
                        personPage="{personPage}"
                        isHP="{path == '/'}"
                        i="{i}"
                        row="{row}"
                        page="{page}"
                        pageId="{page.id}"
                        bright="{!!row.backgroundImage}"
                    />
                </div>
            </div>
        {/each}
    {/if}
</div>

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

    .rows {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        position: relative;
        max-width: 100vw;
        overflow: hidden;
        gap: 10px;

        & > .row {
            margin: 15px 0px;
            padding: 15px 10px;
            @media @tablet {
                margin: 40px 0px;
                padding: 30px 10px;
            }
            width: 100%;
            position: relative;
            display: flex;
            justify-content: center;

            .background-image {
                position: absolute;
                width: 100%;
                z-index: 1;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            & > .content {
                width: 100%;
                max-width: 1400px;
                margin: 0px 2.5vw;
                position: relative;
                &.bright {
                    color: @font-color-secondary !important;
                }
                z-index: 2;
            }
        }
    }
</style>