impose + single page checkboxes

octomode.py

@@ -26,6 +26,7 @@ APP.config.from_pyfile('settings.py')
 
 # ---
 
+
 # My attempt as showing helpful error messages.
 # the class holds an error string to show in the error.html tempalte
 # for now mostly for when the space in the yaml meta is missing. 
@@ -224,8 +225,17 @@ def html(name):
 @APP.route('/<name>/pdf/')
 def pdf(name):
     app_root = get_app_root()
-    url = f"{ app_root }/{name}/pagedjs.html"
+    pagedjs_base = f"{ app_root }/{name}/pagedjs.html"
-    return render_template('pdf.html', url=url, name=name.strip(), pad_url=APP.config['PAD_URL'])
+    impose = request.args.get("impose") == "1"
+    single_page = request.args.get("single") == "1"
+    params = {}
+    if impose:
+        params["impose"] = "1"
+    if single_page:
+        params["single"] = "1"
+    query = f"?{ urlencode(params) }" if params else ""
+    url = f"{ pagedjs_base }{ query }"
+    return render_template('pdf.html', url=url, pagedjs_base=pagedjs_base, name=name.strip(), pad_url=APP.config['PAD_URL'])
 
 # @APP.route('/<name>/impose/')
 # def impose(name):
@@ -272,9 +282,18 @@ def pagedjs(name):
     title = get_meta(metadata, 'title', 'Untitled')
     cover = get_meta(metadata, 'cover', None)
 
-    print("impose?" + str(request.args.get("impose")))
+    impose = request.args.get("impose") == "1"
-    impose = False #request.args.get("impose") == "true"
+    single_page = request.args.get("single") == "1"
-    return render_template('pagedjs.html', name=name.strip(), pad_content=html, lang=lang, title=title, cover=cover, impose=impose)
+    return render_template(
+        'pagedjs.html',
+        name=name.strip(),
+        pad_content=html,
+        lang=lang,
+        title=title,
+        cover=cover,
+        impose=impose,
+        single_page=single_page
+    )
 
 # @APP.route('/<name>/imposed.html')
 # def imposed(name):

static/main.css

@@ -45,9 +45,25 @@ div#nav{
 		right: 1.5em;
 		margin-top: 8px;
 	}
-	div#nav input{
+	div#nav input[type="text"]{
 		min-width: 300px;
 	}
+	div#nav .layout-options {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5em;
+		margin-left: 0.5em;
+		font-size: 0.9em;
+	}
+	div#nav .layout-options label {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25em;
+		cursor: pointer;
+	}
+	div#nav .layout-options input[type="checkbox"] {
+		margin: 0;
+	}
 	/* click logic (CSS only) */ 
 	span#click_md {
 		cursor: pointer;

static/pagedjs.css

@@ -66,6 +66,36 @@
         left: calc(var(--pagedjs-bleed-left)*-1);
     }
 
+    body.single-pages .pagedjs_pages {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    body.single-pages .pagedjs_first_page {
+        margin-left: 0;
+    }
+
+    body.single-pages .pagedjs_page {
+        margin: 0 auto;
+        margin-top: 10mm;
+    }
+
+    body.single-pages .pagedjs_left_page{
+        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
+    }
+
+    body.single-pages .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
+        border-color: var(--pagedjs-crop-color);
+    }
+
+    body.single-pages .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
+        width: var(--pagedjs-cross-size)!important;
+    }
+
+    body.single-pages .pagedjs_right_page{
+        left: 0;
+    }
+
     /* show the margin-box */
 
     .pagedjs_margin-top-left-corner-holder,
@@ -177,4 +207,4 @@
 .pagedjs_bleed-left .pagedjs_marks-crop:last-child,
 .pagedjs_bleed-right .pagedjs_marks-crop:last-child{
     box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
-}
+}

templates/base.html

@@ -22,7 +22,11 @@
 
       <a href="{{ url_for('html', name=name) }}"><button>html</button></a>
 
-      <a href="{{ url_for('pdf', name=name) }}"><button>layout</button></a>
+      <a id="layout_link" data-base-href="{{ url_for('pdf', name=name) }}" href="{{ url_for('pdf', name=name) }}"><button>layout</button></a>
+      <span class="layout-options">
+        <label><input type="checkbox" id="layout_impose"> impose</label>
+        <label><input type="checkbox" id="layout_single_page"> single pages</label>
+      </span>
 
       
     </div>
