Convert source_rotation to select with hidden examples

displays the corresponding example when select is selected
momijizukamori · Feb 4, 2024 · 76335b4 · 76335b4
1 parent ed0f5aa
commit 76335b4
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -45,37 +45,56 @@ <h2>File Info</h2>
 
             <div class="section" id="input">
                 <h2>Source Manipulation</h2>
-
-                <span class="row"><input type="radio" id="none" name="source_rotation" value="none" checked>
-                    <label for="none">no modification</label>
-                    <details style="padding-left:40px;"><summary> Details</summary><IMG SRC="/img/noRotationDiagram.png" width="100px"/></details>
-                </span>
-                <span class="row"><input type="radio" id="90cw" name="source_rotation" value="90cw">
-                    <label for="90cw">rotate all pages 90° clockwise</label>
-                    <details style="padding-left:40px;"><summary> Details</summary><IMG SRC="/img/90cwDiagram.png" width="100px"/></details>
-                </span>
-
-                <span class="row"><input type="radio" id="90ccw" name="source_rotation" value="90ccw">
-                    <label for="90ccw">rotate all pages 90° counter clockwise (anti clockwise)</label>
-                    <details style="padding-left:40px;"><summary> Details</summary><IMG SRC="/img/90ccwDiagram.png" width="100px"/></details>
-                </span>
-                <span class="row"><input type="radio" id="out_binding" name="source_rotation" value="out_binding">
-                    <label for="out_binding">Out binding </label>
-                       <details style="padding-left:40px;">
-                     <summary> Details</summary> 
-                     For books with the bound edge at the bottom of the page -- rotate all odd pages 90° clockwise, all even pages 90° anti-clockwise
-                     <BR/>
-                     <IMG SRC="/img/bottomBindingDiagram.png" width="100px"/>
-                    </details>
-                </span>
-                <span class="row"><input type="radio" id="in_binding" name="source_rotation" value="in_binding">
-                    <label for="in_binding">In Binding</label>
-                        <details style="padding-left:40px;">
-                     <summary> Details</summary> 
-                     For books with the bound edge at the top of the page -- rotate all odd pages 90° anti-clockwise, all even pages 90° clockwise <BR>
-                     <IMG SRC="/img/topBindingDiagram.png" width="100px">
-                     </details>
-                 </span>
+                <label for="source_rotation">Style </label>
+                <select name="source_rotation" id="source_rotation">
+                    <option id="none" value="none" selected="selected">no modification</option>
+                    <option id="90cw" value="90cw">rotate pages 90° clockwise</option>
+                    <option id="90ccw" value="90ccw">rotate pages 90° counter clockwise</option>
+                    <option id="out_binding" value="out_binding">odd pages 90° clockwise, even pages 90° anti-clockwise</option>
+                    <option id="in_binding" value="in_binding">odd pages 90° anti-clockwise, even pages 90° clockwise</option>
+                </select>
+                <div>
+                    <div id="none_example" class="row source_rotation_example">
+                        <IMG SRC="/img/noRotationDiagram.png" width="100px" class="float_left" />
+                        <p>
+                            </br>
+                            For books that read like a standard novel<br />
+                            no rotation of pages applied
+                        </p>
+                    </div>
+                    <div id="90cw_example" class="hidden source_rotation_example">
+                        <IMG SRC="/img/90cwDiagram.png" width="100px" class="float_left" />
+                        <p>
+                            </br>
+                            For books that turn pages like a calender<br />
+                            back to front, rotate all pages 90° clockwise
+                        </p>
+                    </div>
+                    <div id="90ccw_example" class="hidden source_rotation_example">
+                        <IMG SRC="/img/90ccwDiagram.png" width="100px" class="float_left" />
+                        <p>
+                            </br>
+                            For books that turn pages like a calender<br />
+                            front to back, rotate all pages 90° counter clockwise
+                        </p>
+                    </div>
+                    <div id="out_binding_example" class="hidden source_rotation_example row">
+                        <IMG SRC="/img/bottomBindingDiagram.png" width="100px" class="float_left" />
+                        <p>
+                            </br>
+                            For books with bound edge at bottom of the page<br />
+                            rotate all odd pages 90° clockwise, all even pages 90° anti-clockwise
+                        </p>
+                    </div>
+                    <div id="in_binding_example" class="hidden source_rotation_example">
+                        <IMG SRC="/img/topBindingDiagram.png" width="100px" class="float_left">
+                        <p>
+                            </br>
+                            For books with bound edge at top of the page<br />
+                            rotate all odd pages 90° anti-clockwise, all even pages 90° clockwise
+                        </p>
+                    </div>
+                </div>
             </div>
 
             <!-- <div class="section" id="units">

diff --git a/public/styles.css b/public/styles.css
@@ -61,6 +61,10 @@ body, .wrapper, #bookbinder {
     display: block;
 }
 
+.hidden {
+    display: none;
+}
+
 #generate {
     font-size: 1.5em;
 }
@@ -155,6 +159,9 @@ body, .wrapper, #bookbinder {
     vertical-align: top;
 }
 
+.float_left {
+    float: left;
+}
 
 #reset_settings {
     margin: 1em;

diff --git a/src/main.js b/src/main.js
@@ -20,6 +20,8 @@ window.addEventListener('DOMContentLoaded', () => {
     const bookbinderForm = document.getElementById('bookbinder');
     const fileInput = document.getElementById('input_file');
     const inputs = document.querySelectorAll('input, select');
+    const sourceRotation = document.getElementById('source_rotation');
+    const sourceRotationExamples = Array.from(document.getElementsByClassName('source_rotation_example'));
 
     // spin up a book to pass to listeners
     const book = new Book(configuration);
@@ -45,4 +47,9 @@ window.addEventListener('DOMContentLoaded', () => {
         console.log('Resetting settings...');
         handleResetSettingsClick(book);
     });
+    sourceRotation.addEventListener('change', (e) => { 
+        sourceRotationExamples.forEach((example) => {example.style.display = "none"});
+        let selected = e.target.value + "_example"
+        document.getElementById(selected).style.display= "block"
+    });
 });
diff --git a/src/utils/renderUtils.js b/src/utils/renderUtils.js
@@ -174,7 +174,6 @@ export function renderFormFromSettings(configuration) {
     // Set radio options
     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;
 
     // Set freeform inputs
     document.querySelector('input[name="main_fore_edge_padding_pt"]').value = configuration.mainForeEdgePaddingPt;
@@ -185,6 +184,7 @@ export function renderFormFromSettings(configuration) {
     document.querySelector('input[name="flyleafs"]').value = configuration.flyleafs;
 
     // Set select options
+    document.querySelector('select[name="source_rotation"]').value = configuration.sourceRotation;
     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;