Merge pull request #250 from digitoimistodude/DEV-262

working anchor links for both outside and inside links, link DEV-262

Author: lukanja

.github/workflows/html.yml

@@ -5,7 +5,7 @@ on: push
 jobs:
   build:
     name: Test HTML and accessibility with NU HTML Checker
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
 
     # Test on macOS:
     # brew install openjdk

.github/workflows/js.yml

@@ -5,7 +5,7 @@ on: [push, pull_request]
 jobs:
   build:
     name: Test JS
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
 
     steps:
     - name: Checkout the repository

.github/workflows/php.yml

@@ -11,7 +11,7 @@ env:
 jobs:
   build:
     name: Test php
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
 
     steps:
     - name: Checkout the repository

.github/workflows/php8.3.yml

@@ -11,7 +11,7 @@ env:
 jobs:
   build:
     name: Test for PHP 8.3 support
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
 
     steps:
     - name: Checkout the repository

.github/workflows/styles.yml

@@ -5,7 +5,7 @@ on: [push, pull_request]
 jobs:
   build:
     name: Test styles
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
 
     steps:
     - name: Checkout the repository

js/dev/front-end.js

@@ -1,49 +1,68 @@
 /* eslint-disable no-param-reassign, no-undef */
+
 import MoveTo from 'moveto';
 
 const initAnchors = () => {
   const easeFunctions = {
     easeInQuad(t, b, c, d) { t /= d; return c * t * t + b; },
-    easeOutQuad(t, b, c, d) {
-      t /= d; return -c * t * (t - 2) + b;
-    },
+    easeOutQuad(t, b, c, d) { t /= d; return -c * t * (t - 2) + b; },
   };
 
   const moveTo = new MoveTo(
     { ease: 'easeInQuad' },
     easeFunctions,
   );
 
-  // Get all links that have only the hash as href and is not back to top link
-  const triggers = document.querySelectorAll('a[href*="#"]:not([href="#"]):not(#top)');
+  let triggers = document.querySelectorAll('a[href*="#"]:not([href="#"]):not(#top)');
+
+  triggers = Array.from(triggers);
 
-  // eslint-disable-next-line no-plusplus
-  for (let i = 0; i < triggers.length; i++) {
-    // Move to target smoothly
-    moveTo.registerTrigger(triggers[i]);
-    const target = document.getElementById(triggers[i].hash.substring(1));
+  triggers.forEach((trigger) => {
+    moveTo.registerTrigger(trigger);
+    const targetId = trigger.hash.substring(1);
+    const target = document.getElementById(targetId);
 
-    // If the trigger is nav-link, close nav
-    if (triggers[i].classList.contains('nav-link')) {
-      document.body.classList.remove('js-nav-active');
-    }
+    trigger.addEventListener('click', (event) => {
+      event.preventDefault(); // Prevent default behavior of anchor links
 
-    triggers[i].addEventListener('click', () => {
       // If the trigger is nav-link, close nav
-      if (triggers[i].classList.contains('nav-link')) {
+      if (trigger.classList.contains('nav-link') || trigger.classList.contains('dropdown-item')) {
         document.body.classList.remove('js-nav-active');
+
+        // Additional navigation cleanup
+        const html = document.documentElement;
+        const container = document.getElementById('main-navigation-wrapper');
+        const menu = container?.querySelector('ul');
+        const button = document.getElementById('nav-toggle');
+
+        if (html) html.classList.remove('disable-scroll');
+        if (container) container.classList.remove('is-active');
+        if (button) {
+          button.classList.remove('is-active');
+          button.setAttribute('aria-expanded', 'false');
+        }
+        if (menu) menu.setAttribute('aria-expanded', 'false');
       }
 
-      // Focus to target
+      // Check if the target element exists on the current page
       if (target) {
-        // Needs delay for smooth moveTo scroll
+        // Scroll to the target element
+        moveTo.move(target);
+
+        // Update URL history
+        window.history.pushState('', '', trigger.hash);
+
+        // Focus on the target element after a delay
         setTimeout(() => {
           target.setAttribute('tabindex', '-1');
           target.focus();
         }, 500);
+      } else {
+        // Navigate to the target page
+        window.location.href = trigger.href;
       }
     });
-  }
+  });
 };
 
 export default initAnchors;