ajout de fonctionnalités à l'ui

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