Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 21:34:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

fix bottom page exception + listen size changes too in main container

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-23 11:47:01 +02:00
parent 1fbda740a7
commit 2386a35eb7
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
View File

@ -34,6 +34,7 @@ export default {
header: document.querySelector("header.navigation.container"), header: document.querySelector("header.navigation.container"),
bannerName: document.querySelector("#header-accompanying_course-name"), bannerName: document.querySelector("#header-accompanying_course-name"),
bannerDetails: document.querySelector("#header-accompanying_course-details"), bannerDetails: document.querySelector("#header-accompanying_course-details"),
container: null,
sumBanner: null, sumBanner: null,
stickyNav: null, stickyNav: null,
limit: 25, limit: 25,
@ -63,6 +64,7 @@ export default {
ready() { ready() {
// when mounted ready // when mounted ready
this.container = document.querySelector("#content_conainter .container.content .container");
this.stickyNav = document.querySelector('#navmap'); this.stickyNav = document.querySelector('#navmap');
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight; this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
@ -70,12 +72,11 @@ export default {
const resizeObserver = new ResizeObserver(entries => { const resizeObserver = new ResizeObserver(entries => {
// Listen to header size changes, // Listen to elements resize changes, then recalculate height sum and anchorsMap
// then recalculate height sum and anchorsMap
// TODO only FF/Chrome! // TODO only FF/Chrome!
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight; 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.items = [];
this.anchorsMap(); this.anchorsMap();
@ -84,6 +85,7 @@ export default {
resizeObserver.observe(this.header); resizeObserver.observe(this.header);
resizeObserver.observe(this.bannerName); resizeObserver.observe(this.bannerName);
resizeObserver.observe(this.bannerDetails); resizeObserver.observe(this.bannerDetails);
resizeObserver.observe(this.container);
}, },
anchorsMap() { anchorsMap() {
@ -96,8 +98,7 @@ export default {
pos: this.findPosition(anchor)['y'], pos: this.findPosition(anchor)['y'],
active: false, active: false,
key: parseInt(anchor.name.slice(8).slice(0, -1)), key: parseInt(anchor.name.slice(8).slice(0, -1)),
name: '#' + anchor.name, name: '#' + anchor.name
anchor: anchor
}) })
}); });
//console.log('items', this.items); //console.log('items', this.items);
@ -143,9 +144,15 @@ export default {
let next = (this.items[i+1]) ? this.items[i+1].pos : '1000000'; let next = (this.items[i+1]) ? this.items[i+1].pos : '1000000';
item.active = item.active =
(window.scrollY >= item.pos & window.scrollY < next) ? true : false; (window.scrollY >= item.pos & window.scrollY < next) ? true : false;
}, this); }, 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;
}
} }
} }
} }