sidebar & widget state management WIP

src/public/javascripts/services/note_detail.js

@@ -513,19 +513,18 @@ function openTabsChanged() {
 }
 
 async function saveOpenTabs() {
-    const activeTabEl = tabRow.activeTabEl;
     const openTabs = [];
 
     for (const tabEl of tabRow.tabEls) {
         const tabId = tabEl.getAttribute('data-tab-id');
         const tabContext = tabContexts.find(tc => tc.tabId === tabId);
 
-        if (tabContext && tabContext.notePath) {
-            openTabs.push({
-                tabId: tabContext.tabId,
-                notePath: tabContext.notePath,
-                active: activeTabEl === tabEl
-            });
+        if (tabContext) {
+            const tabState = tabContext.getTabState();
+
+            if (tabState) {
+                openTabs.push(tabState);
+            }
         }
     }
 
@@ -573,5 +572,6 @@ export default {
     openEmptyTab,
     noteDeleted,
     refreshTabs,
-    noteChanged
+    noteChanged,
+    openTabsChanged
 };

src/public/javascripts/services/sidebar.js

@@ -38,14 +38,27 @@ class Sidebar {
         this.$hideSidebarButton.click(() => {
             this.$sidebar.hide();
             this.$showSideBarButton.show();
+            this.ctx.stateChanged();
         });
 
         this.$showSideBarButton.click(() => {
             this.$sidebar.show();
             this.$showSideBarButton.hide();
+            this.ctx.stateChanged();
         });
     }
 
+    isVisible() {
+        return this.$sidebar.is(":visible");
+    }
+
+    getSidebarState() {
+        return {
+            visible: this.isVisible(),
+            widgets: this.widgets.map(w => w.getWidgetState())
+        }
+    }
+
     async noteLoaded() {
         this.widgets = [];
         this.$widgets.empty();

src/public/javascripts/services/tab_context.js

@@ -363,6 +363,23 @@ class TabContext {
             this.sidebar.syncDataReceived(syncData);
         }
     }
+
+    getTabState() {
+        if (!this.notePath) {
+            return null;
+        }
+
+        return {
+            tabId: this.tabId,
+            notePath: this.notePath,
+            active: this.tabRow.activeTabEl === this.$tab[0],
+            sidebar: this.sidebar && this.sidebar.getSidebarState()
+        }
+    }
+
+    stateChanged() {
+        noteDetailService.openTabsChanged();
+    }
 }
 
 export default TabContext;

src/public/javascripts/widgets/attributes.js

@@ -11,9 +11,13 @@ class AttributesWidget {
     constructor(ctx, $widget) {
         this.ctx = ctx;
         this.$widget = $widget;
+        this.$widget.on('show.bs.collapse', () => this.renderBody());
+        this.$widget.on('show.bs.collapse', () => this.ctx.stateChanged());
+        this.$widget.on('hide.bs.collapse', () => this.ctx.stateChanged());
         this.$title = this.$widget.find('.widget-title');
         this.$title.text("Attributes");
         this.$headerActions = this.$widget.find('.widget-header-actions');
+        this.$bodyWrapper = this.$widget.find('.body-wrapper');
 
         const $showFullButton = $("<a>").append("show dialog").addClass('widget-header-action');
         $showFullButton.click(() => {
@@ -24,13 +28,18 @@ class AttributesWidget {
     }
 
     async renderBody() {
+        if (!this.isVisible()) {
+            return;
+        }
+
         const $body = this.$widget.find('.card-body');
 
         const attributes = await this.ctx.attributes.getAttributes();
         const ownedAttributes = attributes.filter(attr => attr.noteId === this.ctx.note.noteId);
 
-        if (ownedAttributes.length === 0) {
-            $body.text("No own attributes yet...");
+        if (attributes.length === 0) {
+            $body.text("No attributes yet...");
+            return;
         }
 
         const $attributesContainer = $("<div>");
@@ -96,6 +105,17 @@ class AttributesWidget {
             this.renderBody();
         }
     }
+
+    getWidgetState() {
+        return {
+            id: 'attributes',
+            visible: this.isVisible()
+        };
+    }
+
+    isVisible() {
+        return this.$bodyWrapper.is(":visible");
+    }
 }
 
 export default AttributesWidget;

src/public/javascripts/widgets/link_map.js

@@ -30,9 +30,13 @@ class LinkMapWidget {
     constructor(ctx, $widget) {
         this.ctx = ctx;
         this.$widget = $widget;
+        this.$widget.on('show.bs.collapse', () => this.renderBody());
+        this.$widget.on('show.bs.collapse', () => this.ctx.stateChanged());
+        this.$widget.on('hide.bs.collapse', () => this.ctx.stateChanged());
         this.$title = this.$widget.find('.widget-title');
         this.$title.text("Link map");
         this.$headerActions = this.$widget.find('.widget-header-actions');
+        this.$bodyWrapper = this.$widget.find('.body-wrapper');
 
         const $showFullButton = $("<a>").append("show full").addClass('widget-header-action');
         $showFullButton.click(() => {
@@ -43,6 +47,10 @@ class LinkMapWidget {
     }
 
     async renderBody() {
+        if (!this.isVisible()) {
+            return;
+        }
+
         const $body = this.$widget.find('.card-body');
         $body.html(TPL);
 
@@ -225,6 +233,17 @@ class LinkMapWidget {
     noteIdToId(noteId) {
         return "link-map-note-" + noteId;
     }
+
+    getWidgetState() {
+        return {
+            id: 'attributes',
+            visible: this.isVisible()
+        };
+    }
+
+    isVisible() {
+        return this.$bodyWrapper.is(":visible");
+    }
 }
 
 export default LinkMapWidget;

src/public/javascripts/widgets/note_info.js

@@ -31,11 +31,19 @@ class NoteInfoWidget {
     constructor(ctx, $widget) {
         this.ctx = ctx;
         this.$widget = $widget;
+        this.$widget.on('show.bs.collapse', () => this.renderBody());
+        this.$widget.on('show.bs.collapse', () => this.ctx.stateChanged());
+        this.$widget.on('hide.bs.collapse', () => this.ctx.stateChanged());
         this.$title = this.$widget.find('.widget-title');
         this.$title.text("Note info");
+        this.$bodyWrapper = this.$widget.find('.body-wrapper');
     }
 
     async renderBody() {
+        if (!this.isVisible()) {
+            return;
+        }
+
         const $body = this.$widget.find('.card-body');
 
         $body.html(TPL);
@@ -60,6 +68,17 @@ class NoteInfoWidget {
             this.renderBody();
         }
     }
+
+    getWidgetState() {
+        return {
+            id: 'attributes',
+            visible: this.isVisible()
+        };
+    }
+
+    isVisible() {
+        return this.$bodyWrapper.is(":visible");
+    }
 }
 
 export default NoteInfoWidget;

src/public/javascripts/widgets/note_revisions.js

@@ -13,11 +13,19 @@ class NoteRevisionsWidget {
     constructor(ctx, $widget) {
         this.ctx = ctx;
         this.$widget = $widget;
+        this.$widget.on('show.bs.collapse', () => this.renderBody());
+        this.$widget.on('show.bs.collapse', () => this.ctx.stateChanged());
+        this.$widget.on('hide.bs.collapse', () => this.ctx.stateChanged());
         this.$title = this.$widget.find('.widget-title');
         this.$title.text("Note revisions");
+        this.$bodyWrapper = this.$widget.find('.body-wrapper');
     }
 
     async renderBody() {
+        if (!this.isVisible()) {
+            return;
+        }
+
         const $body = this.$widget.find('.card-body');
         const revisionItems = await server.get(`notes/${this.ctx.note.noteId}/revisions`);
 
@@ -45,6 +53,17 @@ class NoteRevisionsWidget {
             this.renderBody();
         }
     }
+
+    getWidgetState() {
+        return {
+            id: 'attributes',
+            visible: this.isVisible()
+        };
+    }
+
+    isVisible() {
+        return this.$bodyWrapper.is(":visible");
+    }
 }
 
 export default NoteRevisionsWidget;