|
@@ -1,24 +1,34 @@
|
|
|
<template>
|
|
|
<Layout>
|
|
|
<!-- Titre, sous-titre -->
|
|
|
- <div class="blank-page no-folio fill-green"></div>
|
|
|
+ <div class="blank-page no-folio fill-green" />
|
|
|
<div class="v-center grow no-folio">
|
|
|
<!-- <h1 class="pre-title center" v-html="$static.metaData.titreDuProjet" /> -->
|
|
|
<!-- <h2 class="pre-sub-title center" v-html="$static.metaData.sousTitre" /> -->
|
|
|
</div>
|
|
|
- <div class="blank-page no-folio fill-motif-cross-left"></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="column layer-2">
|
|
|
- <div class="bold center" v-for="auteur in $static.metaData.auteurs">
|
|
|
+ <div
|
|
|
+ class="bold center"
|
|
|
+ v-for="auteur in $static.metaData.auteurs"
|
|
|
+ >
|
|
|
{{auteur}}
|
|
|
</div>
|
|
|
<div class="v-center grow">
|
|
|
- <h1 class="main-title center highlight-white" v-html="$static.metaData.titreDuProjet" />
|
|
|
- <h2 class="main-pre-title center highlight-white" v-html="$static.metaData.sousTitre" />
|
|
|
+ <h1
|
|
|
+ class="main-title center highlight-white"
|
|
|
+ v-html="$static.metaData.titreDuProjet"
|
|
|
+ />
|
|
|
+ <h2
|
|
|
+ class="main-pre-title center highlight-white"
|
|
|
+ v-html="$static.metaData.sousTitre"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="center">
|
|
|
<img src="/logo_popsu.png" alt="" style="width:2cm;">
|
|
@@ -26,51 +36,95 @@
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- Page de fond -->
|
|
|
- <div class="column image-cover image-bleed" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'></div>
|
|
|
+ <div
|
|
|
+ class="column image-cover image-bleed"
|
|
|
+ v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'
|
|
|
+ />
|
|
|
+
|
|
|
<!-- Sommaire -->
|
|
|
<div class="column">
|
|
|
<div class="section-title">
|
|
|
Sommaire
|
|
|
</div>
|
|
|
- <div class="column justify-end table-of-content">
|
|
|
- <span v-for="edge in $page.chapters.edges.slice().reverse()" :key="'content'+edge.node.id">
|
|
|
- <a :href="'#chapter'+edge.node.id">{{ edge.node.titre }}</a>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- Page blanche -->
|
|
|
- <div class="blank-page no-folio"></div>
|
|
|
- <!-- Chapitres -->
|
|
|
- <div class="hyphen" v-for="(edge,index) in $page.chapters.edges.slice().reverse()" :key="'chapter'+edge.node.id">
|
|
|
- <h2 v-bind:data-rubrique="edge.node.rubrique" v-bind:id="'chapter'+edge.node.id" class="chapter-title" v-bind:class="{ canbreak: isNotFirst(index) }" >{{ edge.node.titre }}</h2>
|
|
|
- <VueMarkdown lang="fr" class="chapter-content justify">{{edge.node.contenu}}</VueMarkdown>
|
|
|
- </div>
|
|
|
- <!-- Notes de fin de document -->
|
|
|
- <h3 class="section-title canbreak">NOTES</h3>
|
|
|
- <ol v-for="note in footnote">
|
|
|
- <li>{{note}}</li>
|
|
|
- </ol>
|
|
|
- <!-- Pleine pages avant les sections -->
|
|
|
- <div class="column image-cover cover-left green image-bleed" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
|
|
|
- </div>
|
|
|
- <div class="column image-cover cover-right green image-bleed" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
|
|
|
- </div>
|
|
|
- <!-- Page blanche -->
|
|
|
- <div class="blank-page no-folio"></div>
|
|
|
- <!-- Sections -->
|
|
|
- <div class="hyphen" v-for="(edge,index) in $page.sections.edges.slice().reverse()" :key="'section'+edge.node.id">
|
|
|
- <h3 class="section-title" v-bind:class="{ canbreak: isNotFirst(index) }">{{ edge.node.titre }}</h3>
|
|
|
- <VueMarkdown lang="fr" class="section-content justify">{{ edge.node.contenu }}</VueMarkdown>
|
|
|
+ <div class="column justify-end table-of-content">
|
|
|
+ <span
|
|
|
+ v-for="edge in $page.chapters.edges.slice().reverse()"
|
|
|
+ :key="'content'+edge.node.id"
|
|
|
+ >
|
|
|
+ <a :href="'#chapter'+edge.node.id">{{ edge.node.titre }}</a>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <!-- Credits -->
|
|
|
- <div class="credits" v-for="(edge,index) in $page.credits.edges.slice().reverse()" :key="'credits'+edge.node.id">
|
|
|
- <h4>{{ edge.node.role }}</h4>
|
|
|
- <p>{{ edge.node.nom }}</p>
|
|
|
- </div>
|
|
|
- <div class="blank-page no-folio fill-green"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Page blanche -->
|
|
|
+ <div class="blank-page no-folio" />
|
|
|
+
|
|
|
+ <!-- Chapitres -->
|
|
|
+ <div
|
|
|
+ class="hyphen"
|
|
|
+ v-for="(edge,index) in $page.chapters.edges.slice().reverse()"
|
|
|
+ :key="'chapter'+edge.node.id"
|
|
|
+ >
|
|
|
+ <h2
|
|
|
+ v-bind:data-rubrique="edge.node.rubrique"
|
|
|
+ v-bind:id="'chapter'+edge.node.id" class="chapter-title"
|
|
|
+ v-bind:class="{ canbreak: isNotFirst(index) }"
|
|
|
+ >
|
|
|
+ {{ edge.node.titre }}
|
|
|
+ </h2>
|
|
|
+ <VueMarkdown lang="fr" class="chapter-content justify">{{edge.node.contenu}}</VueMarkdown>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Notes de fin de document -->
|
|
|
+ <h3 class="section-title canbreak">NOTES</h3>
|
|
|
+ <ol v-for="note in footnote">
|
|
|
+ <li>{{note}}</li>
|
|
|
+ </ol>
|
|
|
+
|
|
|
+ <!-- Pleine pages avant les sections -->
|
|
|
+ <div
|
|
|
+ class="column image-cover cover-left green image-bleed"
|
|
|
+ v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="column image-cover cover-right green image-bleed"
|
|
|
+ v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- Page blanche -->
|
|
|
+ <div class="blank-page no-folio" />
|
|
|
+
|
|
|
+ <!-- Sections -->
|
|
|
+ <div
|
|
|
+ class="hyphen"
|
|
|
+ v-for="(edge,index) in $page.sections.edges.slice().reverse()"
|
|
|
+ :key="'section'+edge.node.id"
|
|
|
+ >
|
|
|
+ <h3
|
|
|
+ class="section-title"
|
|
|
+ v-bind:class="{ canbreak: isNotFirst(index) }"
|
|
|
+ >
|
|
|
+ {{ edge.node.titre }}
|
|
|
+ </h3>
|
|
|
+ <VueMarkdown lang="fr" class="section-content justify">{{ edge.node.contenu }}</VueMarkdown>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Credits -->
|
|
|
+ <div
|
|
|
+ class="credits"
|
|
|
+ v-for="(edge,index) in $page.credits.edges.slice().reverse()"
|
|
|
+ :key="'credits'+edge.node.id"
|
|
|
+ >
|
|
|
+ <h4>{{ edge.node.role }}</h4>
|
|
|
+ <p>{{ edge.node.nom }}</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="blank-page no-folio fill-green" />
|
|
|
</Layout>
|
|
|
</template>
|
|
|
+
|
|
|
<page-query>
|
|
|
{
|
|
|
chapters : allchapitres{
|
|
@@ -87,6 +141,7 @@
|
|
|
}
|
|
|
}
|
|
|
</page-query>
|
|
|
+
|
|
|
<static-query>
|
|
|
query {
|
|
|
metaData {
|
|
@@ -96,12 +151,11 @@ query {
|
|
|
}
|
|
|
}
|
|
|
</static-query>
|
|
|
+
|
|
|
<script>
|
|
|
import VueMarkdown from 'vue-markdown'
|
|
|
+ import { Previewer } from 'pagedjs'
|
|
|
|
|
|
- import {
|
|
|
- Previewer
|
|
|
- } from 'pagedjs';
|
|
|
export default {
|
|
|
data:function(){
|
|
|
return{
|
|
@@ -125,22 +179,24 @@ query {
|
|
|
this.footnote.push(note.getAttribute("data-note"));
|
|
|
});
|
|
|
this.$nextTick(function () {
|
|
|
- let hyphenopoly = document.createElement('script'),
|
|
|
- hyph = document.createElement('script');
|
|
|
- hyphenopoly.setAttribute('src', 'lib/Hyphenopoly-master/Hyphenopoly_Loader.js')
|
|
|
- hyph.setAttribute('src', 'lib/hyph.js')
|
|
|
- document.head.appendChild(hyph)
|
|
|
- document.head.appendChild(hyphenopoly)
|
|
|
- hyph.onload = ()=>{
|
|
|
- Hyphenopoly.handleEvent = {
|
|
|
- hyphenopolyEnd:(e)=>{
|
|
|
- let previewer = new Previewer();
|
|
|
- previewer.preview();
|
|
|
- document.documentElement.style.cssText = 'visibility:visible !important';
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ // let hyphenopoly = document.createElement('script'),
|
|
|
+ // hyph = document.createElement('script');
|
|
|
+ // hyphenopoly.setAttribute('src', 'lib/Hyphenopoly-master/Hyphenopoly_Loader.js')
|
|
|
+ // hyph.setAttribute('src', 'lib/hyph.js')
|
|
|
+ // document.head.appendChild(hyph)
|
|
|
+ // document.head.appendChild(hyphenopoly)
|
|
|
+ // hyph.onload = ()=>{
|
|
|
+ // Hyphenopoly.handleEvent = {
|
|
|
+ // hyphenopolyEnd:(e)=>{
|
|
|
+ let previewer = new Previewer();
|
|
|
+ console.log('previewer', previewer);
|
|
|
+ previewer.preview();
|
|
|
+ document.documentElement.style.cssText = 'visibility:visible !important';
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|