mount expand button on inline body images

src/components/nodes/NodeViewBody.vue

@@ -4,12 +4,14 @@
     :class="['node-view-body-' + mode, 'node-view-body-' + type]"
   >
     <slot name="default">
-      <div class="node-view-body-wrapper" v-html="content" />
+      <div class="node-view-body-wrapper" v-html="node.content" />
+
+      <fullscreen-modal v-if="image" :image="image" :id="'modal-image-' + node.id" />
 
       <b-popover
-        v-for="note in notes" :key="note.number"
+        v-for="note in node.notes" :key="note.number"
         custom-class="footnote"
-        :target="'note-' + note.number" :container="`node-${mode}-${nodeId}`"
+        :target="'note-' + note.number" :container="`node-${mode}-${node.id}`"
         placement="top" :fallback-placement="['bottom', 'right', 'left']"
         :triggers="['focus']"
       >
@@ -49,13 +51,17 @@ export default {
   },
 
   props: {
-    content: { type: String, default: null },
-    notes: { type: Array, default: null },
-    nodeId: { type: Number, required: true },
+    node: { type: Object, required: true },
     type: { type: String, required: true },
     mode: { type: String, required: true }
   },
 
+  data () {
+    return {
+      image: { id: '', url: '', alt: '' }
+    }
+  },
+
   methods: {
     addFootnotes () {
       const links = this.$el.querySelectorAll('a')
@@ -73,6 +79,25 @@ export default {
       })
     },
 
+    mountMedias () {
+      const template = document.getElementById('expand-image-tmp')
+      this.$el.querySelectorAll('.node-view-body-wrapper img').forEach(img => {
+        const image = { id: img.dataset.entityUuid, url: img.src, alt: img.alt }
+
+        const clone = document.importNode(template.content, true)
+        const cloneImg = clone.querySelector('img')
+        cloneImg.setAttribute('src', image.url)
+        cloneImg.setAttribute('alt', image.alt)
+        cloneImg.setAttribute('id', image.id)
+        clone.querySelector('button').onclick = () => {
+          this.image = image
+          this.$bvModal.show('modal-image-' + this.node.id)
+        }
+
+        img.parentElement.replaceWith(clone)
+      })
+    },
+
     onFootnoteLinkClick (node, popoverBtnId) {
       this.$root.$emit('bv::hide::popover', popoverBtnId)
       this.$parent.$emit('open-node', getRelation(node))
@@ -80,9 +105,9 @@ export default {
   },
 
   created () {
-    if (this.mode === 'view' && this.notes) {
+    if (this.mode === 'view' && this.node.notes) {
       // Query partial data for linked nodes in notes
-      const ids = this.notes.filter(note => (note.links)).reduce((ids, note) => {
+      const ids = this.node.notes.filter(note => (note.links)).reduce((ids, note) => {
         return [...ids, ...note.links.map(link => link.id)]
       }, [])
       this.$store.dispatch('GET_NODES', { ids, dataLevel: 'initial' })
@@ -90,8 +115,12 @@ export default {
   },
 
   mounted () {
-    if (this.mode === 'view' && this.notes) this.addFootnotes()
-    this.$el.querySelectorAll('img, video, audio').forEach(elem => elem.parentElement.classList.add('media-container'))
+    if (this.mode === 'view') {
+      if (this.node.notes) {
+        this.addFootnotes()
+      }
+      this.mountMedias()
+    }
   }
 }
 </script>