Add comments, since compiler doesnt work anymore

OpenWebconcept · Oct 5, 2023 · 7354373 · 7354373
1 parent 25cf8be
commit 7354373
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/app.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/app.js
@@ -9,5 +9,7 @@ document.addEventListener( 'DOMContentLoaded', () => {
     nlds_dh_ac.toggleEvents();
 } );
 
-window.addEventListener( 'resize', () => nlds_dh_ac.resize() );
-window.addEventListener( 'orientationchange', () => nlds_dh_ac.resize() );
+window.addEventListener( 'resize', () => nlds_dh_ac.resizeEvents() );
+window.addEventListener( 'orientationchange', () => nlds_dh_ac.resizeEvents() );
+
+window.addEventListener( 'scroll', () => nlds_dh_ac.scrollEvents() );
diff --git a/...ntent/themes/owc-formulieren/assets/js/frontend/components/NLDS_DenHaag_AnchorCollapse.js b/...ntent/themes/owc-formulieren/assets/js/frontend/components/NLDS_DenHaag_AnchorCollapse.js
@@ -10,23 +10,45 @@ export default class NLDS_DenHaag_AnchorCollapse {
             focus: 'denhaag-anchor-collapse--focus',
         }
 
+        this.scrollDelay = 500;
+
         this.collapses = [];
         this.toggles = [];
+        this.anchorLinks = [];
     }
 
     /**
      * Initialize the component.
      */
     init() {
         this.initialized = this.collapses.length > 0;
+        this.anchorLinks = Array.from( document.querySelectorAll( '.denhaag-sidenav__link[href*="#"]' ) );
         this.collapses = Array.from( document.getElementsByClassName( 'denhaag-anchor-collapse' ) );
         this.toggles = Array.from( document.getElementsByClassName( 'denhaag-anchor-collapse__toggle' ) );
     }
 
+
+    /**
+     * Update active-state on window scroll after a delay.
+     */
+    scrollEvents() {
+        let scrollTimeout;
+        clearTimeout( scrollTimeout );
+        scrollTimeout = setTimeout( () => this.updateOnScroll(), this.scrollDelay );
+    }
+
+    /**
+     * Update anchor navigation active state on the viewport position.
+     */
+    updateOnScroll() {
+        // @todo: check which section is closest to the top of the viewport.
+        // @todo: loop through the anchor links and add active class to the closest section.
+    }
+
     /**
      * Fire on-resize event.
      */
-    resize() {
+    resizeEvents() {
         if (!this.initialized) {
             return;
         }

diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/layouts/_template-mijn-zaken.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/layouts/_template-mijn-zaken.scss
@@ -7,7 +7,7 @@
   gap: var(--openpdd-mijn-zaken-gap, 2rem);
   grid-template-areas: var(--openpdd-mijn-zaken-template, "aside" "content");
 
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(md) {
     --openpdd-mijn-zaken-template: "aside content content";
     --openpdd-mijn-zaken-gap: 2.5rem;
   }
@@ -16,7 +16,7 @@
     grid-area: aside;
     height: fit-content;
 
-    @include media-breakpoint-up(lg) {
+    @include media-breakpoint-up(md) {
       bottom: var(--openpdd-mijn-zaken-gap);
       position: sticky;
       top: var(--openpdd-mijn-zaken-gap);