From e97cb9d49ead2258190305e68c040ad053f04674 Mon Sep 17 00:00:00 2001
From: Renan <82916964+thisisrenan@users.noreply.github.com>
Date: Fri, 8 Nov 2024 19:51:03 -0300
Subject: [PATCH] Add option to insert blank page between pages in Multi-tool
(#2194) (#2201)
---
src/main/resources/static/css/pdfActions.css | 9 ++
.../static/js/multitool/PdfActionsManager.js | 12 +++
.../static/js/multitool/PdfContainer.js | 84 ++++++++++++++++---
src/main/resources/templates/multi-tool.html | 5 ++
4 files changed, 98 insertions(+), 12 deletions(-)
diff --git a/src/main/resources/static/css/pdfActions.css b/src/main/resources/static/css/pdfActions.css
index b76e45b1..30ac1eee 100644
--- a/src/main/resources/static/css/pdfActions.css
+++ b/src/main/resources/static/css/pdfActions.css
@@ -126,3 +126,12 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto
aspect-ratio: 1;
border-radius: 100px;
}
+
+.pdf-actions_insert-file-blank-button {
+ position: absolute;
+ top: 75%;
+ right: 50%;
+ translate: 0% -50%;
+ aspect-ratio: 1;
+ border-radius: 100px;
+}
diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
index 033b3991..6f62f256 100644
--- a/src/main/resources/static/js/multitool/PdfActionsManager.js
+++ b/src/main/resources/static/js/multitool/PdfActionsManager.js
@@ -73,6 +73,11 @@ class PdfActionsManager {
this.addFiles(imgContainer);
}
+ insertFileBlankButtonCallback(e) {
+ var imgContainer = this.getPageContainer(e.target);
+ this.addFiles(imgContainer, true);
+ }
+
splitFileButtonCallback(e) {
var imgContainer = this.getPageContainer(e.target);
imgContainer.classList.toggle("split-before");
@@ -89,6 +94,7 @@ class PdfActionsManager {
this.rotateCWButtonCallback = this.rotateCWButtonCallback.bind(this);
this.deletePageButtonCallback = this.deletePageButtonCallback.bind(this);
this.insertFileButtonCallback = this.insertFileButtonCallback.bind(this);
+ this.insertFileBlankButtonCallback = this.insertFileBlankButtonCallback.bind(this);
this.splitFileButtonCallback = this.splitFileButtonCallback.bind(this);
}
@@ -152,6 +158,12 @@ class PdfActionsManager {
splitFileButton.onclick = this.splitFileButtonCallback;
insertFileButtonContainer.appendChild(splitFileButton);
+ const insertFileBlankButton = document.createElement("button");
+ insertFileBlankButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-blank-button");
+ insertFileBlankButton.innerHTML = `insert_page_break`;
+ insertFileBlankButton.onclick = this.insertFileBlankButtonCallback;
+ insertFileButtonContainer.appendChild(insertFileBlankButton);
+
div.appendChild(insertFileButtonContainer);
// add this button to every element, but only show it on the last one :D
diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index 0cc1a110..97a34e1d 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -22,6 +22,7 @@ class PdfContainer {
this.nameAndArchiveFiles = this.nameAndArchiveFiles.bind(this);
this.splitPDF = this.splitPDF.bind(this);
this.splitAll = this.splitAll.bind(this);
+ this.addFilesBlankAll = this.addFilesBlankAll.bind(this)
this.pdfAdapters = pdfAdapters;
@@ -38,6 +39,7 @@ class PdfContainer {
window.exportPdf = this.exportPdf;
window.rotateAll = this.rotateAll;
window.splitAll = this.splitAll;
+ window.addFilesBlankAll = this.addFilesBlankAll
const filenameInput = document.getElementById("filename-input");
const downloadBtn = document.getElementById("export-button");
@@ -77,19 +79,25 @@ class PdfContainer {
}
}
- addFiles(nextSiblingElement) {
- var input = document.createElement("input");
- input.type = "file";
- input.multiple = true;
- input.setAttribute("accept", "application/pdf,image/*");
- input.onchange = async (e) => {
- const files = e.target.files;
+ addFiles(nextSiblingElement, blank = false) {
+ if (blank) {
- this.addFilesFromFiles(files, nextSiblingElement);
- this.updateFilename(files ? files[0].name : "");
- };
+ this.addFilesBlank(nextSiblingElement);
- input.click();
+ } else {
+ var input = document.createElement("input");
+ input.type = "file";
+ input.multiple = true;
+ input.setAttribute("accept", "application/pdf,image/*");
+ input.onchange = async (e) => {
+ const files = e.target.files;
+
+ this.addFilesFromFiles(files, nextSiblingElement);
+ this.updateFilename(files ? files[0].name : "");
+ };
+
+ input.click();
+ }
}
async addFilesFromFiles(files, nextSiblingElement) {
@@ -108,6 +116,47 @@ class PdfContainer {
});
}
+ async addFilesBlank(nextSiblingElement) {
+ const pdfContent = `
+ %PDF-1.4
+ 1 0 obj
+ << /Type /Catalog /Pages 2 0 R >>
+ endobj
+ 2 0 obj
+ << /Type /Pages /Kids [3 0 R] /Count 1 >>
+ endobj
+ 3 0 obj
+ << /Type /Page /Parent 2 0 R /MediaBox [0 0 595 842] /Contents 5 0 R >>
+ endobj
+ 5 0 obj
+ << /Length 44 >>
+ stream
+ 0 0 0 595 0 842 re
+ W
+ n
+ endstream
+ endobj
+ xref
+ 0 6
+ 0000000000 65535 f
+ 0000000010 00000 n
+ 0000000071 00000 n
+ 0000000121 00000 n
+ 0000000205 00000 n
+ 0000000400 00000 n
+ trailer
+ << /Size 6 /Root 1 0 R >>
+ startxref
+ 278
+ %%EOF
+ `;
+ const blob = new Blob([pdfContent], { type: 'application/pdf' });
+ const url = URL.createObjectURL(blob);
+ const file = new File([blob], "blank_page.pdf", { type: "application/pdf" });
+ await this.addPdfFile(file, nextSiblingElement);
+ }
+
+
rotateElement(element, deg) {
var lastTransform = element.style.rotate;
if (!lastTransform) {
@@ -224,6 +273,17 @@ class PdfContainer {
}
}
+
+ addFilesBlankAll() {
+ const allPages = this.pagesContainer.querySelectorAll(".page-container");
+ allPages.forEach((page, index) => {
+ if (index !== 0) {
+ this.addFiles(page, true)
+ }
+ });
+ }
+
+
splitAll() {
const allPages = this.pagesContainer.querySelectorAll(".page-container");
if (this.pagesContainer.querySelectorAll(".split-before").length > 0) {
@@ -450,7 +510,7 @@ function detectImageType(uint8Array) {
// Check for TIFF signature (little-endian and big-endian)
if ((uint8Array[0] === 73 && uint8Array[1] === 73 && uint8Array[2] === 42 && uint8Array[3] === 0) ||
- (uint8Array[0] === 77 && uint8Array[1] === 77 && uint8Array[2] === 0 && uint8Array[3] === 42)) {
+ (uint8Array[0] === 77 && uint8Array[1] === 77 && uint8Array[2] === 0 && uint8Array[3] === 42)) {
return 'TIFF';
}
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index c3f78322..261a4ca8 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -47,6 +47,11 @@
cut
+