update PageView to display notes links + misc fixes

src/components/layouts/PageView.vue

@@ -1,23 +1,66 @@
 <template lang="html">
   <div class="page" :class="'page-' + slug">
-    <div class="btn-close-wrapper">
+    <div v-if="!noClose" class="btn-close-wrapper">
       <button-close @click="$emit('close')" />
     </div>
 
     <div class="page-wrapper" v-html="page.content" />
+
+    <div class="page-footnotes" v-if="page.notes">
+      <div
+        v-for="note in page.notes" :key="`note-${note.number}`"
+        :id="`note-${note.number}`"
+      >
+        <div v-if="note.content" class="footnote-content" v-html="note.content"  />
+
+        <div
+          v-if="note.links"
+          class="footnote-child-list"
+        >
+          <node-view-title
+            v-for="link in note.links" :key="link.id"
+            :node="getLinkObj(link)"
+            link
+            @open-node="onFootnoteLinkClick(link)"
+          >
+            <dot-button
+              :variant="link.variant"
+              class="mr-2"
+              active
+            >
+              {{ $t('variants.' + link.variant) }}
+            </dot-button>
+          </node-view-title>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { getRelation } from '@/store/utils'
+import { NodeViewTitle } from '@/components/nodes'
+
 export default {
   name: 'PageView',
 
+  components: {
+    NodeViewTitle
+  },
+
   props: {
     page: { type: Object, default: undefined },
-    slug: { type: String, required: true }
+    slug: { type: String, required: true },
+    noClose: { type: Boolean, default: false }
   },
 
   methods: {
+    getLinkObj (link) {
+      if (link.preTitle || link.italTitle) return link
+      if (link.type === 'prod' && link.parents && link.parents.length) return link.parents[0]
+      return link
+    },
+
     addFootnotes () {
       const links = this.$el.querySelectorAll('.page-wrapper a')
       links.forEach((link, i) => {
@@ -31,7 +74,7 @@ export default {
           if (link.parentElement.nodeName === 'SUP') {
             link.parentElement.replaceWith(link)
           }
-          link.onclick = this.onFootnoteLinkClick
+          link.onclick = this.onFootnoteClick
 
           this.addFootnoteContent(link, number)
         }
@@ -39,23 +82,35 @@ export default {
     },
 
     addFootnoteContent (link, i) {
+      const note = document.getElementById(`note-${i}`)
       const noteContainer = document.createElement('DIV')
-      noteContainer.classList.add('page-footnote-content')
+      noteContainer.classList.add('footnote')
       noteContainer.id = link.id + '-content'
-      noteContainer.innerHTML = this.page.notes.find(note => note.number === i).content
+      noteContainer.appendChild(note)
+      // noteContainer.innerHTML = this.page.notes.find(note => note.number === i).content
       link.insertAdjacentElement('afterend', noteContainer)
     },
 
-    onFootnoteLinkClick (e) {
+    onFootnoteClick (e) {
       const container = document.getElementById(e.target.id + '-content')
       if (container) {
         container.classList.toggle('show')
       }
+    },
+
+    onFootnoteLinkClick (node) {
+      this.$store.dispatch('OPEN_NODE', getRelation(node))
     }
   },
 
   mounted () {
-    if (this.page.notes) this.addFootnotes()
+    if (this.page.notes) {
+      const ids = this.page.notes.filter(note => (note.links)).reduce((ids, note) => {
+        return [...ids, ...note.links.map(link => link.id)]
+      }, [])
+      this.$store.dispatch('GET_NODES', { ids, dataLevel: 'initial' })
+      this.addFootnotes()
+    }
   }
 }
 </script>
@@ -110,6 +165,16 @@ export default {
     }
   }
 
+  img {
+    display: block;
+    max-width: 100%;
+    max-height: 90vh;
+  }
+
+  .page-footnotes {
+    display: none;
+  }
+
   &-footnote-link {
     display: inline-block;
     text-align: center;
@@ -122,7 +187,7 @@ export default {
     border-radius: 1em;
     padding: 0 .5em;
     min-width: 1.25em;
-    max-height: 1.4em;
+    max-height: 1.5em;
     margin: 0 .2em;
 
     &:hover,
@@ -132,7 +197,7 @@ export default {
     }
   }
 
-  &-footnote-content {
+  .footnote {
     background-color: $black;
     color: $white;
     font-size: 1.5rem;
@@ -148,6 +213,14 @@ export default {
     // @include media-breakpoint-up(lg) {
     //   max-width: 50%;
     // }
+    &-child-list {
+      margin-top: 0;
+    }
+
+    &-content + .footnote-child-list {
+      margin-top: 1rem;
+    }
+
 
     &:not(.show) {
       display: none;
@@ -161,5 +234,15 @@ export default {
       margin: 0 0 1em 2em;
     }
   }
+
+  &.small {
+    font-size: 1rem;
+    padding: 0;
+
+    .footnote {
+      font-size: 1rem;
+      padding: $node-card-spacer-y $node-card-spacer-x;
+    }
+  }
 }
 </style>