Split HTML to make it easier to edit.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bookbinder",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "An app to rearrange PDF pages for printing for bookbinding",
   "type": "module",
   "scripts": {
@@ -26,6 +26,7 @@
     "file-saver": "^2.0.5",
     "jszip": "^3.7.1",
     "pdf-lib": "^1.16.0",
+    "vite-plugin-html-inject": "^1.1.2",
     "zod": "^3.22.4"
   }
 }

src/html/buttons.html

@@ -0,0 +1,28 @@
+<div class="space_out">
+  <button
+    type="button"
+    class="medium_btn"
+    name="preview"
+    id="preview"
+    disabled
+    data-balloon-length="medium"
+    aria-label="Will not show previews if 'Signature Files Only' is selected. Only shows one side for 'Single Sided' printing. Not tested on all browsers (or any browsers other than Chrome really...)"
+    data-balloon-pos="up"
+  >
+    Preview PDF
+  </button>
+  <button type="button" class="large_btn" name="generate" id="generate" disabled>
+    Generate PDF Output
+  </button>
+  <button
+    type="button"
+    class="medium_btn"
+    name="reset_settings"
+    id="reset_settings"
+    data-balloon-length="medium"
+    aria-label="The page is able to save and load your current settings via the site URL. Clicking this button will reset those to the default settings"
+    data-balloon-pos="up"
+  >
+    Reset Settings
+  </button>
+</div>

src/html/file.html

@@ -0,0 +1,21 @@
+<div class="section" id="input">
+  <h2>File Info</h2>
+  <span class="row"
+    ><label>Input File: <input type="file" name="input_file" accept=".pdf" id="input_file" /></label
+  ></span>
+  <!-- <span class="row"><label>Page Size: <span id="page_size"></span></span> -->
+  <!-- <span class="row">Page Ratio: <span id="input_ratio"></span></span> -->
+  <span class="row" style="padding: 10px; font-style: italic"
+    >While some PDF viewers display the first two pages as a spread, be aware the first page, which
+    is odd, will be on the right when printed. The first printed spread are pages 2 & 3 of your PDF
+    document. Evens always on the left, odds always on the right.</span
+  >
+  <span class="row"
+    ><label for="print_file">Generated Files</label>
+    <select name="print_file" id="print_file">
+      <option value="aggregated">Aggregated File Only</option>
+      <option value="both" selected>Both aggregated & per signature files</option>
+      <option value="signatures">Signature Files Only</option>
+    </select>
+  </span>
+</div>

src/html/flyleaf.html

@@ -0,0 +1,12 @@
+<div class="section" id="flyleaf_info">
+  <h2>Flyleafs</h2>
+  <span class="row">
+    <label>Add flyleafs <input type="number" name="flyleafs" value="1" /></label>
+    <span
+      data-balloon-length="medium"
+      aria-label="Extra blank pages at the start and end of the book"
+      data-balloon-pos="up"
+      >ℹ️</span
+    >
+  </span>
+</div>

src/html/page_layout.html

