2023-04-18 05:08:38 +03:00
|
|
|
<!DOCTYPE html>
|
2024-05-05 15:19:53 +04:00
|
|
|
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}"
|
2024-05-22 21:48:23 +01:00
|
|
|
xmlns:th="https://www.thymeleaf.org">
|
2024-05-05 15:19:53 +04:00
|
|
|
|
|
|
|
|
<head>
|
2024-02-16 22:49:06 +01:00
|
|
|
<th:block th:insert="~{fragments/common :: head(title=#{multiTool.title}, header=#{multiTool.header})}"></th:block>
|
2024-05-05 15:19:53 +04:00
|
|
|
</head>
|
2023-04-18 05:08:38 +03:00
|
|
|
|
2024-05-05 15:19:53 +04:00
|
|
|
<body>
|
|
|
|
|
<div id="image-highlighter"></div>
|
|
|
|
|
<div id="page-container">
|
|
|
|
|
<div id="content-wrap">
|
|
|
|
|
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
|
|
|
|
|
<br><br>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row justify-content-center">
|
|
|
|
|
<div class="col-md-12">
|
2024-05-19 12:44:54 +02:00
|
|
|
<div class="bg-card">
|
2024-05-05 15:19:53 +04:00
|
|
|
<div class="tool-header">
|
|
|
|
|
<span class="material-symbols-rounded tool-header-icon advance">construction</span>
|
|
|
|
|
<span class="tool-header-text" th:text="#{multiTool.header}"></span>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2024-05-05 15:19:53 +04:00
|
|
|
<div class="mt-action-bar d-flex flex-wrap">
|
|
|
|
|
<div class="mt-filename">
|
2024-03-29 01:44:21 +08:00
|
|
|
<label for="filename-input" th:text="#{multiTool.uploadPrompts}">Filename</label>
|
2024-05-05 15:19:53 +04:00
|
|
|
<input type="text" class="form-control" id="filename-input"
|
|
|
|
|
th:placeholder="#{multiTool.uploadPrompts}">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mt-action-btn">
|
2024-08-29 11:07:31 +02:00
|
|
|
<button class="btn btn-primary" onclick="addFiles()">
|
2024-05-05 15:19:53 +04:00
|
|
|
<span class="material-symbols-rounded">
|
|
|
|
|
add
|
|
|
|
|
</span>
|
2024-11-21 17:34:50 +00:00
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.addFile}"></span>
|
2024-05-05 15:19:53 +04:00
|
|
|
</button>
|
|
|
|
|
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
|
|
|
|
|
<span class="material-symbols-rounded">
|
|
|
|
|
rotate_left
|
|
|
|
|
</span>
|
2024-11-21 17:34:50 +00:00
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.rotateLeft}"></span>
|
2024-05-05 15:19:53 +04:00
|
|
|
</button>
|
|
|
|
|
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
|
|
|
|
|
<span class="material-symbols-rounded">
|
|
|
|
|
rotate_right
|
|
|
|
|
</span>
|
2024-11-21 17:34:50 +00:00
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.rotateRight}"></span>
|
2024-05-05 15:19:53 +04:00
|
|
|
</button>
|
2024-09-07 13:25:39 +03:00
|
|
|
<button class="btn btn-secondary enable-on-file" onclick="splitAll()" disabled>
|
|
|
|
|
<span class="material-symbols-rounded">
|
|
|
|
|
cut
|
|
|
|
|
</span>
|
2024-11-21 17:34:50 +00:00
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.split}"></span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="btn btn-secondary enable-on-file" onclick="addFilesBlankAll()" disabled>
|
|
|
|
|
<span class="material-symbols-rounded">
|
|
|
|
|
insert_page_break
|
|
|
|
|
</span>
|
|
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.insertPageBreak}"></span>
|
2024-09-07 13:25:39 +03:00
|
|
|
</button>
|
2024-11-28 16:25:13 +02:00
|
|
|
<button id="undo-btn" class="btn btn-secondary" onclick="undo()" disabled>
|
|
|
|
|
<span class="material-symbols-rounded">
|
|
|
|
|
undo
|
|
|
|
|
</span>
|
|
|
|
|
<span class="btn-tooltip">
|
|
|
|
|
<div th:text="#{multiTool.undo}"></div>
|
|
|
|
|
<div class="text-uppercase" th:text="'(CTRL + Z)'"></div>
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button id="redo-btn" class="btn btn-secondary" onclick="redo()" disabled>
|
|
|
|
|
<span class="material-symbols-rounded">
|
|
|
|
|
redo
|
|
|
|
|
</span>
|
|
|
|
|
<span class="btn-tooltip">
|
|
|
|
|
<div th:text="#{multiTool.redo}"></div>
|
|
|
|
|
<div class="text-uppercase" th:text="'(CTRL + Y)'"></div>
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
</button>
|
|
|
|
|
|
2024-11-14 20:00:36 +00:00
|
|
|
<button id="select-pages-container" class="btn btn-secondary enable-on-file"
|
2024-11-21 17:34:50 +00:00
|
|
|
onclick="toggleSelectPageVisibility()" disabled>
|
2024-11-14 20:00:36 +00:00
|
|
|
<span id="select-pages-button" class="material-symbols-rounded">
|
|
|
|
|
event_list
|
|
|
|
|
</span>
|
2024-11-21 17:34:50 +00:00
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.selectPages}"></span>
|
|
|
|
|
|
2024-11-14 20:00:36 +00:00
|
|
|
</button>
|
2024-11-21 17:34:50 +00:00
|
|
|
<button id="deselect-All-Container" class="btn btn-secondary enable-on-file hidden"
|
2024-11-14 20:00:36 +00:00
|
|
|
onclick="toggleSelectAll()" disabled>
|
2025-01-03 11:23:26 +00:00
|
|
|
<span class="material-symbols-rounded" id="deselect-icon">deselect</span>
|
|
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.deselectAll}"></span>
|
2024-11-14 20:00:36 +00:00
|
|
|
</button>
|
2024-11-21 17:34:50 +00:00
|
|
|
<button id="select-All-Container" class="btn btn-secondary enable-on-file hidden"
|
2025-01-03 11:23:26 +00:00
|
|
|
onclick="toggleSelectAll()" disabled>
|
|
|
|
|
<span class="material-symbols-rounded" id="select-icon">select_all</span>
|
2024-11-21 17:34:50 +00:00
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.selectAll}"></span>
|
2025-01-03 11:23:26 +00:00
|
|
|
</button>
|
2024-11-21 17:34:50 +00:00
|
|
|
<div class="button-container">
|
2025-01-03 11:23:26 +00:00
|
|
|
<button id="delete-button" class="btn btn-danger delete hidden" onclick="deleteSelected()">
|
2024-11-14 20:00:36 +00:00
|
|
|
<span class="material-symbols-rounded">delete</span>
|
2024-11-21 17:34:50 +00:00
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.deleteSelected}"></span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-left:auto">
|
2025-01-03 11:23:26 +00:00
|
|
|
<button id="export-selected-button"
|
|
|
|
|
style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)"
|
|
|
|
|
class="btn btn-primary enable-on-file hidden" onclick="exportPdf(true)" disabled>
|
2024-11-21 17:34:50 +00:00
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.downloadSelected}"></span>
|
2025-01-03 11:23:26 +00:00
|
|
|
<span class="material-symbols-rounded">
|
2024-11-21 17:34:50 +00:00
|
|
|
file_save
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
2025-01-03 11:23:26 +00:00
|
|
|
<button style="border-color: green; color:#b2e3a8; background: rgba(24, 122, 5, 1)"
|
|
|
|
|
id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf(false)" disabled>
|
2024-11-21 17:34:50 +00:00
|
|
|
<span class="material-symbols-rounded">
|
|
|
|
|
download
|
|
|
|
|
</span>
|
|
|
|
|
<span class="btn-tooltip" th:text="#{multiTool.downloadAll}"></span>
|
2024-11-14 20:00:36 +00:00
|
|
|
</button>
|
|
|
|
|
</div>
|
2023-04-18 05:08:38 +03:00
|
|
|
</div>
|
2024-11-14 20:00:36 +00:00
|
|
|
<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>
|
2025-01-03 11:23:26 +00:00
|
|
|
<input type="text" id="csv-input" class="form-control" style="height:2.5rem" placeholder="1,3,5-10"
|
|
|
|
|
value="">
|
2024-11-14 20:00:36 +00:00
|
|
|
</div>
|
|
|
|
|
<ul id="selected-pages-list" class="pages-list"></ul>
|
|
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2024-11-14 20:00:36 +00:00
|
|
|
|
2024-05-05 15:19:53 +04:00
|
|
|
<div class="multi-tool-container">
|
|
|
|
|
<div class="d-flex flex-wrap" id="pages-container-wrapper">
|
|
|
|
|
<div id="pages-container">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2023-04-18 05:08:38 +03:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2023-04-18 05:08:38 +03:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2023-04-18 05:08:38 +03:00
|
|
|
</div>
|
2024-05-05 15:19:53 +04:00
|
|
|
<div id="drag-container"></div>
|
|
|
|
|
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
|
|
|
|
|
</div>
|
2024-09-15 00:24:04 -07:00
|
|
|
<script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
|
2024-11-14 20:00:36 +00:00
|
|
|
<script>
|
|
|
|
|
window.selectedPages = [];
|
|
|
|
|
window.selectPage = false;
|
|
|
|
|
window.selectAll = false;
|
2024-11-21 19:33:19 +00:00
|
|
|
|
|
|
|
|
window.translations = {
|
2025-01-03 11:23:26 +00:00
|
|
|
rotateLeft: '[[#{multiTool.rotateLeft}]]',
|
|
|
|
|
rotateRight: '[[#{multiTool.rotateRight}]]',
|
|
|
|
|
moveLeft: '[[#{multiTool.moveLeft}]]',
|
|
|
|
|
moveRight: '[[#{multiTool.moveRight}]]',
|
|
|
|
|
delete: '[[#{multiTool.delete}]]',
|
|
|
|
|
split: '[[#{multiTool.split}]]',
|
|
|
|
|
addFile: '[[#{multiTool.addFile}]]',
|
|
|
|
|
insertPageBreak: '[[#{multiTool.insertPageBreak}]]',
|
|
|
|
|
dragDropMessage: '[[#{multiTool.dragDropMessage}]]',
|
|
|
|
|
undo: '[[#{multiTool.undo}]]',
|
|
|
|
|
redo: '[[#{multiTool.redo}]]',
|
2024-11-21 19:33:19 +00:00
|
|
|
};
|
|
|
|
|
|
2024-12-10 16:39:06 +00:00
|
|
|
window.decrypt = {
|
2025-01-03 11:23:26 +00:00
|
|
|
passwordPrompt: '[[#{decrypt.passwordPrompt}]]',
|
|
|
|
|
cancelled: '[[#{decrypt.cancelled}]]',
|
|
|
|
|
noPassword: '[[#{decrypt.noPassword}]]',
|
|
|
|
|
invalidPassword: '[[#{decrypt.invalidPassword}]]',
|
|
|
|
|
invalidPasswordHeader: '[[#{decrypt.invalidPasswordHeader}]]',
|
|
|
|
|
unexpectedError: '[[#{decrypt.unexpectedError}]]',
|
|
|
|
|
serverError: '[[#{decrypt.serverError}]]',
|
|
|
|
|
success: '[[#{decrypt.success}]]',
|
|
|
|
|
}
|
2024-11-21 19:33:19 +00:00
|
|
|
|
2024-11-14 20:00:36 +00:00
|
|
|
const csvInput = document.getElementById("csv-input");
|
|
|
|
|
csvInput.addEventListener("keydown", function (event) {
|
|
|
|
|
if (event.key === "Enter") {
|
|
|
|
|
updatePagesFromCSV();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
csvInput.addEventListener("blur", function () {
|
|
|
|
|
updatePagesFromCSV();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2024-05-05 15:19:53 +04:00
|
|
|
<script type="module">
|
2024-11-28 16:25:13 +02:00
|
|
|
import { UndoManager } from './js/multitool/UndoManager.js';
|
2024-05-05 15:19:53 +04:00
|
|
|
import PdfContainer from './js/multitool/PdfContainer.js';
|
|
|
|
|
import DragDropManager from "./js/multitool/DragDropManager.js";
|
|
|
|
|
import ImageHighlighter from "./js/multitool/ImageHighlighter.js";
|
|
|
|
|
import PdfActionsManager from './js/multitool/PdfActionsManager.js';
|
|
|
|
|
import FileDragManager from './js/multitool/fileInput.js';
|
|
|
|
|
// enables drag and drop
|
2024-11-28 16:25:13 +02:00
|
|
|
|
|
|
|
|
var undoManager = new UndoManager();
|
2024-05-05 15:19:53 +04:00
|
|
|
const dragDropManager = new DragDropManager('drag-container', 'pages-container');
|
|
|
|
|
// enables image highlight on click
|
|
|
|
|
const imageHighlighter = new ImageHighlighter('image-highlighter');
|
2024-08-29 11:07:31 +02:00
|
|
|
// enables the default action buttons on each file
|
2024-11-28 16:25:13 +02:00
|
|
|
const pdfActionsManager = new PdfActionsManager('pages-container', undoManager);
|
2024-05-05 15:19:53 +04:00
|
|
|
const fileDragManager = new FileDragManager();
|
|
|
|
|
// Scroll the wrapper horizontally
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-08-29 11:07:31 +02:00
|
|
|
// Automatically exposes rotateAll, addFiles and exportPdf to the window for the global buttons.
|
2024-05-05 15:19:53 +04:00
|
|
|
const pdfContainer = new PdfContainer(
|
|
|
|
|
'pages-container',
|
|
|
|
|
'pages-container-wrapper',
|
|
|
|
|
[
|
|
|
|
|
dragDropManager,
|
|
|
|
|
imageHighlighter,
|
|
|
|
|
pdfActionsManager,
|
|
|
|
|
fileDragManager
|
2024-11-28 16:25:13 +02:00
|
|
|
],
|
|
|
|
|
undoManager
|
2024-05-05 15:19:53 +04:00
|
|
|
)
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-12-31 10:44:49 +00:00
|
|
|
fileDragManager.setCallback(async (files) => pdfContainer.handleDroppedFiles(files));
|
2025-01-03 11:23:26 +00:00
|
|
|
document.addEventListener('keydown', function (event) {
|
|
|
|
|
let targetElementId = event.target.id;
|
2024-11-28 16:25:13 +02:00
|
|
|
|
2025-01-03 11:23:26 +00:00
|
|
|
// To avoid undoing/redoing the page when the user is simply undoing/redoing text
|
|
|
|
|
const isFilenameInputField = (targetElementId === 'filename-input') && (event.target === document.activeElement);
|
2024-11-28 16:25:13 +02:00
|
|
|
|
2025-01-03 11:23:26 +00:00
|
|
|
const isUndo = (event.ctrlKey && event.key === 'z');
|
|
|
|
|
const isRedo = (event.ctrlKey && event.key == 'y');
|
|
|
|
|
if (isUndo && !isFilenameInputField)
|
|
|
|
|
undoManager.undo();
|
|
|
|
|
else if (isRedo && !isFilenameInputField) undoManager.redo();
|
|
|
|
|
});
|
2024-05-05 15:19:53 +04:00
|
|
|
</script>
|
|
|
|
|
</body>
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-11-21 19:33:19 +00:00
|
|
|
</html>
|
