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

anchors wip

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-23 00:49:02 +02:00
parent 4261ddcde4
commit 771b9eb616
1 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,31 +6,31 @@
<i class="fa fa-fw fa-square-o"></i>
<span>Haut</span>
</a>
<a href="#section-10">
<a href="#section-10" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i>
<span>1</span>
</a>
<a href="#section-20">
<a href="#section-20" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i>
<span>2</span>
</a>
<a href="#section-30">
<a href="#section-30" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i>
<span>3</span>
</a>
<a href="#section-40">
<a href="#section-40" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i>
<span>4</span>
</a>
<a href="#section-50">
<a href="#section-50" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i>
<span>5</span>
</a>
<a href="#section-60" v-if="accompanyingCourse.step === 'DRAFT'">
<a href="#section-60" v-if="accompanyingCourse.step === 'DRAFT'" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i>
<span>6</span>
</a>
<a href="#section-70" v-if="accompanyingCourse.step === 'DRAFT'">
<a href="#section-70" v-if="accompanyingCourse.step === 'DRAFT'" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i>
<span>7</span>
</a>
@ -53,6 +53,7 @@ export default {
bannerName: document.querySelector("#header-accompanying_course-name"),
bannerDetails: document.querySelector("#header-accompanying_course-details"),
stickyNav: null,
anchors: null,
sumBanner: null,
limit: 25
}
@ -79,6 +80,8 @@ export default {
this.stickyNav = document.querySelector('#navmap');
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
this.anchorsMap();
const resizeObserver = new ResizeObserver(entries => { // FF/Chrome!
//console.log('header', this.header.offsetHeight);
@ -92,7 +95,7 @@ export default {
resizeObserver.observe(this.header);
resizeObserver.observe(this.bannerName);
resizeObserver.observe(this.bannerDetails);
},
handleScroll(event) {
@ -126,6 +129,17 @@ export default {
pos['y'] = posY;
return pos;
},
anchorsMap() {
this.anchors = document.querySelectorAll("h2 a[name^='section']");
this.anchors.forEach(anchor => {
console.log('anchor', this.findPosition(anchor)['y']);
});
},
isActive() {
return true;
}
}
}
@ -148,13 +162,16 @@ div#navmap {
}
&:hover {
color: #718596b5;
}
&:hover,
&.active {
span {
display: inline;
padding-left: 8px;
}
}
&.active {
color: #df6a27;
color: #df6a27; //#e2793d
}
}
}