DGNum/Stirling-PDF
15
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

change add numbers grid and remove files from pipelines

Browse source
This commit is contained in:
Anthony Stirling 2023-07-16 16:07:08 +01:00
parent 29aabdfba8
commit d07e3e6522
2 changed files with 322 additions and 278 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/main/resources/static/js/pipeline.js
View file

@ -237,6 +237,9 @@ document.getElementById('addOperationBtn').addEventListener('click', function()
pipelineSettingsContent.innerHTML = ''; pipelineSettingsContent.innerHTML = '';
operationData.forEach(parameter => { operationData.forEach(parameter => {
// If the parameter name is 'fileInput', return early to skip the rest of this iteration
if (parameter.name === 'fileInput') return;
let parameterDiv = document.createElement('div'); let parameterDiv = document.createElement('div');
parameterDiv.className = "form-group"; parameterDiv.className = "form-group";
@ -266,9 +269,15 @@ document.getElementById('addOperationBtn').addEventListener('click', function()
case 'string': case 'string':
if (parameter.schema.format === 'binary') { if (parameter.schema.format === 'binary') {
// This is a file input // This is a file input
//parameterInput = document.createElement('input');
//parameterInput.type = 'file';
//parameterInput.className = "form-control";
parameterInput = document.createElement('input'); parameterInput = document.createElement('input');
parameterInput.type = 'file'; parameterInput.type = 'text';
parameterInput.className = "form-control"; parameterInput.className = "form-control";
parameterInput.value = "automatedFileInput";
} else { } else {
parameterInput = document.createElement('input'); parameterInput = document.createElement('input');
parameterInput.type = 'text'; parameterInput.type = 'text';

139
src/main/resources/templates/other/add-page-numbers.html
View file

@ -1,7 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org"> <html th:lang="${#locale.toString()}"
th:lang-direction="#{language.direction}"
xmlns:th="http://www.thymeleaf.org">
<th:block th:insert="~{fragments/common :: head(title=#{autoCrop.title})}"></th:block> <th:block
th:insert="~{fragments/common :: head(title=#{autoCrop.title})}"></th:block>
<body> <body>
@ -14,13 +17,17 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-6">
<h2 th:text="#{addPageNumbers.header}"></h2> <h2 th:text="#{addPageNumbers.header}"></h2>
<form method="post" enctype="multipart/form-data" th:action="@{add-page-numbers}"> <form method="post" enctype="multipart/form-data"
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div> th:action="@{add-page-numbers}">
<div
th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<br> <br>
<div class="form-group"> <div class="form-group">
<label for="customMargin">Margin Size</label> <label for="customMargin">Margin Size</label> <select
<select class="form-control" id="customMargin" name="customMargin" required> class="form-control" id="customMargin" name="customMargin"
<option value="" disabled selected>Select a margin size</option> required>
<option value="" disabled selected>Select a margin
size</option>
<option value="small">Small</option> <option value="small">Small</option>
<option value="medium">Medium</option> <option value="medium">Medium</option>
<option value="large">Large</option> <option value="large">Large</option>
@ -29,20 +36,16 @@
</div> </div>
<style> <style>
.a4container { .a4container {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 0; /* No gap between the cells */
width: 50%; width: 50%;
aspect-ratio: 0.707; /* this sets the width-height ratio approximately same as A4 paper */ aspect-ratio: 0.707;
justify-items: stretch; /* Stretch items to fill their cells */
align-items: stretch; /* Stretch items to fill their cells */
border: 1px solid #ddd; border: 1px solid #ddd;
box-sizing: border-box; box-sizing: border-box;
background-color: white;
} }
.cell { .pageNumber {
position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -50,11 +53,12 @@
color: #333; color: #333;
cursor: pointer; cursor: pointer;
background-color: #ccc; background-color: #ccc;
border: 1px solid #fff; /* Add a border to each cell */ width: 15%;
box-sizing: border-box; height: 15%;
transform: translate(-50%, -50%);
} }
.cell:hover { .pageNumber:hover {
background-color: #eee; background-color: #eee;
} }
@ -64,60 +68,91 @@
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
} }
.selectedPosition {
background-color: #0a0;
}
.selectedPosition.selectedHovered {
background-color: #006600;
}
</style> </style>
<div class="form-group"> <div class="form-group">
<label for="position">Position</label> <label for="position">Position</label>
<div class="a4container"> <div class="a4container">
<div id="1" class="cell">1</div> <div class="pageNumber" id="1" style="top: 10%; left: 10%;">1</div>
<div id="2" class="cell">2</div> <div class="pageNumber" id="2" style="top: 10%; left: 50%;">2</div>
<div id="3" class="cell">3</div> <div class="pageNumber" id="3" style="top: 10%; left: 90%;">3</div>
<div id="4" class="cell">4</div> <div class="pageNumber" id="4" style="top: 50%; left: 10%;">4</div>
<div id="5" class="cell">5</div> <div class="pageNumber" id="5" style="top: 50%; left: 50%;">5</div>
<div id="6" class="cell">6</div> <div class="pageNumber" id="6" style="top: 50%; left: 90%;">6</div>
<div id="7" class="cell">7</div> <div class="pageNumber" id="7" style="top: 90%; left: 10%;">7</div>
<div id="8" class="cell">8</div> <div class="pageNumber" id="8" style="top: 90%; left: 50%;">8</div>
<div id="9" class="cell">9</div> <div class="pageNumber" id="9" style="top: 90%; left: 90%;">9</div>
</div> </div>
</div> </div>
<form id="myForm">
<input type="number" id="numberInput" name="number" min="1" max="9" required> <input type="hidden" id="numberInput" name="position" min="1"
max="9" required>
<div class="form-group">
<label for="startingNumber">Starting Number</label> <input
type="number" class="form-control" id="startingNumber"
name="startingNumber" min="1" required value="1" />
</div>
<div class="form-group">
<label for="pagesToNumber">Pages to Number</label> <input
type="text" class="form-control" id="pagesToNumber"
name="pagesToNumber"
placeholder="Which pages to number, default 'all', also accepts 1-5 or 2,5,9 etc" />
</div>
<div class="form-group">
<label for="customText">Custom Text</label> <input type="text"
class="form-control" id="customText" name="customText"
placeholder="Default just number, also accepts 'Page {n} of {total}', 'Tag-{n}' etc" />
</div>
<button type="submit" id="submitBtn" class="btn btn-primary"
th:text="#{addPageNumbers.submit}"></button>
</form> </form>
</div>
</div>
</div>
<script> <script>
let cells = document.querySelectorAll('.cell'); let cells = document.querySelectorAll('.pageNumber');
let inputField = document.getElementById('numberInput'); let inputField = document.getElementById('numberInput');
cells.forEach(cell => { cells.forEach(cell => {
cell.addEventListener('click', function(e) { cell.addEventListener('click', function(e) {
cells.forEach(cell => {
cell.classList.remove('selectedPosition'); // Remove selected class from all cells
cell.classList.remove('selectedHovered'); // Also remove selectedHovered class
});
let selectedLocation = e.target.id; let selectedLocation = e.target.id;
inputField.value = selectedLocation; // Set input field's value inputField.value = selectedLocation;
}); e.target.classList.add('selectedPosition'); // Add selected class to clicked cell
e.target.classList.add('selectedHovered'); // Add selectedHovered class
}); });
cell.addEventListener('mouseenter', function(e) {
if(e.target.classList.contains('selectedPosition')) {
e.target.classList.add('selectedHovered');
}
});
cell.addEventListener('mouseleave', function(e) {
if(e.target.classList.contains('selectedPosition')) {
e.target.classList.remove('selectedHovered');
}
});
});
</script> </script>
<div class="form-group">
<label for="startingNumber">Starting Number</label>
<input type="number" class="form-control" id="startingNumber" name="startingNumber" min="1" required value="1"/>
</div>
<div class="form-group">
<label for="pagesToNumber">Pages to Number</label>
<input type="text" class="form-control" id="pagesToNumber" name="pagesToNumber" placeholder="Which pages to number, default 'all', also accepts 1-5 or 2,5,9 etc" />
</div>
<div class="form-group">
<label for="customText">Custom Text</label>
<input type="text" class="form-control" id="customText" name="customText" placeholder="Default just number, also accepts 'Page {n} of {total}', 'Tag-{n}' etc"/>
</div>
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{addPageNumbers.submit}"></button>
</form>
</div>
</div>
</div>
</div> </div>
<div th:insert="~{fragments/footer.html :: footer}"></div> <div th:insert="~{fragments/footer.html :: footer}"></div>
</div> </div>