progress with linking logic

assets/css/styles.css

@@ -1640,6 +1640,10 @@ select {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

assets/js/index.js

@@ -48,7 +48,7 @@ __webpack_require__.r(__webpack_exports__);
 
 class HammerGestures {
   constructor() {
-    this.history = [];
+    this.history = JSON.parse(sessionStorage.getItem('historyArray')) || [];
     this.init();
   }
   init() {
@@ -67,6 +67,10 @@ class HammerGestures {
         this.currentUrl = window.location.href;
         this.goForward(this.currentUrl);
         console.log(ev.type);
+
+        // pageTransition.animatePageTransition(() => {
+        //   pageTransition.loadContent(pageTransition.navigateArray('forward'), 'content-container')
+        // })
       });
 
       // Add a swipe event listener for swipe right
@@ -75,7 +79,7 @@ class HammerGestures {
         this.goBack(this.currentUrl);
         console.log(ev.type);
         pageTransition.animatePageTransition(() => {
-          pageTransition.loadContent(document.referrer, 'content-container');
+          pageTransition.loadContent(pageTransition.navigateArray('backward'), 'content-container');
         });
       });
     });
@@ -179,6 +183,7 @@ class PageTransitions {
     document.addEventListener('DOMContentLoaded', () => {
       this.addLinkClickListener('a');
       this.addFormSubmitListener('form');
+      this.createHistoryTracker();
     });
   }
   addLinkClickListener(selector) {
@@ -197,7 +202,8 @@ class PageTransitions {
           window.location.href = link.href; // Navigate normally
         } else if (!this.isExternalLink(link)) {
           this.animatePageTransition(() => {
-            this.loadContent(link.getAttribute('href'), 'content-container');
+            this.loadContent(link.href, 'content-container');
+            // window.location.href = link.href
           });
         } else if (this.isExternalLink(link)) {
           link.setAttribute('target', '_blank');
@@ -324,6 +330,63 @@ class PageTransitions {
     const adminUrlRegex = /^.*\/wp-admin\//;
     return adminUrlRegex.test(link.href);
   }
+  createHistoryTracker() {
+    // Check if the history array already exists in the sessionStorage
+    let historyArray = JSON.parse(sessionStorage.getItem('historyArray')) || [];
+
+    // Get the initial page's href
+    let initialHref = window.location.href;
+
+    // Function to update history array and log it
+    const updateHistory = () => {
+      // Get the current page's href
+      const currentHref = window.location.href;
+
+      // Check if the currentHref is the same as the last item in the history array
+      // and if it's different from the initialHref
+      if (currentHref !== initialHref && (historyArray.length === 0 || currentHref !== historyArray[historyArray.length])) {
+        // Remove all occurrences of the currentHref from historyArray
+        historyArray = historyArray.filter(url => url !== currentHref);
+
+        // Add the currentHref to the history array
+        historyArray.unshift(initialHref);
+        initialHref = currentHref;
+
+        // Save the updated history array to the sessionStorage
+        sessionStorage.setItem('historyArray', JSON.stringify(historyArray));
+
+        // Log the history array (you can replace this with your own logic)
+        console.log('History Array:', historyArray);
+      }
+    };
+
+    // Call the updateHistory function on initial load
+    updateHistory();
+
+    // Use MutationObserver to observe changes in the DOM
+    const observer = new MutationObserver(updateHistory);
+
+    // Specify the target node and the type of mutations to observe
+    const config = {
+      childList: true,
+      subtree: true
+    };
+
+    // Start observing the target node for configured mutations
+    observer.observe(document.body, config);
+  }
+  navigateArray(direction) {
+    // Retrieve the historyArray from storage (assuming it's stored as a JSON string)
+    const storedHistory = sessionStorage.getItem('historyArray');
+
+    // Parse the JSON string into an array or provide a default empty array if null
+    const historyArray = storedHistory ? JSON.parse(storedHistory) : [];
+    if (direction === 'forward') {
+      console.log('Forward Navigation is Null');
+    } else if (direction === 'backward') {
+      console.log('Backward Naviation is Allowed And Will Be Implemented Soon');
+    }
+  }
 }
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PageTransitions);