introduced a StandardWidget base class

src/public/javascripts/services/sidebar.js

@@ -3,22 +3,6 @@ import LinkMapWidget from "../widgets/link_map.js";
 import NoteRevisionsWidget from "../widgets/note_revisions.js";
 import AttributesWidget from "../widgets/attributes.js";
 
-const WIDGET_TPL = `
-<div class="card widget">
-    <div class="card-header">        
-        <button class="btn btn-sm widget-title" data-toggle="collapse" data-target="#collapseOne">
-            Collapsible Group Item
-        </button>
-        
-        <div class="widget-header-actions"></div>
-    </div>
-
-    <div id="collapseOne" class="collapse show body-wrapper">
-        <div class="card-body"></div>
-    </div>
-</div>
-`;
-
 let widgetIdCtr = 1;
 
 class Sidebar {
@@ -28,8 +12,9 @@ class Sidebar {
     constructor(ctx) {
         this.ctx = ctx;
         this.widgets = [];
+        this.rendered = false;
         this.$sidebar = ctx.$tabContent.find(".note-detail-sidebar");
-        this.$widgets = this.$sidebar.find(".note-detail-widgets");
+        this.$widgetContainer = this.$sidebar.find(".note-detail-widget-container");
         this.$showSideBarButton = this.ctx.$tabContent.find(".show-sidebar-button");
         this.$showSideBarButton.hide();
 
@@ -61,32 +46,21 @@ class Sidebar {
 
     async noteLoaded() {
         this.widgets = [];
-        this.$widgets.empty();
+        this.$widgetContainer.empty();
 
-        const widgetClasses = [AttributesWidget, LinkMapWidget, NoteRevisionsWidget, NoteInfoWidget];
+        //const widgetClasses = [AttributesWidget, LinkMapWidget, NoteRevisionsWidget, NoteInfoWidget];
+        const widgetClasses = [AttributesWidget];
 
         for (const widgetClass of widgetClasses) {
-            const $widget = this.createWidgetElement();
+            const widget = new widgetClass(this.ctx);
+            this.widgets.push(widget);
 
-            const attributesWidget = new widgetClass(this.ctx, $widget);
+            widget.renderBody(); // let it run in parallel
-            this.widgets.push(attributesWidget);
 
-            attributesWidget.renderBody(); // let it run in parallel
+            this.$widgetContainer.append(widget.getWidgetElement());
-
-            this.$widgets.append($widget);
         }
     }
 
-    createWidgetElement() {
-        const widgetId = 'widget-' + widgetIdCtr++;
-
-        const $widget = $(WIDGET_TPL);
-        $widget.find('[data-target]').attr('data-target', "#" + widgetId);
-        $widget.find('.body-wrapper').attr('id', widgetId);
-
-        return $widget;
-    }
-
     syncDataReceived(syncData) {
         for (const widget of this.widgets) {
             if (widget.syncDataReceived) {

src/public/javascripts/widgets/attributes.js

@@ -2,22 +2,13 @@ import attributesDialog from "../dialogs/attributes.js";
 import utils from "../services/utils.js";
 import linkService from "../services/link.js";
 import messagingService from "../services/messaging.js";
+import StandardWidget from "./standard_widget.js";
+
+class AttributesWidget extends StandardWidget {
+    constructor(ctx, state) {
+        super(ctx, state, 'attributes');
 
-class AttributesWidget {
-    /**
-     * @param {TabContext} ctx
-     * @param {jQuery} $widget
-     */
-    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(() => {
@@ -27,18 +18,12 @@ class AttributesWidget {
         this.$headerActions.append($showFullButton);
     }
 
-    async renderBody() {
+    async doRenderBody() {
-        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 (attributes.length === 0) {
-            $body.text("No attributes yet...");
+            this.$body.text("No attributes yet...");
             return;
         }
 
@@ -75,7 +60,7 @@ class AttributesWidget {
             $inheritedAttrs.hide();
         }
 
-        $body.empty().append($attributesContainer);
+        this.$body.empty().append($attributesContainer);
     }
 
     async renderAttributes(attributes, $container) {
@@ -102,20 +87,9 @@ class AttributesWidget {
         if (syncData.find(sd => sd.entityName === 'attributes' && sd.noteId === this.ctx.note.noteId)) {
             // no need to invalidate attributes since the Attribute class listens to this as well
             // (and is guaranteed to run first)
-            this.renderBody();
+            this.doRenderBody();
         }
     }
-
-    getWidgetState() {
-        return {
-            id: 'attributes',
-            visible: this.isVisible()
-        };
-    }
-
-    isVisible() {
-        return this.$bodyWrapper.is(":visible");
-    }
 }
 
 export default AttributesWidget;

src/public/javascripts/widgets/standard_widget.js

@@ -0,0 +1,77 @@
+const WIDGET_TPL = `
+<div class="card widget">
+    <div class="card-header">        
+        <button class="btn btn-sm widget-title" data-toggle="collapse" data-target="#[to be set]">
+            Collapsible Group Item
+        </button>
+        
+        <div class="widget-header-actions"></div>
+    </div>
+
+    <div id="[to be set]" class="collapse body-wrapper">
+        <div class="card-body"></div>
+    </div>
+</div>
+`;
+
+class StandardWidget {
+    /**
+     * @param {TabContext} ctx
+     * @param {object} state
+     * @param {string} widgetId
+     */
+    constructor(ctx, state, widgetId) {
+        this.ctx = ctx;
+        this.widgetId = widgetId;
+
+        this.$widget = $(WIDGET_TPL);
+        this.$widget.find('[data-target]').attr('data-target', "#widget-" + widgetId);
+
+        this.$bodyWrapper = this.$widget.find('.body-wrapper');
+        this.$bodyWrapper.attr('id', "widget-" + widgetId);
+
+        if (state && state.visible) {
+            this.$bodyWrapper.addClass("show");
+        }
+
+        this.$body = this.$bodyWrapper.find('.card-body');
+
+        this.$widget.on('shown.bs.collapse', () => this.renderBody());
+        this.$widget.on('shown.bs.collapse', () => this.ctx.stateChanged());
+        this.$widget.on('hidden.bs.collapse', () => this.ctx.stateChanged());
+        this.$title = this.$widget.find('.widget-title');
+        this.$headerActions = this.$widget.find('.widget-header-actions');
+    }
+
+    async renderBody() {
+        if (!this.isVisible() || this.rendered) {
+            return;
+        }
+
+        this.rendered = true;
+
+        await this.doRenderBody();
+    }
+
+    /** for overriding */
+    async doRenderBody() {}
+
+    isVisible() {
+        return this.$bodyWrapper.is(":visible");
+    }
+
+    getWidgetState() {
+        return {
+            id: this.widgetId,
+            visible: this.isVisible()
+        };
+    }
+
+    getWidgetElement() {
+        return this.$widget;
+    }
+
+    syncDataReceived(syncData) {}
+}
+
+export default StandardWidget;

src/views/sidebar.ejs

@@ -3,5 +3,5 @@
         <button class="hide-sidebar-button" style="background: none; border: none;">hide sidebar <span class="jam jam-chevron-right"></span></button>
     </div>
 
-    <div class="note-detail-widgets"></div>
+    <div class="note-detail-widget-container"></div>
 </div>