ajout couv, correction bugs

README.md

@@ -45,6 +45,10 @@ saut de ligne dans texte libre (à la fin de chaque ligne) : `<br>`
 
 `**`
 
+`[pilote]`
+
+`[citation]`
+
 ### SOUS-TITRE
 `[moment]`
 
@@ -141,6 +145,8 @@ RESOLUTION : https://learn.getgrav.org/16/troubleshooting/common-problems#fetch-
 
 * pas possible de rechercher dans le texte dans l'éditeur
 
+* pb encart avec head supprime le premier paragraphe cf atelier 1 temps 11 "oligoptique"
+
 ## To-do
 
 - orphelines

user/data/feed/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml

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

user/data/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml

@@ -1,4 +1,4 @@
-last_checked: 1690208978
+last_checked: 1690337801
 data:
   feed:
     -

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

@@ -8,7 +8,7 @@
     size: 165mm 230mm;
     margin-top: 16mm;
     margin-bottom: 16mm;
-    bleed: 6mm;
+    bleed: 0mm;
     color: black;
     marks: crop;
 }
@@ -62,6 +62,43 @@
   margin-right: 16mm;
 }
 
+.pagedjs_first_page {
+  background: linear-gradient(to left, 
+  #5595a1 0%, 
+  #5f9796 14%, 
+  #65998d 28%, 
+  #6f9b80 42%, 
+  #799e75 57%, 
+  #83a16b 71%, 
+  #8ba460 85%);
+}
+
+.last-page {
+  background: linear-gradient(to left, 
+  #95a358 0%, 
+  #9ca151 14%, 
+  #a59d4a 28%, 
+  #af9944 42%, 
+  #b8963d 57%, 
+  #c19238 71%, 
+  #cb8e31 85%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.last-page .has-children div h3,
+.last-page .has-children div div {
+    display: none;
+}
+
+.last-page .has-children div p {
+  width: 75%;
+  padding-bottom: 20mm;
+  font-size: 11pt;
+  color: white;
+}
+
 body {
   font-family: 'Public';
 }
@@ -94,6 +131,14 @@ h2 {
   text-align: center;
 }
 
+.partie_cover_page:first-child {
+  background-color: #4a90b2;
+}
+
+.partie_cover_page_right {
+  background-color: #4a90b2;
+}
+
 .partie_count {
   font-size: 55pt;
   color: white;
@@ -169,7 +214,7 @@ h4 {
 }
 
 
-.labeur, .free {
+.labeur, .free, .free_left, .citation {
   padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
   line-height: 12pt;
   font-size: 9pt;
@@ -177,8 +222,30 @@ h4 {
   hyphens: auto;
 }
 
-.free {
+.free, .free_left {
   margin-bottom: 12px;
+  text-align: left;
+}
+
+.free_left {
+  padding-left: 0;
+}
+
+.citation {
+  padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols) + 8mm);
+  text-align: left;
+}
+
+.citation::before {
+  content: '“';
+  position: absolute;
+  font-size: 58pt;
+  margin-left: -15mm;
+  margin-top: 5mm;
+}
+
+.citation ul {
+  padding: 0;
 }
 
 .labeur p:before {
@@ -200,6 +267,15 @@ h4 {
   padding-left: 3mm;
 }
 
+.pilote {
+  font-family: 'Novel';
+  font-weight: normal;
+  font-size: 11pt;
+  padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
+  text-align: left;
+  line-height: 1.55;
+}
+
 .latour, .lampe,
 .latour_nohead, .lampe_nohead {
   font-family: 'Novel';

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

@@ -18,9 +18,13 @@ class setMarginTexts extends Paged.Handler {
     }
 
     afterPreview(pages) {
+        // donner class à la dernière page
+        let lastElement = $('.pagedjs_page').last();
+        lastElement.addClass('last-page');
+
         // 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
+        for (let i = 0; i < labeurs.length; i++) {
+            if (labeurs[i] == labeurs[i].parentNode?.firstElementChild
                 && !labeurs[i].firstElementChild?.hasAttribute("data-split-from")) {
                 if (labeurs[i].firstElementChild) {
                     labeurs[i].firstElementChild.style.marginTop = "0px";
@@ -31,7 +35,7 @@ class setMarginTexts extends Paged.Handler {
         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);
+                moments[i].parentNode.removeChild(moments[i].parentNode.firstElementChild);
             }
         }
         // enlever les paragraphes vides
@@ -96,8 +100,8 @@ class setMarginTexts extends Paged.Handler {
             imgOverflowEl.append(imgOverflow);
             nextPage.append(imgOverflowEl);
             if (fullspreadEl[i].classList.contains('imgfullspreadright')
-            || fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')
-            || fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
+                || 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';
             }
@@ -121,7 +125,7 @@ class setMarginTexts extends Paged.Handler {
         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')) {
+                .classList.contains('pagedjs_left_page')) {
                 fullPageImg[i].style.marginLeft = '-22mm';
             }
         }
@@ -134,7 +138,7 @@ class setMarginTexts extends Paged.Handler {
             if (encart.nextElementSibling != null) {
                 encart.style.marginBottom = '10mm';
             }
-            
+
             if (encart.hasAttribute('data-split-to')) {
                 let plainColor = document.createElement('div');
                 plainColor.setAttribute('class', 'encart-split');
@@ -161,7 +165,7 @@ class setMarginTexts extends Paged.Handler {
                 encart.parentNode.prepend(plainColor);
             }
         }
-        
+
         // TITRES ATELIERS
         let h3s = document.querySelectorAll('h3');
         for (let h3 of h3s) {
@@ -177,7 +181,7 @@ class setMarginTexts extends Paged.Handler {
                     coverDessin.style.height = 'auto';
                     photoContainer.firstElementChild.remove();
                 } else {
-                    coverPhoto = h3.nextElementSibling.firstChild; 
+                    coverPhoto = h3.nextElementSibling.firstChild;
                 }
                 photoContainer.style.position = 'absolute';
                 photoContainer.style.width = '53mm';
@@ -212,8 +216,77 @@ class setMarginTexts extends Paged.Handler {
             h3.style.top = `${(h3.closest('.pagedjs_page_content').offsetHeight - h3.offsetHeight) / 3}px`;
 
             h3.closest('.pagedjs_pagebox').querySelector('.pagedjs_margin-left').innerHTML = '';
-            h3.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
-            .classList.add('atelier_cover_page');
+            h3.closest('.pagedjs_sheet').classList.add('atelier_cover_page');
+        }
+
+        // TITRES PARTIES
+        let h2s = document.querySelectorAll('h2');
+        for (let i = 0; i < h2s.length; i++) {
+            if (i != 0) {
+                let parentSheet = h2s[i].closest('.pagedjs_sheet');
+                parentSheet.querySelector('.pagedjs_margin-left').innerHTML = '';
+                parentSheet.classList.add('partie_cover_page');
+                parentSheet.parentElement.nextElementSibling?.firstElementChild.classList.add('partie_cover_page_right');
+                let partieCount = document.createElement('div');
+                partieCount.classList.add('partie_count');
+                let romanCount;
+                switch (i) {
+                    case 1: romanCount = 'I'; break;
+                    case 2: romanCount = 'II'; break;
+                    case 3: romanCount = 'III'; break;
+                    case 4: romanCount = 'IV'; break;
+                    case 5: romanCount = 'V'; break;
+                    case 6: romanCount = 'VI'; break;
+                    case 7: romanCount = 'VII'; break;
+                    case 8: romanCount = 'VIII'; break;
+                    case 9: romanCount = 'IX'; break;
+                    case 10: romanCount = 'X'; break;
+                }
+                partieCount.innerHTML = 'Partie<br>' + romanCount;
+                h2s[i].parentElement.prepend(partieCount);
+                h2s[i].nextElementSibling?.remove();
+                h2s[i].parentElement.parentElement.parentElement.parentElement.style.display = 'flex';
+                h2s[i].parentElement.parentElement.parentElement.parentElement.style.alignItems = 'center';
+            }
+        }
+
+        // afficher correctement les éléments en marge
+        let topLeftBoxes = document.querySelectorAll('.pagedjs_margin-left-top');
+        for (let topLeftBox of topLeftBoxes) {
+            let contentDiv = topLeftBox.firstElementChild;
+            let textToPut;
+            let currentPage = contentDiv.closest('.pagedjs_page');
+            if (currentPage.id != "page-1") {
+                let previousPage = currentPage.previousElementSibling;
+                while (previousPage) {
+                    if (previousPage.firstElementChild.classList.contains('atelier_cover_page')) {
+                        textToPut = previousPage.querySelector('h3').innerText;
+                        break;
+                    }
+                    previousPage = previousPage.previousElementSibling;
+                }
+            }
+            contentDiv.append(textToPut);
+            contentDiv.style.marginTop = contentDiv.offsetWidth / 2 - contentDiv.offsetHeight / 2 + "px";
+        }
+
+        let bottomLeftBoxes = document.querySelectorAll('.pagedjs_margin-left-bottom');
+        for (let bottomLeftBox of bottomLeftBoxes) {
+            let contentDiv = bottomLeftBox.firstElementChild;
+            let textToPut;
+            let currentPage = contentDiv.closest('.pagedjs_page');
+            if (currentPage.id != "page-1") {
+                let previousPage = currentPage.previousElementSibling;
+                while (previousPage) {
+                    if (previousPage.firstElementChild.classList.contains('partie_cover_page')) {
+                        textToPut = previousPage.querySelector('h2').innerText;
+                        break;
+                    }
+                    previousPage = previousPage.previousElementSibling;
+                }
+            }
+            contentDiv.append(textToPut);
+            contentDiv.style.marginBottom = contentDiv.offsetWidth / 2 - contentDiv.offsetHeight / 2 + "px";
         }
 
         // SET COLORS
@@ -230,107 +303,44 @@ class setMarginTexts extends Paged.Handler {
             '#a59d4a',
             '#af9944',
             '#b8963d',
-            '#b8963d',
-            '#b8963d'
+            '#c19238',
+            '#cb8e31'
         ]
 
-        // TITRES PARTIES
-        let h2s = document.querySelectorAll('h2');
-        for (let i = 0; i < h2s.length; i++) {
-            if (i != 0) {
-                let parentSheet = h2s[i].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
-                parentSheet.style.backgroundColor = colors[i];
-                parentSheet.querySelector('.pagedjs_margin-left').innerHTML = '';
-                parentSheet.parentElement.classList.add('partie_cover_page');
-                let nextPage = parentSheet.parentElement.nextElementSibling?.firstElementChild;
-                if (nextPage) {
-                    nextPage.style.backgroundColor = colors[i];
-                }
-                let partieCount = document.createElement('div');
-                partieCount.classList.add('partie_count');
-                let romanCount;
-                switch (i) {
-                    case 1 : romanCount = 'I'; break;
-                    case 2 : romanCount = 'II'; break;
-                    case 3 : romanCount = 'III'; break;
-                    case 4 : romanCount = 'IV'; break;
-                    case 5 : romanCount = 'V'; break;
-                    case 6 : romanCount = 'VI'; break;
-                    case 7 : romanCount = 'VII'; break;
-                    case 8 : romanCount = 'VIII'; break;
-                    case 9 : romanCount = 'IX'; break;
-                    case 10 : romanCount = 'X'; break;
-                }
-                partieCount.innerHTML = 'Partie<br>' + romanCount;
-                h2s[i].parentElement.prepend(partieCount);
-                h2s[i].nextElementSibling?.remove();
-                h2s[i].parentElement.parentElement.parentElement.parentElement.style.display = 'flex';
-                h2s[i].parentElement.parentElement.parentElement.parentElement.style.alignItems = 'center';
-            }
-        }
-
-        // afficher correctement les éléments en marge
-        let topLeftBoxes = document.querySelectorAll('.pagedjs_margin-left-top');
-        for (let topLeftBox of topLeftBoxes) {
-            let contentDiv = topLeftBox.firstElementChild;
-            let textToPut;
-            let currentPage = contentDiv.parentElement.parentElement.parentElement.parentElement.parentElement;
-            if(currentPage.id != "page-1") {
-                let previousPage = currentPage.previousElementSibling;
-                while (previousPage) {
-                    if (previousPage.classList.contains('atelier_cover_page')) {
-                        textToPut = previousPage.querySelector('h3').innerText;
-                        break;
-                    }
-                    previousPage = previousPage.previousElementSibling;
-                }
-            }
-            contentDiv.append(textToPut);
-            contentDiv.style.marginTop = contentDiv.offsetWidth / 2 - contentDiv.offsetHeight / 2 + "px";
-        }
-
-        let bottomLeftBoxes = document.querySelectorAll('.pagedjs_margin-left-bottom');
-        for (let bottomLeftBox of bottomLeftBoxes) {
-            let contentDiv = bottomLeftBox.firstElementChild;
-            let textToPut;
-            let currentPage = contentDiv.parentElement.parentElement.parentElement.parentElement.parentElement;
-            if(currentPage.id != "page-1") {
-                let previousPage = currentPage.previousElementSibling;
-                while (previousPage) {
-                    if (previousPage.classList.contains('partie_cover_page')) {
-                        textToPut = previousPage.querySelector('h2').innerText;
-                        break;
-                    }
-                    previousPage = previousPage.previousElementSibling;
-                }
-            }
-            contentDiv.append(textToPut);
-            contentDiv.style.marginBottom = contentDiv.offsetWidth / 2 - contentDiv.offsetHeight / 2 + "px";
-        }
-
         // set all colors
         let allPages = document.querySelectorAll('.pagedjs_page');
-        let partieColor = '';
+        let atelierColor = '';
         let bgColor = 'rgb(245, 245, 245)';
+        let atelierIndex = 0;
         for (let page of allPages) {
-            if (page.classList.contains('partie_cover_page')) {
-                partieColor = page.firstElementChild.style.backgroundColor;
+            if (page.firstElementChild.classList.contains('atelier_cover_page')) {
+                atelierColor = colors[atelierIndex];
+                if (atelierColor == undefined) {
+                    atelierColor = colors[colors.length];
+                }
+                atelierIndex++;
+            }
+            if (page.firstElementChild.classList.contains('partie_cover_page')) {
+                atelierIndex = 0;
             }
             let pageCounter = page.querySelector('.pagedjs_margin-left-middle')
             if (pageCounter) {
-                pageCounter.style.color = partieColor;
+                pageCounter.style.color = atelierColor;
             }
             let atelierTitle = page.querySelector('h3');
             if (atelierTitle) {
-                atelierTitle.style.color = partieColor;
+                atelierTitle.style.color = atelierColor;
             }
             let bibliographie = page.querySelector('.bibliographie');
             if (bibliographie) {
-                bibliographie.style.color = partieColor;
+                bibliographie.style.color = atelierColor;
                 // set bg et sprays
                 let bibliographiePage = bibliographie.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
                 bibliographiePage.style.backgroundColor = bgColor;
-                bibliographiePage.parentElement.nextElementSibling.firstElementChild.style.backgroundColor = bgColor;
+                let nextPage = bibliographiePage.parentElement?.nextElementSibling?.firstElementChild;
+                if (nextPage) {
+                    nextPage.style.backgroundColor = bgColor;
+                }
                 let sprayImg = document.createElement('img');
                 sprayImg.setAttribute('src', '/user/themes/carnet-atterrissage/assets/sprays/spary_couleurs-page001.png');
                 sprayImg.style.height = "242mm";
@@ -339,21 +349,23 @@ class setMarginTexts extends Paged.Handler {
                 sprayImg.style.top = "-22mm";
                 sprayImg.style.right = "-20mm";
                 sprayImg.style.mixBlendMode = "multiply";
-                bibliographiePage.parentElement.nextElementSibling.querySelector('.pagedjs_page_content').prepend(sprayImg);
+                bibliographiePage.parentElement.nextElementSibling?.querySelector('.pagedjs_page_content').prepend(sprayImg);
 
             }
             let h4 = page.querySelector('h4');
             if (h4 && h4?.nextElementSibling?.classList.contains('bibliographie')) {
-                h4.style.color = partieColor;
+                h4.style.color = atelierColor;
             }
             let links = page.querySelectorAll('a');
             for (let link of links) {
-                link.style.color = partieColor;
+                link.style.color = atelierColor;
             }
-            let lightColor = partieColor.slice(0, -1) + ', 0.1)';
-            let encarts = page.querySelectorAll('.lampe, .latour, .lampe_nohead, .latour_nohead, .encart-split');
-            for (let encart of encarts) {
-                encart.style.backgroundColor = lightColor;
+            if (atelierColor) {
+                let lightColor = `${atelierColor}1a`;
+                let encarts = page.querySelectorAll('.lampe, .latour, .lampe_nohead, .latour_nohead, .encart-split');
+                for (let encart of encarts) {
+                    encart.style.backgroundColor = lightColor;
+                }
             }
 
         }

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

@@ -5,6 +5,9 @@ let baliseWords = [
     'free',
     'temps',
     'moment',
+    'pilote',
+    'free_left',
+    'citation',
     'latour',
     'latour_nohead',
     'lampe',
@@ -29,7 +32,7 @@ let baliseWords = [
     `doublepage_bigleft`
 ];
 
-var bodyContent = $('#body').html();
+ var bodyContent = $('#body').html();
 
 bodyContent = bodyContent.replace(/\[([^\/\]]+)\]/g, function(match, word) {
   if (baliseWords.includes(word)) {
@@ -71,7 +74,7 @@ for(let encart of encarts) {
   let headerEl = document.createElement('div');
   headerEl.setAttribute('class', 'encart-header')
   let iconImg = document.createElement('img');
-  if (encart.classList.contains('latour') || encart.classList.contains('latour')) {
+  if (encart.classList.contains('latour') || encart.classList.contains('latour_nohead')) {
     iconImg.setAttribute('src', '/user/themes/carnet-atterrissage/assets/map.png');
   } else if (encart.classList.contains('lampe') || encart.classList.contains('lampe_nohead')) {
     iconImg.setAttribute('src', '/user/themes/carnet-atterrissage/assets/lampe.png');
@@ -100,26 +103,45 @@ for(let encart of encarts) {
 }
 
 for(let i = 0; i < contentToParse.length; i++) {
-    if (contentToParse[i].childNodes.length == 1) {
-        contentToParse[i].innerHTML = '<p>' + contentToParse[i].innerHTML + '</p>';
+  if (contentToParse[i].childNodes.length == 1) {
+      contentToParse[i].innerHTML = '<p>' + contentToParse[i].innerHTML + '</p>';
+  } else {
+      contentToParse[i].innerHTML = "<p>" + contentToParse[i].innerHTML.replace("<p>", "");
+  }
+      
+  // 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');
+      }
+  }
+
+  // data align last split
+  if (contentToParse[i].innerHTML.includes('<br>')) {
+    if (contentToParse[i].childElementCount > 0) {
+      for (let j = 0; j < contentToParse[i].childElementCount; j++) {
+        let parts = contentToParse[i].children[j].innerHTML.split('<br>');
+        let newParts = parts.map(function(part) {
+          return '<p>' + part + '</p>';
+        });
+        contentToParse[i].children[j].innerHTML = newParts.join('');
+      }
     } else {
-        contentToParse[i].innerHTML = "<p>" + contentToParse[i].innerHTML.replace("<p>", "");
-    }
-        
-    // 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');
-        }
+      let parts = contentToParse[i].innerHTML.split('<br>');
+      let newParts = parts.map(function(part) {
+        return '<p>' + part + '</p>';
+      });
+      contentToParse[i].innerHTML = newParts.join('');
     }
+  }
 }
 
 // PAGES TITRES
@@ -136,4 +158,4 @@ let dessinsPreH3 = document.querySelectorAll('h3 + p img');
 for (let dessin of dessinsPreH3) {
   dessin.style.width = '0px';
   dessin.style.height = '0px';
-}
+}