display images, videos & files in text body

src/components/nodes/NodeViewBody.vue

@@ -5,13 +5,39 @@
   >
     <slot name="default">
       <node-view-figure
-        v-if="mode === 'view' && type === 'prod' && node.title"
+        v-if="mode === 'view' && type === 'prod' && node.image"
         @expand-image="image = $event"
         :node="node"
       />
 
       <div class="node-view-body-wrapper" v-html="node.content" />
 
+      <template v-if="mode === 'view'">
+        <div v-if="node.images" class="mt-5">
+          <div class="node-view-img-wrapper mt-3" v-for="img in node.images" :key="img.id">
+            <img :src="img.url" :alt="img.alt">
+            <button-expand @click="onImageExpandClick(img)" v-b-modal="'modal-image-' + node.id" />
+          </div>
+        </div>
+
+        <div v-if="node.videos">
+          <video
+            v-for="video in node.videos" :key="video.url"
+            :src="video.url" class="mt-3"
+          />
+        </div>
+
+        <ul v-if="node.files">
+          <h6>Fichiers:</h6>
+
+          <li v-for="file in node.files" :key="file.fid">
+            <b-button variant="dark" :href="file.url">
+              {{ file.filename }}
+            </b-button>
+          </li>
+        </ul>
+      </template>
+
       <fullscreen-modal v-if="mode === 'view' && image" :image="image" :id="'modal-image-' + node.id" />
 
       <template v-if="mode === 'view'">
@@ -112,14 +138,18 @@ export default {
         cloneImg.setAttribute('alt', image.alt)
         cloneImg.setAttribute('id', image.id)
         clone.querySelector('button').onclick = () => {
-          this.image = image
+          this.onImageExpandClick(image)
-          this.$bvModal.show('modal-image-' + this.node.id)
         }
 
         img.parentElement.replaceWith(clone)
       })
     },
 
+    onImageExpandClick (image) {
+      this.image = image
+      this.$bvModal.show('modal-image-' + this.node.id)
+    },
+
     onFootnoteLinkClick (node, popoverBtnId) {
       this.$root.$emit('bv::hide::popover', popoverBtnId)
       this.$parent.$emit('open-node', getRelation(node))

src/components/nodes/NodeViewFigure.vue

@@ -1,7 +1,7 @@
 <template>
   <figure class="node-view-figure mt-2 mb-4">
     <div class="node-view-img-wrapper">
-      <img :src="image.url" :alt="image.alt">
+      <img :src="node.image.url" :alt="node.image.alt">
 
       <button-expand @click="onImageExpand" v-b-modal="'modal-image-' + node.id" />
       <b-button variant="creation" class="btn-shadow btn-artwork" @click="onCreationClick">
@@ -31,29 +31,16 @@ export default {
     node: { type: Object, required: true }
   },
 
-  data () {
-    return {
-      image: undefined
-    }
-  },
-
   methods: {
     trim,
     toCommaList,
 
     onImageExpand () {
-      this.$emit('expand-image', this.image)
+      this.$emit('expand-image', this.node.image)
     },
 
     onCreationClick () {
-      this.$store.dispatch('OPEN_CREATION', this.node.id)
+      this.$store.dispatch('OPEN_CREATION', { id: this.node.id, map: false })
-    }
-  },
-
-  created () {
-    if (this.node.images && this.node.images.length) {
-      const { url, alt, id } = this.node.images[0]
-      this.image = { alt, id, url }
     }
   }
 }

src/pages/Gallery.vue

@@ -111,7 +111,7 @@ export default {
 
   methods: {
     openCreation (id, hideSideView) {
-      this.$store.dispatch('OPEN_CREATION', id)
+      this.$store.dispatch('OPEN_CREATION', { id })
       if (hideSideView) hideSideView()
     },
 

src/store/modules/gallery.js

@@ -15,7 +15,7 @@ export default {
     async 'INIT_GALLERY' ({ state, commit, dispatch, getters }, id) {
       const ids = await dispatch('GET_ALL_NODES_IDS', { variant: 'creation', dataLevel: 'full' })
       if (isNaN(id)) {
-        dispatch('OPEN_CREATION', ids[ids.length - 1])
+        dispatch('OPEN_CREATION', { id: ids[ids.length - 1] })
       } else {
         dispatch('DISPLAY_CREATION', id)
       }
@@ -27,9 +27,9 @@ export default {
       commit('ADD_HISTORY_ENTRIES', [id])
     },
 
-    async 'OPEN_CREATION' ({ state, commit, dispatch }, id) {
+    async 'OPEN_CREATION' ({ state, commit, dispatch }, { id, map = true }) {
       if (router.currentRoute.name !== 'gallery-view') {
-        router.push({ name: 'gallery-view', params: { id }, hash: '#map' })
+        router.push({ name: 'gallery-view', params: { id }, hash: map ? '#map' : '' })
       } else {
         router.push({ params: { id } })
       }