Add comments, since compiler doesnt work anymore

OpenWebconcept · Oct 11, 2023 · e12d960 · e12d960
1 parent 6196e46
commit e12d960
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
@@ -13,5 +13,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
@@ -36,7 +36,7 @@ $layout: 'page-template-template-mijn-zaken';
 		'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;
 	}
@@ -45,7 +45,7 @@ $layout: 'page-template-template-mijn-zaken';
 		height: fit-content;
 		grid-area: aside;
 
-		@include media-breakpoint-up( lg ) {
+		@include media-breakpoint-up( md ) {
 			position: sticky;
 			top: var( --openpdd-mijn-zaken-gap );
 			bottom: var( --openpdd-mijn-zaken-gap );