ajout de fonctionnalités à l'ui

user/data/feed/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml

@@ -1,4 +1,4 @@
-last_checked: 1707227268
+last_checked: 1707326193
 data:
   -
     title: 'macOS 14.0 Sonoma Apache Setup: Upgrading Homebrew'

user/data/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml

@@ -1,4 +1,4 @@
-last_checked: 1707227267
+last_checked: 1707326192
 data:
   feed:
     -

user/themes/carnet-atterrissage/css/mep/general.css

@@ -18,7 +18,7 @@
     margin-right: 8mm;
 
     @left-middle {
-        content: counter(page);
+        content: counter(page); /* ICI À HARDCODER */
         display: flex;
         justify-content: center;
         align-items: center; 

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

@@ -1,12 +1,74 @@
-#chargement {
-    position: fixed;
-    background-color: chocolate;
-    padding: 5px;
-    color: white;
-    top: 10px;
-    left: 10px;
-    opacity: 1;
-    transition: opacity 0.3s ease-out;
-    z-index: 9999;
-  }
-  
+.uiContainer {
+  left: 10px;
+  top: 10px;
+  min-width: 200px;
+  background-color: rgba(255, 255, 255, 0.5);
+  padding-bottom: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  z-index: 9999;
+}
+
+.uiTitle {
+  padding: 5px 20px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.1);
+  transition: background-color 0.3s ease;
+}
+
+.uiTitle:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.uiTitle p {
+  margin: 0 !important;
+}
+
+.uiContent {
+  padding: 5px 20px;
+  font-weight: bold;
+}
+
+.loader {
+  display: inline-block;
+  width: 12px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: 2px solid;
+  border-color: #606d6e #fff;
+  animation: l1 1s infinite;
+  margin-right: 15px;
+}
+@keyframes l1 {to{transform: rotate(.5turn)}}
+
+.pageAmount {
+  display: none;
+}
+
+.jumpToPage, .pagesToDisplay {
+  margin-top: 10px;
+  display: none;
+}
+
+.jumpToPage input {
+  font-weight: normal;
+  width: 60px;
+}
+
+.intervalContainer {
+  display: flex;
+  justify-content: center;
+  align-content: space-between;
+}
+
+.intervalContainer p {
+  margin: 0;
+  font-weight: normal;
+}
+
+.intervalContainer input {
+  margin: 0 5px;
+  width: 60px;
+  font-weight: normal;
+}

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

