123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- <template>
- <Layout>
- <div class="blank-page no-folio">
- <!-- Page blanche -->
- </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>
- <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>
- <div class="column image-cover" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'>
- <!-- Page fond 1 -->
- </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>
- <div class="blank-page no-folio">
- <!-- Page blanche -->
- </div>
- <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>
- <div class="blank-page no-folio">
- <!-- Page blanche -->
- </div>
- <!-- Pleine pages avant les sections -->
- <div class="column image-cover cover-left green" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
- <!-- Page fond 2 -->
- </div>
- <div class="column image-cover cover-right green" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
- <!-- Page fond 2 -->
- </div>
- <div class="blank-page no-folio">
- <!-- Page blanche -->
- </div>
- <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';
- import css from '~/css/print.css'
- export default {
- components: {
- VueMarkdown
- },
- metaInfo: {
- title: 'HTML2print',
- },
- methods:{
- isNotFirst: function(index){
- if(index != 0) return true;
- return false;
- }
- },
- mounted() {
- 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)
- // HELP !
- // https://github.com/mnater/Hyphenopoly/blob/master/docs/Events.md#teardown-event
- // L'event fonctionne, mais ça rend une page vierge ᕦ(ò_óˇ)ᕤ
- setTimeout(()=>{
- let previewer = new Previewer();
- previewer.preview()
- },1000)
- })
- }
- }
- </script>
- <style>
- @media screen {
- body {
- background-color: whitesmoke;
- display:flex;
- flex-direction:column;
- align-items:center;
- }
- .pagedjs_pages{
- display:grid;
- grid-row-gap:1cm;
- grid-template-columns: 1fr 1fr;
- }
- .pagedjs_page:first-child{
- grid-column:2;
- }
- .pagedjs_page {
- background-color: #fdfdfd;
- flex: none;
- box-shadow: 0 0 1px rgba(0,0,0,0.2);
- }
- }
- </style>
|