splash and page transitions completed
This commit is contained in:
@@ -913,10 +913,35 @@ select {
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
@@ -1739,10 +1764,6 @@ html {
|
||||
margin-right: calc(2rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(2rem * (1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
.lg\:px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.lg\:px-8 {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
@@ -2005,19 +2026,57 @@ body.login {
|
||||
translate: 0;
|
||||
}
|
||||
|
||||
#content-container {
|
||||
transition: opacity 0.3s ease-in-out; /* Adjust the duration and timing function as needed */
|
||||
#header-nav.out-of-view {
|
||||
opacity: 0;
|
||||
translate: 0 -100%;
|
||||
transition: opacity 2000ms ease-in-out;
|
||||
transition: translate 1000ms ease-in-out;
|
||||
}
|
||||
|
||||
.active #content-container {
|
||||
opacity: 0; /* Initial opacity when collapsing */
|
||||
transition: opacity 0.3s ease-in-out; /* Adjust the duration and timing function as needed */
|
||||
#header-nav.in-view {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
|
||||
.active #content-container.visible {
|
||||
opacity: 1; /* Opacity when expanding */
|
||||
#content-container.page-transition {
|
||||
opacity: 0;
|
||||
transform: perspective(800px) rotateY(-90deg) scale(0.9);
|
||||
transform-origin: left center;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-position 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#content-container:not(.page-transition) {
|
||||
opacity: 1;
|
||||
transform: perspective(800px) rotateY(0deg) scale(1);
|
||||
transform-origin: left center;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0);
|
||||
background-position: 100% 0;
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-position 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#content-container.page-transition {
|
||||
opacity: 0;
|
||||
transform: perspective(800px) rotateY(-5deg) scale(1);
|
||||
transform-origin: left center;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: 100% 0;
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-position 0.3s ease-in-out;
|
||||
}
|
||||
#content-container:not(.page-transition) {
|
||||
opacity: 1;
|
||||
transform: perspective(800px) rotateY(0deg) scale(1);
|
||||
transform-origin: left center;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0);
|
||||
background-position: 0 0;
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-position 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
#footer-nav.out-of-view {
|
||||
opacity: 0;
|
||||
translate: 0 100%;
|
||||
|
@@ -14,23 +14,15 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ });
|
||||
class CollapsePanel {
|
||||
constructor() {
|
||||
this.toggles = document.querySelectorAll('.accordion-toggle');
|
||||
this.init();
|
||||
}
|
||||
init() {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
this.addToggleCollapseListener();
|
||||
this.addToggleCollapseListener('.accordion-toggle');
|
||||
});
|
||||
}
|
||||
addToggleCollapseListener() {
|
||||
this.toggles.forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
toggle.parentNode.parentNode.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
addNewToggleCollapseListener() {
|
||||
this.toggles = document.querySelectorAll('#content-container .accordion-toggle');
|
||||
addToggleCollapseListener(selector) {
|
||||
this.toggles = document.querySelectorAll(selector);
|
||||
this.toggles.forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
toggle.parentNode.parentNode.classList.toggle('active');
|
||||
@@ -57,20 +49,26 @@ class Nav {
|
||||
this.toggleMenuBtn = document.getElementById('toggle-nav');
|
||||
this.toggleSlideOutMenu = document.getElementById('slide-out-menu');
|
||||
this.accordions = document.querySelectorAll('#slide-out-menu .accordion');
|
||||
this.toggleCollapse();
|
||||
this.events();
|
||||
this.init();
|
||||
}
|
||||
events() {
|
||||
init() {
|
||||
// Open and Close the Nav Menu
|
||||
this.toggleMenuBtn.addEventListener('click', () => this.toggleNavMenu());
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Check if fullscreen is supported
|
||||
if (document.documentElement.requestFullscreen) {
|
||||
// Request fullscreen
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
this.toggleMenuBtn.addEventListener('click', () => this.toggleNavMenu());
|
||||
});
|
||||
}
|
||||
toggleNavMenu() {
|
||||
this.toggleMenuBtn.classList.toggle('active');
|
||||
this.toggleSlideOutMenu.classList.toggle('open');
|
||||
document.body.classList.toggle('noScroll');
|
||||
this.toggleCollapse();
|
||||
this.collapseAllAccordions();
|
||||
}
|
||||
toggleCollapse() {
|
||||
collapseAllAccordions() {
|
||||
setTimeout(() => {
|
||||
this.accordions.forEach(accordion => {
|
||||
accordion.classList.remove('active');
|
||||
@@ -93,7 +91,8 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
||||
/* harmony export */ });
|
||||
/* harmony import */ var _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CollapsePanel */ "./src/modules/CollapsePanel.js");
|
||||
// Import the CollapsePanel class
|
||||
/* harmony import */ var _NavControl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./NavControl */ "./src/modules/NavControl.js");
|
||||
|
||||
|
||||
class PageTransitions {
|
||||
constructor() {
|
||||
@@ -101,38 +100,52 @@ class PageTransitions {
|
||||
}
|
||||
init() {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
this.addLinkClickListener();
|
||||
this.addLinkClickListener('a');
|
||||
});
|
||||
}
|
||||
addLinkClickListener() {
|
||||
this.links = document.querySelectorAll('a');
|
||||
addLinkClickListener(selector) {
|
||||
this.links = document.querySelectorAll(selector);
|
||||
this.links.forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
this.navControl = new _NavControl__WEBPACK_IMPORTED_MODULE_1__["default"]();
|
||||
if (this.navControl.toggleMenuBtn.classList.contains('active')) {
|
||||
this.navControl.toggleNavMenu();
|
||||
}
|
||||
if (this.isExternalLink(link)) {
|
||||
link.setAttribute('target', '_blank');
|
||||
window.open(link, '_blank');
|
||||
}
|
||||
if (!this.isExternalLink(link)) {
|
||||
this.animatePageTransition(() => {
|
||||
this.loadContent(link.getAttribute('href'), 'content-container');
|
||||
});
|
||||
}
|
||||
this.loadContent(link.getAttribute('href'), 'content-container');
|
||||
});
|
||||
});
|
||||
}
|
||||
addNewLinkClickListener() {
|
||||
this.newlinks = document.querySelectorAll('#content-container a');
|
||||
console.log(this.newlinks);
|
||||
this.newlinks.forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
if (this.isExternalLink(link)) {
|
||||
link.setAttribute('target', '_blank');
|
||||
}
|
||||
this.loadContent(link.getAttribute('href'), 'content-container');
|
||||
});
|
||||
});
|
||||
animatePageTransition(callback) {
|
||||
const contentContainer = document.getElementById('content-container');
|
||||
|
||||
// Add the transition class
|
||||
this.addTransitionClass(contentContainer);
|
||||
|
||||
// Wait for the transition to complete
|
||||
callback(); // Call the callback function (loading content) after the transition
|
||||
}
|
||||
addTransitionClass(element) {
|
||||
element.classList.add('page-transition');
|
||||
}
|
||||
removeTransitionClass(element) {
|
||||
element.classList.remove('page-transition');
|
||||
}
|
||||
loadContent(targetUrl, elementId) {
|
||||
const contentContainer = document.getElementById('content-container');
|
||||
fetch(targetUrl).then(response => response.text()).then(data => {
|
||||
this.updateContent(data, elementId);
|
||||
history.pushState(null, null, targetUrl);
|
||||
// Trigger removal of transition class after fetching data
|
||||
this.removeTransitionClass(contentContainer);
|
||||
}).catch(error => console.error('Error fetching content:', error));
|
||||
}
|
||||
updateContent(data, elementId) {
|
||||
@@ -142,13 +155,26 @@ class PageTransitions {
|
||||
if (targetElement) {
|
||||
const newContent = targetElement.innerHTML;
|
||||
|
||||
// If you want to replace the content instead of appending:
|
||||
// Update the content container
|
||||
contentContainer.innerHTML = newContent;
|
||||
|
||||
// Create an instance of CollapsePanel and call toggleCollapse
|
||||
// Update the page title
|
||||
const newTitle = parsedData.querySelector('title');
|
||||
if (newTitle) {
|
||||
document.title = newTitle.textContent;
|
||||
}
|
||||
|
||||
// Other dynamic updates can go here, for example:
|
||||
// const newMetaDescription = parsedData.querySelector('meta[name="description"]');
|
||||
// if (newMetaDescription) {
|
||||
// const currentMetaDescription = document.querySelector('meta[name="description"]');
|
||||
// currentMetaDescription.setAttribute('content', newMetaDescription.getAttribute('content'));
|
||||
// }
|
||||
|
||||
// Initialize or update dynamic components
|
||||
this.collapsePanel = new _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__["default"]();
|
||||
this.collapsePanel.addNewToggleCollapseListener();
|
||||
this.addNewLinkClickListener();
|
||||
this.collapsePanel.addToggleCollapseListener('#content-container .accordion-toggle');
|
||||
this.addLinkClickListener('#content-container a');
|
||||
} else {
|
||||
console.error(`Element with ID '${elementId}' not found in the fetched data`);
|
||||
}
|
||||
@@ -177,19 +203,29 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ });
|
||||
class SplashScreen {
|
||||
constructor() {
|
||||
this.enterBtn = document.getElementById('app-enter');
|
||||
this.splashScreen = document.getElementById('splash-screen');
|
||||
this.enterButton = document.getElementById('app-enter');
|
||||
this.headerNav = document.getElementById('header-nav');
|
||||
this.footerNav = document.getElementById('footer-nav');
|
||||
this.events();
|
||||
this.init();
|
||||
}
|
||||
events() {
|
||||
// Open and Close the Nav Menu
|
||||
if (this.enterBtn) {
|
||||
this.enterBtn.addEventListener('click', () => this.enterApp());
|
||||
init() {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
this.checkFirstVisit();
|
||||
});
|
||||
}
|
||||
checkFirstVisit() {
|
||||
if (!sessionStorage.getItem('visited')) {
|
||||
this.showSplashScreen();
|
||||
this.addEventListeners();
|
||||
}
|
||||
}
|
||||
enterApp() {
|
||||
showSplashScreen() {
|
||||
this.splashScreen.classList.remove('hidden');
|
||||
this.headerNav.classList.add('out-of-view');
|
||||
this.footerNav.classList.add('out-of-view');
|
||||
}
|
||||
hideSplashScreen() {
|
||||
this.splashScreen.classList.add('close');
|
||||
setTimeout(() => {
|
||||
this.headerNav.classList.add('in-view');
|
||||
@@ -203,6 +239,12 @@ class SplashScreen {
|
||||
this.footerNav.classList.remove('in-view');
|
||||
}, 2000);
|
||||
}
|
||||
addEventListeners() {
|
||||
this.enterButton.addEventListener('click', () => {
|
||||
this.hideSplashScreen();
|
||||
sessionStorage.setItem('visited', true);
|
||||
});
|
||||
}
|
||||
}
|
||||
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SplashScreen);
|
||||
|
||||
|
File diff suppressed because one or more lines are too long
@@ -3,7 +3,7 @@
|
||||
|
||||
<head>
|
||||
<meta charset="<?php bloginfo('charset'); ?>" />
|
||||
<meta content="width=device-width, initial-scale=1, viewport-fit=cover, shrink-to-fit=no" name="viewport" />
|
||||
<meta content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport" />
|
||||
<link href="<?php echo get_template_directory_uri(); ?>/assets/images/logos/nan_bear_head.svg" rel="icon" type="image/png" />
|
||||
<?php
|
||||
// Start or resume the session
|
||||
|
@@ -124,6 +124,17 @@
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Splash Screen Content-->
|
||||
<section id="splash-screen" class="hidden absolute w-full bottom-0 flex flex-col h-screen items-center justify-center">
|
||||
|
||||
<div class="space-y-8 px-4 text-white flex flex-col justify-center items-center">
|
||||
<img class="w-56" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/logo-white.png" alt="Splash Logo">
|
||||
<h1 class="uppercase text-center font-bold text-xl">A student handbook for post secondary transitions</h1>
|
||||
<button id="app-enter" class="bg-blue-800 shadow-sm shadow-gray-50 px-12 py-4 rounded-md"><i class="bi bi-box-arrow-in-right pr-4"></i>Enter</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<?php
|
||||
/**
|
||||
// Check if a flag is set in the session to indicate that the code has already run
|
||||
|
Reference in New Issue
Block a user