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;
}