2023-02-03 21:26:35 +01:00
|
|
|
<head th:fragment="head">
|
2023-02-07 21:14:03 +01:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<!-- Metadata -->
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title th:text="'S-PDF ' + ${title}"></title>
|
|
|
|
|
<link rel="shortcut icon" href="favicon.svg">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<!-- jQuery -->
|
|
|
|
|
<script src="js/jquery.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap -->
|
|
|
|
|
<script src="js/popper.min.js"></script>
|
|
|
|
|
<script src="js/bootstrap.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
|
|
|
<link rel="stylesheet" href="css/bootstrap-icons.css">
|
|
|
|
|
|
|
|
|
|
<!-- PDF.js -->
|
|
|
|
|
<script src="pdfjs/pdf.min.js"></script>
|
|
|
|
|
<link href="pdfjs/pdf_viewer.min.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
<!-- Custom -->
|
|
|
|
|
<link rel="stylesheet" href="css/general.css">
|
|
|
|
|
<link rel="stylesheet" th:href="@{css/dark-mode.css}" id="dark-mode-styles">
|
|
|
|
|
|
|
|
|
|
<script>
|
2023-02-07 21:14:03 +01:00
|
|
|
function toggleDarkMode() {
|
|
|
|
|
var checkbox = document.getElementById("toggle-dark-mode");
|
|
|
|
|
var darkModeStyles = document.getElementById("dark-mode-styles");
|
|
|
|
|
if (checkbox.checked) {
|
|
|
|
|
localStorage.setItem("dark-mode", "on");
|
|
|
|
|
darkModeStyles.disabled = false;
|
|
|
|
|
} else {
|
|
|
|
|
localStorage.setItem("dark-mode", "off");
|
|
|
|
|
darkModeStyles.disabled = true;
|
|
|
|
|
}
|
2023-02-03 21:26:35 +01:00
|
|
|
}
|
2023-02-07 21:14:03 +01:00
|
|
|
$(document).ready(function() {
|
|
|
|
|
var darkModeStyles = document.getElementById("dark-mode-styles");
|
|
|
|
|
var checkbox = document.getElementById("toggle-dark-mode");
|
|
|
|
|
if (localStorage.getItem("dark-mode") == "on") {
|
|
|
|
|
darkModeStyles.disabled = false;
|
|
|
|
|
checkbox.checked = true;
|
|
|
|
|
}
|
|
|
|
|
if (localStorage.getItem("dark-mode") == "off") {
|
|
|
|
|
darkModeStyles.disabled = true;
|
|
|
|
|
checkbox.checked = false;
|
|
|
|
|
}
|
2023-02-03 21:26:35 +01:00
|
|
|
|
2023-02-07 21:14:03 +01:00
|
|
|
});
|
|
|
|
|
</script>
|
2023-02-03 21:26:35 +01:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<th:block th:fragment="filelist">
|
2023-02-11 15:27:15 +01:00
|
|
|
<div id="fileList"></div>
|
|
|
|
|
<div id="fileList2"></div>
|
|
|
|
|
<script>
|
2023-02-03 21:26:35 +01:00
|
|
|
var input = document.getElementById("fileInput");
|
|
|
|
|
var output = document.getElementById("fileList");
|
|
|
|
|
|
|
|
|
|
input.addEventListener("change", function() {
|
|
|
|
|
var files = input.files;
|
|
|
|
|
var fileNames = "";
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
|
|
|
fileNames += (i + 1) + ". " + files[i].name + "<br>";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
output.innerHTML = fileNames;
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2023-02-11 15:27:15 +01:00
|
|
|
<script>
|
2023-02-03 21:26:35 +01:00
|
|
|
var input2 = document.getElementById("fileInput2");
|
|
|
|
|
var output2 = document.getElementById("fileList2");
|
|
|
|
|
if (input2 != null && !input2) {
|
|
|
|
|
input2.addEventListener("change", function() {
|
|
|
|
|
var files = input2.files;
|
|
|
|
|
var fileNames = "";
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
|
|
|
fileNames += (i + 1) + ". " + files[i].name + "<br>";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
output2.innerHTML = fileNames;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<script>
|
2023-02-03 21:26:35 +01:00
|
|
|
if (dropContainer) {
|
|
|
|
|
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
|
|
|
|
|
evt.preventDefault();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
dropContainer.ondrop = function(evt) {
|
|
|
|
|
if (fileInput) {
|
|
|
|
|
fileInput.files = evt.dataTransfer.files;
|
|
|
|
|
|
|
|
|
|
const dT = new DataTransfer();
|
|
|
|
|
dT.items.add(evt.dataTransfer.files[0]);
|
|
|
|
|
dT.items.add(evt.dataTransfer.files[3]);
|
|
|
|
|
fileInput.files = dT.files;
|
|
|
|
|
|
|
|
|
|
evt.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2023-02-05 00:45:33 +01:00
|
|
|
</th:block>
|
|
|
|
|
|
|
|
|
|
<th:block th:fragment="fileSelector(name, multiple)">
|
2023-02-11 15:27:15 +01:00
|
|
|
<div class="custom-file-chooser">
|
|
|
|
|
<div class="custom-file">
|
|
|
|
|
<input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:multiple="${multiple}">
|
|
|
|
|
<label class="custom-file-label" th:for="${name}+'-input'" th:text="#{pdfPrompt}"></label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script th:inline="javascript">
|
2023-02-05 00:45:33 +01:00
|
|
|
$([[${"#"+name+"-input"}]]).on("change", function() {
|
|
|
|
|
const files = $(this).get(0).files;
|
|
|
|
|
const fileNames = Array.from(files).map(f => f.name).join(", ");
|
|
|
|
|
if (fileNames) {
|
|
|
|
|
$(this).siblings(".custom-file-label").addClass("selected").html(fileNames);
|
|
|
|
|
} else {
|
2023-02-05 20:04:37 +01:00
|
|
|
$(this).siblings(".custom-file-label").addClass("selected").html([[#{pdfPrompt}]]);
|
2023-02-05 00:45:33 +01:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2023-02-06 12:26:20 +01:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<style>
|
|
|
|
|
.custom-file-label {
|
|
|
|
|
padding-right: 90px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2023-02-03 21:26:35 +01:00
|
|
|
</th:block>
|
