standard widget => collapsible widget

src/public/javascripts/widgets/attributes.js

@@ -1,9 +1,9 @@
 import utils from "../services/utils.js";
 import linkService from "../services/link.js";
 import ws from "../services/ws.js";
-import StandardWidget from "./standard_widget.js";
+import CollapsibleWidget from "./standard_widget.js";
 
-class AttributesWidget extends StandardWidget {
+class AttributesWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Attributes"; }
 
     getHelp() {

src/public/javascripts/widgets/calendar.js

@@ -1,4 +1,4 @@
-import StandardWidget from "./standard_widget.js";
+import CollapsibleWidget from "./standard_widget.js";
 import libraryLoader from "../services/library_loader.js";
 import utils from "../services/utils.js";
 import dateNoteService from "../services/date_notes.js";
@@ -24,7 +24,7 @@ const TPL = `
 </div>
 `;
 
-class CalendarWidget extends StandardWidget {
+class CalendarWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Calendar"; }
 
     async isEnabled() {

src/public/javascripts/widgets/collapsible_widget.js

@@ -21,7 +21,7 @@ const WIDGET_TPL = `
 </div>
 `;
 
-class StandardWidget extends TabAwareWidget {
+class CollapsibleWidget extends TabAwareWidget {
     getWidgetTitle() { return "Untitled widget"; }
 
     getHeaderActions() { return []; }
@@ -30,20 +30,14 @@ class StandardWidget extends TabAwareWidget {
 
     getMaxHeight() { return null; }
 
-    //getPosition() { return this.widgetOptions.position; }
-
     render() {
-        const widgetInstanceId = this.componentId + "-" + utils.randomString(10);
-
         this.$widget = $(WIDGET_TPL);
-        this.$widget.find('[data-target]').attr('data-target', "#" + widgetInstanceId);
+        this.$widget.find('[data-target]').attr('data-target', "#" + this.componentId);
 
         this.$bodyWrapper = this.$widget.find('.body-wrapper');
-        this.$bodyWrapper.attr('id', widgetInstanceId);
+        this.$bodyWrapper.attr('id', this.componentId);
 
-//        if (this.state.expanded) {
-            this.$bodyWrapper.collapse("show");
-//        }
+        this.$bodyWrapper.collapse("show");
 
         this.$body = this.$bodyWrapper.find('.card-body');
 
@@ -54,10 +48,6 @@ class StandardWidget extends TabAwareWidget {
             this.$body.css("overflow", "auto");
         }
 
-        // 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.$title.text(this.getWidgetTitle());
 
@@ -91,31 +81,11 @@ class StandardWidget extends TabAwareWidget {
     /** for overriding */
     async doRenderBody() {}
 
-    async isEnabled() {
-        const label = await this.ctx.note.getLabelValue(this.widgetName);
-
-        if (label === 'enabled') {
-            return true;
-        } else if (label === 'disabled') {
-            return false;
-        }
-        else {
-            return this.widgetOptions.enabled;
-        }
-    }
-
     isExpanded() {
         return this.$bodyWrapper.hasClass("show");
     }
 
-    getWidgetState() {
-        return {
-            name: this.widgetName,
-            expanded: this.isExpanded()
-        };
-    }
-
     cleanup() {}
 }
 
-export default StandardWidget;
+export default CollapsibleWidget;

src/public/javascripts/widgets/component.js

@@ -3,7 +3,7 @@ import utils from '../services/utils.js';
 export default class Component {
     /** @param {AppContext} appContext */
     constructor(appContext) {
-        this.componentId = `comp-${this.constructor.name}-` + utils.randomString(10);
+        this.componentId = `comp-${this.constructor.name}-` + utils.randomString(6);
         this.appContext = appContext;
         /** @type Component[] */
         this.children = [];
@@ -13,8 +13,6 @@ export default class Component {
     async eventReceived(name, data, sync = false) {
         await this.initialized;
 
-//        console.log(`Received ${name} to ${this.componentId}`);
-
         const fun = this[name + 'Listener'];
 
         let propagateToChildren = true;

src/public/javascripts/widgets/edited_notes.js

@@ -1,9 +1,9 @@
-import StandardWidget from "./standard_widget.js";
+import CollapsibleWidget from "./standard_widget.js";
 import linkService from "../services/link.js";
 import server from "../services/server.js";
 import treeCache from "../services/tree_cache.js";
 
-class EditedNotesWidget extends StandardWidget {
+class EditedNotesWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Edited notes on this day"; }
 
     getHelp() {

src/public/javascripts/widgets/link_map.js

@@ -1,4 +1,4 @@
-import StandardWidget from "./standard_widget.js";
+import CollapsibleWidget from "./standard_widget.js";
 
 let linkMapContainerIdCtr = 1;
 
@@ -8,7 +8,7 @@ const TPL = `
 </div>
 `;
 
-class LinkMapWidget extends StandardWidget {
+class LinkMapWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Link map"; }
 
     getHelp() {

src/public/javascripts/widgets/note_info.js

@@ -1,4 +1,4 @@
-import StandardWidget from "./standard_widget.js";
+import CollapsibleWidget from "./standard_widget.js";
 
 const TPL = `
 <table class="note-info-widget-table">
@@ -35,34 +35,34 @@ const TPL = `
 </table>
 `;
 
-class NoteInfoWidget extends StandardWidget {
+class NoteInfoWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Note info"; }
 
     doRenderBody() {
         this.$body.html(TPL);
+
+        this.$noteId = this.$body.find(".note-info-note-id");
+        this.$dateCreated = this.$body.find(".note-info-date-created");
+        this.$dateModified = this.$body.find(".note-info-date-modified");
+        this.$type = this.$body.find(".note-info-type");
+        this.$mime = this.$body.find(".note-info-mime");
     }
 
     async refreshWithNote(note) {
-        const $noteId = this.$body.find(".note-info-note-id");
-        const $dateCreated = this.$body.find(".note-info-date-created");
-        const $dateModified = this.$body.find(".note-info-date-modified");
-        const $type = this.$body.find(".note-info-type");
-        const $mime = this.$body.find(".note-info-mime");
-
         const noteComplement = await this.tabContext.getNoteComplement();
 
-        $noteId.text(note.noteId);
-        $dateCreated
+        this.$noteId.text(note.noteId);
+        this.$dateCreated
             .text(noteComplement.dateCreated)
             .attr("title", noteComplement.dateCreated);
 
-        $dateModified
+        this.$dateModified
             .text(noteComplement.dateModified)
             .attr("title", noteComplement.dateCreated);
 
-        $type.text(note.type);
+        this.$type.text(note.type);
 
-        $mime
+        this.$mime
             .text(note.mime)
             .attr("title", note.mime);
     }

src/public/javascripts/widgets/note_revisions.js

@@ -1,12 +1,12 @@
 import server from "../services/server.js";
-import StandardWidget from "./standard_widget.js";
+import CollapsibleWidget from "./standard_widget.js";
 
 const TPL = `
 <ul class="note-revision-list" style="max-height: 150px; overflow: auto;">
 </ul>
 `;
 
-class NoteRevisionsWidget extends StandardWidget {
+class NoteRevisionsWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Note revisions"; }
 
     getHelp() {

src/public/javascripts/widgets/similar_notes.js

@@ -1,9 +1,9 @@
-import StandardWidget from "./standard_widget.js";
+import CollapsibleWidget from "./standard_widget.js";
 import linkService from "../services/link.js";
 import server from "../services/server.js";
 import treeCache from "../services/tree_cache.js";
 
-class SimilarNotesWidget extends StandardWidget {
+class SimilarNotesWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Similar notes"; }
 
     getHelp() {

src/public/javascripts/widgets/tab_aware_widget.js

@@ -28,8 +28,9 @@ export default class TabAwareWidget extends BasicWidget {
         return this.tabContext && this.tabContext.notePath;
     }
 
-    tabNoteSwitchedListener({tabId}) {
-        if (this.isTab(tabId)) {
+    tabNoteSwitchedListener({tabId, notePath}) {
+        // if notePath does not match then the tabContext has been switched to another note in the mean time
+        if (this.isTab(tabId) && this.notePath === notePath) {
             this.noteSwitched();
         }
     }

src/public/javascripts/widgets/what_links_here.js

@@ -1,7 +1,7 @@
-import StandardWidget from "./standard_widget.js";
+import CollapsibleWidget from "./standard_widget.js";
 import linkService from "../services/link.js";
 
-class WhatLinksHereWidget extends StandardWidget {
+class WhatLinksHereWidget extends CollapsibleWidget {
     getWidgetTitle() { return "What links here"; }
 
     getMaxHeight() { return "200px"; }