custom dimensions

sithel · Dec 23, 2024 · ca903df · ca903df
1 parent 1387d43
commit ca903df
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,9 @@
       imposed: { /* sheets: List<List<PageNumber>>, signatures: List<List<PageNumber>>, hasSplitSig: Boolean, requiresCutting: Boolean */ },
       page_orientation: null,
       display_unit: null, // what to show, ex: cm
-      display_unit_scale: null // what to multiple pts by, ex: 1/72
+      display_unit_scale: null, // what to multiple pts by, ex: 1/72
+      selected_paper_size: null, // key into PAGE_SIZES object
+      selected_paper_dimensions: [0,0] // width / height in PT
     }
     function fakeBook() {
       window.book.unified_source = {pageCount: 120, maxWidth: 113.386, maxHeight: 170.079, _scale100px: 0.5879620646875864}
@@ -34,6 +36,8 @@
 
     document.getElementById("unit_selector").value = "points";
     document.getElementById("unit_selector").dispatchEvent(new Event('change'));
+    document.getElementById("paper_size_options").value = "LETTER";
+    document.getElementById("paper_size_options").dispatchEvent(new Event('change'));
   </script>
   <!-- Pico.css -->
   <link
@@ -348,7 +352,7 @@ <h2>1. Source PDF(s)</h2>
             <span id="insert_pdf_source_details_here"></span>
             <span id="insert_pdf_source_errors_here"  style="visibility: hidden;"></span>
             <details id="extra_pdf_info" style="margin-left: 50px;">
-              <summary><small>Learn more about PDFs</small></summary>
+              <summary><small>Learn more about PDFs &amp; units </small></summary>
               <p>What unit are those numbers in? Some says they're 'PDF units' -- see <a href="https://supportz.activepdf.com/hc/en-us/articles/360002401633-What-are-PDF-Units-and-Coordinates" target="_blank">this page to learn about the PDF coordidate system!</a> -- but a better answer would be to look back towards old school typesetting and learn about <a href="https://en.wikipedia.org/wiki/Point_(typography)" target="_blank">Points</a> and <a href="https://en.wikipedia.org/wiki/Pica_(typography)" target="_blank">Pica</a>
               </p>
             </details>
@@ -480,11 +484,11 @@ <h2>5. Printer Paper</h2>
         <BR>
         <fieldset  role="group">
           Paper Size&nbsp;
-          <select id="paper_size_options" name="paper_size_options" required>
+          <select id="paper_size_options" name="paper_size_options" onchange="vip.handlePaperSizeDropdownChange(this)"> 
             <option value="" selected>Letter</option>
             <option>A4</option>
           </select>
-          <input type="text" id="paper_size" name="paper_size" placeholder="10x30" aria-invalid="false" />
+          <input type="text" id="paper_size" name="paper_size" placeholder="10x30" oninput="vip.handleManualPaperSizeChange(this)"/>
         </fieldset>
         <small class="units">cm</small>
         <BR>

diff --git a/js/main.js b/js/main.js
@@ -80,6 +80,44 @@ export const vip = {
   },
   handlePdfPageScaling: function() {
 
+  },
+  handlePaperSizeDropdownChange: function(el) {
+    console.log("We selected '"+el.value+"'")
+    console.log(PAGE_SIZES[el.value])
+    window.book.selected_paper_size = el.value
+    const customDimens = function() {
+      const customEl = document.getElementById("paper_size_custom")
+      return [customEl.getAttribute("data-width-pt"),customEl.getAttribute("data-height-pt")]
+    }
+    const dimens = (el.value == "custom") ? customDimens() : PAGE_SIZES[el.value]
+    window.book.selected_paper_dimensions = dimens
+    document.getElementById("paper_size").setAttribute("placeholder", dimens[0] +" x "+dimens[1])
+    if (el.value != "custom") {
+      document.getElementById("paper_size").value = ""
+    } else {
+      document.getElementById("paper_size").value = dimens[0] + " x " + dimens[1]
+    }
+  },
+  handleManualPaperSizeChange: function(el) {
+    const optionEl = document.getElementById("paper_size_custom")
+    console.log("Looking at '"+el.value+"' given ", optionEl)
+    if (el.value == "") {
+      el.removeAttribute("aria-invalid")
+      if (optionEl != null)
+        optionEl.remove()
+      return;
+    }
+    const [w,h] =el.value.split("x").map(n => n.trim()).map(n => n.trim()).map(n => parseInt(n))
+    const custom = (optionEl == null) ? document.createElement("option") : optionEl;
+    custom.setAttribute("value", "custom");
+    custom.setAttribute("id", "paper_size_custom");
+    custom.setAttribute("data-width-pt", w);
+    custom.setAttribute("data-height-pt", h);
+    custom.innerHTML = "Custom ("+w+" x "+h+")"
+    if (optionEl == null)
+      document.getElementById("paper_size_options").appendChild(custom)
+    el.setAttribute("aria-invalid", isNaN(w) || isNaN(h))
+    document.getElementById("paper_size_options").value = "custom"
   },
   handleUnitChange: function(e) {
     const roundIt = window.roundIt;
@@ -94,8 +132,6 @@ export const vip = {
 
     document.getElementById("paper_size_options").innerHTML = Object.keys(PAGE_SIZES)
       .map(p => "<option value='"+p+"'>"+p+" ("+roundIt(PAGE_SIZES[p][0] * scale)+" x "+roundIt(PAGE_SIZES[p][1] * scale)+" "+display+")</option>")
-      // .map(s => console.log(" > size "+s.length+" :: ["+s+"]"))
-
       .join("\n")
   }
   // renderPageRotationDemo : function(aRot, bRot, cRot, scale){ drawing.renderPageRotationDemo(aRot, bRot, cRot, scale) }