stickyNav item in a subcomponent

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js

@@ -37,12 +37,16 @@ const messages = {
          ok: "OK",
          cancel: "Annuler",
          close: "Fermer",
-         next: "Suivant",
-         previous: "Précédent",
          back: "Retour",
          check_all: "cocher tout",
          reset: "réinitialiser"
       },
+      nav: {
+         next: "Suivant",
+         previous: "Précédent",
+         top: "Haut",
+         bottom: "Bas",
+      }
    }
 };
 

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

@@ -4,39 +4,17 @@
          <nav>
             <a href="#top">
                <i class="fa fa-fw fa-square-o"></i>
-               <span>Haut</span>
+               <span>{{ $t('nav.top') }}</span>
-            </a>
-            <a href="#section-10" :class="{ 'active': isActive }">
-               <i class="fa fa-fw fa-square"></i>
-               <span>1</span>
-            </a>
-            <a href="#section-20" :class="{ 'active': isActive }">
-               <i class="fa fa-fw fa-square"></i>
-               <span>2</span>
-            </a>
-            <a href="#section-30" :class="{ 'active': isActive }">
-               <i class="fa fa-fw fa-square"></i>
-               <span>3</span>
-            </a>
-            <a href="#section-40" :class="{ 'active': isActive }">
-               <i class="fa fa-fw fa-square"></i>
-               <span>4</span>
-            </a>
-            <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'" :class="{ 'active': isActive }">
-               <i class="fa fa-fw fa-square"></i>
-               <span>6</span>
-            </a>
-            <a href="#section-70" v-if="accompanyingCourse.step === 'DRAFT'" :class="{ 'active': isActive }">
-               <i class="fa fa-fw fa-square"></i>
-               <span>7</span>
             </a>
+            <item
+               v-for="item of items"
+               :key="item.key"
+               :item="item"
+               :step="step">
+            </item>
             <!--a href="#bottom">
                <i class="fa fa-fw fa-square-o"></i>
-               <span>Bas</span>
+               <span>{{ $t('nav.bottom') }}</span>
             </a-->
          </nav>
       </div>
@@ -44,23 +22,31 @@
 </template>
 
 <script>
+import Item from './StickyNav/Item.vue';
 
 export default {
    name: "StickyNav",
+   components: {
+      Item
+   },
    data() {
       return {
          header: document.querySelector("header.navigation.container"),
          bannerName: document.querySelector("#header-accompanying_course-name"),
          bannerDetails: document.querySelector("#header-accompanying_course-details"),
-         stickyNav: null,
-         anchors: null,
          sumBanner: null,
-         limit: 25
+         stickyNav: null,
+         limit: 25,
+         anchors: null,
+         items: [],
       }
    },
    computed: {
       accompanyingCourse() {
-         return this.$store.state.accompanyingCourse
+         return this.$store.state.accompanyingCourse;
+      },
+      step() {
+         return this.accompanyingCourse.step;
       },
       top() {
          return parseInt(window.getComputedStyle(this.stickyNav).getPropertyValue('top').slice(0, -2));
@@ -96,6 +82,21 @@ export default {
          resizeObserver.observe(this.bannerName);
          resizeObserver.observe(this.bannerDetails);
              
+      },
+      anchorsMap() {
+         
+         this.anchors = document.querySelectorAll("h2 a[name^='section']");
+         this.anchors.forEach(anchor => {
+            //console.log('anchor', anchor);
+            this.items.push({
+               pos: this.findPosition(anchor)['y'],
+               key: parseInt(anchor.name.slice(8).slice(0, -1)),
+               name: '#' + anchor.name,
+               anchor: anchor
+            })
+         });
+         //console.log('items', this.items);
+         
       },
       handleScroll(event) {
          
@@ -130,14 +131,6 @@ export default {
           
           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;
       }
@@ -145,7 +138,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 div#navmap {
    position: absolute;
    top: 30px;
@@ -160,9 +153,6 @@ div#navmap {
          span {
             display: none;
          }
-         &:hover {
-            color: #718596b5;
-         }
          &:hover, 
          &.active {
             span {
@@ -170,6 +160,9 @@ div#navmap {
                padding-left: 8px;
             }
          }
+         &:hover {
+            color: #718596b5;
+         }
          &.active {
             color: #df6a27; //#e2793d
          }

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

@@ -0,0 +1,33 @@
+<template>
+   <a 
+      v-if="item.key <= 5"
+      :href="item.name" 
+      :class="{ 'active': isActive }"
+      >
+      <i class="fa fa-fw fa-square"></i>
+      <span>{{ item.key }}</span>
+   </a>
+   <a 
+      v-else-if="step === 'DRAFT'"
+      :href="item.name" 
+      :class="{ 'active': isActive }"
+      >
+      <i class="fa fa-fw fa-square"></i>
+      <span>{{ item.key }}</span>
+   </a>
+</template>
+
+<script>
+export default {
+   name: "Item",
+   props: ['item', 'step'],
+   computed: {
+      isActive() {
+         return true;
+      }
+   }
+}
+</script>
+
+<style lang="css" scoped>
+</style>