javier/Stirling-PDF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

get info changes

Browse Source
This commit is contained in:
Anthony Stirling
2023-08-02 22:49:43 +01:00
parent 77411e94a4
commit 96f05cd518
6 changed files with 226 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/resources/messages_en_GB.properties
View File

@@ -237,7 +237,7 @@ HTMLToPDF.tags=markup,web-content,transformation,convert
home.MarkdownToPDF.title=Markdown to PDF
home.MarkdownToPDF.desc=Converts any Markdown fileto PDF
home.MarkdownToPDF.desc=Converts any Markdown file to PDF
MarkdownToPDF.tags=markup,web-content,transformation,convert

59
src/main/resources/static/js/fileInput.js
View File

@@ -1,12 +1,18 @@
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.custom-file-chooser').forEach(setupFileInput);
});
function setupFileInput(chooser) {
const elementId = chooser.getAttribute('data-element-id');
const filesSelected = chooser.getAttribute('data-files-selected');
const pdfPrompt = chooser.getAttribute('data-pdf-prompt');
let overlay;
let dragCounter = 0;
const dragenterListener = function() {
dragCounter++;
if (!overlay) {
// Create and show the overlay
overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = 0;
@@ -28,7 +34,6 @@ document.addEventListener('DOMContentLoaded', function() {
const dragleaveListener = function() {
dragCounter--;
if (dragCounter === 0) {
// Hide and remove the overlay
if (overlay) {
overlay.remove();
overlay = null;
@@ -40,24 +45,19 @@ document.addEventListener('DOMContentLoaded', function() {
const dt = e.dataTransfer;
const files = dt.files;
// Access the file input element and assign dropped files
const fileInput = document.getElementById(elementID);
const fileInput = document.getElementById(elementId);
fileInput.files = files;
// Hide and remove the overlay
if (overlay) {
overlay.remove();
overlay = null;
}
// Reset drag counter
dragCounter = 0;
//handleFileInputChange(fileInput);
fileInput.dispatchEvent(new Event('change', { bubbles: true }));
};
// Prevent default behavior for drag events
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
document.body.addEventListener(eventName, preventDefaults, false);
});
@@ -69,29 +69,26 @@ document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('dragenter', dragenterListener);
document.body.addEventListener('dragleave', dragleaveListener);
// Add drop event listener
document.body.addEventListener('drop', dropListener);
});
$("#" + elementId).on("change", function() {
handleFileInputChange(this);
});
$("#"+elementID).on("change", function() {
handleFileInputChange(this);
});
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>");
});
if (fileNames.length === 1) {
$(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames[0]);
} else if (fileNames.length > 1) {
$(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames.length + " " + filesSelected);
} else {
$(inputElement).siblings(".custom-file-label").addClass("selected").html(pdfPrompt);
}
}
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>");
});
if (fileNames.length === 1) {
$(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames[0]);
} else if (fileNames.length > 1) {
$(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames.length + " " + filesSelected);
} else {
$(inputElement).siblings(".custom-file-label").addClass("selected").html(pdfPrompt);
}
}
}

12
src/main/resources/templates/fragments/common.html
View File

@@ -98,7 +98,10 @@
</script>
<script src="js/downloader.js"></script>
<div class="custom-file-chooser">
<div class="custom-file-chooser" th:attr="data-unique-id=${name},
data-element-id=${name+'-input'},
data-files-selected=#{filesSelected},
data-pdf-prompt=#{pdfPrompt}">
<div class="custom-file">
<input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:classappend="${notRequired ? '' : 'required'}">
<label class="custom-file-label" th:for="${name}+'-input'" th:text="${inputText}"></label>
@@ -114,12 +117,7 @@
</div>
<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">Bored waiting?</button>
<script th:inline="javascript">
const elementID = /*[[${name+"-input"}]]*/ '';
const filesSelected = /*[[#{filesSelected}]]*/ '';
const pdfPrompt = /*[[#{pdfPrompt}]]*/ '';
</script>
<script src="js/fileInput.js"></script>
<link rel="stylesheet" href="css/fileSelect.css">

4
src/main/resources/templates/other/compare.html
View File

@@ -15,8 +15,8 @@
<div class="col-md-9">
<h2 th:text="#{compare.header}"></h2>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf')}"></div>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
<button class="btn btn-primary" onclick="comparePDFs()" th:text="#{compare.submit}"></button>

100
src/main/resources/templates/security/get-info-on-pdf.html
View File

@@ -15,13 +15,109 @@
<div class="col-md-6">
<h2 th:text="#{getPdfInfo.header}"></h2>
<p th:text="#{processTimeWarning}">
<form method="post" enctype="multipart/form-data" th:action="@{get-info-on-pdf}">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false)}"></div>
<form id="pdfInfoForm" method="post" enctype="multipart/form-data" th:action="@{get-info-on-pdf}">
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, remoteCall='false')}"></div>
<br>
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{getPdfInfo.submit}"></button>
</form>
<div class="container mt-5">
<!-- Iterate over each main section in the JSON -->
<div id="json-content">
<!-- JavaScript will populate this section -->
</div>
<!-- Button to download the JSON -->
<a href="#" id="downloadJson" class="btn btn-primary mt-3">Download JSON</a>
</div>
<script>
// Prevent the form from submitting the traditional way
document.getElementById("pdfInfoForm").addEventListener("submit", function(event) {
event.preventDefault();
// Fetch the formData
const formData = new FormData(event.target);
fetch('get-info-on-pdf', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
displayJsonData(data); // Display the data
setDownloadLink(data); // Set download link
})
.catch(error => console.error('Error:', error));
});
function displayJsonData(jsonData) {
let content = '';
for (const key in jsonData) {
content += renderJsonSection(key, jsonData[key]);
}
document.getElementById('json-content').innerHTML = content;
}
function setDownloadLink(jsonData) {
const downloadLink = document.getElementById('downloadJson');
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsonData, null, 4));
downloadLink.setAttribute("href", dataStr);
downloadLink.setAttribute("download", "data.json");
}
function renderJsonSection(key, value, depth = 0) {
let output = `<div class="card mb-3">
<div class="card-header" id="${key}-heading-${depth}">
<h5 class="mb-0">`;
// Check if the value is an object and has children
if (value && typeof value === 'object' && Object.keys(value).length) {
output += `
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#${key}-content-${depth}" aria-expanded="true" aria-controls="${key}-content-${depth}">
${key}
</button>`;
} else {
// Display both key and value for simple entries
output += `${key}: ${value}`;
}
output += `
</h5>
</div>
<div id="${key}-content-${depth}" class="collapse" aria-labelledby="${key}-heading-${depth}">`;
// Check if the value is a nested object
if (typeof value === 'object' && !Array.isArray(value)) {
output += '<div class="card-body">';
for (const subKey in value) {
output += renderJsonSection(subKey, value[subKey], depth + 1);
}
output += '</div>';
} else if (typeof value === 'object' && Array.isArray(value) && value.length) { // Array values
value.forEach((val, index) => {
output += renderJsonSection(index, val, depth + 1);
});
}
output += '</div></div>';
return output;
}
</script>
</div>
</div>
</div>