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">
|
2023-03-25 23:16:26 +01:00
|
|
|
|
2023-04-01 22:02:54 +02:00
|
|
|
<title th:text="${@appName} + (${title} != null and ${title} != '' ? ' - ' + ${title} : '')"></title>
|
2023-02-11 15:27:15 +01:00
|
|
|
<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>
|
|
|
|
|
|
2023-03-20 22:55:11 +01:00
|
|
|
<!-- jQuery -->
|
|
|
|
|
<script src="js/jszip.min.js"></script>
|
|
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<!-- 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 -->
|
2023-03-20 22:55:11 +01:00
|
|
|
<script src="pdfjs/pdf.js"></script>
|
2023-02-11 15:27:15 +01:00
|
|
|
|
2023-04-18 04:08:38 +02:00
|
|
|
<!-- PDF-Lib -->
|
2023-04-20 18:34:58 +02:00
|
|
|
<script src="js/pdf-lib.min.js"></script>
|
2023-04-18 04:08:38 +02:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<!-- Custom -->
|
|
|
|
|
<link rel="stylesheet" href="css/general.css">
|
2023-05-08 03:23:45 +02:00
|
|
|
<link rel="stylesheet" th:href="@{css/light-mode.css}" id="light-mode-styles">
|
2023-02-11 15:27:15 +01:00
|
|
|
<link rel="stylesheet" th:href="@{css/dark-mode.css}" id="dark-mode-styles">
|
2023-04-29 00:18:10 +02:00
|
|
|
<link rel="stylesheet" th:href="@{css/rainbow-mode.css}" id="rainbow-mode-styles" disabled="true">
|
2023-05-07 22:39:34 +02:00
|
|
|
<link rel="stylesheet" href="css/tab-container.css">
|
|
|
|
|
<script src="js/tab-container.js"></script>
|
|
|
|
|
|
|
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<script>
|
2023-04-29 00:18:10 +02:00
|
|
|
var toggleCount = 0;
|
|
|
|
|
var lastToggleTime = Date.now();
|
|
|
|
|
|
2023-03-20 22:55:11 +01:00
|
|
|
function toggleDarkMode() {
|
2023-04-29 00:18:10 +02:00
|
|
|
var currentTime = Date.now();
|
|
|
|
|
if (currentTime - lastToggleTime < 1000) {
|
|
|
|
|
toggleCount++;
|
|
|
|
|
} else {
|
|
|
|
|
toggleCount = 1;
|
|
|
|
|
}
|
|
|
|
|
lastToggleTime = currentTime;
|
|
|
|
|
|
2023-05-08 03:23:45 +02:00
|
|
|
var lightModeStyles = document.getElementById("light-mode-styles");
|
2023-04-29 00:18:10 +02:00
|
|
|
var darkModeStyles = document.getElementById("dark-mode-styles");
|
|
|
|
|
var rainbowModeStyles = document.getElementById("rainbow-mode-styles");
|
|
|
|
|
var darkModeIcon = document.getElementById("dark-mode-icon");
|
2023-04-21 18:50:59 +02:00
|
|
|
|
2023-04-29 00:18:10 +02:00
|
|
|
if (toggleCount >= 18) {
|
|
|
|
|
localStorage.setItem("dark-mode", "rainbow");
|
2023-05-08 03:23:45 +02:00
|
|
|
lightModeStyles.disabled = true;
|
2023-04-29 00:18:10 +02:00
|
|
|
darkModeStyles.disabled = true;
|
|
|
|
|
rainbowModeStyles.disabled = false;
|
|
|
|
|
darkModeIcon.src = "rainbow.svg";
|
|
|
|
|
} else if (localStorage.getItem("dark-mode") == "on") {
|
|
|
|
|
localStorage.setItem("dark-mode", "off");
|
2023-05-08 03:23:45 +02:00
|
|
|
lightModeStyles.disabled = false;
|
2023-04-29 00:18:10 +02:00
|
|
|
darkModeStyles.disabled = true;
|
|
|
|
|
rainbowModeStyles.disabled = true;
|
|
|
|
|
darkModeIcon.src = "sun.svg";
|
|
|
|
|
} else {
|
|
|
|
|
localStorage.setItem("dark-mode", "on");
|
2023-05-08 03:23:45 +02:00
|
|
|
lightModeStyles.disabled = true;
|
2023-04-29 00:18:10 +02:00
|
|
|
darkModeStyles.disabled = false;
|
|
|
|
|
rainbowModeStyles.disabled = true;
|
|
|
|
|
darkModeIcon.src = "moon.svg";
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-04-21 18:50:59 +02:00
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
2023-05-08 03:23:45 +02:00
|
|
|
var lightModeStyles = document.getElementById("light-mode-styles");
|
2023-04-29 00:18:10 +02:00
|
|
|
var darkModeStyles = document.getElementById("dark-mode-styles");
|
|
|
|
|
var rainbowModeStyles = document.getElementById("rainbow-mode-styles");
|
|
|
|
|
var darkModeIcon = document.getElementById("dark-mode-icon");
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-04-29 00:18:10 +02:00
|
|
|
if (localStorage.getItem("dark-mode") == "on") {
|
2023-05-08 03:23:45 +02:00
|
|
|
lightModeStyles.disabled = true;
|
2023-04-29 00:18:10 +02:00
|
|
|
darkModeStyles.disabled = false;
|
|
|
|
|
rainbowModeStyles.disabled = true;
|
|
|
|
|
darkModeIcon.src = "moon.svg";
|
|
|
|
|
} else if (localStorage.getItem("dark-mode") == "off") {
|
2023-05-08 03:23:45 +02:00
|
|
|
lightModeStyles.disabled = false;
|
2023-04-29 00:18:10 +02:00
|
|
|
darkModeStyles.disabled = true;
|
|
|
|
|
rainbowModeStyles.disabled = true;
|
|
|
|
|
darkModeIcon.src = "sun.svg";
|
|
|
|
|
} else if (localStorage.getItem("dark-mode") == "rainbow") {
|
2023-05-08 03:23:45 +02:00
|
|
|
lightModeStyles.disabled = true;
|
2023-04-29 00:18:10 +02:00
|
|
|
darkModeStyles.disabled = true;
|
|
|
|
|
rainbowModeStyles.disabled = false;
|
|
|
|
|
darkModeIcon.src = "rainbow.svg";
|
|
|
|
|
} else {
|
|
|
|
|
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
|
|
|
darkModeStyles.disabled = false;
|
|
|
|
|
rainbowModeStyles.disabled = true;
|
|
|
|
|
darkModeIcon.src = "moon.svg";
|
|
|
|
|
} else {
|
|
|
|
|
darkModeStyles.disabled = true;
|
|
|
|
|
rainbowModeStyles.disabled = true;
|
|
|
|
|
darkModeIcon.src = "sun.svg";
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-04-21 18:50:59 +02:00
|
|
|
|
2023-04-29 00:18:10 +02:00
|
|
|
document.getElementById("dark-mode-toggle").addEventListener("click", function (event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
toggleDarkMode();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-02-03 21:26:35 +01:00
|
|
|
</head>
|
|
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
<th:block th:fragment="game">
|
|
|
|
|
<dialog id="game-container-wrapper" class="game-container-wrapper" data-modal>
|
|
|
|
|
<script>
|
|
|
|
|
console.log("loaded game")
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
function loadGameScript(callback) {
|
|
|
|
|
console.log('loadGameScript called');
|
|
|
|
|
const script = document.createElement('script');
|
|
|
|
|
script.src = 'js/game.js';
|
|
|
|
|
script.onload = callback;
|
|
|
|
|
document.body.appendChild(script);
|
|
|
|
|
}
|
|
|
|
|
let gameScriptLoaded = false;
|
2023-05-04 18:46:00 +02:00
|
|
|
const gameDialog = document.getElementById('game-container-wrapper')
|
2023-05-03 23:07:51 +02:00
|
|
|
$('#show-game-btn').on('click', function() {
|
|
|
|
|
console.log('Show game button clicked');
|
|
|
|
|
if (!gameScriptLoaded) {
|
|
|
|
|
console.log('Show game button load');
|
|
|
|
|
loadGameScript(function() {
|
|
|
|
|
console.log('Game script loaded');
|
|
|
|
|
window.initializeGame();
|
|
|
|
|
gameScriptLoaded = true;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
window.resetGame();
|
|
|
|
|
}
|
2023-05-04 18:46:00 +02:00
|
|
|
gameDialog.showModal();
|
2023-05-03 23:07:51 +02:00
|
|
|
});
|
2023-05-04 18:46:00 +02:00
|
|
|
gameDialog.addEventListener("click", e => {
|
|
|
|
|
const dialogDimensions = gameDialog.getBoundingClientRect()
|
|
|
|
|
if (
|
|
|
|
|
e.clientX < dialogDimensions.left ||
|
|
|
|
|
e.clientX > dialogDimensions.right ||
|
|
|
|
|
e.clientY < dialogDimensions.top ||
|
|
|
|
|
e.clientY > dialogDimensions.bottom
|
|
|
|
|
) {
|
|
|
|
|
gameDialog.close()
|
|
|
|
|
}
|
|
|
|
|
})
|
2023-05-03 23:07:51 +02:00
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
<div id="game-container">
|
|
|
|
|
<div id="lives">Lives: 3</div>
|
|
|
|
|
<div id="score">Score: 0</div>
|
|
|
|
|
<div id="high-score">High Score: 0</div>
|
|
|
|
|
<div id="level">Level: 1</div>
|
|
|
|
|
<img src="favicon.svg" class="player" id="player">
|
|
|
|
|
</div>
|
|
|
|
|
<style>
|
|
|
|
|
#game-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100vh;
|
|
|
|
|
height: 0;
|
|
|
|
|
padding-bottom: 75%; /* 4:3 aspect ratio */
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
margin: auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
border: 2px solid black; /* Add border */
|
|
|
|
|
}
|
2023-02-03 21:26:35 +01:00
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
.pdf, .player, .projectile {
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
.pdf {
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
}
|
|
|
|
|
.player {
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
}
|
|
|
|
|
.projectile {
|
|
|
|
|
background-color: black !important;
|
|
|
|
|
width: 5px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
}
|
|
|
|
|
#score, #level, #lives, #high-score {
|
|
|
|
|
color: black;
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
position: absolute;
|
|
|
|
|
font-size: calc(14px + 0.25vw); /* Reduced font size */
|
|
|
|
|
}
|
|
|
|
|
#score {
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: 10px;
|
|
|
|
|
}
|
|
|
|
|
#lives {
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: calc(7vw); /* Adjusted position */
|
|
|
|
|
}
|
|
|
|
|
#high-score {
|
|
|
|
|
top: 10px;
|
|
|
|
|
left: calc(14vw); /* Adjusted position */
|
|
|
|
|
}
|
|
|
|
|
#level {
|
|
|
|
|
top: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
}
|
2023-04-30 18:29:35 +02:00
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
</style>
|
|
|
|
|
</dialog>
|
|
|
|
|
</th:block>
|
2023-02-03 21:26:35 +01:00
|
|
|
|
2023-05-21 13:32:24 +02:00
|
|
|
<th:block th:fragment="fileSelector(name, multiple)" th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: 'true', notRequired=${notRequired} ?: false">
|
2023-05-03 23:07:51 +02:00
|
|
|
<script>
|
2023-05-31 01:06:35 +02:00
|
|
|
function showErrorBanner(message, stackTrace) {
|
|
|
|
|
const errorContainer = document.getElementById("errorContainer");
|
|
|
|
|
errorContainer.style.display = "block"; // Display the banner
|
|
|
|
|
document.querySelector("#errorContainer .alert-heading").textContent = "Error";
|
|
|
|
|
document.querySelector("#errorContainer p").textContent = message;
|
|
|
|
|
document.querySelector("#traceContent").textContent = stackTrace;
|
|
|
|
|
}
|
2023-05-31 22:28:05 +02:00
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
$('form').submit(async function (event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
const url = this.action;
|
|
|
|
|
const files = $('#fileInput-input')[0].files;
|
|
|
|
|
const formData = new FormData(this);
|
|
|
|
|
const override = $('#override').val() || '';
|
|
|
|
|
|
|
|
|
|
$('#submitBtn').text('Processing...');
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
if (override === 'multi' || files.length > 1 && override !== 'single') {
|
|
|
|
|
await submitMultiPdfForm(url, files);
|
|
|
|
|
} else {
|
|
|
|
|
const downloadDetails = await handleSingleDownload(url, formData);
|
|
|
|
|
|
|
|
|
|
// Determine the download option from localStorage
|
|
|
|
|
const downloadOption = localStorage.getItem('downloadOption');
|
|
|
|
|
|
|
|
|
|
// Handle the download action according to the selected option
|
|
|
|
|
handleDownloadAction(downloadOption, downloadDetails.blob, downloadDetails.filename);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$('#submitBtn').text('Submit');
|
|
|
|
|
} catch (error) {
|
|
|
|
|
handleDownloadError(error);
|
|
|
|
|
$('#submitBtn').text('Submit');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function handleDownloadAction(downloadOption, blob, filename) {
|
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
|
|
|
|
|
|
switch (downloadOption) {
|
|
|
|
|
case 'sameWindow':
|
|
|
|
|
// Open the file in the same window
|
|
|
|
|
window.location.href = url;
|
|
|
|
|
break;
|
|
|
|
|
case 'newWindow':
|
|
|
|
|
// Open the file in a new window
|
|
|
|
|
window.open(url, '_blank');
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
// Download the file
|
|
|
|
|
const link = document.createElement('a');
|
|
|
|
|
link.href = url;
|
|
|
|
|
link.download = filename;
|
|
|
|
|
link.click();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-04-01 22:02:54 +02:00
|
|
|
|
2023-05-31 22:28:05 +02:00
|
|
|
async function handleSingleDownload(url, formData) {
|
|
|
|
|
const response = await fetch(url, {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: formData
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
|
|
|
} else {
|
|
|
|
|
const blob = await response.blob();
|
|
|
|
|
const filename = getFilenameFromContentDisposition(response.headers.get('Content-Disposition'));
|
|
|
|
|
return { blob, filename };
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function getFilenameFromContentDisposition(contentDisposition) {
|
|
|
|
|
let filename;
|
2023-02-11 15:27:15 +01:00
|
|
|
|
2023-05-31 22:28:05 +02:00
|
|
|
if (contentDisposition && contentDisposition.indexOf('attachment') !== -1) {
|
|
|
|
|
filename = decodeURIComponent(contentDisposition.split('filename=')[1].replace(/"/g, ''));
|
|
|
|
|
} else {
|
|
|
|
|
// If the Content-Disposition header is not present or does not contain the filename, use a default filename
|
|
|
|
|
filename = 'download';
|
|
|
|
|
}
|
2023-04-01 22:02:54 +02:00
|
|
|
|
2023-05-31 22:28:05 +02:00
|
|
|
return filename;
|
|
|
|
|
}
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-04-01 22:02:54 +02:00
|
|
|
|
2023-05-31 22:28:05 +02:00
|
|
|
async function handlePdfOrImageResponse(response, filename) {
|
|
|
|
|
const downloadOption = localStorage.getItem('downloadOption');
|
|
|
|
|
const blob = await response.blob();
|
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
|
if (downloadOption === 'sameWindow') {
|
|
|
|
|
window.location.href = url;
|
|
|
|
|
} else if (downloadOption === 'newWindow') {
|
|
|
|
|
window.open(url, '_blank');
|
|
|
|
|
} else {
|
|
|
|
|
downloadFile(url, filename);
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-04-01 22:02:54 +02:00
|
|
|
|
2023-05-31 22:28:05 +02:00
|
|
|
async function handleJsonResponse(response) {
|
|
|
|
|
const json = await response.json();
|
|
|
|
|
const errorMessage = JSON.stringify(json, null, 2);
|
|
|
|
|
if(errorMessage.toLowerCase().includes('the password is incorrect') || errorMessage.toLowerCase().includes('Password is not provided')){
|
|
|
|
|
alert('[[#{error.pdfPassword}]]');
|
|
|
|
|
} else {
|
|
|
|
|
showErrorBanner(json.error + ':' + json.message, json.trace);
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-04-01 22:02:54 +02:00
|
|
|
|
2023-05-31 22:28:05 +02:00
|
|
|
async function handleOtherResponse(response, filename) {
|
|
|
|
|
const blob = await response.blob();
|
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
|
downloadFile(url, filename);
|
|
|
|
|
}
|
|
|
|
|
function handleDownloadError(error) {
|
|
|
|
|
const errorMessage = error.message;
|
|
|
|
|
showErrorBanner(errorMessage);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let urls = []; // An array to hold all the URLs
|
|
|
|
|
|
|
|
|
|
function downloadFile(blob, filename) {
|
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
|
const a = document.createElement('a');
|
|
|
|
|
a.href = url;
|
|
|
|
|
a.download = filename;
|
|
|
|
|
a.click();
|
|
|
|
|
urls.push(url); // Store the URL so it doesn't get garbage collected too soon
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function submitMultiPdfForm(url, files) {
|
|
|
|
|
const zipThreshold = parseInt(localStorage.getItem('zipThreshold'), 10) || 4;
|
|
|
|
|
const zipFiles = files.length > zipThreshold;
|
|
|
|
|
let jszip = null;
|
|
|
|
|
let progressBar = $('#progressBar');
|
|
|
|
|
progressBar.css('width', '0%');
|
|
|
|
|
progressBar.attr('aria-valuenow', 0);
|
|
|
|
|
progressBar.attr('aria-valuemax', Array.from(files).length);
|
|
|
|
|
if (zipFiles) {
|
|
|
|
|
jszip = new JSZip();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Get existing form data
|
|
|
|
|
let formData = new FormData($('form')[0]);
|
|
|
|
|
formData.delete('fileInput');
|
|
|
|
|
|
|
|
|
|
const CONCURRENCY_LIMIT = 8;
|
|
|
|
|
const chunks = [];
|
|
|
|
|
for (let i = 0; i < Array.from(files).length; i += CONCURRENCY_LIMIT) {
|
|
|
|
|
chunks.push(Array.from(files).slice(i, i + CONCURRENCY_LIMIT));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (const chunk of chunks) {
|
|
|
|
|
const promises = chunk.map(async file => {
|
|
|
|
|
let fileFormData = new FormData();
|
|
|
|
|
fileFormData.append('fileInput', file);
|
|
|
|
|
|
|
|
|
|
// Add other form data
|
|
|
|
|
for (let pair of formData.entries()) {
|
|
|
|
|
fileFormData.append(pair[0], pair[1]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const downloadDetails = await handleSingleDownload(url, fileFormData);
|
|
|
|
|
if (zipFiles) {
|
|
|
|
|
jszip.file(downloadDetails.filename, downloadDetails.blob);
|
|
|
|
|
} else {
|
|
|
|
|
downloadFile(downloadDetails.blob, downloadDetails.filename);
|
|
|
|
|
}
|
|
|
|
|
updateProgressBar(progressBar, Array.from(files).length);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
handleDownloadError(error);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
await Promise.all(promises);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (zipFiles) {
|
|
|
|
|
try {
|
|
|
|
|
const content = await jszip.generateAsync({ type: "blob" });
|
|
|
|
|
downloadFile(content, "files.zip");
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('Error generating ZIP file: ' + error);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
function updateProgressBar(progressBar, files) {
|
|
|
|
|
let progress = ((progressBar.attr('aria-valuenow') / files.length) * 100) + (100 / files.length);
|
|
|
|
|
progressBar.css('width', progress + '%');
|
|
|
|
|
progressBar.attr('aria-valuenow', parseInt(progressBar.attr('aria-valuenow')) + 1);
|
|
|
|
|
}
|
2023-05-31 22:28:05 +02:00
|
|
|
window.addEventListener('unload', () => {
|
|
|
|
|
for (const url of urls) {
|
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
</script>
|
2023-04-01 22:02:54 +02:00
|
|
|
|
2023-04-30 18:29:35 +02:00
|
|
|
<div class="custom-file-chooser">
|
2023-05-03 23:07:51 +02:00
|
|
|
<div class="custom-file">
|
2023-05-21 13:32:24 +02:00
|
|
|
<input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:classappend="${notRequired ? '' : 'required'}">
|
2023-05-03 23:07:51 +02:00
|
|
|
<label class="custom-file-label" th:for="${name}+'-input'" th:text="${inputText}"></label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="selected-files"></div>
|
|
|
|
|
</div>
|
2023-04-30 18:29:35 +02:00
|
|
|
<div id="progressBarContainer" style="display: none; position: relative;">
|
2023-05-03 23:07:51 +02:00
|
|
|
<div class="progress" style="height: 1rem;">
|
|
|
|
|
<div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
|
|
|
|
|
<span class="sr-only">Loading...</span>
|
2023-04-30 18:29:35 +02:00
|
|
|
</div>
|
2023-05-03 23:07:51 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">Bored waiting?</button>
|
2023-04-30 18:29:35 +02:00
|
|
|
|
2023-03-20 22:55:11 +01:00
|
|
|
|
|
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
<script th:inline="javascript">
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
|
const fileInput = document.getElementById([[${name+"-input"}]]);
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
// Prevent default behavior for drag events
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
|
|
|
fileInput.addEventListener(eventName, preventDefaults, false);
|
|
|
|
|
});
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
function preventDefaults(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
}
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
// Add drop event listener
|
|
|
|
|
fileInput.addEventListener('drop', handleDrop, false);
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
function handleDrop(e) {
|
|
|
|
|
const dt = e.dataTransfer;
|
|
|
|
|
const files = dt.files;
|
|
|
|
|
fileInput.files = files;
|
|
|
|
|
handleFileInputChange(fileInput)
|
|
|
|
|
}
|
2023-03-20 22:55:11 +01:00
|
|
|
});
|
|
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
$([[${"#"+name+"-input"}]]).on("change", function() {
|
2023-03-20 22:55:11 +01:00
|
|
|
handleFileInputChange(this);
|
|
|
|
|
});
|
|
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
function handleFileInputChange(inputElement) {
|
|
|
|
|
const files = $(inputElement).get(0).files;
|
|
|
|
|
const fileNames = Array.from(files).map(f => f.name);
|
|
|
|
|
const selectedFilesContainer = $(inputElement).siblings(".selected-files");
|
|
|
|
|
selectedFilesContainer.empty();
|
|
|
|
|
fileNames.forEach(fileName => {
|
|
|
|
|
selectedFilesContainer.append("<div>" + fileName + "</div>");
|
|
|
|
|
});
|
|
|
|
|
console.log("fileNames.length=" + fileNames.length)
|
|
|
|
|
if (fileNames.length === 1) {
|
|
|
|
|
$(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames[0]);
|
|
|
|
|
} else if (fileNames.length > 1) {
|
2023-05-13 14:26:28 +02:00
|
|
|
$(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames.length + " " + [[#{filesSelected}]]);
|
2023-05-03 23:07:51 +02:00
|
|
|
} else {
|
|
|
|
|
$(inputElement).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>
|
2023-05-03 23:07:51 +02:00
|
|
|
.custom-file-label {
|
|
|
|
|
padding-right: 90px;
|
|
|
|
|
}
|
|
|
|
|
.selected-files {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
max-height: 150px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
}
|
2023-02-11 15:27:15 +01:00
|
|
|
</style>
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-02-03 21:26:35 +01:00
|
|
|
</th:block>
|
