splash and page transitions completed

This commit is contained in:
prospect
2024-01-19 05:02:27 -05:00
parent a8edae6d2c
commit 6656ee528b
5 changed files with 172 additions and 60 deletions

View File

@@ -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%;

View File

@@ -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

View File

@@ -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

View File

@@ -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