From 1302765478f203123e76b75882c369ca279ebc90 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sat, 22 May 2021 21:35:25 +0200
Subject: [PATCH] added sidebar toggle button

---
 db/TODO.txt                                   |  3 ++
 src/public/app/layouts/desktop_layout.js      |  2 +
 src/public/app/services/load_results.js       |  2 +-
 src/public/app/services/split.js              | 36 +++--------------
 src/public/app/widgets/button_widget.js       | 19 +++++----
 .../widgets/containers/side_pane_container.js | 16 +++-----
 .../app/widgets/note_context_aware_widget.js  |  8 ----
 .../app/widgets/protected_session_status.js   | 16 +++-----
 src/public/app/widgets/side_pane_toggles.js   |  9 +----
 src/public/app/widgets/sidebar_toggle.js      | 39 +++++++++++++++++++
 10 files changed, 75 insertions(+), 75 deletions(-)
 create mode 100644 src/public/app/widgets/sidebar_toggle.js

diff --git a/db/TODO.txt b/db/TODO.txt
index 83a04f6ab..756a86692 100644
--- a/db/TODO.txt
+++ b/db/TODO.txt
@@ -2,3 +2,6 @@
 - drop options.utcDateCreated - not used for anything
 - isDeleted = 0 by default
 - rename openTabs to openNoteContexts
+- rename leftPaneVisible to leftSidebarVisible
+  - pane is now used for side by side notes
+  - "left" should be preserved since custom widgets may create right sidebar
diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 510fae8b1..8d9e875e5 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -41,6 +41,7 @@ import QuickSearchWidget from "../widgets/quick_search.js";
 import ButtonWidget from "../widgets/button_widget.js";
 import ProtectedSessionStatusWidget from "../widgets/protected_session_status.js";
 import PaneContainer from "../widgets/containers/pane_container.js";
