From f9709c9c39df73611b2b28fa8d6198a6d3897734 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Wed, 22 Dec 2021 11:43:21 +0100
Subject: [PATCH] added shareOmitDefaultCss label

---
 .../attribute_widgets/attribute_detail.js     |  3 +-
 src/public/stylesheets/share.css              |  6 +-
 src/services/attributes.js                    |  1 +
 src/share/shaca/shaca_loader.js               |  2 +-
 src/views/share/page.ejs                      | 68 +++----------------
 5 files changed, 18 insertions(+), 62 deletions(-)

diff --git a/src/public/app/widgets/attribute_widgets/attribute_detail.js b/src/public/app/widgets/attribute_widgets/attribute_detail.js
index 3bc673ba9..35100e983 100644
--- a/src/public/app/widgets/attribute_widgets/attribute_detail.js
+++ b/src/public/app/widgets/attribute_widgets/attribute_detail.js
@@ -213,6 +213,7 @@ const ATTR_HELP = {
         "bookmarkFolder": "note with this label will appear in bookmarks as folder (allowing access to its children)",
         "shareHiddenFromTree": "this note is hidden from left navigation tree, but still accessible with its URL",
         "shareAlias": "define an alias using which the note will be available under https://your_trilium_host/share/[your_alias]",
+        "shareOmitDefaultCss": "default share page CSS will be omitted. Use when you make extensive styling changes.",
     },
     "relation": {
         "runOnNoteCreation": "executes when note is created on backend",
@@ -224,7 +225,7 @@ const ATTR_HELP = {
         "template": "attached note's attributes will be inherited even without parent-child relationship. See template for details.",
         "renderNote": 'notes of type "render HTML note" will be rendered using a code note (HTML or script) and it is necessary to point using this relation to which note should be rendered',
         "widget": "target of this relation will be executed and rendered as a widget in the sidebar",
-        "shareCss": "CSS note which will be injected into the share page. CSS note must be in the shared sub-tree as well. Consider using 'shareHiddenFromTree' label to hide it.",
+        "shareCss": "CSS note which will be injected into the share page. CSS note must be in the shared sub-tree as well. Consider using 'shareHiddenFromTree' and 'shareOmitDefaultCss' as well.",
     }
 };
 
diff --git a/src/public/stylesheets/share.css b/src/public/stylesheets/share.css
index 69acd3e1c..084056353 100644
--- a/src/public/stylesheets/share.css
+++ b/src/public/stylesheets/share.css
@@ -74,7 +74,7 @@ pre {
 }
 
 @media (max-width: 48em) {
-    #layout.active #menu {
+    #layout.navMenu #menu {
         display: block;
         margin-top: 40px;
     }
@@ -83,7 +83,7 @@ pre {
         display: block;
     }
 
-    #layout.active #main {
+    #layout.navMenu #main {
         display: none;
     }
 
@@ -91,7 +91,7 @@ pre {
         padding-left: 60px;
     }
 
-    #layout.active #menuButton::after {
+    #layout.navMenu #menuButton::after {
         content: "«";
     }
 
diff --git a/src/services/attributes.js b/src/services/attributes.js
index be538bf65..5e0fe7b93 100644
--- a/src/services/attributes.js
+++ b/src/services/attributes.js
@@ -54,6 +54,7 @@ const BUILTIN_ATTRIBUTES = [
     { type: 'label', name: 'fullContentWidth' },
     { type: 'label', name: 'shareHiddenFromTree' },
     { type: 'label', name: 'shareAlias' },
+    { type: 'label', name: 'shareOmitDefaultCss' },
 
     // relation names
     { type: 'relation', name: 'runOnNoteCreation', isDangerous: true },
diff --git a/src/share/shaca/shaca_loader.js b/src/share/shaca/shaca_loader.js
index f240b2524..39e541809 100644
--- a/src/share/shaca/shaca_loader.js
+++ b/src/share/shaca/shaca_loader.js
@@ -48,7 +48,7 @@ function load() {
         WHERE isDeleted = 0 
           AND noteId IN (${noteIdStr})
           AND (
-              (type = 'label' AND name IN ('archived', 'shareHiddenFromTree', 'shareAlias')) 
+              (type = 'label' AND name IN ('archived', 'shareHiddenFromTree', 'shareAlias', 'shareOmitDefaultCss')) 
               OR (type = 'relation' AND name IN ('imageLink', 'template', 'shareCss'))
           )`, []);
 
diff --git a/src/views/share/page.ejs b/src/views/share/page.ejs
index 19c8e3029..6be374b2c 100644
--- a/src/views/share/page.ejs
+++ b/src/views/share/page.ejs
@@ -3,8 +3,10 @@
 <head>
     <meta charset="utf-8">
     <link rel="shortcut icon" href="../favicon.ico">
+    <% if (!note.hasLabel("shareOmitDefaultCss")) { %>
     <link href="../libraries/normalize.min.css" rel="stylesheet">
     <link href="../stylesheets/share.css" rel="stylesheet">
+    <% } %>
     <% if (note.type === 'text' || note.type === 'book') { %>
     <link href="../libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
     <% } %>
@@ -24,69 +26,21 @@
         </div>
 
         <% if (subRoot.hasChildren()) { %>
-            <button id="menuButton"></button>
+        <button id="menuButton"></button>
 
-            <div id="menu">
-                <%- include('tree_item', {note: subRoot, activeNote: note}) %>
-            </div>
+        <nav id="menu">
+            <%- include('tree_item', {note: subRoot, activeNote: note}) %>
+        </nav>
         <% } %>
     </div>
 
     <script>
-        (function (window, document) {
+        (function () {
+            const menuButton = document.getElementById('menuButton');
+            const layout = document.getElementById('layout');
 
-            // we fetch the elements each time because docusaurus removes the previous
-            // element references on page navigation
-            function getElements() {
-                return {
-                    layout: document.getElementById('layout'),
-                    menu: document.getElementById('menu'),
-                    menuButton: document.getElementById('menuButton')
-                };
-            }
-
-            function toggleClass(element, className) {
-                var classes = element.className.split(/\s+/);
-                var length = classes.length;
-                var i = 0;
-
-                for (; i < length; i++) {
-                    if (classes[i] === className) {
-                        classes.splice(i, 1);
-                        break;
-                    }
-                }
-                // The className is not found
-                if (length === classes.length) {
-                    classes.push(className);
-                }
-
-                element.className = classes.join(' ');
-            }
-
-            function toggleAll() {
-                var active = 'active';
-                var elements = getElements();
-
-                toggleClass(elements.layout, active);
-                toggleClass(elements.menu, active);
-                toggleClass(elements.menuButton, active);
-            }
-
-            function handleEvent(e) {
-                var elements = getElements();
-
-                if (e.target.id === elements.menuButton.id) {
-                    toggleAll();
-                    e.preventDefault();
-                } else if (elements.menu.className.indexOf('active') !== -1) {
-                    toggleAll();
-                }
-            }
-
-            document.addEventListener('click', handleEvent);
-
-        }(this, this.document));
+            menuButton.addEventListener('click', () => layout.classList.toggle('navMenu'));
+        }());
     </script>
 </body>
 </html>