popsu_html2print_Rouen_EN/src/pages/Index.vue

<template>
  <Layout>

    <!-- Titre, sous-titre -->
    <div class="blank-page no-folio fill-green" />
    <div class="v-center grow no-folio">
      <p class="intro">Créée en 2019, la collection « Les cahiers POPSU » de la Plateforme</br>
d’observation des projets et stratégies urbaines rassemble les connaissances produites au fil des travaux de recherche-action menés dans le cadre du programme POPSU Métropoles, pour en assurer la diffusion dans les milieux
        de la recherche et auprès des élus, des professionnels des territoires ainsi que
du grand public.</br></br>
        Ces travaux sont menés, dans chacune des métropoles partenaires, par un consortium de chercheurs, d’élus, de praticiens et de tiers parties-prenantes,
qui réalisent ensemble des recherches permettant d’éclairer les politiques publiques et les évolutions des métropoles. Il s’agit en particulier d’interroger les interdépendances entre celles-ci et d’autres territoires et d’étudier la manière dont elles engagent les transitions écologiques, sociales et démocratiques.
      </p>

      <!-- <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 no-folio">
      <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>