+import SidebarToggleWidget from "../widgets/sidebar_toggle.js";
 
 const RIGHT_PANE_CSS = `
 <style>
@@ -165,6 +166,7 @@ export default class DesktopLayout {
                 .child(new SpacerWidget())
                 .child(new ProtectedSessionStatusWidget())
                 .child(new SyncStatusWidget())
+                .child(new SidebarToggleWidget())
                 .css("width", "50px")
             )
             .child(new SidePaneContainer('left')
diff --git a/src/public/app/services/load_results.js b/src/public/app/services/load_results.js
index 16d5f508e..dba022294 100644
--- a/src/public/app/services/load_results.js
+++ b/src/public/app/services/load_results.js
@@ -100,7 +100,7 @@ export default class LoadResults {
     }
 
     isOptionReloaded(name) {
-        this.options.includes(name);
+        return this.options.includes(name);
     }
 
     /**
diff --git a/src/public/app/services/split.js b/src/public/app/services/split.js
index 8923e565a..3580b3ae9 100644
--- a/src/public/app/services/split.js
+++ b/src/public/app/services/split.js
@@ -2,13 +2,15 @@ import options from "./options.js";
 
 let instance;
 
-function setupSplit(left, right) {
+function setupSplit(leftPaneVisible) {
     if (instance) {
         instance.destroy();
         instance = null;
     }
 
-    if (!left && !right) {
+    $("#left-pane").toggle(leftPaneVisible);
+
+    if (!leftPaneVisible) {
         $("#center-pane").css('width', '100%');
 
         return;
@@ -19,37 +21,11 @@ function setupSplit(left, right) {
         leftPaneWidth = 5;
     }
 
-    let rightPaneWidth = options.getInt('rightPaneWidth');
-    if (!rightPaneWidth || rightPaneWidth < 5) {
-        rightPaneWidth = 5;
-    }
-
-    if (left && right) {
-        instance = Split(['#left-pane', '#center-pane', '#right-pane'], {
-            sizes: [leftPaneWidth, 100 - leftPaneWidth - rightPaneWidth, rightPaneWidth],
-            gutterSize: 5,
-            onDragEnd: sizes => {
-                options.save('leftPaneWidth', Math.round(sizes[0]));
-                options.save('rightPaneWidth', Math.round(sizes[2]));
-            }
-        });
-    }
-    else if (left) {
+    if (leftPaneVisible) {
         instance = Split(['#left-pane', '#center-pane'], {
             sizes: [leftPaneWidth, 100 - leftPaneWidth],
             gutterSize: 5,
-            onDragEnd: sizes => {
-                options.save('leftPaneWidth', Math.round(sizes[0]));
-            }
-        });
-    }
-    else if (right) {
-        instance = Split(['#center-pane', '#right-pane'], {
-            sizes: [100 - rightPaneWidth, rightPaneWidth],
-            gutterSize: 5,
-            onDragEnd: sizes => {
-                options.save('rightPaneWidth', Math.round(sizes[1]));
-            }
+            onDragEnd: sizes => options.save('leftPaneWidth', Math.round(sizes[0]))
         });
     }
 }
diff --git a/src/public/app/widgets/button_widget.js b/src/public/app/widgets/button_widget.js
index ed799616a..6c567cc37 100644
--- a/src/public/app/widgets/button_widget.js
+++ b/src/public/app/widgets/button_widget.js
@@ -11,39 +11,42 @@ export default class ButtonWidget extends BasicWidget {
     constructor() {
         super();
 
-        this.options = {};
+        this.settings = {};
     }
 
     doRender() {
         this.$widget = $(TPL);
-        this.refreshIcon();
         this.overflowing();
 
-        this.$widget.on("click", () => this.triggerCommand(this.options.command));
+        this.$widget.on("click", () => this.triggerCommand(this.settings.command));
 
         super.doRender();
     }
 
     refreshIcon() {
-        this.$widget.attr("title", this.options.title);
+        this.$widget.attr("title", this.settings.title);
         this.$widget.find("span.bx")
             .removeClass()
             .addClass("bx")
-            .addClass(this.options.icon);
+            .addClass(this.settings.icon);
+    }
+
+    initialRenderCompleteEvent() {
+        this.refreshIcon();
     }
 
     icon(icon) {
-        this.options.icon = icon;
+        this.settings.icon = icon;
         return this;
     }
 
     title(title) {
-        this.options.title = title;
+        this.settings.title = title;
         return this;
     }
 
     command(command) {
-        this.options.command = command;
+        this.settings.command = command;
         return this;
     }
 }
diff --git a/src/public/app/widgets/containers/side_pane_container.js b/src/public/app/widgets/containers/side_pane_container.js
index c40b78874..190dfafbc 100644
--- a/src/public/app/widgets/containers/side_pane_container.js
+++ b/src/public/app/widgets/containers/side_pane_container.js
@@ -2,24 +2,20 @@ import options from "../../services/options.js";
 import FlexContainer from "./flex_container.js";
 
 export default class SidePaneContainer extends FlexContainer {
-    constructor(side) {
+    constructor() {
         super('column');
 
-        this.side = side;
-
-        this.id(side + '-pane');
+        this.id('left-pane');
         this.css('height', '100%');
     }
 
     isEnabled() {
-        return super.isEnabled() && options.is(this.side + 'PaneVisible');
+        return super.isEnabled() && options.is( 'leftPaneVisible');
     }
 
-    sidebarVisibilityChangedEvent({side, show}) {
-        this.toggleInt(this.isEnabled());
-
-        if (this.side === side && show) {
-            this.handleEvent('lazyLoaded');
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.isOptionReloaded("leftPaneVisible")) {
+            this.toggleInt(this.isEnabled());
         }
     }
 }
diff --git a/src/public/app/widgets/note_context_aware_widget.js b/src/public/app/widgets/note_context_aware_widget.js
index 5d9ec83b2..372fb8a51 100644
--- a/src/public/app/widgets/note_context_aware_widget.js
+++ b/src/public/app/widgets/note_context_aware_widget.js
@@ -100,12 +100,4 @@ export default class NoteContextAwareWidget extends BasicWidget {
     async frocaReloadedEvent() {
         await this.refresh();
     }
-
-    async lazyLoadedEvent() {
-        if (!this.noteContext) { // has not been loaded yet
-            this.noteContext = appContext.tabManager.getActiveContext();
-        }
-
-        await this.refresh();
-    }
 }
diff --git a/src/public/app/widgets/protected_session_status.js b/src/public/app/widgets/protected_session_status.js
index e6f9ccfa4..18c3a16cf 100644
--- a/src/public/app/widgets/protected_session_status.js
+++ b/src/public/app/widgets/protected_session_status.js
@@ -2,32 +2,28 @@ import ButtonWidget from "./button_widget.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 
 export default class ProtectedSessionStatusWidget extends ButtonWidget {
-    constructor() {
-        super();
-    }
-
     doRender() {
-        this.updateOptions();
+        this.updateSettings();
 
         super.doRender();
     }
 
-    updateOptions() {
-        this.options.icon = protectedSessionHolder.isProtectedSessionAvailable()
+    updateSettings() {
+        this.settings.icon = protectedSessionHolder.isProtectedSessionAvailable()
             ? "bx-shield-quarter"
             : "bx-log-in";
 
-        this.options.title = protectedSessionHolder.isProtectedSessionAvailable()
+        this.settings.title = protectedSessionHolder.isProtectedSessionAvailable()
             ? "Protected session is active. Click to leave protected session."
             : "Click to enter protected session";
 
-        this.options.command = protectedSessionHolder.isProtectedSessionAvailable()
+        this.settings.command = protectedSessionHolder.isProtectedSessionAvailable()
             ? "leaveProtectedSession"
             : "enterProtectedSession";
     }
 
     protectedSessionStartedEvent() {
-        this.updateOptions();
+        this.updateSettings();
         this.refreshIcon();
     }
 }
diff --git a/src/public/app/widgets/side_pane_toggles.js b/src/public/app/widgets/side_pane_toggles.js
index 0b04dd40a..914ce7885 100644
--- a/src/public/app/widgets/side_pane_toggles.js
+++ b/src/public/app/widgets/side_pane_toggles.js
@@ -3,15 +3,8 @@ import splitService from "../services/split.js";
 import BasicWidget from "./basic_widget.js";
 
 const TPL = `
