Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-11-16 01:21:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Instead of selecting the mode using radio buttons, the mode is by default 'DEFAULT', to change it to 'CUSTOM' the user checks the 'Custom' Checkbox. Added an 'Advanced Settings' checkbox, when unchecked it resets to default values.

Browse Source
This commit is contained in:
OUNZAR Aymane 2025-11-12 10:59:25 +01:00
parent f3e84b80cf
commit a8bbed3082
1 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
app/core/src/main/resources/templates/multi-page-layout.html
View File

@ -21,16 +21,11 @@
<div class="mb-3">
<label class="form-label" th:text="#{pageLayout.mode}"></label>
<div class="form-check">
<input class="form-check-input" type="radio" id="modeDefault" name="mode" value="DEFAULT" checked>
<label class="form-check-label" for="modeDefault" th:text="#{pageLayout.default}">Default</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="modeCustom" name="mode" value="CUSTOM">
<input class="form-check-input" type="checkbox" id="modeCustom" name="mode" value="CUSTOM">
<label class="form-check-label" for="modeCustom" th:text="#{pageLayout.custom}">Custom</label>
</div>
</div>
<div id="defaultSection" class="mb-3">
<div id="defaultSection" class="mb-3" style="border:1px solid #eee; padding:1em; border-radius:8px; margin-bottom:1em;">
<label for="pagesPerSheet" th:text="#{pageLayout.pagesPerSheet}"></label>
<select class="form-control" id="pagesPerSheet" name="pagesPerSheet" required>
<option value="2">2</option>
@ -40,35 +35,41 @@
<option value="16">16</option>
</select>
</div>
<div id="customSection" class="mb-3">
<div id="customSection" class="mb-3" style="border:1px solid #eee; padding:1em; border-radius:8px; margin-bottom:1em;">
<div class="mb-3">
<label for="rows" th:text="#{pageLayout.rows}"></label>
<input class="form-control" type="number" id="rows" name="rows" step="1" min="1" value="1" required>
<input class="form-control" type="number" id="rows" name="rows" step="1" min="1" max="300" value="1" required>
</div>
<div class="mb-3">
<label for="cols" th:text="#{pageLayout.columns}"></label>
<input class="form-control" type="number" id="cols" name="cols" step="1" min="1" value="1" required>
<input class="form-control" type="number" id="cols" name="cols" step="1" min="1" max="300" value="1" required>
</div>
</div>
<div class="mb-3">
<label for="pageOrder" th:text="#{pageLayout.pageOrder}"></label>
<select class="form-control" id="pageOrder" name="pageOrder">
<option value="LR_TD" th:text="#{pageLayout.leftRightTopDown}"></option>
<option value="RL_TD" th:text="#{pageLayout.rightLeftTopDown}"></option>
<option value="TD_LR" th:text="#{pageLayout.topDownLeftRight}"></option>
<option value="TD_RL" th:text="#{pageLayout.topDownRightLeft}"></option>
</select>
</div>
<div class="mb-3">
<label for="orientation" th:text="#{pageLayout.orientation}"></label>
<select class="form-control" id="orientation" name="orientation">
<option value="PORTRAIT" th:text="#{pageLayout.portrait}"></option>
<option value="LANDSCAPE" th:text="#{pageLayout.landscape}"></option>
</select>
</div>
<div class="form-check mb-3">
<input id="addBorder" name="addBorder" type="checkbox">
<label for="addBorder" th:text="#{pageLayout.addBorder}"></label>
<input id="advancedSettingsToggle" type="checkbox">
<label for="advancedSettingsToggle" th:text="#{pageLayout.advancedSettings}"></label>
</div>
<div id="advancedSettings" style="display:none; border:1px solid #eee; padding:1em; border-radius:8px; margin-bottom:1em;">
<div class="mb-3">
<label for="pageOrder" th:text="#{pageLayout.pageOrder}"></label>
<select class="form-control" id="pageOrder" name="pageOrder">
<option value="LR_TD" th:text="#{pageLayout.leftRightTopDown}"></option>
<option value="RL_TD" th:text="#{pageLayout.rightLeftTopDown}"></option>
<option value="TD_LR" th:text="#{pageLayout.topDownLeftRight}"></option>
<option value="TD_RL" th:text="#{pageLayout.topDownRightLeft}"></option>
</select>
</div>
<div class="mb-3">
<label for="orientation" th:text="#{pageLayout.orientation}"></label>
<select class="form-control" id="orientation" name="orientation">
<option value="PORTRAIT" th:text="#{pageLayout.portrait}"></option>
<option value="LANDSCAPE" th:text="#{pageLayout.landscape}"></option>
</select>
</div>
<div class="form-check mb-3">
<input id="addBorder" name="addBorder" type="checkbox">
<label for="addBorder" th:text="#{pageLayout.addBorder}"></label>
</div>
</div>
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pageLayout.submit}"></button>
</form>
@ -76,7 +77,7 @@
<script>
(function(){
const form = document.getElementById('multiPdfForm');
const modeRadios = form.querySelectorAll('input[name="mode"]');
const modeCheckbox = form.querySelector('input[name="mode"]');
const defaultSection = document.getElementById('defaultSection');
const customSection = document.getElementById('customSection');
const pagesPerSheet = document.getElementById('pagesPerSheet');
@ -84,7 +85,7 @@
const colsInput = document.getElementById('cols');
function sync() {
const mode = [...modeRadios].find(r => r.checked)?.value || 'DEFAULT';
const mode = modeCheckbox.checked? 'CUSTOM' : 'DEFAULT';
const isDefault = mode === 'DEFAULT';
// Enable/disable relevant fields
@ -101,7 +102,20 @@
}
}
modeRadios.forEach(r => r.addEventListener('change', sync));
modeCheckbox.addEventListener('change', sync);
// Show/hide advanced settings
const advancedToggle = document.getElementById('advancedSettingsToggle');
const advancedSettings = document.getElementById('advancedSettings');
if (advancedToggle && advancedSettings) {
advancedToggle.addEventListener('change', function() {
advancedSettings.style.display = this.checked ? 'block' : 'none';
advancedSettings.querySelector('#addBorder').checked = false;
advancedSettings.querySelector('#pageOrder').value = 'LR_TD';
advancedSettings.querySelector('#orientation').value = 'PORTRAIT';
});
}
// initial state
sync();
})();