popsu_html2print_Rouen_EN/src/pages/Index.vue

<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>
          <p lang="fr" class="chapter-content" v-html="edge.node.contenu" />
      </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 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>
        <p lang="fr" class="section-content">{{ edge.node.contenu }}</p>
      </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>