refactored access to options on frontend

src/public/javascripts/widgets/note_tree.js

@@ -118,7 +118,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
                 autoExpandMS: 600,
                 dragStart: (node, data) => {
                     // don't allow dragging root node
-                    if (node.data.noteId === hoistedNoteService.getHoistedNoteNoPromise()
+                    if (node.data.noteId === hoistedNoteService.getHoistedNoteId()
                         || node.getParent().data.noteType === 'search') {
                         return false;
                     }
@@ -141,7 +141,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
                 dragDrop: async (node, data) => {
                     if ((data.hitMode === 'over' && node.data.noteType === 'search') ||
                         (['after', 'before'].includes(data.hitMode)
-                            && (node.data.noteId === hoistedNoteService.getHoistedNoteNoPromise() || node.getParent().data.noteType === 'search'))) {
+                            && (node.data.noteId === hoistedNoteService.getHoistedNoteId() || node.getParent().data.noteType === 'search'))) {
 
                         const infoDialog = await import('../dialogs/info.js');
 

src/public/javascripts/widgets/search_box.js

@@ -1,25 +1,10 @@
 import BasicWidget from "./basic_widget.js";
-import treeService from "../services/tree.js";
+import searchService from "../services/search_notes.js";
 import treeCache from "../services/tree_cache.js";
 import toastService from "../services/toast.js";
 import appContext from "../services/app_context.js";
 import noteCreateService from "../services/note_create.js";
 
-const helpText = `
-<strong>Search tips</strong> - also see <button class="btn btn-sm" type="button" data-help-page="Search">complete help on search</button>
-<p>
-<ul>
-    <li>Just enter any text for full text search</li>
-    <li><code>@abc</code> - returns notes with label abc</li>
-    <li><code>@year=2019</code> - matches notes with label <code>year</code> having value <code>2019</code></li>
-    <li><code>@rock @pop</code> - matches notes which have both <code>rock</code> and <code>pop</code> labels</li>
-    <li><code>@rock or @pop</code> - only one of the labels must be present</li>
-    <li><code>@year&lt;=2000</code> - numerical comparison (also &gt;, &gt;=, &lt;).</li>
-    <li><code>@dateCreated>=MONTH-1</code> - notes created in the last month</li>
-    <li><code>=handler</code> - will execute script defined in <code>handler</code> relation to get results</li>
-</ul>
-</p>`;
-
 const TPL = `
 <div class="search-box">
     <style>
@@ -145,7 +130,7 @@ export default class SearchBoxWidget extends BasicWidget {
         this.$searchBox.tooltip({
             trigger: 'focus',
             html: true,
-            title: helpText,
+            title: searchService.getHelpText(),
             placement: 'right',
             delay: {
                 show: 500, // necessary because sliding out may cause wrong position

src/public/javascripts/widgets/side_pane_container.js

@@ -1,5 +1,5 @@
 import BasicWidget from "./basic_widget.js";
-import optionService from "../services/options.js";
+import options from "../services/options.js";
 
 export default class SidePaneContainer extends BasicWidget {
     constructor(appContext, side, widgets) {
@@ -19,9 +19,7 @@ export default class SidePaneContainer extends BasicWidget {
         return this.$widget;
     }
 
-    async eventReceived(name, data, sync = false) {
-        const options = await optionService.waitForOptions();
-
+    eventReceived(name, data, sync = false) {
         if (options.is(this.side + 'PaneVisible')) {
             super.eventReceived(name, data, sync);
         }

src/public/javascripts/widgets/sidebar_toggle.js

@@ -0,0 +1,72 @@
+import options from "../services/options.js";
+import splitService from "../services/split.js";
+import BasicWidget from "./basic_widget.js";
+
+const TPL = `
+<div>
+    <style>
+    #hide-right-pane-button, #show-right-pane-button {
+        position: fixed;
+        bottom: 10px;
+        right: 10px;
+        z-index: 1000;
+    }
+    
+    #hide-left-pane-button, #show-left-pane-button {
+        position: fixed;
+        bottom: 10px;
+        left: 10px;
+        z-index: 1000;
+    }
+    </style>
+    
+    <button id="hide-left-pane-button" class="btn btn-sm icon-button bx bx-chevrons-left hide-in-zen-mode" title="Show sidebar"></button>
+    <button id="show-left-pane-button" class="btn btn-sm icon-button bx bx-chevrons-right hide-in-zen-mode" title="Hide sidebar"></button>
+            
+    <button id="hide-right-pane-button" class="btn btn-sm icon-button bx bx-chevrons-right hide-in-zen-mode" title="Hide sidebar"></button>
+    <button id="show-right-pane-button" class="btn btn-sm icon-button bx bx-chevrons-left hide-in-zen-mode" title="Show sidebar"></button>
+</div>
+`;
+
+export default class SidebarToggle extends BasicWidget {
+    constructor(appContext) {
+        super(appContext);
+
+        this.paneVisible = {};
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+
+        this.toggleSidebar('left', options.is('leftPaneVisible'));
+        this.toggleSidebar('right', options.is('rightPaneVisible'));
+
+        $("#show-right-pane-button").on('click', () => toggleAndSave('right', true));
+        $("#hide-right-pane-button").on('click', () => toggleAndSave('right', false));
+
+        $("#show-left-pane-button").on('click', () => toggleAndSave('left', true));
+        $("#hide-left-pane-button").on('click', () => toggleAndSave('left', false));
+
+        splitService.setupSplit(this.paneVisible.left, this.paneVisible.right);
+
+        return this.$widget;
+    }
+
+    toggleSidebar(side, show) {
+        $(`#${side}-pane`).toggle(show);
+        $(`#show-${side}-pane-button`).toggle(!show);
+        $(`#hide-${side}-pane-button`).toggle(show);
+
+        this.paneVisible[side] = show;
+    }
+
+    async toggleAndSave(side, show) {
+        this.toggleSidebar(side, show);
+
+        await options.save(`${side}PaneVisible`, show.toString());
+
+        splitService.setupSplit(this.paneVisible.left, this.paneVisible.right);
+
+        this.trigger('sidebarVisibilityChanged', {side, show});
+    }
+}

