From f93c13234ab454fceda78358c3c9b5a579c2fb77 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 23 Sep 2021 16:20:33 +0200
Subject: [PATCH] accourse stickyNav: insert a component, replace deprecated
 anchor name by id

---
 .../public/vuejs/AccompanyingCourse/App.vue   |  2 +-
 .../AccompanyingCourse/components/Comment.vue |  2 +-
 .../AccompanyingCourse/components/Confirm.vue |  2 +-
 .../components/CourseLocation.vue             |  2 +-
 .../components/OriginDemand.vue               |  2 +-
 .../components/PersonsAssociated.vue          |  2 +-
 .../components/Referrer.vue                   |  2 +-
 .../components/Requestor.vue                  |  2 +-
 .../components/Resources.vue                  |  2 +-
 .../AccompanyingCourse/components/Scopes.vue  |  2 +-
 .../components/SocialIssue.vue                |  2 +-
 .../components/StickyNav.vue                  | 46 +++++++++----------
 .../components/StickyNav/Item.vue             |  6 +--
 13 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index d0ad5056f..e4baa082b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/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
             }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
index b64d46103..1bff3f44d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
+++ b/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] }}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
index b7834039d..b8d131f2d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
+++ b/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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
index 83bc1126f..afe13845c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue
+++ b/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>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
index af0fcf2b7..30001028c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue
+++ b/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">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
index 79a9df5a6..07761b31b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
index 3d4de8442..d1ecfbed1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
+++ b/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">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
index 5770e566e..7342eed66 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/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">
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
index 5706fe315..0d22c4d0f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue
index ca1b36770..903f85a86 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue
+++ b/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">
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index a73872953..6faaa5083 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/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
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
index c42571721..1047ab9d2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
+++ b/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.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;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
index 762ef1d11..9478744bc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
@@ -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>