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,114 +1,119 @@
 <template>
-  <Layout>
-
-    <!-- Mise en page -->
-    <!-- introductions -->
-    <div v-for="edge in $page.introductions.edges.slice().reverse()" :key="`introductions${edge.node.id}`">
-      <VueMarkdown
-      class="chapter-content justify"
-      >{{edge.node.contenu}}
-    </VueMarkdown>
-    </div>
+<Layout>
 
-    <div class="blank-page no-folio fill-motif-cross-left" />
-    <!-- Auteurs, titre, sous-titre -->
-    <div class="column no-folio">
-      <div class="fill-motif-cross-right layer-1">
+  <!-- Mise en page -->
+  <!-- introductions -->
+  <div v-for="edge in $page.introductions.edges.slice().reverse()" :key="`introductions${edge.node.id}`">
+    <VueMarkdown class="chapter-content justify">{{edge.node.contenu}}
+    </VueMarkdown>
+  </div>
 
-      </div>
-      <div class="column layer-2">
-        <div
-          class="bold center"
-          v-for="auteur in $static.metadata.authors"
-        >
-          {{auteur}}
-        </div>
-        <div class="v-center grow">
-          <h1
-            class="main-title center highlight-white"
-            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;">
-        </div>
+  <div class="blank-page no-folio fill-motif-cross-left" />
+  <!-- Auteurs, titre, sous-titre -->
+  <div class="column no-folio">
+    <div class="fill-motif-cross-right layer-1">
 
-      </div>
     </div>
-    <!-- Page de fond -->
-    <div
-      class="column image-cover image-bleed"
-      v-bind:style='{ backgroundImage: `url()`, }'
-    />
-    <!-- Sommaire -->
-
-    <div class="column no-folio">
-      <div class="section-title">
-        Sommaire
+    <div class="column layer-2">
+      <div class="bold center" v-for="auteur in $static.metadata.authors">
+        {{auteur}}
+      </div>
+      <div class="v-center grow">
+        <h1 class="main-title center highlight-white" v-html="$static.metadata.title" />
+        <h2 class="main-pre-title center highlight-white" v-html="$static.metadata.subtitle" />
       </div>
-      <div class="column justify-end table-of-content">
-        <span
-          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 class="center">
+        <img src="/logo_popsu.png" alt="" style="width:2cm;">
       </div>
+
+    </div>
+  </div>
+  <!-- Page de fond -->
+  <div class="column image-cover image-bleed" v-bind:style='{ backgroundImage: `url()`, }' />
+  <!-- Sommaire -->
+
+  <div class="column no-folio">
+    <div class="section-title">
+      Sommaire
+    </div>
+    <div class="column justify-end table-of-content">
+      <span 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>
+  </div>
 
-    <!-- Chapitres -->
+  <!-- Chapitres -->
 
-    <div v-for="edge in $page.chapitres.edges.slice().reverse()" :key="`chapitre${edge.node.id}`">
-      <h2
-      :id="`chapitres${edge.node.id}`"
-      class="chapter-title canbreak"
-      >{{edge.node.Titre}}</h2>
-      <VueMarkdown
-      class="chapter-content justify"
-      >{{edge.node.Contenu}}
+  <div v-for="edge in $page.chapitres.edges.slice().reverse()" :key="`chapitre${edge.node.id}`">
+    <h2 :id="`chapitres${edge.node.id}`" class="chapter-title canbreak">{{edge.node.Titre}}</h2>
+    <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
     </VueMarkdown>
-    </div>
+  </div>
 
-    <!-- Page blanche -->
+  <!-- Page blanche -->
 
-    <div class="blank-page no-folio" />
+  <div class="blank-page no-folio" />
 
 
-    <!-- Sections -->
+  <!-- Sections -->
 
 
-    <div v-for="edge in $page.sections.edges.slice().reverse()" :key="`section${edge.node.id}`">
-      <h2
-      :id="`chapitres${edge.node.id}`"
-      class="section-title canbreak"
-      >{{edge.node.Titre}}</h2>
-      <VueMarkdown
-      class="chapter-content justify"
-      >{{edge.node.Contenu}}
+  <div v-for="edge in $page.sections.edges.slice().reverse()" :key="`section${edge.node.id}`">
+    <h2 :id="`chapitres${edge.node.id}`" class="section-title canbreak">{{edge.node.Titre}}</h2>
+    <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
     </VueMarkdown>
-    </div>
+  </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(){
-    this.$nextTick(()=>{
-      let previewer = new Previewer();
-      previewer.preview();
-    })
+  mounted() {
+    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>