@@ -31,6 +35,97 @@
     {% block content %}
     {% endblock %}
   </div>
+  <script>
+    (function () {
+      const layoutLink = document.getElementById('layout_link');
+      const imposeToggle = document.getElementById('layout_impose');
+      const singleToggle = document.getElementById('layout_single_page');
+
+      if (!layoutLink || !imposeToggle || !singleToggle) {
+        return;
+      }
+
+      const STORE_KEY_IMPOSE = 'octomode_layout_impose';
+      const STORE_KEY_SINGLE = 'octomode_layout_single';
+      const store = (key, value) => {
+        try {
+          localStorage.setItem(key, value ? '1' : '0');
+        } catch (err) {}
+      };
+
+      const readStoredValue = (key, fallback) => {
+        try {
+          const stored = localStorage.getItem(key);
+          if (stored === null) {
+            return fallback;
+          }
+          return stored === '1';
+        } catch (err) {
+          return fallback;
+        }
+      };
+
+      const applyQueryDefaults = () => {
+        const params = new URLSearchParams(window.location.search);
+        if (params.has('impose')) {
+          store(STORE_KEY_IMPOSE, params.get('impose') === '1');
+        }
+        if (params.has('single')) {
+          store(STORE_KEY_SINGLE, params.get('single') === '1');
+        }
+      };
+
+      const createQueryArgs = () => {
+        const params = new URLSearchParams();
+        if (imposeToggle.checked) {
+          params.set('impose', '1');
+        }
+        if (singleToggle.checked) {
+          params.set('single', '1');
+        }
+        const query = params.toString();
+        return query ? `?${query}` : '';
+      };
+
+      const updateLayoutHref = () => {
+        const baseHref = layoutLink.dataset.baseHref;// || layoutLink.getAttribute('href');
+        //const base = baseHref.split('?')[0];
+        layoutLink.setAttribute('href', baseHref + createQueryArgs());
+      };
+
+      const updatePdfIframe = () => {
+        const iframe = document.getElementById('pdf');
+        if (!iframe) return;
+        const baseSrc = iframe.dataset.baseSrc; //|| iframe.getAttribute('src').split('?')[0];
+        iframe.setAttribute('src', baseSrc + createQueryArgs());
+      };
+
+      applyQueryDefaults();
+
+      imposeToggle.checked = readStoredValue(STORE_KEY_IMPOSE, false);
+      singleToggle.checked = readStoredValue(STORE_KEY_SINGLE, false);
+      updateLayoutHref();
+      updatePdfIframe();
+
+      const handleChange = (e) => {
+        console.log(e.target, imposeToggle);
+        if(e.target == imposeToggle && imposeToggle.checked) {
+          //console.log("remove single.", singleToggle)
+          singleToggle.checked = false;
+        } else if(e.target == singleToggle && singleToggle.checked) {
+          //console.log("remove impose.", singleToggle)
+          imposeToggle.checked = false;
+        }
+        store(STORE_KEY_IMPOSE, imposeToggle.checked);
+        store(STORE_KEY_SINGLE, singleToggle.checked);
+        updateLayoutHref();
+        updatePdfIframe();
+      };
+
+      imposeToggle.addEventListener('change', handleChange);
+      singleToggle.addEventListener('change', handleChange);
+    })();
+  </script>
 </body>
 
 

templates/pdf.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<iframe id="pdf" name="pdf" src="{{ url }}"></iframe>
+<iframe id="pdf" name="pdf" src="{{ url }}" data-base-src="{{ pagedjs_base }}"></iframe>
 {% endblock %}
 
 {% block footer %}
@@ -22,9 +22,19 @@ window.addEventListener('load', function () {
 
       const nav = document.getElementById('buttons');
       
-      // Insert the SAVE button
+      // Insert the SAVE button without replacing existing nodes.
-      const save = '<a href="#"><button id="save" onClick="printPage()" style="background-color: #66ee66;">save</button></a>';
+      const saveLink = document.createElement('a');
-      nav.innerHTML = nav.innerHTML + save;
+      saveLink.href = '#';
+      const saveButton = document.createElement('button');
+      saveButton.id = 'save';
+      saveButton.textContent = 'save';
+      saveButton.style.backgroundColor = '#66ee66';
+      saveButton.addEventListener('click', function (event) {
+            event.preventDefault();
+            printPage();
+      });
+      saveLink.appendChild(saveButton);
+      nav.appendChild(saveLink);
 
 })
 </script>