mount expand button on inline body images

public/index.html

@@ -11,6 +11,19 @@
     <noscript>
       <strong>Désolé mais ce site ne fonctionnera pas sans JavaScript activé. Réactivez-le afin de visiter ce site.</strong>
     </noscript>
+
     <div id="app"></div>
+
+    <template id="expand-image-tmp">
+      <div class="node-view-img-wrapper">
+        <img>
+
+        <button aria-label="Agrandir" type="button" class="btn btn-expand btn-depart rounded-pill">
+          <svg aria-hidden="true" viewBox="0 0 75 70">
+            <path d="M20,30 v-10 h10 M45,20 h10 v10 M55,40 v10 h-10 M30,50 h-10 v-10" />
+          </svg>
+        </button>
+      </div>
+    </template>
   </body>
 </html>

src/assets/scss/app.scss

@@ -6,6 +6,7 @@
 
 @import 'base/bootstrap-overrides';
 @import 'classes/nodes-grid';
+@import 'classes/img-wrapper';
 @import 'classes/misc';
 
 @import 'fonts/noto-sans';

src/assets/scss/classes/_img-wrapper.scss

@@ -0,0 +1,42 @@
+.node-view-img-wrapper {
+  display: inline-block;
+  position: relative;
+
+  &:not(:hover) .btn-expand {
+    display: none;
+  }
+
+  .btn-expand {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    padding: 0;
+    width: 75px;
+    height: 70px;
+    border: 0;
+    border-radius: 0 !important;
+    line-height: 0;
+
+    &:hover,
+    &:focus {
+      path {
+        stroke: $black;
+      }
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    path {
+      fill: none;
+      stroke: lighten($black, 20%);
+      stroke-width: 4px;
+      stroke-linejoin: round;
+      stroke-linecap: round;
+    }
+  }
+}

src/components/nodes/NodeView.vue

@@ -10,7 +10,7 @@
         class="node-view-header"
       />
 
-      <node-view-body v-bind="{ content: node.content, nodeId: node.id, notes: node.notes, type: nodeType, mode }" />
+      <node-view-body v-bind="{ node, type: nodeType, mode }" />
 
       <node-view-footer
         v-bind="{ node, mode, type: nodeType, preview, showOrigin }"

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>

src/components/nodes/NodeViewFooter.vue

@@ -31,7 +31,7 @@
                   @open-node="onOpenSibling(sibling.id, 'siblings-' + node.id)"
                 />
                 <node-view-body
-                  v-bind="{ content: sibling.content, nodeId: sibling.id, type: sibling.type || 'ref', mode: 'card' }"
+                  v-bind="{ node: sibling, type: sibling.type || 'ref', mode: 'card' }"
                 />
                 <div class="tags mb-n2 mt-2" v-if="sibling.tags">
                   <b-badge

src/pages/_partials/NodesHistory.vue

@@ -132,7 +132,7 @@ export default {
       position: absolute !important;
       bottom: 0;
       right: 2rem;
-      z-index: 9999;
+      z-index: 1035;
     }
   }
 

src/store/nodes.js

@@ -34,6 +34,10 @@ export default {
       function addNode (node, level) {
         const stateNode = node.id in state.nodes ? state.nodes[node.id] : undefined
 
+        if (node.type === 'Creation') {
+          node.variant = [{ id: 0 }]
+        }
+
         if ('creations' in node) {
           if (node.creations) {
             if (!Array.isArray(node.children)) {