octomode.py

@@ -26,7 +26,6 @@ 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. 
@@ -225,17 +224,8 @@ def html(name):
 @APP.route('/<name>/pdf/')
 def pdf(name):
     app_root = get_app_root()
-    pagedjs_base = f"{ app_root }/{name}/pagedjs.html"
+    url = f"{ app_root }/{name}/pagedjs.html"
-    impose = request.args.get("impose") == "1"
+    return render_template('pdf.html', url=url, name=name.strip(), pad_url=APP.config['PAD_URL'])
-    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):
@@ -282,18 +272,9 @@ def pagedjs(name):
     title = get_meta(metadata, 'title', 'Untitled')
     cover = get_meta(metadata, 'cover', None)
 
-    impose = request.args.get("impose") == "1"
+    print("impose?" + str(request.args.get("impose")))
-    single_page = request.args.get("single") == "1"
+    impose = False #request.args.get("impose") == "true"
-    return render_template(
+    return render_template('pagedjs.html', name=name.strip(), pad_content=html, lang=lang, title=title, cover=cover, impose=impose)
-        '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,25 +45,9 @@ div#nav{
 		right: 1.5em;
 		margin-top: 8px;
 	}
-	div#nav input[type="text"]{
+	div#nav input{
 		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,36 +66,6 @@
         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,11 +22,7 @@
 
       <a href="{{ url_for('html', name=name) }}"><button>html</button></a>
 
-      <a id="layout_link" data-base-href="{{ url_for('pdf', name=name) }}" href="{{ url_for('pdf', name=name) }}"><button>layout</button></a>
+      <a 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>
@@ -35,97 +31,6 @@
     {% 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,44 +1,15 @@
 <!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{
-    <style>
-        body {
         --paged-layout: booklet; 
-        }
+    }</style>
-    </style>
     {% endif %}
     {% if cover %}
     <style>
@@ -50,103 +21,8 @@
     <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>
-<body {% if single_page %} class="single-pages" {% endif %}>
+    {{ pad_content }}
-    <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 }}" data-base-src="{{ pagedjs_base }}"></iframe>
+<iframe id="pdf" name="pdf" src="{{ url }}"></iframe>
 {% endblock %}
 
 {% block footer %}
@@ -22,19 +22,9 @@ window.addEventListener('load', function () {
 
       const nav = document.getElementById('buttons');
       
-      // Insert the SAVE button without replacing existing nodes.
+      // Insert the SAVE button
-      const saveLink = document.createElement('a');
+      const save = '<a href="#"><button id="save" onClick="printPage()" style="background-color: #66ee66;">save</button></a>';
-      saveLink.href = '#';
+      nav.innerHTML = nav.innerHTML + save;
-      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>