fixes in enabling / disabling widgets in runtime

src/public/javascripts/services/tab_context.js

@@ -112,20 +112,6 @@ class TabContext extends Component {
             });
         }
     }
-
-    // FIXME
-    async _setTitleBar() {
-        document.title = "Trilium Notes";
-
-        const activeTabContext = this.getActiveTabContext();
-
-        if (activeTabContext && activeTabContext.notePath) {
-            const note = await treeCache.getNote(treeService.getNoteIdFromNotePath(activeTabContext.notePath));
-
-            // it helps navigating in history if note title is included in the title
-            document.title += " - " + note.title;
-        }
-    }
 }
 
 export default TabContext;

src/public/javascripts/widgets/basic_widget.js

@@ -13,9 +13,15 @@ class BasicWidget extends Component {
             this.appContext.trigger(eventName);
         });
 
+        this.toggle(this.isEnabled());
+
         return $widget;
     }
 
+    isEnabled() {
+        return true;
+    }
+
     /**
      * for overriding
      */

src/public/javascripts/widgets/calendar.js

@@ -27,8 +27,8 @@ const TPL = `
 export default class CalendarWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Calendar"; }
 
-    async isEnabled() {
-        return await super.isEnabled()
+    isEnabled() {
+        return super.isEnabled()
             && this.note.hasOwnedLabel("dateNote");
     }
 

src/public/javascripts/widgets/edited_notes.js

@@ -14,9 +14,9 @@ export default class EditedNotesWidget extends CollapsibleWidget {
 
     getMaxHeight() { return "200px"; }
 
-    async isEnabled() {
-        return await super.isEnabled()
-            && await this.note.hasOwnedLabel("dateNote");
+    isEnabled() {
+        return super.isEnabled()
+            && this.note.hasOwnedLabel("dateNote");
     }
 
     async refreshWithNote(note) {

src/public/javascripts/widgets/flex_container.js

@@ -8,7 +8,7 @@ export default class FlexContainer extends BasicWidget {
         this.children = widgets;
     }
 
-    render() {
+    doRender() {
         this.$widget = $(`<div style="display: flex;">`);
 
         for (const key in this.attrs) {

src/public/javascripts/widgets/global_buttons.js

@@ -1,19 +1,18 @@
 import BasicWidget from "./basic_widget.js";
-import appContext from "../services/app_context.js";
 
 const WIDGET_TPL = `
-<style>
-.global-buttons {
-    display: flex;
-    justify-content: space-around;
-    padding: 3px 0 3px 0;
-    border: 1px solid var(--main-border-color);
-    border-radius: 7px;
-    margin: 3px 5px 5px 5px;
-}
-</style>
-
 <div class="global-buttons">
+    <style>
+    .global-buttons {
+        display: flex;
+        justify-content: space-around;
+        padding: 3px 0 3px 0;
+        border: 1px solid var(--main-border-color);
+        border-radius: 7px;
+        margin: 3px 5px 5px 5px;
+    }
+    </style>
+
     <a data-trigger-event="createTopLevelNote"
        title="Create new top level note" 
        class="icon-action bx bx-folder-plus"></a>
