arcticsoftware/polarpress-pagebuilder
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Rendered generated pages menu links on the main page, cleaned up some code, and forced light mode for a consistent look
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled

Browse Source
This commit is contained in:
helge
2025-05-05 22:32:28 +02:00
parent 75156d4e5e
commit 6b4c4e25d2
7 changed files with 42 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/pages/Backend/PageBuilder/Preview.vue
-195
View File
@@ -5,10 +5,6 @@
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';
@@ -37,139 +33,12 @@
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,
@@ -188,70 +57,6 @@
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>