2023-08-06 22:56:02 +02:00
|
|
|
<!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})}"></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('show-javascript', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: formData
|
|
|
|
|
}).then(response => response.text())
|
|
|
|
|
.then(data => {
|
2023-08-09 21:30:07 +02:00
|
|
|
// Escape < and > characters
|
2023-08-06 22:56:02 +02:00
|
|
|
let escapedData = data.replace(/</g, '<').replace(/>/g, '>');
|
|
|
|
|
|
2023-08-09 21:30:07 +02:00
|
|
|
// 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);
|
2023-08-06 22:56:02 +02:00
|
|
|
|
|
|
|
|
// 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>
|
