accourse stickyNav: insert a component, replace deprecated anchor name by id

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

@@ -80,7 +80,7 @@ export default {
                left: -22px;
                top: 4px;
             }
-            a[name^="section"] {
+            a[id^="section"] {
                position: absolute;
                top: -2.5em;  // reference for stickNav
             }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue

@@ -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] }}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue

@@ -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>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue

@@ -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>
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue

@@ -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">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue

@@ -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>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue

@@ -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">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue

@@ -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">
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue

@@ -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>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue

@@ -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">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue

@@ -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

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

@@ -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.anchors = document.querySelectorAll("h2 a[id^='section']");
-         this.initItemsMap();                  
+         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)),
+               key: parseInt(anchor.id.slice(8).slice(0, -1)),
-               name: '#' + anchor.name
+               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); 
+         //console.log(window.scrollY);
-         
+
-         if (top > this.limit) {            
+         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;

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

@@ -1,7 +1,7 @@
 <template>
    <a
-      v-if="item.key <= 7"
+      v-if="item.key <= 8"
-      :href="item.name"
+      :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>