Feature/1976/multi tool multiple pages (#2200)

* Multitool - Select multiple pages for rotation tool

* Multitool multi select delete feature

* Multitool multi select UI improvements and big fixes

* Multitool multi select select all and UI improvements

* Multi tool multi select, download selected, clean up and bug fixes

* Comments

* Update buttons for page selection

* Update translation files

Signed-off-by: GitHub Action <action@github.com>

* Multitool multiselect split functionality and UI updates

* Download selected button, additional tooltips

* Update translation files

Signed-off-by: GitHub Action <action@github.com>

* revert CertSignController

* remove material icons

* restore to previous certsigncontroller

* Update CertSignController.java

---------

Signed-off-by: GitHub Action <action@github.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
This commit is contained in:
reecebrowne
2024-11-14 20:00:36 +00:00
committed by GitHub
parent 7f30882e5e
commit b27e1f254c
42 changed files with 797 additions and 94 deletions

View File

@@ -47,18 +47,53 @@
cut
</span>
</button>
<button id="select-pages-container" class="btn btn-secondary enable-on-file"
th:title="#{multiTool.selectPages}" onclick="toggleSelectPageVisibility()" disabled>
<span id="select-pages-button" class="material-symbols-rounded">
event_list
</span>
</button>
<button id="select-All-Container" class="btn btn-secondary enable-on-file hidden"
onclick="toggleSelectAll()" disabled>
<span th:title="#{multiTool.selectAll}" class="material-symbols-rounded"
id="select-icon">select_all</span>
<span th:title="#{multiTool.deselectAll}" class="material-symbols-rounded" style="display: none;"
id="deselect-icon">deselect</span>
</button>
<div class=" button-container">
<button th:title="#{multiTool.deleteSelected}" id="delete-button" class="btn btn-danger hidden"
onclick="deleteSelected()">
<span class="material-symbols-rounded">delete</span>
</button>
</div>
<button id="export-selected-button" class="btn btn-primary enable-on-file hidden"
onclick="exportPdf(true)" disabled>
<span th:title="#{multiTool.downloadSelected}" class="material-symbols-rounded">
file_save
</span>
</button>
<button class="btn btn-secondary enable-on-file" onclick="addFilesBlankAll()" disabled>
<span class="material-symbols-rounded">
insert_page_break
</span>
</button>
<button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf()" disabled>
<span class="material-symbols-rounded">
<button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf(false)" disabled>
<span th:title="#{multiTool.downloadAll}" class="material-symbols-rounded">
download
</span>
</button>
</div>
<div id="selected-pages-display" class="selected-pages-container hidden">
<div style="display:flex; height:3rem; margin-right:1rem">
<h5 th:text="#{multiTool.selectedPages}" style="white-space: nowrap; margin-right: 1rem;">Selected
Pages</h5>
<input type="text" id="csv-input" class="form-control" style="height:2.5rem" placeholder="1,3,5-10"
value="">
</div>
<ul id="selected-pages-list" class="pages-list"></ul>
</div>
</div>
<div class="multi-tool-container">
<div class="d-flex flex-wrap" id="pages-container-wrapper">
<div id="pages-container">
@@ -82,6 +117,20 @@
</div>
<script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
<script th:src="@{'/js/thirdParty/pdf-lib.min.js'}"></script>
<script>
window.selectedPages = [];
window.selectPage = false;
window.selectAll = false;
const csvInput = document.getElementById("csv-input");
csvInput.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
updatePagesFromCSV();
}
});
csvInput.addEventListener("blur", function () {
updatePagesFromCSV();
});
</script>
<script type="module">
import PdfContainer from './js/multitool/PdfContainer.js';
import DragDropManager from "./js/multitool/DragDropManager.js";
@@ -95,7 +144,6 @@
// enables the default action buttons on each file
const pdfActionsManager = new PdfActionsManager('pages-container');
const fileDragManager = new FileDragManager();
// Scroll the wrapper horizontally
// Automatically exposes rotateAll, addFiles and exportPdf to the window for the global buttons.