text index item tooltip

assets/css/app.scss

@@ -248,8 +248,25 @@ section[role="main-content"]{
 
   #edition{
     header{
+      position: relative;
       h1{
-        @include title2black;
+        @include title1black;
+      }
+      aside.index-tooltip{
+        margin-top: -1.75em;
+        position:absolute;
+        text-align: right;
+        right: 2em;
+        h1 {
+          @include title2black;
+          margin:0 0 0.5em 0;
+        }
+        p{
+          margin:0 0 0.5em 0;
+        }
+        time{
+          font-weight: 600;
+        }
       }
     }
 
@@ -339,10 +356,16 @@ section[role="main-content"]{
           font-weight: 600;
         }
         a{
-          color: $rouge;
           font-weight: 600;
           &.active-link{
-            text-decoration: underline;
+            color: $rouge;
+            // text-decoration: underline;
+          }
+          sup.mdi{
+            font-size: 0.630em;
+            vertical-align: super;
+            // line-height: 0.1;
+            padding: 0 0.2em;
           }
         }
       }

assets/css/base/_fonts.scss

@@ -36,6 +36,14 @@ footer[role="tools"] .row>nav{
   margin:0;
 }
 
+@mixin title1black {
+  @include fontserif;
+  font-size: 1.512em;
+  color: $grisfonce;
+  font-weight: 400;
+  margin:0;
+}
+
 @mixin title2black {
   @include fontserif;
   font-size: 1.134em;

src/components/Content/EdText.vue

@@ -51,12 +51,6 @@ export default {
         let index = null
         for (var i = 0; i < links.length; i++) {
           // console.log(`link ${i}:`, links[i])
-          // domlink = 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)
           linkparts = RegExp(/<a class="(.+)" href="(.+)">(.+)<\/a>/g).exec(links[i], 'g')
           // console.log('linkparts', linkparts)
           switch (linkparts[1]) {
@@ -75,11 +69,15 @@ export default {
             newlink = `<a` +
               ` class="${linkparts[1]} active-link"` +
               ` data-index="${index}"` +
-              ` uuid="${uuid}"` +
+              ` data-uuid="${uuid}"` +
               ` href="/${index}/${uuid}"` +
               ` @click.prevent="onClickRef"` +
               ` @keyup.enter="onClickRef"` +
-              `>${linkparts[3]}</a>`
+              ` @mouseover="onHoverLink"` +
+              ` @mouseleave="onLeaveLink"` +
+              `>${linkparts[3]}` +
+              `<sup class="mdi mdi-message-text-outline" />` +
+              `</a>`
             // console.log('newlink', newlink)
             this.html = this.html.replace(links[i], newlink)
           }
@@ -88,11 +86,23 @@ export default {
       }
     },
     onClickRef (e) {
-      console.log('onClickRef()', e)
+      console.log('onClickRef(e)', e)
       this.$router.push({
-        name: e.target.getAttribute('data-index'),
-        params: { id: e.target.getAttribute('uuid') }
+        name: e.target.dataset.index,
+        params: { id: e.target.dataset.uuid }
       })
+    },
+    onHoverLink (e) {
+      console.log('EdText onHoverLink(e)', e)
+      this.$emit('onHoverLink', {
+        uuid: e.target.dataset.uuid,
+        index: e.target.dataset.index,
+        rect: e.target.getBoundingClientRect()
+      })
+    },
+    onLeaveLink (e) {
+      // console.log('EdText onLeaveLink(e)', e)
+      this.$emit('onLeaveLink')
     }
   },
   render (h) {

src/pages/Edition.vue

@@ -6,11 +6,34 @@
     <template #header>
       <h1>{{ title }}</h1>
       <p v-if="meta">{{ meta.author }}</p>
+      <aside
+        v-if="indexitem"
+        class="index-tooltip"
+        :style="{ top:tooltip_top + 'px' }"
+      >
+        <span v-if="indexitem == 'loading'">Loading ...</span>
+        <template v-if="indexitem !== 'loading'">
+          <h1 v-html="indexitem.title" />
+          <p class="birthdeath">
+            <time>{{ indexitem.birthDate }}</time>, <span class="place">{{ indexitem.birthPlace }}</span><br>
+            <time>{{ indexitem.deathDate }}</time>, <span class="place">{{ indexitem.deathPlace }}</span>
+          </p>
+          <p class="occupation">
+            {{ indexitem.occupation }}
+          </p>
+        </template>
+
+      </aside>
     </template>
 
     <!-- default slot -->
     <div id="text">
-      <EdText v-if="textdata" :tei="textdata.content.tei" />
+      <EdText
+        v-if="textdata"
+        :tei="textdata.content.tei"
+        @onHoverLink="onHoverLink"
+        @onLeaveLink="onLeaveLink"
+      />
     </div>
 
     <template #nav>
@@ -48,9 +71,12 @@ export default {
     textid: null,
     textdata: null,
     metainfotitle: undefined,
-    edtitle: undefined,
+    title: undefined,
     author: undefined,
-    texttitle: undefined
+    texttitle: undefined,
+    //
+    indexitem: null,
+    tooltip_top: null
   }),
   computed: {
     ...mapState({
@@ -103,6 +129,7 @@ export default {
     if (!this.editionslist.length) {
       this.getCorpuses()
       // subsribe to store to get the editionbyuuid list
+      // https://dev.to/viniciuskneves/watch-for-vuex-state-changes-2mgj
       this.unsubscribe = this.$store.subscribe((mutation, state) => {
         // console.log('Edition store subscribe', mutation.type)
         if (mutation.type === 'Corpus/setEditionsByUUID') {
@@ -150,6 +177,28 @@ export default {
             Promise.reject(error)
           })
       }
+    },
+    onHoverLink (elmt) {
+      console.log('Edition onHoverLink(elmt)', elmt)
+      this.tooltip_top = elmt.rect.top
+      this.getIndexItem(elmt)
+    },
+    onLeaveLink () {
+      console.log('Edition onLeaveLink()')
+      this.indexitem = null
+    },
+    getIndexItem (item) {
+      this.indexitem = 'loading'
+      REST.get(`/index${item.index.charAt(0).toUpperCase()}${item.index.slice(1)}/${item.uuid}`, {})
+        .then(({ data }) => {
+          console.log('index tooltip REST: data', data)
+          this.indexitem = data.content
+        })
+        .catch((error) => {
+          console.warn('Issue with index tooltip rest', error)
+          Promise.reject(error)
+          this.indexitem = null
+        })
     }
   }
 }

src/pages/Locorum.vue

@@ -5,7 +5,7 @@
     </template>
 
     <template v-if="content" v-slot:header>
-      <h1>{{ content.title }}</h1>
+      <h1 v-html="content.title" />
       <p>
         {{ content.type }}
       </p>

src/pages/Nominum.vue

@@ -5,7 +5,7 @@
     </template>
 
     <template v-if="content" v-slot:header>
-      <h1>{{ content.title }}</h1>
+      <h1 v-html="content.title" />
       <p>
         {{ content.birthDate }}, {{ content.birthPlace }}<br>
         {{ content.deathDate }}, {{ content.deathPlace }}

src/pages/Operum.vue

@@ -5,7 +5,7 @@
     </template>
 
     <template v-if="content" v-slot:header>
-      <h1>{{ content.title }}</h1>
+      <h1 v-html="content.title" />
     </template>
 
     <!-- default slot -->