@@ -0,0 +1,149 @@
+<div class="section" id="book_size">
+  <h2>Page Layout</h2>
+  <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>
+  <div>
+    <label
+      >Add Foldlines
+      <span
+        data-balloon-length="medium"
+        aria-label="Adds folding guidelines (ordered thickest to thinnest)"
+        data-balloon-pos="up"
+      >
+        <input type="checkbox" name="cropmarks" /></span
+    ></label>
+    <span style="display: inline-block; width: 10px"></span>
+    <label
+      >Add Cutlines
+      <span data-balloon-length="medium" aria-label="Adds cutting guidelines" data-balloon-pos="up"
+        ><input type="checkbox" name="cutmarks" /></span
+    ></label>
+    <div>
+      <label
+        >Add PDF bounds indicators (spine)
+        <span
+          data-balloon-length="medium"
+          aria-label="Puts small marks on the outermost folio of the signatures indicating the top and bottom of the PDF"
+          data-balloon-pos="up"
+        >
+          <input type="checkbox" name="pdf_edge_marks" /></span
+      ></label>
+    </div>
+  </div>
+  <span class="row">
+    <details>
+      <summary>Folding instructions for quarto/octavo</summary>
+      <p>
+        Folding these two layouts is slightly more complex than the simple single-fold folio. Both
+        of these have been designed so that the first fold is parallel to the short edge of the
+        paper - eg, if you hold the page in portrait orientation, you will be folding the top edge
+        to the bottom. One side of the page will have consecutive numbers across this fold (ie, 3
+        and 30 on the top row, 2 and 31). Fold inward across this line (so that 3 has been folded to
+        lay against 2, and 30 against 31). The next fold is along the other paper axis (parallel to
+        the original long edge). For quarto, you want to find the side with the numbers closest
+        together, and fold inwards to match them (this will be consecutive on the innermost sheet).
+        For octavo, look at the bottom-most row and find the consecutive pair, then fold inward.
+        Octavo has one last fold, for which you want to find the pair remaning that are closest, and
+        fold them together.
+      </p>
+      <p>
+        Or, if you want to just memorize the order, once you find the first fold side, the order
+        is:<br />
+        <b>quarto</b> - top to bottom, fold points away from you, left to right, fold points towards
+        you.<br />
+        <b>octavo</b> - top to bottom, fold points away from you, left to right, fold points away
+        from you, top to bottom, fold points towards you.
+      </p>
+    </details></span
+  >
+
+  <span class="row">
+    <label for="page_scaling">Page scaling</label>
+    <select name="page_scaling" id="page_scaling">
+      <option value="centered">Original</option>
+      <option value="lockratio" selected>Keep proportional</option>
+      <option value="stretch">Stretch to fit</option>
+    </select>
+  </span>
+
+  <span class="row">
+    <label for="page_positioning">Page Positioning</label>
+    <select name="page_positioning" id="page_positioning">
+      <option value="centered" selected>Centered</option>
+      <option value="binding_alinged">Snug against binding edge</option>
+    </select>
+  </span>
+
+  <span class="row">
+    <div class="layout_margin_description">
+      White Space Manipulation. All values are in points, relative to original document.<br /><br />1
+      point = 1/72 inch
+    </div>
+    <div class="layout_margin_user_input">
+      Fore-Edge Margin:
+      <input
+        type="number"
+        id="main_fore_edge_padding_pt"
+        name="main_fore_edge_padding_pt"
+        class="layout_margin_user_input_field"
+      /><sub>pt</sub><br />
+      Binding Margin:
+      <input
+        type="number"
+        id="binding_edge_padding_pt"
+        name="binding_edge_padding_pt"
+        class="layout_margin_user_input_field"
+      /><sub>pt</sub><br />
+      Top Margin:
+      <input
+        type="number"
+        id="top_edge_padding_pt"
+        name="top_edge_padding_pt"
+        class="layout_margin_user_input_field"
+      /><sub>pt</sub><br />
+      Bottom Margin:
+      <input
+        type="number"
+        id="bottom_edge_padding_pt"
+        name="bottom_edge_padding_pt"
+        class="layout_margin_user_input_field"
+      /><sub>pt</sub><br />
+    </div>
+  </span>
+
+  <span class="row" id="show_layout_info">
+    <div class="layout_spine_label">spine</div>
+    <div class="layout_margin_info" id="layout_margin_info">
+      <div class="stripes_paper stripes_sample_box"></div>
+      <b>Paper/Layout Dimensions</b>
+      layout: <span id="page_grid_layout"></span><br />
+      max page size:
+      <span id="page_grid_dimensions"></span><br />
+      <br />
+      <div class="stripes_pdf stripes_sample_box"></div>
+      <b>PDF Dimensions</b><br />
+      source: <span id="pdf_source_dimensions"></span><br />
+      on page: <span id="pdf_page_dimensions"></span><br />
+      scaling: <span id="pdf_scale_dimensions"></span><br />
+      offset:
+      <div style="display: inline">
+        <div id="pdf_offset_dimensions" class="pdf_offset_dimensions_box"></div>
+      </div>
+      <br />
+      rotated: <span id="pdf_page_rotation_info"></span><br />
+      <br />
+      (<i>all dimensions are in Points</i>)
+    </div>
+
+    <div class="grid_layout_page stripes_paper" id="grid_layout_preview">
+      <div class="pdf_layout_page stripes_pdf" id="pdf_on_page_layout_preview"></div>
+    </div>
+  </span>
+</div>

