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

improve how refresh height sum and anchors position

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-23 14:41:53 +02:00
parent 64e37c5235
commit ca33580831
2 changed files with 34 additions and 36 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

@ -80,7 +80,7 @@ export default {
border-radius: 5px; border-radius: 5px;
border-left: 1px dotted #718596ab; border-left: 1px dotted #718596ab;
border-right: 1px dotted #718596ab; border-right: 1px dotted #718596ab;
/* /* debug components
position: relative; position: relative;
&:before { &:before {
content: "vuejs component"; content: "vuejs component";

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

@ -31,7 +31,7 @@ export default {
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, container: null,
sumBanner: null, heightSum: null,
stickyNav: null, stickyNav: null,
limit: 25, limit: 25,
anchors: null, anchors: null,
@ -59,63 +59,44 @@ export default {
methods: { methods: {
ready() { ready() {
// when mounted ready // load datas DOM when mounted ready
this.container = document.querySelector("#content_conainter .container.content .container"); this.container = document.querySelector("#content_conainter .container.content .container");
this.stickyNav = document.querySelector('#navmap'); this.stickyNav = document.querySelector('#navmap');
this.anchors = document.querySelectorAll("h2 a[name^='section']");
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight; this.initItemsMap();
this.anchorsMap();
// TODO resizeObserver not supports IE ! // TODO resizeObserver not supports IE !
// Listen when elements change size, then recalculate height sum and anchorsMap // Listen when elements change size, then recalculate heightSum and initItemsMap
const resizeObserver = new ResizeObserver(entries => { const resizeObserver = new ResizeObserver(entries => {
this.refreshPos();
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
//console.log('calculate sum', this.sumBanner);
this.items = [];
this.anchorsMap();
}); });
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); resizeObserver.observe(this.container);
}, },
anchorsMap() { initItemsMap() {
this.anchors = document.querySelectorAll("h2 a[name^='section']");
this.anchors.forEach(anchor => { this.anchors.forEach(anchor => {
//console.log('anchor', anchor);
this.items.push({ this.items.push({
pos: this.findPosition(anchor)['y'], pos: null,
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
}) })
}); });
}, },
handleScroll(event) { refreshPos() {
let pos = this.findPosition(this.stickyNav); //console.log('refreshPos');
let top = this.sumBanner + this.top - window.scrollY; this.heightSum = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
//console.log(window.scrollY);
if (top > this.limit) { this.anchors.forEach((anchor, i) => {
//console.log('absolute', pos['y']); this.items[i].pos = this.findPos(anchor)['y'];
this.stickyNav.style.position = 'absolute'; });
this.stickyNav.style.left = '-60px';
} else {
//console.log('fixed', pos['y']);
this.stickyNav.style.position = 'fixed';
this.stickyNav.style.left = pos['x'] + 'px';
}
this.switchActive();
}, },
findPosition(element) { findPos(element) {
let posX = 0, posY = 0; let posX = 0, posY = 0;
do { do {
@ -131,6 +112,22 @@ export default {
return pos; return pos;
}, },
handleScroll(event) {
let pos = this.findPos(this.stickyNav);
let top = this.heightSum + this.top - window.scrollY;
//console.log(window.scrollY);
if (top > this.limit) {
this.stickyNav.style.position = 'absolute';
this.stickyNav.style.left = '-60px';
} else {
this.stickyNav.style.position = 'fixed';
this.stickyNav.style.left = pos['x'] + 'px';
}
this.switchActive();
},
switchActive() { switchActive() {
this.items.forEach((item, i) => { this.items.forEach((item, i) => {
@ -180,7 +177,8 @@ div#navmap {
color: #718596b5; color: #718596b5;
} }
&.active { &.active {
color: #e2793d; color: #e2793d; //orange
//color: #eec84a; //jaune
} }
} }
} }