128 lines
4.4 KiB
Vue
128 lines
4.4 KiB
Vue
<template>
|
|
<Layout>
|
|
<!-- Titre, sous-titre -->
|
|
<div class="blank-page no-folio"></div>
|
|
<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"></div>
|
|
<!-- Auteurs, titre, sous-titre -->
|
|
<div class="column no-folio">
|
|
<div class="bold center" v-for="auteur in $static.metaData.auteurs">
|
|
{{auteur}}
|
|
</div>
|
|
<div class="v-center grow">
|
|
<h1 class="main-title center" v-html="$static.metaData.titreDuProjet" />
|
|
<h2 class="main-pre-title center" v-html="$static.metaData.sousTitre" />
|
|
</div>
|
|
<div class="center">
|
|
Logo popsu
|
|
</div>
|
|
</div>
|
|
<!-- Page de fond -->
|
|
<div class="column image-cover image-bleed-left" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'></div>
|
|
<!-- Sommaire -->
|
|
<div class="column column">
|
|
<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: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 -->
|
|
<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-left" 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-right" 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>
|
|
</Layout>
|
|
</template>
|
|
<page-query>
|
|
{
|
|
chapters : allchapitres{
|
|
edges{node{id,titre,contenu}}
|
|
}
|
|
sections : allsections{
|
|
edges{node{id,titre,contenu}}
|
|
}
|
|
fonds : allfonds{
|
|
edges{node{id,url}}
|
|
}
|
|
}
|
|
</page-query>
|
|
<static-query>
|
|
query {
|
|
metaData {
|
|
titreDuProjet
|
|
sousTitre
|
|
auteurs
|
|
}
|
|
}
|
|
</static-query>
|
|
<script>
|
|
import VueMarkdown from 'vue-markdown'
|
|
|
|
import {
|
|
Previewer
|
|
} from 'pagedjs';
|
|
export default {
|
|
data:function(){
|
|
return{
|
|
footnote:[],
|
|
}
|
|
},
|
|
components: {
|
|
VueMarkdown
|
|
},
|
|
metaInfo: {
|
|
title: 'HTML2print',
|
|
},
|
|
methods:{
|
|
isNotFirst: function(index){
|
|
if(index != 0) return true;
|
|
return false;
|
|
}
|
|
},
|
|
mounted() {
|
|
Array.from(document.querySelectorAll("span[data-note]")).forEach(note=>{
|
|
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';
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|