thibaud_goiffon/popsu_html2print
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring, add to remove hyphenation to make it work on firefox

Browse Source 
i beleive that hyphen was messing up with markup
This commit is contained in:
bachir
2019-10-02 12:50:13 +02:00
parent acf94cdc4e
commit 9f1139d9be
2 changed files with 125 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gridsome.server.js
+7 -4
View File
@@ -6,8 +6,8 @@ module.exports = function (api) {
store.addMetaData('sousTitre', 'Récits et échelles de la fabrique institutionnelle métropolitaine de rouen')
store.addMetaData('auteurs', ['Jean Debrie','Xavier Desjardins'])
let data_chapters = await axios.get('https://popsu.strapi.figli.io/chapitres')
// Ajout des chapitres
let data_chapters = await axios.get('https://popsu.strapi.figli.io/chapitres')
const chapterContent = store.addContentType({
typeName: 'chapitres',
})
@@ -19,8 +19,9 @@ module.exports = function (api) {
rubrique: item.rubrique,
})
}
let data_sections = await axios.get('https://popsu.strapi.figli.io/sections')
// Ajout des sections
let data_sections = await axios.get('https://popsu.strapi.figli.io/sections')
const sectionContent = store.addContentType({
typeName: 'sections',
})
@@ -31,8 +32,9 @@ module.exports = function (api) {
contenu: item.contenu,
})
}
let data_fonds = await axios.get('https://popsu.strapi.figli.io/fonds')
// Ajout des fonds
let data_fonds = await axios.get('https://popsu.strapi.figli.io/fonds')
const fondContent = store.addContentType({
typeName: 'fonds',
})
@@ -42,8 +44,9 @@ module.exports = function (api) {
url: item.image.url,
})
}
let data_credits = await axios.get('https://popsu.strapi.figli.io/credits')
// Ajout des crédits
let data_credits = await axios.get('https://popsu.strapi.figli.io/credits')
const creditContent = store.addContentType({
typeName: 'credits',
})
src/pages/Index.vue
+118 -62
View File
@@ -1,24 +1,34 @@
<template>
<Layout>
<!-- Titre, sous-titre -->
<div class="blank-page no-folio fill-green"></div>
<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"></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">
<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" />
<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;">
@@ -26,51 +36,95 @@
</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 + ")", }'></div>
<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 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>
<!-- Page blanche -->
<div class="blank-page no-folio"></div>
<!-- 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>
<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 + ")", }'>
</div>
<!-- Page blanche -->
<div class="blank-page no-folio"></div>
<!-- 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" v-for="(edge,index) in $page.credits.edges.slice().reverse()" :key="'credits'+edge.node.id">
<h4>{{ edge.node.role }}</h4>
<p>{{ edge.node.nom }}</p>
</div>
<div class="blank-page no-folio fill-green"></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"
v-for="(edge,index) in $page.credits.edges.slice().reverse()"
:key="'credits'+edge.node.id"
>
<h4>{{ edge.node.role }}</h4>
<p>{{ edge.node.nom }}</p>
</div>
<div class="blank-page no-folio fill-green" />
</Layout>
</template>
<page-query>
{
chapters : allchapitres{
@@ -87,6 +141,7 @@
}
}
</page-query>
<static-query>
query {
metaData {
@@ -96,12 +151,11 @@ query {
}
}
</static-query>
<script>
import VueMarkdown from 'vue-markdown'
import { Previewer } from 'pagedjs'
import {
Previewer
} from 'pagedjs';
export default {
data:function(){
return{
@@ -125,22 +179,24 @@ query {
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();
previewer.preview();
document.documentElement.style.cssText = 'visibility:visible !important';
}
}
}
})
}
}
// 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>