thibaud_goiffon/popsu_rouen_strapi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout gestion des images

Browse Source
This commit is contained in:
Tibo
2019-12-23 16:26:12 +01:00
parent 8b639c79a4
commit a814816957
3 changed files with 92 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
param.JSON
-1
View File
@@ -9,7 +9,6 @@
},
"source": "https://popsu-rouen-en.strapi.figli.io/",
"search": [
"images",
"introductions",
"chapitres",
"sections"
src/css/layout.scss
+6 -1
View File
@@ -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
+86 -81
View File
@@ -1,114 +1,119 @@
<template>
<Layout>
<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}}
<!-- 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 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 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 class="column layer-2">
<div class="bold center" v-for="auteur in $static.metadata.authors">
{{auteur}}
</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="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>
<!-- Page de fond -->
<div
class="column image-cover image-bleed"
v-bind:style='{ backgroundImage: `url()`, }'
/>
<!-- Sommaire -->
</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 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>