From 2386a35eb7c254f81248119c349f3a612106e06f Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sun, 23 May 2021 11:47:01 +0200
Subject: [PATCH] fix bottom page exception + listen size changes too in main
 container

---
 .../components/StickyNav.vue                  | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

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 0934fe648..af8af4bf8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
@@ -34,6 +34,7 @@ export default {
          header: document.querySelector("header.navigation.container"),
          bannerName: document.querySelector("#header-accompanying_course-name"),
          bannerDetails: document.querySelector("#header-accompanying_course-details"),
+         container: null,
          sumBanner: null,
          stickyNav: null,
          limit: 25,
@@ -63,6 +64,7 @@ export default {
       ready() {
 
          // when mounted ready
+         this.container = document.querySelector("#content_conainter .container.content .container");
          this.stickyNav = document.querySelector('#navmap');
          this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
          
@@ -70,12 +72,11 @@ export default {
          
          const resizeObserver = new ResizeObserver(entries => {
             
-            // Listen to header size changes,
-            // then recalculate height sum and anchorsMap
+            // Listen to elements resize changes, then recalculate height sum and anchorsMap
             // TODO only FF/Chrome!
             
             this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
-            //console.log('sum', this.sumBanner);
+            //console.log('calculate sum', this.sumBanner);
             
             this.items = [];
             this.anchorsMap();
@@ -84,6 +85,7 @@ export default {
          resizeObserver.observe(this.header);
          resizeObserver.observe(this.bannerName);
          resizeObserver.observe(this.bannerDetails);
+         resizeObserver.observe(this.container);
              
       },
       anchorsMap() {
@@ -96,8 +98,7 @@ export default {
                pos: this.findPosition(anchor)['y'],
                active: false,
                key: parseInt(anchor.name.slice(8).slice(0, -1)),
-               name: '#' + anchor.name,
-               anchor: anchor
+               name: '#' + anchor.name
             })
          });
          //console.log('items', this.items);
@@ -143,9 +144,15 @@ export default {
             let next = (this.items[i+1]) ? this.items[i+1].pos : '1000000';
             item.active = 
                 (window.scrollY >= item.pos & window.scrollY < next) ? true : false;
-            
          }, this);
          
+         // last item never switch active because scroll reach bottom of page 
+         if (document.body.scrollHeight == window.scrollY + window.innerHeight) {
+            this.items[this.items.length-1].active = true;
+            this.items[this.items.length-2].active = false;
+         } else {
+            this.items[this.items.length-1].active = false;
+         }
       }
    }
 }