-<div class="hide-in-zen-mode">
+<div>
     <style>
-    .hide-right-pane-button, .show-right-pane-button {
-        position: fixed;
-        bottom: 10px;
-        right: 10px;
-        z-index: 100;
-    }
-    
     .hide-left-pane-button, .show-left-pane-button {
         position: fixed;
         bottom: 10px;
diff --git a/src/public/app/widgets/sidebar_toggle.js b/src/public/app/widgets/sidebar_toggle.js
new file mode 100644
index 000000000..fde94eab0
--- /dev/null
+++ b/src/public/app/widgets/sidebar_toggle.js
@@ -0,0 +1,39 @@
+import ButtonWidget from "./button_widget.js";
+import options from "../services/options.js";
+import splitService from "../services/split.js";
+
+export default class SidebarToggleWidget extends ButtonWidget {
+    refreshIcon() {
+        const isLeftPaneVisible = options.is('leftPaneVisible');
+
+        this.settings.icon = isLeftPaneVisible
+            ? "bx-chevrons-left"
+            : "bx-chevrons-right";
+
+        this.settings.title = isLeftPaneVisible
+            ? "Hide sidebar."
+            : "Open sidebar.";
+
+        this.settings.command = isLeftPaneVisible
+            ? "hideSidebar"
+            : "showSidebar";
+
+        super.refreshIcon();
+
+        splitService.setupSplit(isLeftPaneVisible);
+    }
+
+    hideSidebarCommand() {
+        options.save(`leftPaneVisible`, "false");
+    }
+
+    showSidebarCommand() {
+        options.save(`leftPaneVisible`, "true");
+    }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.isOptionReloaded("leftPaneVisible")) {
+            this.refreshIcon();
+        }
+    }
+}