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

33
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> <i class="fa fa-fw fa-square-o"></i>
<span>Haut</span> <span>Haut</span>
</a> </a>
<a href="#section-10"> <a href="#section-10" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i> <i class="fa fa-fw fa-square"></i>
<span>1</span> <span>1</span>
</a> </a>
<a href="#section-20"> <a href="#section-20" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i> <i class="fa fa-fw fa-square"></i>
<span>2</span> <span>2</span>
</a> </a>
<a href="#section-30"> <a href="#section-30" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i> <i class="fa fa-fw fa-square"></i>
<span>3</span> <span>3</span>
</a> </a>
<a href="#section-40"> <a href="#section-40" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i> <i class="fa fa-fw fa-square"></i>
<span>4</span> <span>4</span>
</a> </a>
<a href="#section-50"> <a href="#section-50" :class="{ 'active': isActive }">
<i class="fa fa-fw fa-square"></i> <i class="fa fa-fw fa-square"></i>
<span>5</span> <span>5</span>
</a> </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> <i class="fa fa-fw fa-square"></i>
<span>6</span> <span>6</span>
</a> </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> <i class="fa fa-fw fa-square"></i>
<span>7</span> <span>7</span>
</a> </a>
@ -53,6 +53,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"),
stickyNav: null, stickyNav: null,
anchors: null,
sumBanner: null, sumBanner: null,
limit: 25 limit: 25
} }
@ -79,6 +80,8 @@ export default {
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;
this.anchorsMap();
const resizeObserver = new ResizeObserver(entries => { // FF/Chrome! const resizeObserver = new ResizeObserver(entries => { // FF/Chrome!
//console.log('header', this.header.offsetHeight); //console.log('header', this.header.offsetHeight);
@ -126,6 +129,17 @@ export default {
pos['y'] = posY; pos['y'] = posY;
return pos; 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 { &:hover {
color: #718596b5; color: #718596b5;
}
&:hover,
&.active {
span { span {
display: inline; display: inline;
padding-left: 8px; padding-left: 8px;
} }
} }
&.active { &.active {
color: #df6a27; color: #df6a27; //#e2793d
} }
} }
} }