296 lines
9.9 KiB
Vue
296 lines
9.9 KiB
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">
|
|
<template v-if="revision.page.main"> <!-- Show Main menu if the current page is the front page (main page) -->
|
|
<MainMenu v-if="showMainMenu" :active="showMainMenu" :pageSettings="page.props.pageSettings" :menuLinks="menuLinks" />
|
|
</template>
|
|
<template v-else> <!-- Show the external main menu, if the current page is NOT the front page (main page) -->
|
|
<ExternalMainMenu v-if="showMainMenu" :active="showMainMenu" :pageSettings="page.props.pageSettings" class="z-40" />
|
|
</template>
|
|
<SmallHeader />
|
|
|
|
<!-- Hovedmeny knapp -->
|
|
<div class="fixed top-0 right-0 p-4 z-50">
|
|
<button ref="menuButton" @click="clickMenuButton" @mouseover="handleMenuButtonOver" @mouseout="handleMenuButtonOut" class="p-2 text-white rounded-full shadow-md shadow-black" :class="{'bg-sky-600': showMainMenu, 'bg-green-700': !showMainMenu }">
|
|
<svg v-if="showMainMenu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 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> |