transversal links : index -> text -> index -> text etc

assets/css/app.scss

@@ -325,12 +325,12 @@ section[role="main-content"]{
   }
 
   #text{
-    .content{
-      color: $bleuroi;
+    .tei{
       h1{
         font-size: 1.512em;
       }
       p{
+        margin-top: 0;
         font-size: 1.134em;
         line-height: 1.5;
         span.persName,
@@ -338,6 +338,13 @@ section[role="main-content"]{
         span.objectName{
           font-weight: 600;
         }
+        a{
+          color: $rouge;
+          font-weight: 600;
+          &.active-link{
+            text-decoration: underline;
+          }
+        }
       }
     }
   }

build/webpack.config.base.js

@@ -11,6 +11,7 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
+      'vue': 'vue/dist/vue.js',
       'assets': utils.resolve('assets'),
       'pages': utils.resolve('src/pages'),
       'static': utils.resolve('static'),

src/components/Content/EdText.vue

@@ -1,19 +1,93 @@
-<template>
-  <div id="text">
-    <!-- <h1>{{ textdata.meta.title }}</h1> -->
-    <div class="tei" v-html="textdata.content.tei" />
-  </div>
-</template>
-
 <script>
+
+import Vue from 'vue'
+
 export default {
   name: 'EdText',
   props: {
-    textdata: Object
+    tei: String
   },
   data: () => ({
-
-  })
+    template: null,
+    html: null
+  }),
+  watch: {
+    tei: function (newtei, oldtei) {
+      // console.log('tei watcher', oldtei, newtei)
+      // we need this watcher to update display as route is changing
+      this.buildTemplate()
+    }
+  },
+  beforeMount () {
+    console.log('EdText beforeMount')
+    if (this.tei) {
+      this.buildTemplate()
+    }
+  },
+  methods: {
+    buildTemplate () {
+      console.log('EdText buildTemplate: tei', this.tei)
+      // to get Vue.compile working we have to use the full build of vuejs
+      // https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds
+      // in /build/webpack.config.base.js alias -> 'vue': 'vue/dist/vue.js',
+      this.buildHtml()
+      this.template = Vue.compile(this.html)
+      this.$options.staticRenderFns = []
+      this._staticTrees = []
+      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
+    },
+    buildHtml () {
+      this.html = `<div class="tei">${this.tei}</div>`
+      this.parseLinks()
+      // console.log('EdText: builded html', this.html)
+    },
+    parseLinks () {
+      const regx = /<a[^<]+<\/a>/g
+      let links = this.html.match(regx)
+      console.log('links', links)
+      if (links) {
+        let domlink, newlink, uuid
+        let index = null
+        for (var i = 0; i < links.length; i++) {
+          domlink = new DOMParser().parseFromString(links[i], 'text/xml').firstChild
+          console.log('domlink', domlink.classList)
+          if (domlink.classList.contains('placeName')) { index = 'locorum' }
+          if (domlink.classList.contains('persName')) { index = 'nominum' }
+          if (domlink.classList.contains('objectName')) { index = 'operum' }
+          console.log('index:', index)
+          if (index) {
+            uuid = domlink.getAttribute('href').replace('#', '')
+            newlink = `<a` +
+              ` class="${domlink.getAttribute('class')} active-link"` +
+              ` data-index="${index}"` +
+              ` uuid="${uuid}"` +
+              ` href="/${index}/${uuid}"` +
+              ` @click.prevent="onClickRef"` +
+              ` @keyup.enter="onClickRef"` +
+              `>${domlink.innerHTML}</a>`
+            console.log('newlink', newlink)
+            this.html = this.html.replace(links[i], newlink)
+          }
+        }
+        // console.log('this.html', this.html)
+      }
+    },
+    onClickRef (e) {
+      console.log('onClickRef()', e)
+      this.$router.push({
+        name: e.target.getAttribute('data-index'),
+        params: { id: e.target.getAttribute('uuid') }
+      })
+    }
+  },
+  render (h) {
+    console.log('EdText render()')
+    if (!this.template) {
+      return h('span', 'Loading ...')
+    } else {
+      return this.template.render.call(this)
+    }
+  }
 }
 </script>
 

src/components/Content/IndexItemOcurrences.vue

@@ -18,12 +18,12 @@
         <ul>
           <li
             v-for="oc in ocAsArray(ed.occurences)"
-            :key="oc.uuid"
+            :key="oc.id"
           >
-          <!-- <li
-            v-for="oc in ed.occurences"
-            :key="oc.uuid"
-          > -->
+            <!-- <li
+              v-for="oc in ed.occurences"
+              :key="oc.uuid"
+            > -->
             <h4>
               <a
                 :href="'/edition/'+ed.item+'/'+oc.uuid"

src/pages/Edition.vue

@@ -8,7 +8,9 @@
     </template>
 
     <!-- default slot -->
-    <EdText v-if="textdata" :textdata="textdata" />
+    <div id="text">
+      <EdText :tei="textdata.content.tei" />
+    </div>
 
     <template #nav>
       <EdToc :toc="toc" />