src/public/javascripts/widgets/title_bar_buttons.js

@@ -1,5 +1,5 @@
 import BasicWidget from "./basic_widget.js";
-import optionService from "../services/options.js";
+import options from "../services/options.js";
 import utils from "../services/utils.js";
 
 const TPL = `
@@ -23,41 +23,41 @@ export default class TitleBarButtonsWidget extends BasicWidget {
             return;
         }
 
-        this.$widget = $(TPL);
+        if (!options.is('nativeTitleBarVisible')) {
+            this.$widget = $(TPL);
+            this.$widget.show();
 
-        optionService.waitForOptions().then(options => {
-            if (!options.is('nativeTitleBarVisible')) {
-                this.$widget.show();
+            const $minimizeBtn = this.$widget.find(".minimize-btn");
+            const $maximizeBtn = this.$widget.find(".maximize-btn");
+            const $closeBtn = this.$widget.find(".close-btn");
 
-                const $minimizeBtn = this.$widget.find(".minimize-btn");
-                const $maximizeBtn = this.$widget.find(".maximize-btn");
-                const $closeBtn = this.$widget.find(".close-btn");
+            $minimizeBtn.on('click', () => {
+                $minimizeBtn.trigger('blur');
+                const {remote} = require('electron');
+                remote.BrowserWindow.getFocusedWindow().minimize();
+            });
 
-                $minimizeBtn.on('click', () => {
-                    $minimizeBtn.trigger('blur');
-                    const {remote} = require('electron');
-                    remote.BrowserWindow.getFocusedWindow().minimize();
-                });
+            $maximizeBtn.on('click', () => {
+                $maximizeBtn.trigger('blur');
+                const {remote} = require('electron');
+                const focusedWindow = remote.BrowserWindow.getFocusedWindow();
 
-                $maximizeBtn.on('click', () => {
-                    $maximizeBtn.trigger('blur');
-                    const {remote} = require('electron');
-                    const focusedWindow = remote.BrowserWindow.getFocusedWindow();
+                if (focusedWindow.isMaximized()) {
+                    focusedWindow.unmaximize();
+                } else {
+                    focusedWindow.maximize();
+                }
+            });
 
-                    if (focusedWindow.isMaximized()) {
-                        focusedWindow.unmaximize();
-                    } else {
-                        focusedWindow.maximize();
-                    }
-                });
-
-                $closeBtn.on('click', () => {
-                    $closeBtn.trigger('blur');
-                    const {remote} = require('electron');
-                    remote.BrowserWindow.getFocusedWindow().close();
-                });
-            }
-        });
+            $closeBtn.on('click', () => {
+                $closeBtn.trigger('blur');
+                const {remote} = require('electron');
+                remote.BrowserWindow.getFocusedWindow().close();
+            });
+        }
+        else {
+            this.$widget = $('<div>');
+        }
 
         return this.$widget;
     }