valentin_le_moign/carnet_atterrissage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

page titre et loader

Browse Source
This commit is contained in:
Valentin
2023-07-07 06:19:13 +02:00
parent 24c2cfc2f9
commit 0c1f3d9e91
11 changed files with 153 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+40 -2
View File
@@ -1,5 +1,32 @@
## Usage
### Hiérarchie
* Niveau 1 : Parties dégradés
* Niveau 2 : Ateliers
* Niveau 3 : Contenus
### Images couverture atelier
Ajouter les images dans l'article dont le nom est celui de l'atelier (un niveau au dessus du contenu).
![cover-atelier](screenshots/cover-atelier.png)
## Balises
```
[nombalise]
Contenu
Quam et qui corrupti dolor nisi.
Accusantium voluptas modi dolorum ut officiis vel rerum officiis.
[/nombalise]
```
### TEXTE
`[labeur]`
@@ -21,6 +48,9 @@
### IMAGES
`[smallimg]`
![smallimg](screenshots/smallimg.png)
`[fullpage2imgs]`
![fullpage2imgs](screenshots/fullpage2imgs.png)
@@ -56,8 +86,10 @@
### BREAK-PAGE
Pas d'élément avant le bloc : `[breakbefore]...[/breakbefore]`
Pas d'élément après le bloc : `[breakafter]...[/breakafter]`
Pas d'élément avant le bloc : `[breakbefore][/breakbefore]`
Pas d'élément après le bloc : `[breakafter][/breakafter]`
## Deploy
@@ -76,6 +108,12 @@ Pas d'élément après le bloc : `[breakafter]...[/breakafter]`
## Bug
* pb avec la balise breakbefore/after (par exemple dans un labeur)
* pb marge top encart début de page
* pb fond bottom encart plusieurs pages
* admin édition de page bug à la sauvegarde
** sauvegarde quand même les modifications
** se résoud en passant en mode d'édition expert
screenshots/cover-atelier.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

screenshots/smallimg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 KiB

