From 20540db49c2ab4f84733fd4be73cd2dbe75bdf87 Mon Sep 17 00:00:00 2001 From: Valentin Date: Thu, 8 Feb 2024 01:19:42 +0100 Subject: [PATCH] =?UTF-8?q?ajout=20de=20fonctionnalit=C3=A9s=20=C3=A0=20l'?= =?UTF-8?q?ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml | 2 +- .../3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml | 2 +- .../carnet-atterrissage/css/mep/general.css | 2 +- user/themes/carnet-atterrissage/css/ui.css | 86 ++++++++++++++++--- user/themes/carnet-atterrissage/js/layout.js | 3 +- .../js/layout/hardcodePageNumbers.js | 15 ++++ .../js/layout/layoutIsDone.js | 18 ++++ .../carnet-atterrissage/js/layout/ui.js | 19 ---- user/themes/carnet-atterrissage/js/main.js | 4 + user/themes/carnet-atterrissage/js/ui.js | 12 +++ .../js/ui/drawContainer.js | 30 +++++++ .../carnet-atterrissage/js/ui/jumpToPage.js | 38 ++++++++ .../carnet-atterrissage/js/ui/loading.js | 15 ++++ .../carnet-atterrissage/js/ui/pageAmount.js | 11 +++ .../js/ui/pagesToDisplay.js | 75 ++++++++++++++++ .../js/ui/toggleUiWhenPrinting.js | 17 ++++ .../templates/partials/base.html.twig | 11 ++- 17 files changed, 319 insertions(+), 41 deletions(-) create mode 100644 user/themes/carnet-atterrissage/js/layout/hardcodePageNumbers.js create mode 100644 user/themes/carnet-atterrissage/js/layout/layoutIsDone.js delete mode 100644 user/themes/carnet-atterrissage/js/layout/ui.js create mode 100644 user/themes/carnet-atterrissage/js/ui.js create mode 100644 user/themes/carnet-atterrissage/js/ui/drawContainer.js create mode 100644 user/themes/carnet-atterrissage/js/ui/jumpToPage.js create mode 100644 user/themes/carnet-atterrissage/js/ui/loading.js create mode 100644 user/themes/carnet-atterrissage/js/ui/pageAmount.js create mode 100644 user/themes/carnet-atterrissage/js/ui/pagesToDisplay.js create mode 100644 user/themes/carnet-atterrissage/js/ui/toggleUiWhenPrinting.js diff --git a/user/data/feed/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml b/user/data/feed/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml index 0d6e3ed..7eb0626 100644 --- a/user/data/feed/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml +++ b/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' diff --git a/user/data/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml b/user/data/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml index b04f48f..03cda20 100644 --- a/user/data/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml +++ b/user/data/notifications/3a6d0284e743dc4a9b86f97d6dd1a3bf.yaml @@ -1,4 +1,4 @@ -last_checked: 1707227267 +last_checked: 1707326192 data: feed: - diff --git a/user/themes/carnet-atterrissage/css/mep/general.css b/user/themes/carnet-atterrissage/css/mep/general.css index fb606cd..e699d28 100644 --- a/user/themes/carnet-atterrissage/css/mep/general.css +++ b/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; diff --git a/user/themes/carnet-atterrissage/css/ui.css b/user/themes/carnet-atterrissage/css/ui.css index 61b7d50..d49158e 100644 --- a/user/themes/carnet-atterrissage/css/ui.css +++ b/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; - } - \ No newline at end of file +.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; +} \ No newline at end of file diff --git a/user/themes/carnet-atterrissage/js/layout.js b/user/themes/carnet-atterrissage/js/layout.js index a4936d6..9c8a0df 100644 --- a/user/themes/carnet-atterrissage/js/layout.js +++ b/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); diff --git a/user/themes/carnet-atterrissage/js/layout/hardcodePageNumbers.js b/user/themes/carnet-atterrissage/js/layout/hardcodePageNumbers.js new file mode 100644 index 0000000..60c7943 --- /dev/null +++ b/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'); + diff --git a/user/themes/carnet-atterrissage/js/layout/layoutIsDone.js b/user/themes/carnet-atterrissage/js/layout/layoutIsDone.js new file mode 100644 index 0000000..bbcb9ac --- /dev/null +++ b/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'; +})(); diff --git a/user/themes/carnet-atterrissage/js/layout/ui.js b/user/themes/carnet-atterrissage/js/layout/ui.js deleted file mode 100644 index e150f2d..0000000 --- a/user/themes/carnet-atterrissage/js/layout/ui.js +++ /dev/null @@ -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'); \ No newline at end of file diff --git a/user/themes/carnet-atterrissage/js/main.js b/user/themes/carnet-atterrissage/js/main.js index 9009e9e..3e737ca 100644 --- a/user/themes/carnet-atterrissage/js/main.js +++ b/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); diff --git a/user/themes/carnet-atterrissage/js/ui.js b/user/themes/carnet-atterrissage/js/ui.js new file mode 100644 index 0000000..836b49a --- /dev/null +++ b/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); \ No newline at end of file diff --git a/user/themes/carnet-atterrissage/js/ui/drawContainer.js b/user/themes/carnet-atterrissage/js/ui/drawContainer.js new file mode 100644 index 0000000..d252a23 --- /dev/null +++ b/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'); \ No newline at end of file diff --git a/user/themes/carnet-atterrissage/js/ui/jumpToPage.js b/user/themes/carnet-atterrissage/js/ui/jumpToPage.js new file mode 100644 index 0000000..df4a8f9 --- /dev/null +++ b/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'); \ No newline at end of file diff --git a/user/themes/carnet-atterrissage/js/ui/loading.js b/user/themes/carnet-atterrissage/js/ui/loading.js new file mode 100644 index 0000000..4f6af4f --- /dev/null +++ b/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'); \ No newline at end of file diff --git a/user/themes/carnet-atterrissage/js/ui/pageAmount.js b/user/themes/carnet-atterrissage/js/ui/pageAmount.js new file mode 100644 index 0000000..06ac56a --- /dev/null +++ b/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'); \ No newline at end of file diff --git a/user/themes/carnet-atterrissage/js/ui/pagesToDisplay.js b/user/themes/carnet-atterrissage/js/ui/pagesToDisplay.js new file mode 100644 index 0000000..0c23eff --- /dev/null +++ b/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'); \ No newline at end of file diff --git a/user/themes/carnet-atterrissage/js/ui/toggleUiWhenPrinting.js b/user/themes/carnet-atterrissage/js/ui/toggleUiWhenPrinting.js new file mode 100644 index 0000000..3a75d2e --- /dev/null +++ b/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'); \ No newline at end of file diff --git a/user/themes/carnet-atterrissage/templates/partials/base.html.twig b/user/themes/carnet-atterrissage/templates/partials/base.html.twig index 0f49cc9..a4ecfd4 100644 --- a/user/themes/carnet-atterrissage/templates/partials/base.html.twig +++ b/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 %}