Convert pagelayout radios to select

It doesn't really make sense to use four mutually exclusive radio buttons, especially when space is at a premium.
momijizukamori · Feb 5, 2024 · eae3656 · eae3656
1 parent 2498ba3
commit eae3656
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -126,15 +126,13 @@ <h2>Printer</h2>
 
             <div class="section" id="book_size">
                 <h2>Page Layout</h2>
-                <span class="row"><input type="radio" id="folio" name="pagelayout" value="folio" checked>
-                    <label for="folio">Folio (two pages per side of sheet)</label></span>
-                <span class="row"><input type="radio" id="quarto" name="pagelayout" value="quarto">
-                    <label for="quarto">Quarto (four pages per side of sheet)</label></span>
-                <span class="row"><input type="radio" id="octavo" name="pagelayout" value="octavo">
-                    <label for="octavo">Octavo (eight pages per side of sheet)</label></span>
-                <span class="row"><input type="radio" id="sextodecimo" name="pagelayout" value="sextodecimo">
-                    <label for="sextodecimo">Sextodecimo (sixteen pages per side of sheet)</label></span>
-
+                <label for="pagelayout">Style</label>
+                <select name="pagelayout" id="pagelayout">
+                    <option id="folio" value="folio">Folio - two pages per side of sheet</option>
+                    <option id="quarto" value="quarto" selected>Quarto - four pages per side of sheet</option>
+                    <option id="octavo" value="octavo">Octavo - eight pages per side of sheet</option>
+                    <option id="sextodecimo" value="sextodecimo">Sextodecimo - sixteen pages per side of sheet</option>
+                </select>
                 <span class="row"> <label>Add Foldlines <input type="checkbox" name="cropmarks"></label>
                     <span data-balloon-length="medium" aria-label="Adds folding guidelines (ordered from thickest to thinnest)" data-balloon-pos="up">ℹ️</span>
                 </span> 

diff --git a/src/utils/renderUtils.js b/src/utils/renderUtils.js
@@ -176,7 +176,6 @@ export function renderFormFromSettings(configuration) {
     }
 
     // Set radio options
-    document.querySelector(`input[name="pagelayout"][value="${configuration.pageLayout}"]`).checked = true;
     document.querySelector(`input[name="sig_format"][value="${configuration.sigFormat}"]`).checked = true;
     document.querySelector(`input[name="wacky_spacing"][value="${configuration.wackySpacing}"]`).checked = true;
     document.querySelector(`input[name="source_rotation"][value="${configuration.sourceRotation}"]`).checked = true;
@@ -190,6 +189,7 @@ export function renderFormFromSettings(configuration) {
     document.querySelector('input[name="flyleafs"]').value = configuration.flyleafs;
 
     // Set select options
+    document.querySelector('select[name="pagelayout"]').value = configuration.pageLayout;
     document.querySelector('select[name="page_scaling"]').value = configuration.pageScaling;
     document.querySelector('select[name="page_positioning"]').value = configuration.pagePositioning;
     document.querySelector('select[name="print_file"]').value = configuration.printFile;