thumbnails!!

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"
-    return render_template('pdf.html', url=url, name=name.strip(), pad_url=APP.config['PAD_URL'])
+    pagedjs_base = f"{ app_root }/{name}/pagedjs.html"
+    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 = False #request.args.get("impose") == "true"
-    return render_template('pagedjs.html', name=name.strip(), pad_content=html, lang=lang, title=title, cover=cover, impose=impose)
+    impose = request.args.get("impose") == "1"
+    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,
+        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,

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/pagedjs.html

@@ -1,15 +1,44 @@
 <!DOCTYPE html>
 <html lang="{{ lang }}">
+
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="{{ url_for('static', filename='paged.polyfill.js') }}" type="text/javascript"></script>
     <script src="{{ url_for('static', filename='footnotes.js') }}" type="text/javascript"></script>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript"
+        id="html2canvas_js"></script>
+    <style>
+        @media screen,
+        pagedjs-ignore {
+            div.thumbnails {
+                position: fixed !important;
+                left: 0;
+                top: 0;
+                width: 100px;
+                height: 100vh;
+                overflow-y: auto;
+                position: fixed;
+            }
+
+            div.thumbnails div {
+                display: inline-block;
+            }
+
+            div.thumbnails span {
+                display: block;
+                text-align: center;
+            }
+        }
+    </style>
     {% if impose %}
     <script src="{{ url_for('static', filename='imposition.js') }}" type="text/javascript" id="imposition_js"></script>
-    <style>body{
-        --paged-layout: booklet; 
-    }</style>
+
+    <style>
+        body {
+            --paged-layout: booklet;
+        }
+    </style>
     {% endif %}
     {% if cover %}
     <style>
@@ -21,8 +50,103 @@
     <link href="{{ url_for('static', filename='pagedjs.css') }}" rel="stylesheet" type="text/css" media="screen">
     <link href="{{ url_for('css', name=name) }}" rel="stylesheet" type="text/css" media="print">
     <title>{{ title }}</title>
+
 </head>
-<body>
-    {{ pad_content }}
+
+<body {% if single_page %} class="single-pages" {% endif %}>
+    <div id="thumbs" class="thumbnails"></div>
+    <template data-ref='pagedjs-content'>{{ pad_content }}</template>
+    <script>
+        class Thumb extends Paged.Handler {
+            constructor(chunker, polisher, caller) {
+                super(chunker, polisher, caller);
+                this.pagedbooklet;
+                this.sourceSize;
+                this.pageStart;
+                this.pageEnd;
+                this.thumbsEl = document.querySelector("#thumbs");
+            }
+
+            afterRendered() {
+                this.thumbsEl.style.position = 'fixed';
+            }
+            finalizePage(pageElement, page, breakToken) {
+                //html2canvas.useCORS = true;
+                //html2canvas.allowTaint = false;
+                console.log(pageElement, page, breakToken);
+                html2canvas(pageElement, {
+                    backgroundColor: null,
+                    onclone: (clonedDoc) => {
+                        const root = clonedDoc.querySelector("#" + pageElement.id);
+                        root.querySelectorAll("img").forEach((img) => {
+                            const r = img.getBoundingClientRect();
+
+                            const ph = clonedDoc.createElement("div");
+                            ph.style.width = `${r.width}px`;
+                            ph.style.height = `${r.height}px`;
+                            ph.style.display = "inline-block";
+                            ph.style.boxSizing = "border-box";
+                            ph.style.border = "2px solid rgba(0,0,0,1)";
+                            ph.style.background = "rgba(0,0,0,.06)";
+                            ph.style.position = "relative";
+                            ph.style.overflow = "hidden";
+
+                            const w = r.width;
+                            const h = r.height;
+                            const diag = Math.hypot(w, h);
+                            const ang = (Math.atan2(h, w) * 180) / Math.PI;
+
+                            // diagnal 1 
+                            const d1 = clonedDoc.createElement("div");
+                            d1.style.position = "absolute";
+                            d1.style.left = "0";
+                            d1.style.top = "0";
+                            d1.style.width = `${diag}px`;
+                            d1.style.height = "2px";
+                            d1.style.background = "rgba(0,0,0,1)";
+                            d1.style.transformOrigin = "0 0";
+                            d1.style.transform = `rotate(${ang}deg)`;
+
+                            // diagonal 2
+                            const d2 = clonedDoc.createElement("div");
+                            d2.style.position = "absolute";
+                            d2.style.right = "0";
+                            d2.style.top = "0";
+                            d2.style.width = `${diag}px`;
+                            d2.style.height = "2px";
+                            d2.style.background = "rgba(0,0,0,1)";
+                            d2.style.transformOrigin = "100% 0";
+                            d2.style.transform = `rotate(${-ang}deg)`;
+
+                            ph.appendChild(d1);
+                            ph.appendChild(d2);
+
+                            img.replaceWith(ph);
+                        });
+                    },
+                }).then((canvas) => {
+                    canvas.style.height = 'auto';
+                    canvas.style.width = '80px';
+                    const a = document.createElement('a');
+                    const span = document.createElement('span');
+                    this.thumbsEl.appendChild(a);
+                    a.appendChild(canvas);
+                    a.href = "#" + pageElement.id;
+                    a.appendChild(span);
+                    span.append(page.position + 1);
+                    a.onclick = (e) => {
+                        e.preventDefault();
+                        pageElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+                        return false;
+                    }
+                });
+            }
+        }
+
+        Paged
+            .registerHandlers(Thumb);
+
+    </script>
 </body>
+
 </html>

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
-      const save = '<a href="#"><button id="save" onClick="printPage()" style="background-color: #66ee66;">save</button></a>';
-      nav.innerHTML = nav.innerHTML + save;
+      // Insert the SAVE button without replacing existing nodes.
+      const saveLink = document.createElement('a');
+      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>