popsu_html2print/src/pages/Index.vue

<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>{{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 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>