From c84c711415116665b92d54a6209bc88647f26536 Mon Sep 17 00:00:00 2001
From: Wolfgang Meier <wolfgang@existsolutions.com>
Date: Thu, 18 Jul 2024 06:26:06 +0000
Subject: [PATCH] Port the print preview to base10

---
 profiles/base10/config.json                   |  1 +
 .../base10/resources/css/print-preview.css    | 29 +++++++
 profiles/base10/resources/scripts/dark.js     | 22 +++---
 profiles/base10/templates/base.html           |  4 +
 profiles/base10/templates/print-preview.html  | 76 +++++++++++++++++++
 profiles/parallel/resources/scripts/dark.js   | 19 -----
 6 files changed, 122 insertions(+), 29 deletions(-)
 create mode 100644 profiles/base10/resources/css/print-preview.css
 create mode 100644 profiles/base10/templates/print-preview.html
 delete mode 100644 profiles/parallel/resources/scripts/dark.js

diff --git a/profiles/base10/config.json b/profiles/base10/config.json
index 590bc81..cad576a 100644
--- a/profiles/base10/config.json
+++ b/profiles/base10/config.json
@@ -53,6 +53,7 @@
     },
     "features": {
         "toolbar": true,
+        "menubar": true,
         "toc": false
     },
     "odds": [
diff --git a/profiles/base10/resources/css/print-preview.css b/profiles/base10/resources/css/print-preview.css
new file mode 100644
index 0000000..c8bcd2c
--- /dev/null
+++ b/profiles/base10/resources/css/print-preview.css
@@ -0,0 +1,29 @@
+@media screen {
+    pb-page > div > aside {
+        position: fixed;
+        left: 20px;
+        top: 20px;
+    }
+
+    nav button {
+        width: 100%;
+    }
+    nav button > svg {
+        width: 24px;
+    }
+
+    pb-page > div > main {
+        margin-left: 90px;
+    }
+
+    pb-print-preview {
+        height: 100vh;
+        width: calc(100vw - 90px);
+    }
+}
+
+@media print {
+    pb-page > div > aside, pb-progress {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/profiles/base10/resources/scripts/dark.js b/profiles/base10/resources/scripts/dark.js
index 5252188..8458bcd 100644
--- a/profiles/base10/resources/scripts/dark.js
+++ b/profiles/base10/resources/scripts/dark.js
@@ -1,15 +1,17 @@
 document.addEventListener('DOMContentLoaded', function() {
     const modeSwitch = document.getElementById('colorMode');
-    modeSwitch.addEventListener('click', function() {
-        let theme = document.body.dataset.theme || localStorage.getItem('tp.theme');
-        if (!theme && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            // User prefers dark mode
-            theme = 'dark';
-        }
-        const newTheme = theme === 'dark' ? 'light' : 'dark';
-        document.body.dataset.theme = newTheme;
-        localStorage.setItem('tp.theme', newTheme);
-    });
+    if (modeSwitch) {
+        modeSwitch.addEventListener('click', function() {
+            let theme = document.body.dataset.theme || localStorage.getItem('tp.theme');
+            if (!theme && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                // User prefers dark mode
+                theme = 'dark';
+            }
+            const newTheme = theme === 'dark' ? 'light' : 'dark';
+            document.body.dataset.theme = newTheme;
+            localStorage.setItem('tp.theme', newTheme);
+        });
+    }
 
     let theme = document.body.dataset.theme || localStorage.getItem('tp.theme');
     if (theme) {
diff --git a/profiles/base10/templates/base.html b/profiles/base10/templates/base.html
index a029a15..d2873d8 100644
--- a/profiles/base10/templates/base.html
+++ b/profiles/base10/templates/base.html
@@ -43,11 +43,15 @@
             unresolved="unresolved">
             <header class="page-header">
                 <div>
+                    [% if $features?menubar %]
                     [% include "templates/menu.html" %]
+                    [% endif %]
                     [% if $features?toolbar %]
                     [% include "templates/toolbar.html" %]
                     [% endif %]
+                    [% if $features?menubar %]
                     [% include "templates/menu-mobile.html" %]
+                    [% endif %]
 
                     [% block header %][% endblock %]
                 </div>
diff --git a/profiles/base10/templates/print-preview.html b/profiles/base10/templates/print-preview.html
new file mode 100644
index 0000000..23053cc
--- /dev/null
+++ b/profiles/base10/templates/print-preview.html
@@ -0,0 +1,76 @@
+<div class="container-fluid">
+    ---json
+    {
+        "features": {
+            "toolbar": false,
+            "menubar": false
+        },
+        "styles": ["resources/css/print-preview.css"]
+    }
+    ---
+    [% extends "templates/base.html" %]
+    <pb-document id="document1" path="[[ $doc?path ]]" odd="[[ $doc?odd ]]" view="[[ $doc?view ]]"
+        root-path="[[ $config:app-root ]]"/>
+    <aside>
+        <nav>
+            <ul>
+                <li>
+                    <button id="close-action">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>
+                    </button>
+                </li>
+                <li>
+                    <button id="print-action">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M384 368h24a40.12 40.12 0 0040-40V168a40.12 40.12 0 00-40-40H104a40.12 40.12 0 00-40 40v160a40.12 40.12 0 0040 40h24" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><rect x="128" y="240" width="256" height="208" rx="24.32" ry="24.32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path d="M384 128v-24a40.12 40.12 0 00-40-40H168a40.12 40.12 0 00-40 40v24" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><circle cx="392" cy="184" r="24"/></svg>
+                    </button>
+                </li>
+                <li>
+                    <button class="secondary">
+                        <input id="preview-toggle" type="checkbox" role="switch" />
+                    </button>
+                </li>
+                <li>
+                    <button id="copy-action" class="secondary">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><rect x="128" y="128" width="336" height="336" rx="57" ry="57" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
+                    </button>
+                </li>
+            </ul>
+        </nav>
+    </aside>
+    <pb-progress subscribe="preview"></pb-progress>
+    
+    <main>
+        <pb-print-preview src="document1" styles="[[ $config:context-path ]]/resources/fonts/font.css,[[ $config:context-path ]]/resources/css/print.css" emit="preview"></pb-print-preview>
+    </main>
+
+    [% block scripts %]
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const preview = document.querySelector('pb-print-preview');
+            const btn = document.getElementById('print-action');
+            btn.addEventListener('click', function() {
+                preview.print();
+            });
+
+            const closeBtn = document.getElementById('close-action');
+            closeBtn.addEventListener('click', function() {
+                window.close();
+            });
+
+            const previewToggle = document.getElementById('preview-toggle');
+            previewToggle.addEventListener('change', function(ev) {
+                const checked = previewToggle.checked;
+                preview.raw = !checked;
+                preview.refresh();
+            });
+
+            const copyBtn = document.getElementById('copy-action');
+            copyBtn.addEventListener('click', function() {
+                const url = new URL(preview.getAttribute('url'), location.href);
+                console.log('Copying URL: %s', url.toString())
+                navigator.clipboard.writeText(url.toString());
+            });
+        });
+    </script>
+    [% endblock %]
+</div>
\ No newline at end of file
diff --git a/profiles/parallel/resources/scripts/dark.js b/profiles/parallel/resources/scripts/dark.js
deleted file mode 100644
index 5252188..0000000
--- a/profiles/parallel/resources/scripts/dark.js
+++ /dev/null
@@ -1,19 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const modeSwitch = document.getElementById('colorMode');
-    modeSwitch.addEventListener('click', function() {
-        let theme = document.body.dataset.theme || localStorage.getItem('tp.theme');
-        if (!theme && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            // User prefers dark mode
-            theme = 'dark';
-        }
-        const newTheme = theme === 'dark' ? 'light' : 'dark';
-        document.body.dataset.theme = newTheme;
-        localStorage.setItem('tp.theme', newTheme);
-    });
-
-    let theme = document.body.dataset.theme || localStorage.getItem('tp.theme');
-    if (theme) {
-        document.body.dataset.theme = theme;
-        localStorage.setItem('tp.theme', theme);
-    }
-});
\ No newline at end of file