Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

stickNav map elements switch active when scrolling

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-23 11:13:21 +02:00
parent d35e1fe21e
commit 1fbda740a7
3 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
View File

@ -71,7 +71,7 @@ export default {
} }
a[name^="section"] { a[name^="section"] {
position: absolute; position: absolute;
top: -2em; top: -4em;
} }
} }
padding: 0.8em 0em; padding: 0.8em 0em;

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

@ -68,14 +68,17 @@ export default {
this.anchorsMap(); 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; this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
//console.log('sum', this.sumBanner); //console.log('sum', this.sumBanner);
//console.log('--');
this.items = [];
this.anchorsMap();
}); });
resizeObserver.observe(this.header); resizeObserver.observe(this.header);
@ -86,10 +89,12 @@ export default {
anchorsMap() { anchorsMap() {
this.anchors = document.querySelectorAll("h2 a[name^='section']"); this.anchors = document.querySelectorAll("h2 a[name^='section']");
this.anchors.forEach(anchor => { this.anchors.forEach(anchor => {
//console.log('anchor', anchor); //console.log('anchor', anchor);
this.items.push({ this.items.push({
pos: this.findPosition(anchor)['y'], pos: this.findPosition(anchor)['y'],
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 anchor: anchor
@ -114,6 +119,7 @@ export default {
this.stickyNav.style.left = pos['x'] + 'px'; this.stickyNav.style.left = pos['x'] + 'px';
} }
this.switchActive();
}, },
findPosition(element) { findPosition(element) {
@ -131,8 +137,15 @@ export default {
return pos; return pos;
}, },
isActive() { switchActive() {
return true;
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);
} }
} }
} }

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

@ -23,11 +23,8 @@ export default {
props: ['item', 'step'], props: ['item', 'step'],
computed: { computed: {
isActive() { isActive() {
return true; return this.item.active;
} }
} }
} }
</script> </script>
<style lang="css" scoped>
</style>