Port the print preview to base10

profiles/base10/config.json

@@ -53,6 +53,7 @@
     },
     "features": {
         "toolbar": true,
+        "menubar": true,
         "toc": false
     },
     "odds": [

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;
+    }
+}

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) {

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>

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>