123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- <template>
- <Layout>
- <!-- Titre, sous-titre -->
- <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" />
- <!-- 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"
- >
- {{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"
- />
- </div>
- <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(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" />
- <!-- 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>
- <VueMarkdown
- lang="fr"
- >{{note}}</VueMarkdown>
- </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 canbreak">
- <h3 class="section-title">Crédits</h3>
- <div
- class="credit"
- v-for="(edge,index) in $page.credits.edges.slice().reverse()"
- :key="'credits'+edge.node.id"
- >
- <h4>{{ edge.node.role }}</h4>
- <VueMarkdown lang="fr" class="section-content">{{ edge.node.nom }}</VueMarkdown>
- </div>
- </div>
- <div class="blank-page no-folio fill-green" />
- </Layout>
- </template>
- <page-query>
- {
- chapters : allchapitres{
- edges{node{id,titre,contenu,rubrique}}
- }
- sections : allsections{
- edges{node{id,titre,contenu}}
- }
- fonds : allfonds{
- edges{node{id,url}}
- }
- credits : allcredits{
- edges{node{id,nom,role}}
- }
- }
- </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();
- console.log('previewer', previewer);
- previewer.preview();
- document.documentElement.style.cssText = 'visibility:visible !important';
- // }
- // }
- // }
- })
- }
- }
- </script>
|