page titre et loader

README.md

@@ -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 avant le bloc : `[breakbefore][/breakbefore]`
-Pas d'élément après le bloc : `[breakafter]...[/breakafter]`
+
+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

user/config/versions.yaml

@@ -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/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml

@@ -1,4 +1,4 @@
-last_checked: 1688674229
+last_checked: 1688702555
 data:
   feed:
     -

user/themes/carnet-atterrissage/css/mep_carnet.css

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

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

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

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

@@ -49,198 +49,6 @@
 {% block bottom %}
     {{ assets.js('bottom')|raw }}
 {% endblock %}
-{#
+<div id="loading"></div>
-<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>
-#}
 </body>
 </html>