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

<script lang="ts">
    import { navigate } from "svelte-routing/src/history"
    import Boxlist from "../widgets/boxlist.svelte"
    import Events from "../widgets/events.svelte"
    import ExtendableBox from "../widgets/extendableBox.svelte"
    import IconBlock from "../widgets/iconBlock.svelte"
    import Image from "../widgets/image.svelte"
    import InfoBoard from "../widgets/infoBoard.svelte"
    import NestedCard from "../widgets/nestedCard.svelte"
    import PageLinkBlocks from "../widgets/pageLinkBlocks.svelte"
    import Persons from "../widgets/persons.svelte"
    import Publications from "../widgets/publications.svelte"
    import Text from "../widgets/text.svelte"
    import TextLink from "../widgets/textLink.svelte"
    import TopDown from "../widgets/topDown.svelte"
    import WorldCard from "../widgets/Worldcard/worldcard.svelte"
    import { pages, rerender } from "../../store"
    import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
    import IconCycleBox from "../widgets/iconCycleBox.svelte"

    export let row: Row
    export let pageId: string
    export let bright: boolean
    export let isHP: boolean

    function checkNestedPath() {
        const pathSegments = location.pathname.split("/").filter((segment) => segment.length)

        if (pathSegments.length > 1) {
            pathSegments.pop() // remove the last segment
            return "/" + pathSegments.join("/")
        }

        return ""
    }
    $: console.log($pages)
    let nestedPath = checkNestedPath()
</script>

{#if Object.keys(row).length}
    {#if row.topTitle}
        <h3 class="{row.topTitleUpperCase ? 'hph3' : 'nmh3'}" class:red="{row.topTitleRed}">
            {row.topTitle}
        </h3>
    {/if}
    {#if nestedPath}
        <div style="display: flex; width: 100%; justify-content: space-between;">
            <h3
                style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
                on:keydown
                on:click="{() => {
                    $rerender = $rerender + 1
                    navigate(nestedPath)
                }}"
            >
                <img src="/media/arrow-l.svg" alt="arrow" /> Zurück zur Übersicht
            </h3>
            <h3
                style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
                on:keydown
                on:click="{() => {
                    navigate(row?.nextPage || nestedPath)
                }}"
            >
                zum nächsten Profil <img src="/media/arrowr.svg" alt="arrow" />
            </h3>
        </div>
    {/if}
    {#if row.pageTitle}
        <h1>{row.pageTitle}</h1>
    {/if}
    {#if row.title}
        <h2 class="">{row.title}</h2>
    {/if}
    {#if row.subTitle}
        <h3 class="subheading">{row.subTitle}</h3>
    {/if}
    {#if row?.columns?.length}
        <div
            class="row"
            class:twoToThree="{row.twoToThree}"
            class:normalWrap="{row.flexWrapNormal}"
            class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}"
        >
            {#each row?.columns as col}
                <div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
                    {#if col?.contentType == "text"}
                        <Text text="{col?.text}" />
                    {:else if col?.contentType == "textLink"}
                        <TextLink
                            description="{col?.textLink?.text}"
                            path="{Object.values($pages)?.find((o) => o.id == col.textLink.link)?.path || '/'}"
                            bright="{bright}"
                        />
                    {:else if col.contentType == "image"}
                        <Image image="{col?.image}" col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "iconBlocks"}
                        <IconBlock pageId="{pageId}" col="{col}" />
                    {:else if col.contentType == "pageLinkBlocks"}
                        <PageLinkBlocks col="{col}" />
                    {:else if col.contentType == "networkEvents"}
                        <Events col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "publications"}
                        <Publications col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "topDown"}
                        <TopDown col="{col}" />
                    {:else if col.contentType == "infoBoard"}
                        <InfoBoard col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "nestedCard"}
                        <NestedCard col="{col}" />
                    {:else if col.contentType == "boxlist"}
                        <Boxlist col="{col}" />
                    {:else if col.contentType == "extendableBoxes"}
                        <ExtendableBox col="{col}" />
                    {:else if col.contentType == "personPreview"}
                        <Persons col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "iconCycleCircle"}
                        <IconCycleCircle col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "iconCycleSquare"}
                        <IconCycleBox col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "worldCard"}
                        <WorldCard col="{col}" pageId="{pageId}" />
                    {/if}
                </div>
            {/each}
        </div>{/if}
{/if}

<style lang="less">
    @import "../../assets/css/main.less";
    .red {
        color: #fa00ff !important;
    }
    h3 {
        font-weight: 500;
        margin-bottom: 15px;
        @media @tablet {
            margin-bottom: 0px;
        }
    }
    h2 {
        font-weight: 500;
        font-size: 1.7rem !important;
    }
    h1 {
        font-weight: 500;
        font-size: 2rem;
    }
    @media @tablet {
        h3 {
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
            img {
                width: 40px;
                margin-right: 10px;
            }
            &.subheading {
                font-size: 1.8rem;
            }
        }
        h2 {
            font-size: 2rem !important;
            font-weight: 500;
        }
        h1 {
            font-size: 3.5rem;
            font-weight: 500;
        }
    }
    @media @desktop {
        h2 {
            font-size: 2.3rem !important;
        }
        h1 {
            font-size: 5rem;
        }
    }

    .row {
        padding-top: 40px;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 20px;

        &.dominant {
            @media (max-width: 1024px) {
                flex-direction: row-reverse;
            }
        }
        @media (max-width: 640px) {
            flex-direction: column-reverse;
            &.normalWrap {
                flex-direction: column;
            }
        }
        & > .col {
            max-width: 100%;
            &.dominant {
                @media (max-width: 1024px) {
                    min-width: 80% !important;
                }
                flex: 5 !important;
            }

            min-width: 40% !important;

            @media @desktop {
                min-width: 30% !important;
            }

            flex: 1;
            min-width: 0;
        }
        &.twoToThree {
            & > .col:nth-child(1) {
                flex: 2 !important;
            }
            & > .col:nth-child(2) {
                flex: 3 !important;
            }
        }
    }

    .hph3 {
        text-transform: uppercase;
        font-size: 0.7rem;
    }
    .nmh3 {
        font-size: 0.9rem;
        @media @tablet {
            font-size: 1.6rem;
        }
    }
</style>