src/html/preview.html

@@ -0,0 +1,19 @@
+<div class="section" id="sig_info">
+  <h2>Signature Info</h2>
+
+  <center>
+    <iframe id="pdf" style="width: 100%; height: 10px; display: none"></iframe>
+  </center>
+  <div class="space_out">
+    <span>Total Pages: <span id="total_pages"></span></span>
+    <span>Original PDF Pages: <span id="page_count"></span></span>
+  </div>
+  <div class="space_out">
+    <span>Total Sheets: <span id="total_sheets"></span></span>
+    <span>Number of Signatures: <span id="sig_count"></span></span>
+  </div>
+  <div>
+    <div style="text-align: center">Signature Arrangement:</div>
+    <div id="sig_arrange" style="text-align: center"></div>
+  </div>
+</div>

src/html/printer.html

@@ -0,0 +1,74 @@
+<div class="section" id="printer_info">
+  <h2>Printer</h2>
+  <span class="row"
+    ><label for="paper_size">Paper size</label>
+    <select name="paper_size" id="paper_size"></select
+  ></span>
+  <span class="row" style="padding-left: 20pt; font-style: italic">
+    <label for="paper_size_unit">display unit for paper selection </label>
+    <select name="paper_size_unit" id="paper_size_unit">
+      <option label="Points" value="pt" />
+      <option label="Inches" value="in" />
+      <option label="Centimeters" value="cm" />
+    </select>
+  </span>
+  <span class="row" style="padding-left: 20pt; font-style: italic">
+    <label for="paper_size_unit">dimensions for CUSTOM: </label>
+    <input
+      type="number"
+      id="paper_size_custom_width"
+      name="paper_size_custom_width"
+      style="width: 4em"
+    />
+    x
+    <input
+      type="number"
+      id="paper_size_custom_height"
+      name="paper_size_custom_height"
+      style="width: 4em"
+    />
+    (in Points)
+    <span
+      data-balloon-length="medium"
+      aria-label="The CUSTOM option in drop down will only appear if valid dimensions are provided. Points are the unit the system/code works in. Luckily Google can help you convert cm or inches into Points quite easily!"
+      data-balloon-pos="up"
+      >ℹ️</span
+    >
+  </span>
+
+  <span class="row"
+    ><label for="printer_type">Printer type</label>
+    <select name="printer_type" id="printer_type">
+      <option value="single" selected>Single-Sided</option>
+      <option value="duplex">Duplex</option>
+    </select>
+    <span
+      data-balloon-length="medium"
+      aria-label="Duplex will alternate front and backs of sheets in a single file; Single-sided will split fronts and backs into seperate files."
+      data-balloon-pos="up"
+      >ℹ️</span
+    >
+  </span>
+  <span class="row">
+    <label for="paper_rotation_90"
+      >Rotate Paper 90° <input type="checkbox" name="paper_rotation_90" id="paper_rotation_90"
+    /></label>
+    <span
+      data-balloon-length="medium"
+      aria-label="This puts your paper in 'landscape' -- layout still happens the same, but the porportions of things will be different"
+      data-balloon-pos="up"
+      >ℹ️</span
+    >
+  </span>
+
+  <span class="row">
+    <label
+      >Alternate Page Rotation (AKA Flip on Long Side)<input type="checkbox" name="rotate_page"
+    /></label>
+    <span id="folio_warning"
+      ><b>NOTE:</b> Not currently working for folios, sorry! Use the
+      <a href="%BASE_URL%old/index.html">old version</a>
+      for now.</span
+    ></span
+  >
+</div>