From 1fbda740a7b249f976e443cd53c1e0fe90c5c6cf Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sun, 23 May 2021 11:13:21 +0200
Subject: [PATCH] stickNav map elements switch active when scrolling

---
 .../public/vuejs/AccompanyingCourse/App.vue   |  2 +-
 .../components/StickyNav.vue                  | 27 ++++++++++++++-----
 .../components/StickyNav/Item.vue             |  5 +---
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 314959e14..8c6d1bb94 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -71,7 +71,7 @@ export default {
             }
             a[name^="section"] {
                position: absolute;
-               top: -2em;
+               top: -4em;
             }
          }
          padding: 0.8em 0em;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
index 28f32eed4..0934fe648 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
@@ -68,14 +68,17 @@ export default {
          
          this.anchorsMap();
          
-         const resizeObserver = new ResizeObserver(entries => {   // FF/Chrome!
+         const resizeObserver = new ResizeObserver(entries => {
+            
+            // Listen to header size changes,
+            // then recalculate height sum and anchorsMap
+            // TODO only FF/Chrome!
             
-            //console.log('header', this.header.offsetHeight);
-            //console.log('bannerName', this.bannerName.offsetHeight);
-            //console.log('bannerDetails', this.bannerDetails.offsetHeight);
             this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
             //console.log('sum', this.sumBanner);
-            //console.log('--');
+            
+            this.items = [];
+            this.anchorsMap();
             
          });
          resizeObserver.observe(this.header);
@@ -86,10 +89,12 @@ export default {
       anchorsMap() {
          
          this.anchors = document.querySelectorAll("h2 a[name^='section']");
+         
          this.anchors.forEach(anchor => {
             //console.log('anchor', anchor);
             this.items.push({
                pos: this.findPosition(anchor)['y'],
+               active: false,
                key: parseInt(anchor.name.slice(8).slice(0, -1)),
                name: '#' + anchor.name,
                anchor: anchor
@@ -114,6 +119,7 @@ export default {
             this.stickyNav.style.left = pos['x'] + 'px';
          }
          
+         this.switchActive();
       },
       findPosition(element) {
          
@@ -131,8 +137,15 @@ export default {
           
           return pos;
       },
-      isActive() {
-         return true;
+      switchActive() {
+         
+         this.items.forEach((item, i) => {
+            let next = (this.items[i+1]) ? this.items[i+1].pos : '1000000';
+            item.active = 
+                (window.scrollY >= item.pos & window.scrollY < next) ? true : false;
+            
+         }, this);
+         
       }
    }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
index 9a4302e1f..413f216cc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
@@ -23,11 +23,8 @@ export default {
    props: ['item', 'step'],
    computed: {
       isActive() {
-         return true;
+         return this.item.active;
       }
    }
 }
 </script>
-
-<style lang="css" scoped>
-</style>