automagic images + clean de l'ordre des assets js

README.md

@@ -12,14 +12,38 @@
 
 `php bin/gpm selfupgrade`
 
-`php bin/gpm install admin`
+## Balises
+
+TEXTE
+[labeur]
+[temps]
+*
+**
+
+SOUS-TITRE
+[moment]
+
+ENCADRÉS
+[latour]
+[lampe]
+
+IMAGES
+[fullpage2imgs]
+[fullpageimage]
+[tripleimgs]
+[tripleimgs_bottom]
+[tripleimgs2]
+[tripleimgs2_bottom]
+[bottomimg]
+[imgfullspreadleft]
+[imgfullspreadright]
+[imgfullspreadright_bleedtop]
+[imgfullspreadright_bleed]
 
 ## To-do
 
-- micro-typo
-- images double page
 - orphelines
-- texte à gauche
+- texte marge
 
 ## Liens
 

php/php.ini

@@ -385,7 +385,7 @@ expose_php = On
 ; Maximum execution time of each script, in seconds
 ; http://php.net/max-execution-time
 ; Note: This directive is hardcoded to 0 for the CLI SAPI
-max_execution_time = 30
+max_execution_time = 300
 
 ; Maximum amount of time each script may spend parsing request data. It's a good
 ; idea to limit this time on productions servers in order to eliminate unexpectedly
@@ -406,7 +406,7 @@ max_input_time = 60
 
 ; Maximum amount of memory a script may consume
 ; http://php.net/memory-limit
-memory_limit = 128M
+memory_limit = 1G
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ; Error handling and logging ;

user/config/plugins/automagic-images.yaml

@@ -0,0 +1,14 @@
+enabled: true
+adapter: imagick
+remove_original: false
+sizes:
+  -
+    width: 1500
+    quality: 87
+sizesattr:
+  -
+    class: default
+    directive: 100vw
+  -
+    class: example
+    directive: '(min-width: 20em) 33%, 100vw'

user/config/versions.yaml

@@ -1,6 +1,6 @@
 core:
   grav:
-    version: 1.7.41.2
+    version: 1.7.42.1
     schema: 1.7.0_2020-11-20_1
     history:
       - { version: 1.7.41.1, date: '2023-05-25 20:58:44' }
@@ -10,3 +10,5 @@ core:
       - { version: 1.7.41.2, date: '2023-06-02 20:58:57' }
       - { version: 1.7.41.2, date: '2023-06-06 08:07:40' }
       - { 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' }

user/data/feed/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml

@@ -1,4 +1,4 @@
-last_checked: 1687852578
+last_checked: 1687991632
 data:
   -
     title: 'macOS 13.0 Ventura Apache Setup: Upgrading Homebrew'

user/data/flex/indexes/accounts.yaml

@@ -1,29 +1,29 @@
 version: '1.2'
-timestamp: 1686313690
+timestamp: 1687974214
 count: 5
 index:
   collectif_rivage:
     storage_key: collectif_rivage
-    storage_timestamp: 1686313587
+    storage_timestamp: 1687973650
     key: collectif_rivage
     email: contact.collectifrivage@gmail.com
   loic:
     storage_key: loic
-    storage_timestamp: 1686313587
+    storage_timestamp: 1687973650
     key: loic
     email: contact.collectifrivage@gmail.com
   maeliss:
     storage_key: maeliss
-    storage_timestamp: 1686313587
+    storage_timestamp: 1687973650
     key: maeliss
     email: contact.collectifrivage@gmail.com
   maud:
     storage_key: maud
-    storage_timestamp: 1686313587
+    storage_timestamp: 1687973650
     key: maud
     email: maud@figureslibres.io
   val:
     storage_key: val
-    storage_timestamp: 1686313587
+    storage_timestamp: 1687973650
     key: val
     email: valentin_le_moign@figureslibres.io

user/data/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml

@@ -1,4 +1,4 @@
-last_checked: 1687852578
+last_checked: 1687991453
 data:
   feed:
     -

user/data/notifications/val.yaml

@@ -0,0 +1 @@
+27: 'Wed, 28 Jun 2023 13:36:52 +0000'

user/pages/04.lexperimentation-ou-atterrir-sur-le-mode-de-la-reprise/02.atelier-1-mener-lenquete-sur-le-terrain-de-vie/01.methodologie-outils/default.md

@@ -179,9 +179,9 @@ L’opposition entre individu et société est une fiction polémique et straté
 [bottomimg]
 ![at1_11_4](at1_11_4.jpg "at1_11_4")
 [/bottomimg]
-[imgfullspreadleft]
+[imgfullspreadright_bleedtop]
 ![at1_11_5](at1_11_5.jpg "at1_11_5")
-[/imgfullspreadleft]
+[/imgfullspreadright_bleedtop]
 [moment]12 — exercice de partage des descriptions oligoptiques[/moment]
 [temps]10 min animé par Loïc[/temps]
 [labeur]

user/themes/carnet-atterrissage/js/layout.js

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

user/themes/carnet-atterrissage/js/parsing.js

@@ -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(' :', '&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');
+        }
+    }
+}

user/themes/carnet-atterrissage/templates/partials/base.html.twig

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