@@ -1,7 +1,6 @@
 if (debug) console.log('%cStart layout', boldLogging);
 
 const layoutScripts = [
-    'layout/ui.js', // DRAW UI AFTER PARSED (paged hook) BEFORE LAYOUT
     'layout/getLastPage.js',
     'layout/alignTopMargin.js',
     'layout/removeEmptyParagraphs.js',
@@ -13,6 +12,8 @@ const layoutScripts = [
     'layout/margins.js',
     'layout/colors.js',
     'layout/imgsFootnotes.js',
+    'layout/hardcodePageNumbers.js',   
+    'layout/layoutIsDone.js'
 ];
 
 loadScripts(layoutScripts, 0, true);

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

@@ -0,0 +1,15 @@
+// hardcoder les numéros de page plutôt que la propriété css de paged
+// pour permettre d'exporter par intervales de pages
+if (debug) console.log('start harcodePageNumbers');
+
+(function() {
+
+    let middleMargins = document.querySelectorAll('.pagedjs_left_page .pagedjs_margin-left-middle');
+    for (let middleMargin of middleMargins) {
+        middleMargin.innerHTML = middleMargin.parentNode.parentNode.parentNode.parentNode.dataset.pageNumber;
+    }
+
+})();
+
+if (debug) console.log('end hardcodePageNumbers');
+

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

@@ -0,0 +1,18 @@
+// alerte que le rendu est fini et actualise l'ui
+if (debug) console.log('%cBook is ready', boldLogging);
+
+(function() {
+    let loading = document.querySelector('.loading');
+    loading.innerHTML = 'Le livre est prêt';
+
+    let pageAmount = document.querySelectorAll('.pagedjs_page').length;
+    let pageAmountContainer = document.querySelector('.pageAmount');
+    pageAmountContainer.style.display = 'block';
+    pageAmountContainer.innerText = `${pageAmount} pages`;
+
+    let jumpToPage = document.querySelector('.jumpToPage');
+    jumpToPage.style.display = 'block';
+
+    let pagesToDisplay = document.querySelector('.pagesToDisplay');
+    pagesToDisplay.style.display = 'block';
+})();

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

@@ -1,19 +0,0 @@
-// afficher l'interface par dessus le livre
-if (debug) console.log('start ui');
-
-(function() {
-
-    // indication du chargement
-    let chargement = document.createElement('div');
-    chargement.setAttribute('id', 'chargement');
-    chargement.innerHTML = 'chargement';
-    chargement.style.color = "orange";
-    chargement.style.position = "fixed";
-    chargement.style.fontWeight = "bold";
-    chargement.style.zIndex = "9999";
-    document.querySelector('body').prepend(chargement);
-    
-})();
-
-
-if (debug) console.log('end ui');

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

@@ -34,6 +34,10 @@ function loadScripts(scripts, index, isPagedLoaded) {
         constructor(chunker, polisher, caller) {
           super(chunker, polisher, caller);
         }
+
+        afterParsed(parsed) {
+          $.getScript(`${jsFolder}/ui.js`, function() {});
+        }
         
         afterRendered(pages) {
           if (debug) console.log('%cAll pages render done', boldLogging);

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

@@ -0,0 +1,12 @@
+if (debug) console.log('%cStart drawing UI', boldLogging);
+
+const uiScripts = [
+    'ui/drawContainer.js',
+    'ui/loading.js',
+    'ui/pageAmount.js',
+    'ui/jumpToPage.js',
+    'ui/pagesToDisplay.js',
+    'ui/toggleUiWhenPrinting.js',
+];
+
+loadScripts(uiScripts, 0, true);

user/themes/carnet-atterrissage/js/ui/drawContainer.js

@@ -0,0 +1,30 @@
+// créer le container de l'interface utilisateur
+if (debug) console.log('start drawContainer');
+
+(function() {
+    let uiContainer = document.createElement('div');
+    uiContainer.classList.add('uiContainer');
+    uiContainer.style.position = 'fixed';
+
+    let titleContainer = document.createElement('div');
+    titleContainer.classList.add('uiTitle');
+
+    let uiTitle = document.createElement('p');
+    uiTitle.innerText = '⚙️ Paramètres';
+
+    let uiArrow = document.createElement('p');
+    uiArrow.innerText = '▾';
+
+    titleContainer.append(uiTitle);
+    titleContainer.append(uiArrow);
+
+    let uiContent = document.createElement('div');
+    uiContent.classList.add('uiContent');
+
+    uiContainer.append(titleContainer);
+    uiContainer.append(uiContent);
+
+    document.querySelector('body').prepend(uiContainer);
+})();
+
+if (debug) console.log('end drawContainer');

user/themes/carnet-atterrissage/js/ui/jumpToPage.js

@@ -0,0 +1,38 @@
+// fonctionnalité pour accéder directement à une page voulue
+if (debug) console.log('start jumpToPage');
+
+(function() {
+    let uiContent = document.querySelector('.uiContent');
+
+    let jumpToPageContainer = document.createElement('div');
+    jumpToPageContainer.classList.add('jumpToPage');
+
+    let jumpToPageTitle = document.createElement('div');
+    jumpToPageTitle.innerText = "Aller à la page"
+
+    let userInput = document.createElement('input');
+    userInput.setAttribute('type', 'text');
+    userInput.addEventListener('keydown', function(event) {
+        if (event.key === "Enter") {
+            jumpToPage(this.value);
+            userInput.value = "";
+        }
+    });
+
+    jumpToPageContainer.append(jumpToPageTitle);
+    jumpToPageContainer.append(userInput);
+
+    uiContent.append(jumpToPageContainer);
+
+    function jumpToPage(pageNumber) {
+        if (/^\d+$/.test(pageNumber)) {
+            pageNumber = parseInt(pageNumber);
+            let pagesArray = document.querySelectorAll('.pagedjs_page')
+            if (pageNumber <= pagesArray.length) {
+                pagesArray[pageNumber - 1].scrollIntoView({ behavior: "smooth", block: "start" });
+            }
+        }
+    }
+})();
+
+if (debug) console.log('end jumpToPage');

user/themes/carnet-atterrissage/js/ui/loading.js

@@ -0,0 +1,15 @@
+// état du chargement du document
+if (debug) console.log('start loading');
+
+(function() {
+    let uiContent = document.querySelector('.uiContent');
+    let loading = document.createElement('div')
+    loading.innerText = 'Chargement...';
+    let loadingRing = document.createElement('div');
+    loadingRing.classList.add('loader');
+    loading.prepend(loadingRing);
+    loading.classList.add('loading');
+    uiContent.append(loading);
+})();
+
+if (debug) console.log('end loading');

user/themes/carnet-atterrissage/js/ui/pageAmount.js

@@ -0,0 +1,11 @@
+// affiche le nombre de pages total du livre
+if (debug) console.log('start pageAmount');
+
+(function() {
+    let uiContent = document.querySelector('.uiContent');
+    let pageAmount = document.createElement('div');
+    pageAmount.classList.add('pageAmount');
+    uiContent.append(pageAmount);
+})();
+
+if (debug) console.log('end pageAmount');

user/themes/carnet-atterrissage/js/ui/pagesToDisplay.js

@@ -0,0 +1,75 @@
+// sélectionner l'interval de pages à afficher
+// laisser les inputs vides pour afficher toutes les pages
+if (debug) console.log('start pagesToDisplay');
+
+(function() {
+    let uiContent = document.querySelector('.uiContent');
+
+    let pagesToDisplayContainer = document.createElement('div');
+    pagesToDisplayContainer.classList.add('pagesToDisplay');
+
+    let pagesToDisplayTitle = document.createElement('div');
+    pagesToDisplayTitle.innerText = "Afficher l'interval de pages";
+
+    let intervalContainer = document.createElement('div');
+    intervalContainer.classList.add('intervalContainer');
+
+    let textFrom = document.createElement('p');
+    textFrom.innerText = "De";
+
+    let inputFrom = document.createElement('input');
+    inputFrom.setAttribute('type', 'text');
+
+    let textTo = document.createElement('p');
+    textTo.innerText = "à";
+
+    let inputTo = document.createElement('input');
+    inputTo.setAttribute('type', 'text');
+    inputTo.addEventListener('keypress', function(event) {
+        if (event.key === "Enter") displayPagesRange(inputFrom.value, inputTo.value)
+    })
+    
+    let button = document.createElement('button');
+    button.innerText = 'Go';
+    button.addEventListener('click', function() { displayPagesRange(inputFrom.value, inputTo.value) });
+
+    intervalContainer.append(textFrom);
+    intervalContainer.append(inputFrom);
+    intervalContainer.append(textTo);
+    intervalContainer.append(inputTo);
+    intervalContainer.append(button);
+
+    pagesToDisplayContainer.append(pagesToDisplayTitle);
+    pagesToDisplayContainer.append(intervalContainer);
+
+    uiContent.append(pagesToDisplayContainer);
+
+    function displayPagesRange(start, end) {
+        let pages = document.querySelectorAll('.pagedjs_page');
+
+        if (/^\d+$/.test(start) && /^\d+$/.test(end) && start <= pages.length && end <= pages.length && start < end) {
+            // disable pages before start
+            if (start != 1) {
+                for (let i = 0; i < start - 1; i++) {
+                    pages[i].style.display = 'none';
+                }
+            }
+            // enable pages between the interval
+            for (let j = start - 1; j < end; j++) {
+                pages[j].style.display = 'block';
+            }
+            // disable pages after end
+            if (end != pages.length + 1) {
+                for (let k = end; k < pages.length; k++) {
+                    pages[k].style.display = 'none';
+                }
+            }
+        } else if (start === '' && end === '') {
+            for (let page of pages) {
+                page.style.display = 'block';
+            }
+        }
+    }
+})();
+
+if (debug) console.log('end pagesToDisplay');

user/themes/carnet-atterrissage/js/ui/toggleUiWhenPrinting.js

@@ -0,0 +1,17 @@
+// désactiver l'ui à l'impression puis la réactiver
+if (debug) console.log('start toggleUiWhenPrinting');
+
+(function() {
+    let uiContainer = document.querySelector('.uiContainer');
+
+    window.addEventListener("beforeprint", (event) => {
+        uiContainer.style.display = "none";
+      });
+
+      window.addEventListener("afterprint", (event) => {
+        uiContainer.style.display = "block";
+      });
+      
+})();
+
+if (debug) console.log('end toggleUiWhenPrinting');

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

@@ -16,12 +16,11 @@
 
 {% block stylesheets %}
     {% do assets.addCss('https://unpkg.com/purecss@1.0.0/build/pure-min.css', 100) %}
-    {% do assets.addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 99) %}
-    {% do assets.addCss('theme://css/pagedjs.css', 98) %}
-    {% do assets.addCss('theme://css/custom.css', 97) %}
-    {% do assets.addCss('theme://fonts/fonts.css', 96) %}
-    {% do assets.addCss('theme://css/ui.css', 95) %}
-    {% do assets.addCss('theme://css/mep_carnet.css', 94) %}
+    {% do assets.addCss('theme://css/pagedjs.css', 99) %}
+    {% do assets.addCss('theme://css/custom.css', 98) %}
+    {% do assets.addCss('theme://fonts/fonts.css', 97) %}
+    {% do assets.addCss('theme://css/ui.css', 96) %}
+    {% do assets.addCss('theme://css/mep_carnet.css', 95) %}
 {% endblock %}
 
 {% block javascripts %}