show javascript, bug fixes
This commit is contained in:
Anthony Stirling
@@ -109,7 +109,7 @@
|
||||
</li>
|
||||
|
||||
<li class="nav-item nav-item-separator"></li>
|
||||
<li class="nav-item dropdown" th:classappend="${currentPage}=='sign' OR ${currentPage}=='repair' OR ${currentPage}=='compare' OR ${currentPage}=='flatten' OR ${currentPage}=='remove-blanks' OR ${currentPage}=='extract-image-scans' OR ${currentPage}=='change-metadata' OR ${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='change-permissions' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' OR ${currentPage}=='add-page-numbers' OR ${currentPage}=='auto-rename' OR ${currentPage}=='get-info-on-pdf' ? 'active' : ''">
|
||||
<li class="nav-item dropdown" th:classappend="${currentPage}=='sign' OR ${currentPage}=='repair' OR ${currentPage}=='compare' OR ${currentPage}=='show-javascript' OR ${currentPage}=='flatten' OR ${currentPage}=='remove-blanks' OR ${currentPage}=='extract-image-scans' OR ${currentPage}=='change-metadata' OR ${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='change-permissions' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' OR ${currentPage}=='add-page-numbers' OR ${currentPage}=='auto-rename' OR ${currentPage}=='get-info-on-pdf' ? 'active' : ''">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="icon" src="images/card-list.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;">
|
||||
<span class="icon-text" th:text="#{navbar.other}"></span>
|
||||
@@ -131,6 +131,7 @@
|
||||
<div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-page-numbers', 'images/add-page-numbers.svg', 'home.add-page-numbers.title', 'home.add-page-numbers.desc', 'add-page-numbers.tags')}"></div>
|
||||
<div th:replace="~{fragments/navbarEntry :: navbarEntry ('auto-rename', 'images/fonts.svg', 'home.auto-rename.title', 'home.auto-rename.desc', 'auto-rename.tags')}"></div>
|
||||
<div th:replace="~{fragments/navbarEntry :: navbarEntry ('get-info-on-pdf', 'images/info.svg', 'home.getPdfInfo.title', 'home.getPdfInfo.desc', 'getPdfInfo.tags')}"></div>
|
||||
<div th:replace="~{fragments/navbarEntry :: navbarEntry ('show-javascript', 'images/js.svg', 'home.showJS.title', 'home.showJS.desc', 'showJS.tags')}"></div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
@@ -88,6 +88,7 @@
|
||||
<div th:replace="~{fragments/card :: card(id='get-info-on-pdf', cardTitle=#{home.getPdfInfo.title}, cardText=#{home.getPdfInfo.desc}, cardLink='get-info-on-pdf', svgPath='images/info.svg')}"></div>
|
||||
<div th:replace="~{fragments/card :: card(id='extract-page', cardTitle=#{home.extractPage.title}, cardText=#{home.extractPage.desc}, cardLink='extract-page', svgPath='images/extract.svg')}"></div>
|
||||
<div th:replace="~{fragments/card :: card(id='pdf-to-single-page', cardTitle=#{home.PdfToSinglePage.title}, cardText=#{home.PdfToSinglePage.desc}, cardLink='pdf-to-single-page', svgPath='images/single-page.svg')}"></div>
|
||||
<div th:replace="~{fragments/card :: card(id='show-javascript', cardTitle=#{home.showJS.title}, cardText=#{home.showJS.desc}, cardLink='show-javascript', svgPath='images/js.svg')}"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
89
src/main/resources/templates/other/show-javascript.html
Normal file
89
src/main/resources/templates/other/show-javascript.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!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 => {
|
||||
// Escape < and > characters
|
||||
let escapedData = data.replace(/</g, '<').replace(/>/g, '>');
|
||||
|
||||
// Wrap the JavaScript content in a pre and code tag and add it to the div
|
||||
document.querySelector('#script-content').innerHTML = '<pre><code class="language-javascript">' + escapedData + '</code></pre>';
|
||||
|
||||
// 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>
|
||||
@@ -73,46 +73,45 @@
|
||||
|
||||
|
||||
function renderJsonSection(key, value, depth = 0) {
|
||||
// Replace spaces and other non-alphanumeric characters with underscores for valid IDs
|
||||
let safeKey = (typeof key === "string") ? key.replace(/[^a-zA-Z0-9]/g, '_') : key;
|
||||
|
||||
let output = `<div class="card mb-3">
|
||||
<div class="card-header" id="${safeKey}-heading-${depth}">
|
||||
<h5 class="mb-0">`;
|
||||
|
||||
// Check if the value is an object and has children
|
||||
if (value && typeof value === 'object') {
|
||||
// For arrays and non-array objects
|
||||
if (Array.isArray(value) && value.length === 0) {
|
||||
output += `${key}: Empty array`;
|
||||
} else if (!Array.isArray(value) && Object.keys(value).length === 0) {
|
||||
output += `${key}: Empty object`;
|
||||
} else {
|
||||
output += `
|
||||
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#${safeKey}-content-${depth}" aria-expanded="true" aria-controls="${safeKey}-content-${depth}">
|
||||
${key}
|
||||
</button>`;
|
||||
}
|
||||
} else {
|
||||
// For simple key-value pairs
|
||||
output += `${key}: ${value}`;
|
||||
}
|
||||
|
||||
if (key === 'XMPMetadata' && typeof value === "string") {
|
||||
output += `<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#${safeKey}-content-${depth}" aria-expanded="true" aria-controls="${safeKey}-content-${depth}">
|
||||
${key}
|
||||
</button>`;
|
||||
} else if (value && typeof value === 'object') {
|
||||
if (Array.isArray(value) && value.length === 0) {
|
||||
output += `${key}: Empty array`;
|
||||
} else if (!Array.isArray(value) && Object.keys(value).length === 0) {
|
||||
output += `${key}: Empty object`;
|
||||
} else {
|
||||
output += `<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#${safeKey}-content-${depth}" aria-expanded="true" aria-controls="${safeKey}-content-${depth}">
|
||||
${key}
|
||||
</button>`;
|
||||
}
|
||||
} else {
|
||||
output += `${key}: ${value}`;
|
||||
}
|
||||
|
||||
output += `
|
||||
</h5>
|
||||
</div>
|
||||
<div id="${safeKey}-content-${depth}" class="collapse" aria-labelledby="${safeKey}-heading-${depth}">`;
|
||||
</h5>
|
||||
</div>
|
||||
<div id="${safeKey}-content-${depth}" class="collapse" aria-labelledby="${safeKey}-heading-${depth}">`;
|
||||
|
||||
// Check if the value is a nested object
|
||||
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
||||
if (key === 'XMPMetadata' && typeof value === "string") {
|
||||
output += `<div class="card-body"><pre>${escapeHTML(value)}</pre></div>`;
|
||||
} else if (value && typeof value === 'object' && !Array.isArray(value)) {
|
||||
output += '<div class="card-body">';
|
||||
if (Object.keys(value).length) {
|
||||
for (const subKey in value) {
|
||||
output += renderJsonSection(subKey, value[subKey], depth + 1);
|
||||
}
|
||||
} else {
|
||||
output += '<p class="text-muted">Empty object</p>';
|
||||
output += '<p class="text-muted">Empty</p>';
|
||||
}
|
||||
output += '</div>';
|
||||
} else if (value && typeof value === 'object' && Array.isArray(value)) {
|
||||
@@ -123,7 +122,7 @@
|
||||
output += renderJsonSection(arrayKey, val, depth + 1);
|
||||
});
|
||||
} else {
|
||||
output += '<p class="text-muted">Empty array</p>';
|
||||
output += '<p class="text-muted">Empty</p>';
|
||||
}
|
||||
output += '</div>';
|
||||
}
|
||||
@@ -132,6 +131,14 @@
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
|
||||
function escapeHTML(s) {
|
||||
if(s)
|
||||
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
|
||||
return null;
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user