interaction between texts and toc, alpha version, still buged

src/components/Content/EdText.vue

@@ -5,7 +5,9 @@ import Vue from 'vue'
 export default {
   name: 'EdText',
   props: {
-    tei: String
+    tei: String,
+    uuid: String,
+    textid: String
   },
   data: () => ({
     template: null,
@@ -37,7 +39,10 @@ export default {
       this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
     },
     buildHtml () {
-      this.html = `<div class="tei">${this.tei}</div>`
+      this.html = `<div` +
+      ` class="tei${this.uuid === this.textid ? ' active' : ''}"` +
+      ` data-uuid="${this.uuid}"` +
+      `>${this.tei}</div>`
       this.parseLinks()
       // console.log('EdText: builded html', this.html)
     },

src/components/Content/EdToc.vue

@@ -5,7 +5,13 @@
         v-for="item in toc"
         :key="item.uuid"
       >
-        <TocItem :item="item" :level="1" :editionid="$route.params.id" />
+        <TocItem
+          :item="item"
+          :level="1"
+          :editionid="$route.params.id"
+          :loadedtextsuuids="loadedtextsuuids"
+          @onClickTocItem="onClickTocItem"
+        />
       </li>
     </ul>
   </section>
@@ -21,11 +27,17 @@ export default {
     TocItem
   },
   props: {
-    toc: Array
+    toc: Array,
+    loadedtextsuuids: Array
   },
   data: () => ({
 
-  })
+  }),
+  methods: {
+    onClickTocItem (uuid) {
+      this.$emit('onClickTocItem', uuid)
+    }
+  }
 }
 </script>
 

src/components/Content/TocItem.vue

@@ -8,7 +8,7 @@
       v-if="title"
       class="toc-title"
       :uuid="item.uuid"
-      :class="{active: isActive}"
+      :class="{active: isActive, loaded: isLoaded}"
     >
       <a
         :href="'/edition/'+editionid+'/'+item.uuid"
@@ -25,7 +25,13 @@
       :class="{opened: isOpened}"
     >
       <li v-for="child in children" :key="child.uuid">
-        <TocItem :item="child" :level="nextLevel" :editionid="editionid" />
+        <TocItem
+          :item="child"
+          :level="nextLevel"
+          :editionid="editionid"
+          :loadedtextsuuids="loadedtextsuuids"
+          @onClickTocItem="onClickTocItem"
+        />
       </li>
     </ul>
   </section>
@@ -43,7 +49,8 @@ export default {
   props: {
     item: Object,
     level: Number,
-    editionid: String
+    editionid: String,
+    loadedtextsuuids: Array
   },
   // data: () => ({
   //
@@ -83,6 +90,9 @@ export default {
       } else {
         return false
       }
+    },
+    isLoaded () {
+      return this.loadedtextsuuids.indexOf(this.item.uuid) !== -1
     }
   },
   // beforeCreate () {
@@ -91,13 +101,20 @@ export default {
   methods: {
     onclick (e) {
       console.log('clicked on toc text', this.editionid, e)
-      this.$router.push({
-        name: `editiontext`,
-        params: {
-          id: this.editionid,
-          textid: e.target.getAttribute('uuid')
-        }
-      })
+      // if (this.$route.params.textid !== e.target.getAttribute('uuid')) {
+      //   this.$router.push({
+      //     name: `editiontext`,
+      //     params: {
+      //       id: this.editionid,
+      //       textid: e.target.getAttribute('uuid')
+      //     }
+      //   })
+      // } else {
+      this.$emit('onClickTocItem', e.target.getAttribute('uuid'))
+      // }
+    },
+    onClickTocItem (uuid) {
+      this.$emit('onClickTocItem', uuid)
     }
   }
 

src/components/Layouts/MainContentLayout.vue

@@ -7,7 +7,7 @@
       <slot name="header" />
     </header>
 
-    <section class="col-6">
+    <section ref="scrollablecenter" class="col-6" @scroll.passive="onScrollCenter">
       <slot />
     </section>
 
@@ -25,6 +25,25 @@ export default {
     id: {
       type: String,
       required: true
+    },
+    reftoscrollto: { type: String }
+  },
+  watch: {
+    reftoscrollto: function (newref, oldref) {
+      console.log('reftoscrollto watcher', oldref, newref)
+      this.scrollToRef()
+    }
+  },
+  methods: {
+    onScrollCenter (e) {
+      // console.log('mainLayout onScrollCenter: e', e)
+      this.$emit('onCenterScrolled', e)
+    },
+    scrollToRef () {
+      console.log('scrollToRef', this.reftoscrollto, this.$refs)
+      this.$scrollTo(this.reftoscrollto, 500, {
+        container: this.$refs.scrollablecenter
+      })
     }
   }
 }