Ajout gestion des images

param.JSON

@@ -9,7 +9,6 @@
   },
   "source": "https://popsu-rouen-en.strapi.figli.io/",
   "search": [
-    "images",
     "introductions",
     "chapitres",
     "sections"

src/css/layout.scss

@@ -62,7 +62,12 @@
 .canbreak {
   page-break-before: always;
 }
-
+.breakBefore{
+  page-break-before: always;
+}
+.breakAfter{
+  page-break-after: always;
+}
 .v-center {
   display: flex;
   flex-direction: column;

src/pages/Index.vue

@@ -1,12 +1,10 @@
 <template>
-  <Layout>
+<Layout>
 
   <!-- Mise en page -->
   <!-- introductions -->
   <div v-for="edge in $page.introductions.edges.slice().reverse()" :key="`introductions${edge.node.id}`">
-      <VueMarkdown
+    <VueMarkdown class="chapter-content justify">{{edge.node.contenu}}
-      class="chapter-content justify"
-      >{{edge.node.contenu}}
     </VueMarkdown>
   </div>
 
@@ -17,21 +15,12 @@
 
     </div>
     <div class="column layer-2">
-        <div
+      <div class="bold center" v-for="auteur in $static.metadata.authors">
-          class="bold center"
-          v-for="auteur in $static.metadata.authors"
-        >
         {{auteur}}
       </div>
       <div class="v-center grow">
-          <h1
+        <h1 class="main-title center highlight-white" v-html="$static.metadata.title" />
-            class="main-title center highlight-white"
+        <h2 class="main-pre-title center highlight-white" v-html="$static.metadata.subtitle" />
-            v-html="$static.metadata.title"
-          />
-          <h2
-            class="main-pre-title center highlight-white"
-            v-html="$static.metadata.subtitle"
-          />
       </div>
       <div class="center">
         <img src="/logo_popsu.png" alt="" style="width:2cm;">
@@ -40,10 +29,7 @@
     </div>
   </div>
   <!-- Page de fond -->
-    <div
+  <div class="column image-cover image-bleed" v-bind:style='{ backgroundImage: `url()`, }' />
-      class="column image-cover image-bleed"
-      v-bind:style='{ backgroundImage: `url()`, }'
-    />
   <!-- Sommaire -->
 
   <div class="column no-folio">
@@ -51,10 +37,7 @@
       Sommaire
     </div>
     <div class="column justify-end table-of-content">
-        <span
+      <span v-for="edge in $page.chapitres.edges.slice().reverse()" :key="`sommaire${edge.node.id}`">
-          v-for="edge in $page.chapitres.edges.slice().reverse()"
-          :key="`sommaire${edge.node.id}`"
-        >
         <a :href="'#chapitres'+edge.node.id">{{ edge.node.Titre }}</a>
       </span>
     </div>
@@ -63,13 +46,8 @@
   <!-- Chapitres -->
 
   <div v-for="edge in $page.chapitres.edges.slice().reverse()" :key="`chapitre${edge.node.id}`">
-      <h2
+    <h2 :id="`chapitres${edge.node.id}`" class="chapter-title canbreak">{{edge.node.Titre}}</h2>
-      :id="`chapitres${edge.node.id}`"
+    <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
-      class="chapter-title canbreak"
-      >{{edge.node.Titre}}</h2>
-      <VueMarkdown
-      class="chapter-content justify"
-      >{{edge.node.Contenu}}
     </VueMarkdown>
   </div>
 
@@ -82,33 +60,60 @@
 
 
   <div v-for="edge in $page.sections.edges.slice().reverse()" :key="`section${edge.node.id}`">
-      <h2
+    <h2 :id="`chapitres${edge.node.id}`" class="section-title canbreak">{{edge.node.Titre}}</h2>
-      :id="`chapitres${edge.node.id}`"
+    <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
-      class="section-title canbreak"
-      >{{edge.node.Titre}}</h2>
-      <VueMarkdown
-      class="chapter-content justify"
-      >{{edge.node.Contenu}}
     </VueMarkdown>
   </div>
 
 
-  </Layout>
+</Layout>
 </template>
 
 <script>
-import { Previewer } from 'pagedjs'
+const axios = require('axios'),
+  path = require('path'),
+  param = require(`../../param.JSON`);
+
+import {
+  Previewer
+} from 'pagedjs'
 import VueMarkdown from 'vue-markdown'
 
 export default {
   components: {
     VueMarkdown
   },
-  mounted(){
+  mounted() {
-    this.$nextTick(()=>{
+    let docImages = Array.from(
+      document.querySelectorAll("img")
+    )
+    let toLoad = docImages.filter(img => img.alt === "insert");
+
+    let imgSource;
+    axios.get(path.join(param.source, "images")).then(r => {
+      imgSource = r.data;
+      let allPromises = [];
+      toLoad.forEach(img => {
+        let img_id = img.src.split("/").pop();
+        let found = imgSource.find(element => element.id == img_id);
+        img.src = path.join(param.source, found.images.url);
+        let promise = new Promise((resolve, reject) => {
+          img.onload = function() {
+            let legend = document.createElement("p");
+            legend.classList.add("breakAfter");
+            img.parentNode.classList.add("breakBefore");
+            legend.innerHTML = found.legende;
+            img.parentNode.insertBefore(legend, img.nextSibling);
+            resolve();
+          }
+        });
+        allPromises.push(promise);
+      });
+      Promise.all(allPromises).then(() => {
         let previewer = new Previewer();
         previewer.preview();
-    })
+      });
+    });
   }
 }
 </script>