From f4e5690841744779ea268d97a066391ccd097467 Mon Sep 17 00:00:00 2001 From: Saud Fatayerji Date: Thu, 20 Apr 2023 19:34:58 +0300 Subject: [PATCH] Added "insert document" buttons that appear in the middle of the document --- src/main/resources/static/css/general.css | 14 ++++ .../resources/static/{ => js}/pdf-lib.min.js | 0 .../resources/templates/fragments/common.html | 2 +- .../resources/templates/page-manager.html | 80 +++++++++++++++++-- 4 files changed, 88 insertions(+), 8 deletions(-) rename src/main/resources/static/{ => js}/pdf-lib.min.js (100%) diff --git a/src/main/resources/static/css/general.css b/src/main/resources/static/css/general.css index 47465094..f6e4809e 100644 --- a/src/main/resources/static/css/general.css +++ b/src/main/resources/static/css/general.css @@ -21,3 +21,17 @@ html[lang-direction=rtl] * { direction: rtl; text-align: right; } + +.align-top { + position: absolute; + top: 0; +} +.align-center-right { + position: absolute; + right: 0; + top: 50%; +} +.align-bottom { + position: absolute; + bottom: 0; +} diff --git a/src/main/resources/static/pdf-lib.min.js b/src/main/resources/static/js/pdf-lib.min.js similarity index 100% rename from src/main/resources/static/pdf-lib.min.js rename to src/main/resources/static/js/pdf-lib.min.js diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html index 53ae9662..52a35367 100644 --- a/src/main/resources/templates/fragments/common.html +++ b/src/main/resources/templates/fragments/common.html @@ -23,7 +23,7 @@ - + diff --git a/src/main/resources/templates/page-manager.html b/src/main/resources/templates/page-manager.html index 5aa5c327..664dbbb8 100644 --- a/src/main/resources/templates/page-manager.html +++ b/src/main/resources/templates/page-manager.html @@ -59,7 +59,23 @@ var fileName = null; const pagesContainer = document.getElementById("pages-container"); - function addPdfs() { + // add the bottom "insert pdf" button that appears on the right when hovered over + const bottomInsertFileButtonContainer = document.createElement('div'); + bottomInsertFileButtonContainer.classList.add("insert-file-button-container", "align-bottom"); + bottomInsertFileButtonContainer.style.transform = "translate(0, 50%)"; + + const bottomInsertFileButton = document.createElement('button'); + bottomInsertFileButton.classList.add("btn", "btn-primary", "insert-file-button", "align-center-right"); + bottomInsertFileButton.innerHTML = ` + + + `; + bottomInsertFileButton.onclick = e => addPdfs(); + bottomInsertFileButtonContainer.appendChild(bottomInsertFileButton); + + pagesContainer.appendChild(bottomInsertFileButtonContainer); + + function addPdfs(nextSiblingElement) { var input = document.createElement('input'); input.type = 'file'; input.multiple = true; @@ -69,7 +85,7 @@ const files = e.target.files; fileName = files[0].name; for (var i=0; i < files.length; i++) { - addPdfFile(files[i]); + addPdfFile(files[i], nextSiblingElement); } document.querySelectorAll(".enable-on-file").forEach(element => { @@ -80,7 +96,7 @@ input.click(); } - async function addPdfFile(file) { + async function addPdfFile(file, nextSiblingElement) { const { renderer, pdfDocument } = await loadFile(file); const moveUpButtonCallback = e => { @@ -148,6 +164,13 @@ } pagesContainer.removeChild(imgContainer); }; + const insertFileButtonCallback = e => { + var imgContainer = e.target; + while (!imgContainer.classList.contains("page-container")) { + imgContainer = imgContainer.parentNode; + } + addPdfs(imgContainer) + }; for (var i=0; i < renderer.pageCount; i++) { const div = document.createElement('div'); @@ -163,7 +186,7 @@ const buttonContainer = document.createElement('div'); buttonContainer.classList.add("button-container"); - const moveUp = document.createElement('button'); + const moveUp = document.createElement('button'); moveUp.classList.add("move-up-button","btn", "btn-secondary"); moveUp.innerHTML = ''; moveUp.onclick = moveUpButtonCallback; @@ -204,7 +227,25 @@ div.appendChild(buttonContainer); - pagesContainer.appendChild(div); + const insertFileButtonContainer = document.createElement('div'); + insertFileButtonContainer.classList.add("insert-file-button-container", "align-top"); + + const insertFileButton = document.createElement('button'); + insertFileButton.classList.add("btn", "btn-primary", "insert-file-button", "align-center-right"); + insertFileButton.innerHTML = ` + + + `; + insertFileButton.onclick = insertFileButtonCallback; + insertFileButtonContainer.appendChild(insertFileButton); + + div.appendChild(insertFileButtonContainer); + + if (nextSiblingElement) { + pagesContainer.insertBefore(div, nextSiblingElement); + } else { + pagesContainer.appendChild(div); + } } } @@ -337,6 +378,7 @@ aspect-ratio: 1; text-align: center; position: relative; + user-select: none; } .page-container img { @@ -348,7 +390,7 @@ top: 50%; translate: -50% -50%; box-shadow: 0 0 10px rgba(0,0,0); - transition: rotate .3s; + transition: rotate 0.3s; } .page-container .button-container { @@ -366,13 +408,37 @@ width: 16px; height: 16px; } - .page-container:first-child .move-up-button { + .page-container:nth-child(2) .move-up-button { visibility: hidden; } .page-container:last-child .move-down-button { visibility: hidden; } + /* "insert pdf" buttons that appear on the right when hover */ + .insert-file-button-container { + translate: 0 -50%; + width: 100%; + height: 60px; + + z-index: 1; + opacity: 0; + transition: opacity 0.2s; + } + .insert-file-button-container:hover { + opacity: 1; + transition: opacity 0.05s; + } + .insert-file-button { + translate: 100% -50%; + rotate: 45deg; + aspect-ratio: 1; + border-radius: 100px 100px 100px 0; + } + .insert-file-button > * { + rotate: -45deg; + } + #add-pdf-button { margin: 0 auto; }