user/config/versions.yaml
+2
View File
@@ -12,3 +12,5 @@ core:
- { version: 1.7.41.2, date: '2023-06-09 12:27:36' }
- { version: 1.7.42.1, date: '2023-06-28 17:43:18' }
- { version: 1.7.42.1, date: '2023-06-28 22:41:44' }
- { version: 1.7.42.1, date: '2023-07-06 22:48:42' }
- { version: 1.7.42.1, date: '2023-07-06 23:08:22' }
user/data/flex/indexes/pages.json
+1 -1
View File
File diff suppressed because one or more lines are too long
user/data/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml
+1 -1
View File
@@ -1,4 +1,4 @@
last_checked: 1688674229
last_checked: 1688702555
data:
feed:
-
user/themes/carnet-atterrissage/css/mep_carnet.css
+42 -4
View File
@@ -67,6 +67,9 @@
body {
font-family: 'Public';
overflow: hidden;
opacity: 0.3;
transition: opacity 0.3s ease-out;
}
h2 {
@@ -74,7 +77,29 @@ h2 {
}
h3 {
color: red;
break-before: left;
font-family: 'Ortica';
font-weight: lighter;
color: var(--ocre);
font-size: 28pt;
line-height: 1.3;
}
h3 .gros-chiffre {
font-size: 54pt;
font-family: 'Ortica';
font-weight: bold;
margin-bottom: -5mm;
}
h4 {
break-before: left;
margin-top: 0;
font-size: 16pt;
line-height: 1.1;
color: black;
font-family: 'Ortica';
font-weight: bold;
}
.breakbefore {
@@ -94,9 +119,6 @@ h3 {
}
.moment:first-of-type {
break-before: left;
}
.moment .first-letter {
font-size: 18pt;
@@ -189,10 +211,26 @@ h3 {
padding-bottom: 3mm;
}
.bibliographie {
width: 47%;
line-height: 12pt;
font-size: 9pt;
font-weight: bold;
color: var(--ocre);
}
img {
width: 100%;
}
.imgsmall {
padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
}
.imgsmall img {
width: 100%;
}
.fullpage2imgs {
width: 130mm;
height: 210mm;
user/themes/carnet-atterrissage/fonts/fonts.css
+1 -1
View File
@@ -38,6 +38,6 @@
@font-face {
font-family: 'Ortica';
src: url('Ortica/OrticaLinear-Light.woff2'), format('woff2');
font-weight: light;
font-weight: lighter;
}
user/themes/carnet-atterrissage/js/layout.js
+53
View File
@@ -125,6 +125,59 @@ class setMarginTexts extends Paged.Handler {
encarts[i].parentNode.prepend(plainColor);
}
}
// TITRES
let h3s = document.querySelectorAll('h3');
for (let h3 of h3s) {
if (h3.nextSibling.firstChild.tagName == "IMG") {
h3.style.position = "absolute";
h3.style.top = "40%";
h3.nextSibling.style.position = "absolute";
h3.nextSibling.style.top = "5%";
}
if (h3.closest('.pagedjs_page').nextElementSibling.querySelector('.has-children ')?.firstChild.firstChild.firstChild.tagName == "IMG") {
let coverImg = h3.closest('.pagedjs_page').nextElementSibling.querySelector('.has-children ').firstChild.childNodes[0];
coverImg.style.position = "absolute";
coverImg.style.top = "-22mm";
coverImg.style.left = "96mm";
coverImg.style.height = "220mm";
coverImg.style.width = "53mm";
coverImg.style.overflow = "hidden";
coverImg.firstChild.style.height = "100%";
coverImg.firstChild.style.width = "auto";
console.log(coverImg);
h3.parentElement.append(coverImg);
let nextImg = document.createElement('img');
nextImg.setAttribute('src', coverImg.firstChild.getAttribute('src'));
h3.closest('.pagedjs_page').nextElementSibling.querySelector('.has-children ').append(nextImg);
nextImg.parentElement.style.position = "absolute";
nextImg.parentElement.style.top = "-22mm";
nextImg.parentElement.style.left = "-8mm";
nextImg.parentElement.style.height = "220mm";
nextImg.parentElement.style.width = "171mm";
nextImg.parentElement.style.overflow = "hidden";
nextImg.style.height = "100%";
nextImg.style.width = "auto";
nextImg.style.marginLeft = "-53mm";
}
h3.closest('.pagedjs_pagebox').querySelector('.pagedjs_margin-left').innerHTML = '';
}
let h4s = document.querySelectorAll('h4');
for (let h4 of h4s) {
if (h4.nextElementSibling?.classList.contains('bibliographie')) {
h4.style.color = "#d98a29";
}
}
// loading
document.querySelector('body').style.opacity = "1";
document.querySelector('body').style.overflow = "scroll";
}
}
Paged.registerHandlers(setMarginTexts);
user/themes/carnet-atterrissage/js/parsing.js
+12 -1
View File
@@ -1,3 +1,4 @@
// transformer les balises [...] en <div class="...">
let bodyContent = $('#body').html()
.replace(/\[([^\/\]]+)\]/g, '<div class="$1">')
@@ -72,4 +73,14 @@ for(let i = 0; i < contentToParse.length; i++) {
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' min', '&nbsp;min');
}
}
}
}
// PAGES TITRES
let h3s = document.querySelectorAll('h3');
for (let h3 of h3s) {
if (h3.nextElementSibling.firstChild.tagName == 'IMG') {
h3.style.width = "50%";
h3.nextElementSibling.firstChild.style.width = "60%";
h3.innerHTML = h3.innerHTML.replace(/[^\s]*/, `<div class="gros-chiffre">${1}</div>`);
}
}
user/themes/carnet-atterrissage/templates/partials/base.html.twig
+1 -193
View File
@@ -49,198 +49,6 @@
{% block bottom %}
{{ assets.js('bottom')|raw }}
{% endblock %}
{#
<script>
// transformer les balises [...] en <div class="...">
let content = document.getElementById('body');
content = content.innerHTML.replaceAll(/\[([^\/\]]+)\]/g, '<div class="$1">');
content = content.replaceAll(/\[\/([^\]]+)\]/g, '</div>');
document.getElementById("body").innerHTML = content;
// 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(' :', '&nbsp;:');
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' ?', '&nbsp;?');
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' !', '&nbsp;!');
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('« ', '«&nbsp;');
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' »', '&nbsp;»');
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('“', '«&nbsp;');
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('”', '&nbsp;»');
contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' min', '&nbsp;min');
}
}
}
// 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);
</script>
#}
<div id="loading"></div>
</body>
</html>