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>

src/pages/Gallery.vue

@@ -28,7 +28,11 @@
 
     <side-view id="gallery-index" right>
       <template #default="{ hide }">
-        <div class="gallery-intro" v-html="intro" />
+        <page-view
+          v-if="intro"
+          :page="intro" no-close slug="intro"
+          class="small"
+        />
 
         <ul v-if="creations">
           <li v-for="crea in creations" :key="crea.id">
@@ -79,7 +83,7 @@
 import { mapGetters } from 'vuex'
 
 import { getRelation } from '@/store/utils'
-import { SideView } from '@/components/layouts'
+import { PageView, SideView } from '@/components/layouts'
 import { NodeViewTitle } from '@/components/nodes'
 import { GalleryView, GalleryMap } from '@/pages/gallery'
 
@@ -88,6 +92,7 @@ export default {
   name: 'Gallery',
 
   components: {
+    PageView,
     SideView,
     GalleryView,
     GalleryMap,
@@ -100,7 +105,7 @@ export default {
 
   data () {
     return {
-      intro: '',
+      intro: null,
       mapIsVisible: false
     }
   },
@@ -132,7 +137,7 @@ export default {
     }
     this.$store.dispatch('INIT_GALLERY', parseInt(this.id))
     this.$store.dispatch('QUERY_PAGE', 'gallery').then(page => {
-      this.intro = page.content
+      this.intro = page
     })
   }
 }

src/pages/_partials/MainHeader.vue

@@ -126,6 +126,7 @@ export default {
 
     .dropdown-menu {
       border: 0;
+      z-index: 1500;
 
       .dropdown-item {
         padding: .25rem $header-spacer-sm;

src/pages/kit/KitList.vue

@@ -6,7 +6,11 @@
   >
     <div class="kit-list-wrapper">
       <header class="kit-list-header">
-        <div class="kit-list-header-intro" v-html="intro" />
+        <page-view
+          v-if="intro"
+          :page="intro" no-close slug="intro"
+          class="small"
+        />
 
         <search-input v-model="search" class="input-search" />
       </header>
@@ -27,6 +31,7 @@
 import { mapGetters } from 'vuex'
 
 import { NodeView } from '@/components/nodes'
+import { PageView } from '@/components/layouts'
 import { SearchInput } from '@/components/formItems'
 import { searchInNode } from '@/store/utils'
 
@@ -36,6 +41,7 @@ export default {
 
   components: {
     NodeView,
+    PageView,
     SearchInput
   },
 
@@ -45,7 +51,7 @@ export default {
   data () {
     return {
       search: '',
-      intro: ''
+      intro: null
     }
   },
 
@@ -68,7 +74,7 @@ export default {
   async created () {
     this.$store.dispatch('INIT_KIT')
     this.$store.dispatch('QUERY_PAGE', 'kit').then(page => {
-      this.intro = page.content
+      this.intro = page
     })
   }
 }

src/store/modules/pages.js

@@ -43,6 +43,7 @@ export default {
     async 'QUERY_PAGE' ({ state, commit, dispatch, getters }, slug) {
       if (state[slug] !== undefined) return state[slug]
       return api.query(Page, { id: state.ids[slug] }).then(data => {
+        dispatch('PARSE_PAGE', data.page)
         commit('SET_PAGE', { slug, page: data.page })
         return state[slug]
       })
@@ -67,6 +68,22 @@ export default {
         commit('SET_BURGER', burger)
         return burger
       })
+    },
+
+    'PARSE_PAGE' ({ rootState }, node) {
+      if (node.notes) {
+        node.notes.forEach(note => {
+          if (note.links && note.links.length) {
+            note.links = note.links.map(link => {
+              if (!(link.id in rootState.nodes) || rootState.nodes[link.id].dataLevel < 1) {
+                this.commit('ADD_NODES', [[link], -1])
+              }
+              return rootState.nodes[link.id]
+            })
+          }
+        })
+      }
+      return node
     }
   },