added TabCachingWidget

src/public/javascripts/services/app_context.js

@@ -11,6 +11,7 @@ import TabRowWidget from "./tab_row.js";
 import NoteTitleWidget from "../widgets/note_title.js";
 import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
+import TabCachingWidget from "../widgets/tab_caching_widget.js";
 
 class AppContext {
     constructor() {
@@ -40,23 +41,19 @@ class AppContext {
         ];
 
         for (const widget of leftPaneWidgets) {
-            const $widget = widget.render();
+            widget.renderTo($leftPane);
-
-            $leftPane.append($widget);
         }
 
         const $centerPane = $("#center-pane");
 
         const centerPaneWidgets = [
-            new NoteTitleWidget(this),
+            new TabCachingWidget(this, () => new NoteTitleWidget(this)),
-            new PromotedAttributesWidget(this),
+            new TabCachingWidget(this, () => new PromotedAttributesWidget(this)),
-            new NoteDetailWidget(this)
+            new TabCachingWidget(this, () => new NoteDetailWidget(this))
         ];
 
         for (const widget of centerPaneWidgets) {
-            const $widget = widget.render();
+            widget.renderTo($centerPane);
-
-            $centerPane.append($widget);
         }
 
         this.widgets = [

src/public/javascripts/widgets/basic_widget.js

@@ -7,13 +7,17 @@ class BasicWidget {
         this.widgetId = `widget-${this.constructor.name}`;
     }
 
+    renderTo($parent) {
+        $parent.append(this.render());
+    }
+
     render() {
         // actual rendering is async
-        const $widget = this.doRender();
+        this.$widget = this.doRender();
 
 //        $widget.attr('id', this.widgetId);
 
-        return $widget;
+        return this.$widget;
     }
 
     /**
@@ -33,6 +37,10 @@ class BasicWidget {
         this.appContext.trigger(name, data);
     }
 
+    toggle(show) {
+        this.$widget.toggle(show);
+    }
+
     cleanup() {}
 }
 

src/public/javascripts/widgets/note_title.js

@@ -8,24 +8,24 @@ import protectedSessionHolder from "../services/protected_session_holder.js";
 import NoteTypeWidget from "./note_type.js";
 
 const TPL = `
-<style>
-.note-title-row {
-    flex-grow: 0;
-    flex-shrink: 0;
-    padding-top: 2px;
-}
-
-.note-title {
-    margin-left: 15px;
-    margin-right: 10px;
-    font-size: 150%;
-    border: 0;
-    width: 5em;
-    flex-grow: 100;
-}
-</style>
-
 <div class="note-title-row">
+    <style>
+    .note-title-row {
+        flex-grow: 0;
+        flex-shrink: 0;
+        padding-top: 2px;
+    }
+    
+    .note-title {
+        margin-left: 15px;
+        margin-right: 10px;
+        font-size: 150%;
+        border: 0;
+        width: 5em;
+        flex-grow: 100;
+    }
+    </style>
+
     <div style="display: flex; align-items: center;">
         <div class="dropdown hide-in-zen-mode">
             <button class="btn btn-sm dropdown-toggle note-path-list-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -99,20 +99,20 @@ export default class NoteTitleWidget extends TabAwareWidget {
     }
 
     doRender() {
-        const $widget = $(TPL);
+        this.$widget = $(TPL);
 
-        this.$noteTitle = $widget.find(".note-title");
+        this.$noteTitle = this.$widget.find(".note-title");
-        this.$noteTitleRow = $widget.find(".note-title-row");
+        this.$noteTitleRow = this.$widget.find(".note-title-row");
-        this.$notePathList = $widget.find(".note-path-list");
+        this.$notePathList = this.$widget.find(".note-path-list");
-        this.$notePathCount = $widget.find(".note-path-count");
+        this.$notePathCount = this.$widget.find(".note-path-count");
 
-        this.$protectButton = $widget.find(".protect-button");
+        this.$protectButton = this.$widget.find(".protect-button");
         this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
 
-        this.$unprotectButton = $widget.find(".unprotect-button");
+        this.$unprotectButton = this.$widget.find(".unprotect-button");
         this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
 
-        this.$savedIndicator = $widget.find(".saved-indicator");
+        this.$savedIndicator = this.$widget.find(".saved-indicator");
 
         this.noteType = new NoteTypeWidget(this);
 
@@ -141,7 +141,7 @@ export default class NoteTitleWidget extends TabAwareWidget {
             });
         }
 
-        return $widget;
+        return this.$widget;
     }
 
     async activeTabChanged() {

src/public/javascripts/widgets/tab_caching_widget.js

@@ -0,0 +1,32 @@
+import TabAwareWidget from "./tab_aware_widget.js";
+
+export default class TabCachingWidget extends TabAwareWidget {
+    constructor(appContext, widgetFactory) {
+        super(appContext);
+
+        this.widgetFactory = widgetFactory;
+        /** @type {JQuery} */
+        this.$parent = null;
+        this.widgets = {};
+    }
+
+    renderTo($parent) {
+        this.$parent = $parent;
+    }
+
+    activeTabChanged() {
+        for (const widget of Object.values(this.widgets)) {
+            widget.toggle(false);
+        }
+
+        let widget = this.widgets[this.tabContext.tabId];
+
+        if (!widget) {
+            widget = this.widgets[this.tabContext.tabId] = this.widgetFactory();
+            widget.renderTo(this.$parent);
+            widget.activeTabChangedListener();
+        }
+
+        widget.toggle(true);
+    }
+}