From e12d9607c91346086adaeaca8eaa269b5822f24b Mon Sep 17 00:00:00 2001
From: Paul van Impelen <paul@acato.nl>
Date: Thu, 5 Oct 2023 15:07:42 +0200
Subject: [PATCH] Add comments, since compiler doesnt work anymore

---
 .../owc-formulieren/assets/js/frontend/app.js |  6 +++--
 .../components/NLDS_DenHaag_AnchorCollapse.js | 24 ++++++++++++++++++-
 .../scss/layouts/_template-mijn-zaken.scss    |  4 ++--
 3 files changed, 29 insertions(+), 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
index ddaefdd1..baeb7272 100644
--- 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() );
\ No newline at end of file
diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/NLDS_DenHaag_AnchorCollapse.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/NLDS_DenHaag_AnchorCollapse.js
index 079f8283..a47d0b64 100644
--- a/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/NLDS_DenHaag_AnchorCollapse.js
+++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/NLDS_DenHaag_AnchorCollapse.js
@@ -10,8 +10,11 @@ export default class NLDS_DenHaag_AnchorCollapse {
             focus: 'denhaag-anchor-collapse--focus',
         }
 
+        this.scrollDelay = 500;
+
         this.collapses = [];
         this.toggles = [];
+        this.anchorLinks = [];
     }
 
     /**
@@ -19,14 +22,33 @@ export default class NLDS_DenHaag_AnchorCollapse {
      */
     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
index 2eeac9c7..18809e46 100644
--- 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 );