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"> <div class="mb-3">
<label class="form-label" th:text="#{pageLayout.mode}"></label> <label class="form-label" th:text="#{pageLayout.mode}"></label>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" id="modeDefault" name="mode" value="DEFAULT" checked> <input class="form-check-input" type="checkbox" id="modeCustom" name="mode" value="CUSTOM">
<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">
<label class="form-check-label" for="modeCustom" th:text="#{pageLayout.custom}">Custom</label> <label class="form-check-label" for="modeCustom" th:text="#{pageLayout.custom}">Custom</label>
</div> </div>
</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> <label for="pagesPerSheet" th:text="#{pageLayout.pagesPerSheet}"></label>
<select class="form-control" id="pagesPerSheet" name="pagesPerSheet" required> <select class="form-control" id="pagesPerSheet" name="pagesPerSheet" required>
<option value="2">2</option> <option value="2">2</option>
@ -40,35 +35,41 @@
<option value="16">16</option> <option value="16">16</option>
</select> </select>
</div> </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"> <div class="mb-3">
<label for="rows" th:text="#{pageLayout.rows}"></label> <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>
<div class="mb-3"> <div class="mb-3">
<label for="cols" th:text="#{pageLayout.columns}"></label> <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>
<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>
<div class="form-check mb-3"> <div class="form-check mb-3">
<input id="addBorder" name="addBorder" type="checkbox"> <input id="advancedSettingsToggle" type="checkbox">
<label for="addBorder" th:text="#{pageLayout.addBorder}"></label> <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> </div>
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pageLayout.submit}"></button> <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pageLayout.submit}"></button>
</form> </form>
@ -76,7 +77,7 @@
<script> <script>
(function(){ (function(){
const form = document.getElementById('multiPdfForm'); 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 defaultSection = document.getElementById('defaultSection');
const customSection = document.getElementById('customSection'); const customSection = document.getElementById('customSection');
const pagesPerSheet = document.getElementById('pagesPerSheet'); const pagesPerSheet = document.getElementById('pagesPerSheet');
@ -84,7 +85,7 @@
const colsInput = document.getElementById('cols'); const colsInput = document.getElementById('cols');
function sync() { function sync() {
const mode = [...modeRadios].find(r => r.checked)?.value || 'DEFAULT'; const mode = modeCheckbox.checked? 'CUSTOM' : 'DEFAULT';
const isDefault = mode === 'DEFAULT'; const isDefault = mode === 'DEFAULT';
// Enable/disable relevant fields // 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 // initial state
sync(); sync();
})(); })();