mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-11-04 03:08:25 +00:00
accourse stickyNav: insert a component, replace deprecated anchor name by id
This commit is contained in:
@@ -80,7 +80,7 @@ export default {
|
||||
left: -22px;
|
||||
top: 4px;
|
||||
}
|
||||
a[name^="section"] {
|
||||
a[id^="section"] {
|
||||
position: absolute;
|
||||
top: -2.5em; // reference for stickNav
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h2><a name="section-80"></a>{{ $t('comment.title') }}</h2>
|
||||
<h2><a id="section-90"></a>{{ $t('comment.title') }}</h2>
|
||||
|
||||
<!--div class="error flash_message" v-if="errors.length > 0">
|
||||
{{ errors[0] }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h2><a name="section-90"></a>
|
||||
<h2><a id="section-100"></a>
|
||||
{{ $t('confirm.title') }}
|
||||
</h2>
|
||||
<div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h2><a name="section-20"></a>
|
||||
<h2><a id="section-20"></a>
|
||||
{{ $t('courselocation.title') }}
|
||||
</h2>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h2><a name="section-30"></a>{{ $t('origin.title') }}</h2>
|
||||
<h2><a id="section-30"></a>{{ $t('origin.title') }}</h2>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="selectOrigin">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h2><a name="section-10"></a>{{ $t('persons_associated.title')}}</h2>
|
||||
<h2><a id="section-10"></a>{{ $t('persons_associated.title')}}</h2>
|
||||
|
||||
<div v-if="currentParticipations.length > 0">
|
||||
<label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h2><a name="section-60"></a>{{ $t('referrer.title') }}</h2>
|
||||
<h2><a id="section-70"></a>{{ $t('referrer.title') }}</h2>
|
||||
|
||||
<div>
|
||||
<label class="col-form-label" for="selectReferrer">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
|
||||
<h2><a name="section-40"></a>{{ $t('requestor.title') }}</h2>
|
||||
<h2><a id="section-40"></a>{{ $t('requestor.title') }}</h2>
|
||||
|
||||
<div v-if="accompanyingCourse.requestor" class="flex-table">
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
|
||||
<h2><a name="section-70"></a>{{ $t('resources.title')}}</h2>
|
||||
<h2><a id="section-80"></a>{{ $t('resources.title')}}</h2>
|
||||
|
||||
<div v-if="resources.length > 0">
|
||||
<label class="col-form-label">{{ $tc('resources.counter', counter) }}</label>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h2><a name="section-65"></a>{{ $t('scopes.title') }}</h2>
|
||||
<h2><a id="section-60"></a>{{ $t('scopes.title') }}</h2>
|
||||
|
||||
<ul>
|
||||
<li v-for="s in scopes">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h2><a name="section-50"></a>{{ $t('social_issue.title') }}</h2>
|
||||
<h2><a id="section-50"></a>{{ $t('social_issue.title') }}</h2>
|
||||
|
||||
<div class="my-4">
|
||||
<!--label for="field">{{ $t('social_issue.label') }}</label
|
||||
|
||||
@@ -62,42 +62,42 @@ export default {
|
||||
// load datas DOM when mounted ready
|
||||
this.container = document.querySelector("#content");
|
||||
this.stickyNav = document.querySelector('#navmap');
|
||||
this.anchors = document.querySelectorAll("h2 a[name^='section']");
|
||||
this.initItemsMap();
|
||||
|
||||
this.anchors = document.querySelectorAll("h2 a[id^='section']");
|
||||
this.initItemsMap();
|
||||
|
||||
// TODO resizeObserver not supports IE !
|
||||
// Listen when elements change size, then recalculate heightSum and initItemsMap
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
this.refreshPos();
|
||||
});
|
||||
|
||||
|
||||
resizeObserver.observe(this.header);
|
||||
resizeObserver.observe(this.bannerName);
|
||||
resizeObserver.observe(this.bannerDetails);
|
||||
resizeObserver.observe(this.container);
|
||||
},
|
||||
initItemsMap() {
|
||||
|
||||
|
||||
this.anchors.forEach(anchor => {
|
||||
this.items.push({
|
||||
pos: null,
|
||||
active: false,
|
||||
key: parseInt(anchor.name.slice(8).slice(0, -1)),
|
||||
name: '#' + anchor.name
|
||||
key: parseInt(anchor.id.slice(8).slice(0, -1)),
|
||||
id: '#' + anchor.id
|
||||
})
|
||||
});
|
||||
},
|
||||
refreshPos() {
|
||||
|
||||
|
||||
//console.log('refreshPos');
|
||||
this.heightSum = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
|
||||
|
||||
|
||||
this.anchors.forEach((anchor, i) => {
|
||||
this.items[i].pos = this.findPos(anchor)['y'];
|
||||
});
|
||||
},
|
||||
findPos(element) {
|
||||
|
||||
|
||||
let posX = 0, posY = 0;
|
||||
do {
|
||||
posX += element.offsetLeft;
|
||||
@@ -105,38 +105,38 @@ export default {
|
||||
element = element.offsetParent;
|
||||
}
|
||||
while( element != null );
|
||||
|
||||
|
||||
let pos = [];
|
||||
pos['x'] = posX;
|
||||
pos['y'] = posY;
|
||||
|
||||
|
||||
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) {
|
||||
//console.log(window.scrollY);
|
||||
|
||||
if (top > this.limit) {
|
||||
this.stickyNav.style.position = 'absolute';
|
||||
this.stickyNav.style.left = '10px';
|
||||
} else {
|
||||
this.stickyNav.style.position = 'fixed';
|
||||
this.stickyNav.style.left = pos['x'] + 'px';
|
||||
}
|
||||
|
||||
|
||||
this.switchActive();
|
||||
},
|
||||
switchActive() {
|
||||
|
||||
|
||||
this.items.forEach((item, i) => {
|
||||
let next = (this.items[i+1]) ? this.items[i+1].pos : '100000';
|
||||
item.active =
|
||||
item.active =
|
||||
(window.scrollY >= item.pos & window.scrollY < next) ? true : false;
|
||||
}, this);
|
||||
|
||||
// last item never switch active because scroll reach bottom of page
|
||||
|
||||
// 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;
|
||||
@@ -151,7 +151,7 @@ export default {
|
||||
<style lang="scss">
|
||||
div#content {
|
||||
position: relative;
|
||||
|
||||
|
||||
div#navmap {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
@@ -170,7 +170,7 @@ div#content {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
&:hover,
|
||||
&:hover,
|
||||
&.active {
|
||||
span {
|
||||
display: inline;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a
|
||||
v-if="item.key <= 7"
|
||||
:href="item.name"
|
||||
v-if="item.key <= 8"
|
||||
:href="item.id"
|
||||
:class="{ 'active': isActive }"
|
||||
>
|
||||
<i class="fa fa-fw fa-square"></i>
|
||||
@@ -9,7 +9,7 @@
|
||||
</a>
|
||||
<a
|
||||
v-else-if="step === 'DRAFT'"
|
||||
:href="item.name"
|
||||
:href="item.id"
|
||||
:class="{ 'active': isActive }"
|
||||
>
|
||||
<i class="fa fa-fw fa-square"></i>
|
||||
|
||||
Reference in New Issue
Block a user