fix footnotes

src/components/nodes/NodeViewBody.vue

@@ -14,32 +14,34 @@
 
       <fullscreen-modal v-if="image" :image="image" :id="'modal-image-' + node.id" />
 
-      <b-popover
+      <template v-if="mode === 'view'">
-        v-for="note in node.notes" :key="note.number"
+        <b-popover
-        custom-class="footnote"
+          v-for="note in node.notes" :key="`note-${mode}-${node.id}-${note.number}`"
-        :target="'note-' + note.number" :container="`node-${mode}-${node.id}`"
+          custom-class="footnote"
-        placement="top" :fallback-placement="['bottom', 'right', 'left']"
+          :target="`note-${node.id}-${note.number}`" :container="`node-${mode}-${node.id}`"
-        :triggers="['focus']"
+          placement="top" :fallback-placement="['bottom', 'right', 'left']"
-      >
+          :triggers="['focus']"
-        <div class="footnote-content" v-html="note.content" />
+        >
+          <div class="footnote-content" v-html="note.content" />
 
-        <div class="footnote-child-list" v-if="note.links">
+          <div class="footnote-child-list" v-if="note.links">
-          <node-view-title
+            <node-view-title
-            v-for="link in note.links" :key="link.id"
+              v-for="link in note.links" :key="link.id"
-            :node="link.parents && link.parents.length ? link.parents[0] : link"
+              :node="link.type === 'prod' && link.parents && link.parents.length ? link.parents[0] : link"
-            link
+              link
-            @open-node="onFootnoteLinkClick(link, 'note-' + note.number)"
+              @open-node="onFootnoteLinkClick(link, 'note-' + note.number)"
-          >
-            <dot-button
-              :variant="link.variant"
-              class="mr-2"
-              active
             >
-              {{ $t('variants.' + link.variant) }}
+              <dot-button
-            </dot-button>
+                :variant="link.variant"
-          </node-view-title>
+                class="mr-2"
-        </div>
+                active
-      </b-popover>
+              >
+                {{ $t('variants.' + link.variant) }}
+              </dot-button>
+            </node-view-title>
+          </div>
+        </b-popover>
+      </template>
     </slot>
   </div>
 </template>
@@ -76,7 +78,7 @@ export default {
         const number = parseInt(link.hash.replace('#', ''))
         if (!isNaN(number)) {
           link.classList.add('footnote-link')
-          link.id = 'note-' + number
+          link.id = `note-${this.node.id}-${number}`
           link.innerHTML = link.textContent
           if (link.parentElement.nodeName === 'SUP') {
             link.parentElement.replaceWith(link)
@@ -86,6 +88,19 @@ export default {
       })
     },
 
+    hideFootnotes () {
+      const links = this.$el.querySelectorAll('a')
+      links.forEach((link, i) => {
+        const number = parseInt(link.hash.replace('#', ''))
+        if (!isNaN(number)) {
+          link.classList.add('footnote-link')
+          if (link.parentElement.nodeName === 'SUP') {
+            link.parentElement.replaceWith(link)
+          }
+        }
+      })
+    },
+
     mountMedias () {
       const template = document.getElementById('expand-image-tmp')
       this.$el.querySelectorAll('.node-view-body-wrapper img').forEach(img => {
@@ -123,10 +138,10 @@ export default {
 
   mounted () {
     if (this.mode === 'view') {
-      if (this.node.notes) {
+      this.addFootnotes()
-        this.addFootnotes()
-      }
       this.mountMedias()
+    } else {
+      this.hideFootnotes()
     }
   }
 }
@@ -202,6 +217,10 @@ export default {
     max-height: 1.4em;
     margin: 0 .2em;
   }
+
+  &-card .footnote-link {
+    display: none;
+  }
 }
 
 .footnote {

src/components/nodes/NodeViewTitle.vue

@@ -6,7 +6,7 @@
   >
     <component
       :is="link ? 'a' : 'div'"
-      @click="onTitleClick(node)"
+      @click="onTitleClick"
       class="node-view-title-container"
     >
       <slot name="default" />
@@ -55,8 +55,9 @@ export default {
     trim,
     toCommaList,
 
-    onTitleClick (node) {
+    onTitleClick (e) {
       if (this.link) {
+        e.stopPropagation()
         this.$emit('open-node')
       }
     }

src/store/nodes.js

@@ -175,6 +175,10 @@ export default {
     nodes: state => ids => ids.map(id => state.nodes[id]),
     node: state => id => state.nodes[id],
     optionsVisible: state => state.optionsVisible,
-    history: state => state.history.map(id => state.nodes[id])
+    history: state => {
+      return state.history.map(id => state.nodes[id]).filter(node => {
+        return node.dataLevel > 0
+      })
+    }
   }
 }