got rid of .renderTo(), tab caching widgets use hidden marker element

src/public/javascripts/services/app_context.js

@@ -24,6 +24,11 @@ import RowFlexContainer from "../widgets/row_flex_container.js";
 import StandardTopWidget from "../widgets/standard_top_widget.js";
 import treeCache from "./tree_cache.js";
 import treeUtils from "./tree_utils.js";
+import NotePathsWidget from "../widgets/note_paths.js";
+import RunScriptButtonsWidget from "../widgets/run_script_buttons.js";
+import ProtectedNoteSwitchWidget from "../widgets/protected_note_switch.js";
+import NoteTypeWidget from "../widgets/note_type.js";
+import NoteActionsWidget from "../widgets/note_actions.js";
 
 class AppContext {
     constructor() {
@@ -51,7 +56,7 @@ class AppContext {
         const $topPane = $("#top-pane");
 
         for (const widget of topPaneWidgets) {
-            widget.renderTo($topPane);
+            $topPane.append(widget.render());
         }
 
         const $leftPane = $("#left-pane");
@@ -66,19 +71,26 @@ class AppContext {
         ];
 
         for (const widget of leftPaneWidgets) {
-            widget.renderTo($leftPane);
+            $leftPane.append(widget.render());
         }
 
         const $centerPane = $("#center-pane");
 
         const centerPaneWidgets = [
-            new TabCachingWidget(this, () => new NoteTitleWidget(this)),
+            new RowFlexContainer(this, [
+                new TabCachingWidget(this, () => new NotePathsWidget(this)),
+                new NoteTitleWidget(this),
+                new RunScriptButtonsWidget(this),
+                new ProtectedNoteSwitchWidget(this),
+                new NoteTypeWidget(this),
+                new NoteActionsWidget(this)
+            ]),
             new TabCachingWidget(this, () => new PromotedAttributesWidget(this)),
             new TabCachingWidget(this, () => new NoteDetailWidget(this))
         ];
 
         for (const widget of centerPaneWidgets) {
-            widget.renderTo($centerPane);
+            $centerPane.append(widget.render());
         }
 
         const $rightPane = $("#right-pane");
@@ -93,7 +105,7 @@ class AppContext {
         ];
 
         for (const widget of rightPaneWidgets) {
-            widget.renderTo($rightPane);
+            $rightPane.append(widget.render());
         }
 
         this.widgets = [

src/public/javascripts/widgets/basic_widget.js

@@ -1,12 +1,6 @@
 import Component from "./component.js";
 
 class BasicWidget extends Component {
-    renderTo($parent) {
-        this.$parent = $parent;
-
-        $parent.append(this.render());
-    }
-
     render() {
         return this.doRender();
     }

src/public/javascripts/widgets/note_detail.js

@@ -92,7 +92,7 @@ export default class NoteDetailWidget extends TabAwareWidget {
         this.typeWidgets[this.type] = new clazz.default(this.appContext);
         this.children.push(this.typeWidgets[this.type]);
 
-        this.typeWidgets[this.type].renderTo(this.$widget);
+        this.$widget.append(this.typeWidgets[this.type].render());
 
         this.typeWidgets[this.type].eventReceived('setTabContext', {tabContext: this.tabContext});
     }

src/public/javascripts/widgets/note_paths.js

@@ -30,9 +30,7 @@ export default class NotePathsWidget extends TabAwareWidget {
         return this.$widget;
     }
 
-    async refreshWithNote() {
-        const {note, notePath} = this.tabContext;
-
+    async refreshWithNote(note, notePath) {
         if (note.noteId === 'root') {
             // root doesn't have any parent, but it's still technically 1 path
 

src/public/javascripts/widgets/note_title.js

@@ -12,12 +12,8 @@ import ProtectedNoteSwitchWidget from "./protected_note_switch.js";
 import RunScriptButtonsWidget from "./run_script_buttons.js";
 
 const TPL = `
-<div class="note-title-row">
+<div>
     <style>
-    .note-title-row {
-        display: flex;
-    }
-    
     .note-title {
         margin-left: 15px;
         margin-right: 10px;
@@ -34,28 +30,8 @@ const TPL = `
 export default class NoteTitleWidget extends TabAwareWidget {
     doRender() {
         this.$widget = $(TPL);
-
         this.$noteTitle = this.$widget.find(".note-title");
 
-        this.$savedIndicator = this.$widget.find(".saved-indicator");
-
-        this.runScriptButtons = new RunScriptButtonsWidget(this.appContext);
-        this.$widget.append(this.runScriptButtons.render());
-
-        this.protectedNoteSwitch = new ProtectedNoteSwitchWidget(this.appContext);
-        this.$widget.append(this.protectedNoteSwitch.render());
-
-        this.noteType = new NoteTypeWidget(this.appContext);
-        this.$widget.append(this.noteType.render());
-
-        this.noteActions = new NoteActionsWidget(this.appContext);
-        this.$widget.append(this.noteActions.render());
-
-        this.notePaths = new NotePathsWidget(this.appContext);
-        this.$widget.prepend(this.notePaths.render());
-
-        this.children.push(this.noteType, this.notePaths);
-
         this.$noteTitle.on('input', () => {
             if (!this.note) {
                 return;
@@ -84,17 +60,11 @@ export default class NoteTitleWidget extends TabAwareWidget {
         return this.$widget;
     }
 
-    async refreshWithNote() {
-        const note = this.tabContext.note;
-
+    async refreshWithNote(note) {
         this.$noteTitle.val(note.title);
 
         if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
             this.$noteTitle.prop("readonly", true);
         }
     }
-
-    noteSavedListener() {
-        this.$savedIndicator.fadeIn();
-    }
 }

src/public/javascripts/widgets/note_type.js

@@ -42,20 +42,15 @@ export default class NoteTypeWidget extends TabAwareWidget {
         this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
         this.$noteTypeButton = this.$widget.find(".note-type-button");
         this.$noteTypeDesc = this.$widget.find(".note-type-desc");
-        this.$executeScriptButton = this.$widget.find(".execute-script-button");
-        this.$renderButton = this.$widget.find('.render-button');
 
         return this.$widget;
     }
 
-    async refreshWithNote() {
+    async refreshWithNote(note) {
         this.$noteTypeButton.prop("disabled",
-            () => ["file", "image", "search"].includes(this.tabContext.note.type));
+            () => ["file", "image", "search"].includes(note.type));
 
-        this.$noteTypeDesc.text(await this.findTypeTitle(this.tabContext.note.type, this.tabContext.note.mime));
-
-        this.$executeScriptButton.toggle(this.tabContext.note.mime.startsWith('application/javascript'));
-        this.$renderButton.toggle(this.tabContext.note.type === 'render');
+        this.$noteTypeDesc.text(await this.findTypeTitle(note.type, note.mime));
     }
 
     /** actual body is rendered lazily on note-type button click */

src/public/javascripts/widgets/protected_note_switch.js

@@ -1,4 +1,6 @@
 import BasicWidget from "./basic_widget.js";
+import protectedSessionService from "../services/protected_session.js";
+import protectedSessionHolder from "../services/protected_session_holder.js";
 
 const TPL = `
 <div class="btn-group btn-group-xs">
@@ -17,6 +19,19 @@ export default class ProtectedNoteSwitchWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
 
+        this.$protectButton = this.$widget.find(".protect-button");
+        this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
+
+        this.$unprotectButton = this.$widget.find(".unprotect-button");
+        this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
+
         return this.$widget;
     }
+
+    refreshWithNote(note) {
+        this.$protectButton.toggleClass("active", note.isProtected);
+        this.$protectButton.prop("disabled", note.isProtected);
+        this.$unprotectButton.toggleClass("active", !note.isProtected);
+        this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
+    }
 }

src/public/javascripts/widgets/row_flex_container.js

@@ -4,13 +4,13 @@ export default class RowFlexContainer extends BasicWidget {
     constructor(appContext, widgets) {
         super(appContext);
 
-        this.childWidgets = widgets;
+        this.children = widgets;
     }
 
     render() {
         this.$widget = $(`<div style="display: flex; flex-direction: row;">`);
 
-        for (const widget of this.childWidgets) {
+        for (const widget of this.children) {
             this.$widget.append(widget.render());
         }
 

src/public/javascripts/widgets/run_script_buttons.js

@@ -3,31 +3,28 @@ import protectedSessionService from "../services/protected_session.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 
 const TPL = `
-<button class="btn btn-sm icon-button bx bx-play-circle render-button"
-        style="display: none; margin-right: 10px;"
-        title="Render"></button>
-
-<button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
-        style="display: none; margin-right: 10px;"
-        title="Execute (Ctrl+Enter)"></button>`;
+<div>
+    <button class="btn btn-sm icon-button bx bx-play-circle render-button"
+            style="display: none; margin-right: 10px;"
+            title="Render"></button>
+    
+    <button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
+            style="display: none; margin-right: 10px;"
+            title="Execute (Ctrl+Enter)"></button>
+</div>`;
 
 export default class RunScriptButtonsWidget extends TabAwareWidget {
     doRender() {
         this.$widget = $(TPL);
 
-        this.$protectButton = this.$widget.find(".protect-button");
-        this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
-
-        this.$unprotectButton = this.$widget.find(".unprotect-button");
-        this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
+        this.$renderButton = this.$widget.find('.render-button');
+        this.$executeScriptButton = this.$widget.find('.execute-script-button');
 
         return this.$widget;
     }
 
     refreshWithNote(note) {
-        this.$protectButton.toggleClass("active", note.isProtected);
-        this.$protectButton.prop("disabled", note.isProtected);
-        this.$unprotectButton.toggleClass("active", !note.isProtected);
-        this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
+        this.$renderButton.toggle(note.type === 'render');
+        this.$executeScriptButton.toggle(note.mime.startsWith('application/javascript'));
     }
 }

src/public/javascripts/widgets/tab_aware_widget.js

@@ -25,7 +25,7 @@ export default class TabAwareWidget extends BasicWidget {
     refresh() {
         if (this.tabContext && this.tabContext.note) {
             this.toggle(true);
-            this.refreshWithNote(this.tabContext.note);
+            this.refreshWithNote(this.tabContext.note, this.tabContext.notePath);
         }
         else {
             this.toggle(false);

src/public/javascripts/widgets/tab_caching_widget.js

@@ -5,13 +5,12 @@ export default class TabCachingWidget extends TabAwareWidget {
         super(appContext);
 
         this.widgetFactory = widgetFactory;
-        /** @type {JQuery} */
-        this.$parent = null;
         this.widgets = {};
     }
 
-    renderTo($parent) {
-        this.$parent = $parent;
+    doRender() {
+        this.$widget = $(`<div class="marker" style="display: none;">`);
+        return this.$widget;
     }
 
     activeTabChangedListener() {
@@ -26,7 +25,7 @@ export default class TabCachingWidget extends TabAwareWidget {
         if (!widget) {
             widget = this.widgets[this.tabContext.tabId] = this.widgetFactory();
             this.children.push(widget);
-            widget.renderTo(this.$parent);
+            this.$widget.after(widget.render());
 
             widget.eventReceived('setTabContext', {tabContext: this.tabContext});
         }