@@ -36,8 +35,8 @@ const WIDGET_TPL = `
 `;
 
 class GlobalButtonsWidget extends BasicWidget {
-    doRender($widget) {
-        return $(WIDGET_TPL);
+    doRender() {
+        return this.$widget = $(WIDGET_TPL);
     }
 }
 

src/public/javascripts/widgets/note_tree.js

@@ -39,14 +39,13 @@ export default class NoteTreeWidget extends TabAwareWidget {
     }
 
     doRender() {
-        const $widget = $(TPL);
-        const $tree = $widget;
+        this.$widget = $(TPL);
 
-        $tree.on("click", ".unhoist-button", hoistedNoteService.unhoist);
-        $tree.on("click", ".refresh-search-button", searchNotesService.refreshSearch);
+        this.$widget.on("click", ".unhoist-button", hoistedNoteService.unhoist);
+        this.$widget.on("click", ".refresh-search-button", searchNotesService.refreshSearch);
 
         // fancytree doesn't support middle click so this is a way to support it
-        $widget.on('mousedown', '.fancytree-title', e => {
+        this.$widget.on('mousedown', '.fancytree-title', e => {
             if (e.which === 2) {
                 const node = $.ui.fancytree.getNode(e);
 
@@ -62,20 +61,20 @@ export default class NoteTreeWidget extends TabAwareWidget {
             }
         });
 
-        this.initialized = treeBuilder.prepareTree().then(treeData => this.initFancyTree($tree, treeData));
+        this.initialized = treeBuilder.prepareTree().then(treeData => this.initFancyTree(treeData));
 
-        return $widget;
+        return this.$widget;
     }
 
-    async initFancyTree($tree, treeData) {
+    async initFancyTree(treeData) {
         utils.assertArguments(treeData);
 
-        $tree.fancytree({
+        this.$widget.fancytree({
             autoScroll: true,
             keyboard: false, // we takover keyboard handling in the hotkeys plugin
             extensions: ["hotkeys", "dnd5", "clones"],
             source: treeData,
-            scrollParent: $tree,
+            scrollParent: this.$widget,
             minExpandLevel: 2, // root can't be collapsed
             click: (event, data) => {
                 const targetType = data.targetType;
@@ -224,7 +223,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
             }
         });
 
-        $tree.on('contextmenu', '.fancytree-node', e => {
+        this.$widget.on('contextmenu', '.fancytree-node', e => {
             const node = $.ui.fancytree.getNode(e);
 
             contextMenuWidget.initContextMenu(e, new TreeContextMenu(this, node));
@@ -232,7 +231,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
             return false; // blocks default browser right click menu
         });
 
-        this.tree = $.ui.fancytree.getTree($tree);
+        this.tree = $.ui.fancytree.getTree(this.$widget);
     }
 
     /** @return {FancytreeNode[]} */
@@ -411,6 +410,8 @@ export default class NoteTreeWidget extends TabAwareWidget {
     collapseTreeListener() { this.collapseTree(); }
 
     async refresh() {
+        this.toggle(this.isEnabled());
+
         const oldActiveNode = this.getActiveNode();
 
         if (oldActiveNode) {

src/public/javascripts/widgets/side_pane_container.js

@@ -9,6 +9,10 @@ export default class SidePaneContainer extends FlexContainer {
         this.children = widgets;
     }
 
+    isEnabled() {
+        return super.isEnabled() && options.is(this.side + 'PaneVisible');
+    }
+
     eventReceived(name, data, sync = false) {
         if (options.is(this.side + 'PaneVisible')) {
             super.eventReceived(name, data, sync);

src/public/javascripts/widgets/tab_aware_widget.js

@@ -43,12 +43,12 @@ export default class TabAwareWidget extends BasicWidget {
         this.refresh();
     }
 
-    async isEnabled() {
+    isEnabled() {
         return !!this.note && this.tabContext.isActive();
     }
 
     async refresh() {
-        if (await this.isEnabled()) {
+        if (this.isEnabled()) {
             const start = Date.now();
 
             this.toggle(true);

src/public/javascripts/widgets/tab_caching_widget.js

@@ -8,13 +8,12 @@ export default class TabCachingWidget extends TabAwareWidget {
         this.widgets = {};
     }
 
-    async isEnabled() {
-        return this.tabContext.isActive();
+    isEnabled() {
+        return this.tabContext && this.tabContext.isActive();
     }
 
     doRender() {
-        this.$widget = $(`<div class="marker" style="display: none;">`);
-        return this.$widget;
+        return this.$widget = $(`<div class="marker" style="display: none;">`);
     }
 
     activeTabChangedListener(param) {
@@ -57,12 +56,12 @@ export default class TabCachingWidget extends TabAwareWidget {
         }
     }
 
-    async toggle(show) {
+    toggle(show) {
         for (const tabId in this.widgets) {
             this.widgets[tabId].toggle(
                 show
                 && this.tabContext && tabId === this.tabContext.tabId
-                && await this.widgets[tabId].isEnabled());
+                && this.widgets[tabId].isEnabled());
         }
     }
 }