<!DOCTYPE html>
<html th:lang="${#locale.toString()}"
th:lang-direction="#{language.direction}"
xmlns:th="http://www.thymeleaf.org">
<th:block
th:insert="~{fragments/common :: head(title=#{showJS.title}, header=#{showJS.header})}"></th:block>
<body>
<link href="css/prism.css" rel="stylesheet" />
<script src="js/thirdParty/prism.js"></script>
<div id="page-container">
<div id="content-wrap">
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
<br> <br>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<h2 th:text="#{showJS.header}"></h2>
<form id="pdfInfoForm" method="post" enctype="multipart/form-data"
th:action="@{show-javascript}">
<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="#{showJS.submit}"></button>
</form>
<div class="container mt-5">
<!-- Iterate over each main section in the JSON -->
<div id="script-content">
<!-- JavaScript will populate this section -->
</div>
<!-- Button to download the JSON -->
<a href="#" id="downloadJS" class="btn btn-primary mt-3"
style="display: none;" th:text="#{showJS.downloadJS}">Download
JSON</a>
</div>
<style>
/* Add a max-height and make it scrollable */
#script-content {
max-height: 1000px; /* Adjust this to your preferred maximum height */
overflow-y: auto;
}
</style>
<script>
document.querySelector('#pdfInfoForm').addEventListener('submit', function(event){
event.preventDefault();
// Fetch the formData
const formData = new FormData(event.target);
fetch('api/v1/misc/show-javascript', {
method: 'POST',
body: formData
}).then(response => response.text())
.then(data => {
// Escape < and > characters
let escapedData = data.replace(/</g, '<').replace(/>/g, '>');
// Create the elements manually
let preElement = document.createElement('pre');
let codeElement = document.createElement('code');
codeElement.classList.add('language-javascript');
codeElement.textContent = escapedData; // Use textContent instead of innerHTML
preElement.appendChild(codeElement);
let scriptContent = document.querySelector('#script-content');
// Clear existing content, if any
while (scriptContent.firstChild) {
scriptContent.removeChild(scriptContent.firstChild);
}
scriptContent.appendChild(preElement);
// Highlight the code using Prism.js
Prism.highlightAll();
// Create a blob object from the data and create a URL for it
let blob = new Blob([data], {type: 'application/javascript'});
let url = URL.createObjectURL(blob);
// Set the URL as the href of the download button and provide a download name
let downloadButton = document.querySelector('#downloadJS');
downloadButton.href = url;
downloadButton.download = 'extracted.js';
downloadButton.style.display = 'block';
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</div>
</div>
</div>
</div>
<div th:insert="~{fragments/footer.html :: footer}"></div>
</div>
</body>
</html>