splash and page transitions completed

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() {
-    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);