automagic images + clean de l'ordre des assets js
This commit is contained in:
Valentin
@@ -0,0 +1,130 @@
|
||||
// fonction s'éxecute après le rendu de pagedJS
|
||||
// cf https://pagedjs.org/documentation/10-handlers-hooks-and-custom-javascript/
|
||||
class setMarginTexts extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
afterPreview(pages) {
|
||||
// afficher correctement les éléments en marge
|
||||
let topLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-top');
|
||||
for (let i = 0; i < topLeftBoxes.length; i++) {
|
||||
topLeftBoxes[i].childNodes[0].style.marginTop = topLeftBoxes[i].childNodes[0].offsetWidth / 2 - topLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
|
||||
}
|
||||
let bottomLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-bottom');
|
||||
for (let i = 0; i < bottomLeftBoxes.length; i++) {
|
||||
bottomLeftBoxes[i].childNodes[0].style.marginBottom = bottomLeftBoxes[i].childNodes[0].offsetWidth / 2 - bottomLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
|
||||
}
|
||||
|
||||
// cleaner pour que les paragraphes tombent sur la marge haute
|
||||
for(let i = 0; i < labeurs.length; i++) {
|
||||
if (labeurs[i] == labeurs[i].parentNode.firstElementChild
|
||||
&& !labeurs[i].firstElementChild.hasAttribute("data-split-from")) {
|
||||
labeurs[i].firstElementChild.style.marginTop = "0px";
|
||||
}
|
||||
}
|
||||
// pareil pour les titres temps
|
||||
for (let i = 0; i < moments.length; i++) {
|
||||
if (moments[i].previousElementSibling?.tagName === "P"
|
||||
&& moments[i].previousElementSibling == moments[i].parentNode.firstElementChild) {
|
||||
moments[i].parentNode.removeChild(moments[i].parentNode.firstElementChild);
|
||||
}
|
||||
}
|
||||
// enlever les paragraphes vides
|
||||
let paragraphes = document.querySelectorAll("p");
|
||||
for (let i = 0; i < paragraphes.length; i++) {
|
||||
if (paragraphes[i].innerHTML == "") {
|
||||
paragraphes[i].remove();
|
||||
}
|
||||
}
|
||||
// images collées en bas
|
||||
let bottomImgs = document.querySelectorAll('.bottomimg, .tripleimgs_bottom, .tripleimgs2_bottom');
|
||||
for (let i = 0; i < bottomImgs.length; i++) {
|
||||
let page = bottomImgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
|
||||
bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].lastElementChild.getBoundingClientRect().bottom) + 'px)';
|
||||
}
|
||||
// éléments justifiés pas nécessaires
|
||||
let justifiedSplitEl = document.querySelectorAll("[data-align-last-split-element='justify']");
|
||||
for (let i = 0; i < justifiedSplitEl.length; i++) {
|
||||
for (let j = 0; j < justifiedSplitEl[i].childNodes.length; j++) {
|
||||
let elStyle = justifiedSplitEl[i].childNodes[j].style;
|
||||
if (elStyle != undefined) {
|
||||
elStyle.textAlignLast = "left";
|
||||
}
|
||||
}
|
||||
}
|
||||
// images fullspread
|
||||
let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright, .imgfullspreadright_bleedtop, .imgfullspreadright_bleed');
|
||||
for (let i = 0; i < fullspreadEl.length; i++) {
|
||||
let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src');
|
||||
let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.pagedjs_page_content');
|
||||
let imgOverflowEl = document.createElement('div');
|
||||
if (fullspreadEl[i].classList.contains('imgfullspreadleft')) {
|
||||
imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
|
||||
} else if (fullspreadEl[i].classList.contains('imgfullspreadright')) {
|
||||
imgOverflowEl.setAttribute('class', 'imgfullspreadright-right');
|
||||
} else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')) {
|
||||
imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleedtop-right');
|
||||
} else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
|
||||
imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleed-right');
|
||||
}
|
||||
let imgOverflow = document.createElement('img');
|
||||
imgOverflow.src = imgSrc;
|
||||
imgOverflowEl.append(imgOverflow);
|
||||
nextPage[0].append(imgOverflowEl);
|
||||
if (fullspreadEl[i].classList.contains('imgfullspreadright')
|
||||
|| fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')
|
||||
|| fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
|
||||
let imgMargin = imgOverflowEl.getBoundingClientRect().right - fullspreadEl[i].firstElementChild.getBoundingClientRect().right;
|
||||
fullspreadEl[i].firstElementChild.style.marginLeft = imgMargin + 'px';
|
||||
}
|
||||
}
|
||||
// fullpage img page gauche
|
||||
let fullPageImg = document.getElementsByClassName('fullpageimage');
|
||||
for (let i = 0; i < fullPageImg.length; i++) {
|
||||
if (fullPageImg[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
|
||||
.classList.contains('pagedjs_left_page')) {
|
||||
fullPageImg[i].style.marginLeft = '-22mm';
|
||||
}
|
||||
}
|
||||
// encarts bleed
|
||||
let encarts = document.querySelectorAll('.latour, .lampe')
|
||||
for (let i = 0; i < encarts.length; i++) {
|
||||
if (encarts[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
|
||||
.classList.contains('pagedjs_right_page')) {
|
||||
encarts[i].style.marginRight = '-22mm';
|
||||
encarts[i].style.paddingRight = '22mm';
|
||||
}
|
||||
if (encarts[i].hasAttribute('data-split-original')) {
|
||||
let plainColor = document.createElement('div');
|
||||
let plainHeight = encarts[i]
|
||||
.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
|
||||
.getBoundingClientRect().bottom - encarts[i].getBoundingClientRect().bottom;
|
||||
plainColor.setAttribute('class', 'encart-split');
|
||||
if (encarts[i]
|
||||
.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
|
||||
.classList.contains('pagedjs_right_page')) {
|
||||
plainColor.style.width = "149mm";
|
||||
} else {
|
||||
plainColor.style.width = "129mm";
|
||||
}
|
||||
plainColor.style.height = plainHeight + "px";
|
||||
encarts[i].parentNode.append(plainColor);
|
||||
} else if (encarts[i].hasAttribute('data-split-from')) {
|
||||
let plainColor = document.createElement('div');
|
||||
plainColor.setAttribute('class', 'encart-split');
|
||||
if (encarts[i]
|
||||
.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
|
||||
.classList.contains('pagedjs_right_page')) {
|
||||
plainColor.style.width = "149mm";
|
||||
} else {
|
||||
plainColor.style.width = "129mm";
|
||||
}
|
||||
plainColor.style.height = "22mm";
|
||||
plainColor.style.top = "-22mm";
|
||||
encarts[i].parentNode.prepend(plainColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Paged.registerHandlers(setMarginTexts);
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,55 @@
|
||||
// transformer les balises [...] en <div class="...">
|
||||
let bodyContent = $('#body').html()
|
||||
.replace(/\[([^\/\]]+)\]/g, '<div class="$1">')
|
||||
.replace(/\[\/([^\]]+)\]/g, '</div>');
|
||||
$('#body').empty().append(bodyContent);
|
||||
|
||||
// isoler les chiffres des titres
|
||||
let moments = document.getElementsByClassName("moment");
|
||||
|
||||
for(let i = 0; i < moments.length; i++) {
|
||||
moments[i].innerHTML = "<span class='first-letter'>" + moments[i].innerHTML.substring(0, moments[i].innerHTML.indexOf('—')) + "</span>" + moments[i].innerHTML.slice(moments[i].innerHTML.indexOf(' —'));
|
||||
}
|
||||
|
||||
// cleaner le balisage des éléments contenant plusieurs paragraphes
|
||||
let contentToParse = [];
|
||||
let labeurs = document.getElementsByClassName("labeur");
|
||||
for(let i = 0; i < labeurs.length; i++) {
|
||||
contentToParse.push(labeurs[i]);
|
||||
}
|
||||
let latours = document.getElementsByClassName("latour");
|
||||
for(let i = 0; i < latours.length; i++) {
|
||||
contentToParse.push(latours[i]);
|
||||
}
|
||||
let lampes = document.getElementsByClassName("lampe");
|
||||
for(let i = 0; i < lampes.length; i++) {
|
||||
contentToParse.push(lampes[i]);
|
||||
}
|
||||
|
||||
for(let i = 0; i < contentToParse.length; i++) {
|
||||
if (contentToParse[i].childNodes.length == 1) {
|
||||
contentToParse[i].innerHTML = '<p>' + contentToParse[i].innerHTML + '</p>';
|
||||
} else {
|
||||
contentToParse[i].innerHTML = "<p>" + contentToParse[i].innerHTML.replace("<p>", "");
|
||||
}
|
||||
// headers latour / lampe
|
||||
if (contentToParse[i].classList.contains("latour")) {
|
||||
contentToParse[i].childNodes[0].innerHTML = "<div class='latour-header'><div><img src='{{ url('theme://assets/map.png') }}' alt='carte'></div><div>" + contentToParse[i].childNodes[0].innerHTML + "</div></div>";
|
||||
} else if (contentToParse[i].classList.contains("lampe")) {
|
||||
contentToParse[i].childNodes[0].innerHTML = "<div class='lampe-header'><div><img src='{{ url('theme://assets/lampe.png') }}' alt='lampe'></div><div>" + contentToParse[i].childNodes[0].innerHTML + "</div></div>";
|
||||
}
|
||||
// micro-typo
|
||||
for(j = 0; j < contentToParse[i].childNodes.length; j++) {
|
||||
let contentHTML = contentToParse[i].childNodes[j].innerHTML;
|
||||
if (contentHTML != undefined) {
|
||||
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' :', ' :');
|
||||
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' ?', ' ?');
|
||||
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' !', ' !');
|
||||
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('« ', '« ');
|
||||
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' »', ' »');
|
||||
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('“', '« ');
|
||||
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('”', ' »');
|
||||
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' min', ' min');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
<link rel="icon" type="image/png" href="{{ url('theme://images/logo.png')|e }}" />
|
||||
<link rel="canonical" href="{{ page.canonical(true)|e }}" />
|
||||
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
|
||||
{# <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script> #}
|
||||
{% endblock head %}
|
||||
|
||||
{% block stylesheets %}
|
||||
@@ -25,6 +25,9 @@
|
||||
|
||||
{% block javascripts %}
|
||||
{% do assets.addJs('jquery', 100) %}
|
||||
{% do assets.addJs('theme://js/parsing.js', { group: 'bottom' }) %}
|
||||
{% do assets.addJs('theme://js/paged.polyfill.js', { group: 'bottom' }) %}
|
||||
{% do assets.addJs('theme://js/layout.js', { group: 'bottom' }) %}
|
||||
{% endblock %}
|
||||
|
||||
{% block assets deferred %}
|
||||
@@ -46,6 +49,7 @@
|
||||
{% block bottom %}
|
||||
{{ assets.js('bottom')|raw }}
|
||||
{% endblock %}
|
||||
{#
|
||||
<script>
|
||||
// transformer les balises [...] en <div class="...">
|
||||
let content = document.getElementById('body');
|
||||
@@ -237,5 +241,6 @@
|
||||
Paged.registerHandlers(setMarginTexts);
|
||||
|
||||
</script>
|
||||
#}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user