polarpress-pagebuilder/resources/js/pages/Backend/PageBuilder/Preview.vue

<script setup>
    import { Head, Link, router, usePage} from '@inertiajs/vue3';
    import { onMounted, ref } from 'vue';
    import { gsap } from 'gsap';
    import { ScrollTrigger } from 'gsap/ScrollTrigger';
    import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
    import { on } from '@/Components/EventBus.vue';
    
    import MainMenu from '@/Components/FrontPage/MenyComponent.vue';
    import ExternalMainMenu from '@/Components/FrontPage/ExternalMenuComponent.vue';
    import SmallHeader from '@/Components/FrontPage/SmallHeader.vue';

    import HeroLogoTextRendered from '@/Components/Blocks/Heroes/HeroLogoTextRendered.vue';

    import FAQListRendered from '@/Components/Blocks/FAQ/FAQListRendered.vue';
    import FAQCollapseRendered from '@/Components/Blocks/FAQ/FAQCollapseRendered.vue';
    import FAQCondensedRendered from '@/Components/Blocks/FAQ/FAQCondensedRendered.vue';

    import TwoColumnTextRendered from '@/Components/Blocks/Text/TwoColumnTextRendered.vue';

    import FrontPageMenuHeaderRendered from '@/Components/Blocks/Statics/FrontPageMenuHeaderRendered.vue';
    import FrontPageSponsorsRendered from '@/Components/Blocks/Statics/FrontPageSponsorsRendered.vue';
    import FrontPageMembershipInfoRendered from '@/Components/Blocks/Statics/FrontPageMembershipInfoRendered.vue';
    import FrontPageNewsListRendered from '@/Components/Blocks/Statics/FrontPageNewsListRendered.vue';
    import FrontPageEventsListRendered from '@/Components/Blocks/Statics/FrontPageEventsListRendered.vue';
    import PageFooterRendered from '@/Components/Blocks/Statics/PageFooterRendered.vue';

    const {
        revision,
        images,
        blockData,
        menuLinks
    } = defineProps({
        revision:   { type: Object, required: true },
        images:     { type: Array, default: () => ([]) },
        blockData:  { type: Object, default: () => ({}) },
        menuLinks:  { type: Object, default: () => ({}) }
    });

    onMounted(() => {
        // Check if the url has the parameter key scrollTo
        if (urlParam('scrollTo')) {
            // Enable scrolling on the body and html elements
            document.body.style.overflow = 'auto';
            document.documentElement.style.overflow = 'auto';
            // Get the value of the parameter
            const scrollTo = urlParam('scrollTo');

            // Scroll to the section with the id that matches the value of the parameter
            gsap.to(window, {
                duration: 1,
                scrollTo: {
                    y: `#${scrollTo}`,
                    autoKill: false,
                },
            });
        }
    });

    gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);

    const useEventBus = ref(false);
    const showMainMenu = ref(false);
    const pageRef = ref();
    const page = usePage();
    const smallHeader = ref(null);

    const showErrorModal = ref(false);
    const errorStatus = ref('');

    const closeErrorModal = () => {
        showErrorModal.value = false;
    };

    // Lytt etter errorModal event fra Laravel
    window.addEventListener('errorModal', (event) => {
        showErrorModal.value = true;
        errorStatus.value = event.detail.status;
    });

    /** Menu button animations */
    const menuButton = ref(null);

    const handleMenuButtonOver = () => {
        gsap.set(menuButton.value, {
            borderRadius: '0.375rem',
        });
        gsap.to(menuButton.value, {
            duration: 0.2,
            scale: 1.1,
        });
    };

    const handleMenuButtonOut = () => {
        gsap.set(menuButton.value, {
            borderRadius: '9999px',
        });
        gsap.to(menuButton.value, {
            duration: 0.2,
            scale: 1,
        });
    };

    const clickMenuButton = () => {
        showMainMenu.value = !showMainMenu.value;

        if (showMainMenu.value) {
            document.body.style.overflow = 'hidden';
            document.documentElement.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'auto';
            document.documentElement.style.overflow = 'auto';
        }
    };

    /** Get a node value from json */

    const extractMetaValue = (node, key) => {
        let meta = JSON.parse(node.fs_meta);

        return meta[key];
    };

    /**
     * formatDate
     * 
     * Formats a date string to a Norwegian date format.
     * 
     * @param {
     * } dateString 
     */

    const formatDate = (dateString) => {
        const date = new Date(dateString);
        const day = ('0' + date.getDate()).slice(-2);
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const year = date.getFullYear();

        return `${day}/${month}/${year}`;
    };

    /**
     * dateString
     * 
     * Formats a date string to a Norwegian time format.
     * @param {*} dateString 
     */

    const formatTime = (dateString) => {
        const date = new Date(dateString);
        return date.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
    };

    /** Get url parameters */

    const urlParam = (paramKey) => {
        const url = new URL(window.location.href);
        return url.searchParams.get(paramKey);
    };

    // Denne funksjonen kalles fra lenker på siden for å
    // Gi siden en myk fade ut effekt før den nye siden lastes
    const loadLink = (url) => {
        gsap.to(pageRef.value, {
            duration: 1,
            opacity: 0,
            ease: 'power2.inOut',
            onComplete: () => {
                router.visit(url);
            },
        });
    };

    const components = {
        HeroLogoTextRendered,

        FAQListRendered,
        FAQCollapseRendered,
        FAQCondensedRendered,

        TwoColumnTextRendered,

        FrontPageMenuHeaderRendered,
        FrontPageSponsorsRendered,
        FrontPageMembershipInfoRendered,
        FrontPageNewsListRendered,
        FrontPageEventsListRendered,
        PageFooterRendered
    };

    /** Eventbus listeners */

    on('linkClicked', (payload) => {
        if (payload === 'om' && useEventBus.value) {
            clickMenuButton();
            gsap.to(window, {
                duration: 1,
                scrollTo: {
                    y: '#content',
                    autoKill: false,
                },
            });
        } else if (payload === 'arrangementer' && useEventBus.value) {
            clickMenuButton();
            gsap.to(window, {
                duration: 1,
                scrollTo: {
                    y: '#events',
                    autoKill: false,
                },
            });
        } else if (payload === 'nyheter' && useEventBus.value) {
            clickMenuButton();
            gsap.to(window, {
                duration: 1,
                scrollTo: {
                    y: '#intro',
                    autoKill: false,
                },
            });
        } else if (payload === 'sponsor' && useEventBus.value) {
            clickMenuButton();
            gsap.to(window, {
                duration: 1,
                scrollTo: {
                    y: '#sponsors-intro',
                    autoKill: false,
                },
            });
        } else if (payload === 'medlem' && useEventBus.value) {
            clickMenuButton();
            gsap.to(window, {
                duration: 1,
                scrollTo: {
                    y: '#membership',
                    autoKill: false,
                },
            });
        } else if (payload === 'medlemside' && useEventBus.value) {
            clickMenuButton();
            loadLink(route('page-builder.index'));
        } else if (payload === 'loggpaa' && useEventBus.value) {
            clickMenuButton();
            loadLink(route('login'));
        } else if (payload === 'registrer' && useEventBus.value) {
            clickMenuButton();
            loadLink(route('register'));
        }
    });

    on('eventBusActive', (payload) => {
        useEventBus.value = payload;
    });

</script>

<template>
    <Head>
        <title>{{ revision.title }}</title>
    </Head>

    <div ref="pageRef" class="min-h-screen w-full bg-black">
        <!-- Komponentrendring -->
        <component
            v-for="block in revision.content"
            :key="block.uuid"
            :images="images"
            :is="components[block.renderComponentName]"
            :block="block"
            :blockData="blockData"
            :frontpage="revision.page.main"
        />
    </div>

</template>