splash and page transitions completed

assets/css/styles.css

@@ -913,10 +913,35 @@ select {
   --tw-backdrop-sepia: ;
 }
 
-.visible {
+.container {
-  visibility: visible;
+  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 {
+#header-nav.out-of-view {
-  transition: opacity 0.3s ease-in-out; /* Adjust the duration and timing function as needed */
+  opacity: 0;
+  translate: 0 -100%;
+  transition: opacity 2000ms ease-in-out;
+  transition: translate 1000ms ease-in-out;
 }
 
-.active #content-container {
+#header-nav.in-view {
-  opacity: 0; /* Initial opacity when collapsing */
+  opacity: 1;
-  transition: opacity 0.3s ease-in-out; /* Adjust the duration and timing function as needed */
+  translate: 0 0;
 }
 
-.active #content-container.visible {
+#content-container.page-transition {
-  opacity: 1; /* Opacity when expanding */
+  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%;

assets/js/index.js

@@ -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() {
+  addToggleCollapseListener(selector) {
-    this.toggles.forEach(toggle => {
+    this.toggles = document.querySelectorAll(selector);
-      toggle.addEventListener('click', () => {
-        toggle.parentNode.parentNode.classList.toggle('active');
-      });
-    });
-  }
-  addNewToggleCollapseListener() {
-    this.toggles = document.querySelectorAll('#content-container .accordion-toggle');
     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.init();
-    this.events();
   }
-  events() {
+  init() {
     // Open and Close the Nav Menu
+    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() {
+  addLinkClickListener(selector) {
-    this.links = document.querySelectorAll('a');
+    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');
           });
+        }
+      });
     });
   }
-  addNewLinkClickListener() {
+  animatePageTransition(callback) {
-    this.newlinks = document.querySelectorAll('#content-container a');
+    const contentContainer = document.getElementById('content-container');
-    console.log(this.newlinks);
+
-    this.newlinks.forEach(link => {
+    // Add the transition class
-      link.addEventListener('click', e => {
+    this.addTransitionClass(contentContainer);
-        e.preventDefault();
+
-        if (this.isExternalLink(link)) {
+    // Wait for the transition to complete
-          link.setAttribute('target', '_blank');
+    callback(); // Call the callback function (loading content) after the transition
   }
-        this.loadContent(link.getAttribute('href'), 'content-container');
+  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.collapsePanel.addToggleCollapseListener('#content-container .accordion-toggle');
-      this.addNewLinkClickListener();
+      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() {
+  init() {
-    // Open and Close the Nav Menu
+    document.addEventListener('DOMContentLoaded', () => {
-    if (this.enterBtn) {
+      this.checkFirstVisit();
-      this.enterBtn.addEventListener('click', () => this.enterApp());
+    });
+  }
+  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);
 

header.php

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

templates/partials/navigation.php

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