various widget refactorings

src/public/javascripts/widgets/attributes.js

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

src/public/javascripts/widgets/calendar.js

@@ -1,4 +1,4 @@
-import CollapsibleWidget from "./standard_widget.js";
+import CollapsibleWidget from "./collapsible_widget.js";
 import libraryLoader from "../services/library_loader.js";
 import utils from "../services/utils.js";
 import dateNoteService from "../services/date_notes.js";
@@ -10,7 +10,7 @@ const TPL = `
   <div class="calendar-header">
     <button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
 
-    <div class="calendar-header__label" data-calendar-label="month">
+    <div class="calendar-header-label" data-calendar-label="month">
       March 2017
     </div>
 
@@ -29,45 +29,29 @@ class CalendarWidget extends CollapsibleWidget {
 
     async isEnabled() {
         return await super.isEnabled()
-            && await this.tabContext.note.hasLabel("dateNote");
+            && this.tabContext.note.hasOwnedLabel("dateNote");
     }
 
     async doRenderBody() {
         await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
 
         this.$body.html(TPL);
-    }
 
-    async refreshWithNote() {
-        this.init(this.$body, await this.tabContext.note.getLabelValue("dateNote"));
-    }
-
-    init($el, activeDate) {
-        this.activeDate = new Date(activeDate + "T12:00:00"); // attaching time fixes local timezone handling
-        this.todaysDate = new Date();
-        this.date = new Date(this.activeDate.getTime());
-
-        this.$month = $el.find('[data-calendar-area="month"]');
-        this.$next = $el.find('[data-calendar-toggle="next"]');
-        this.$previous = $el.find('[data-calendar-toggle="previous"]');
+        this.$month = this.$body.find('[data-calendar-area="month"]');
+        this.$next = this.$body.find('[data-calendar-toggle="next"]');
+        this.$previous = this.$body.find('[data-calendar-toggle="previous"]');
+        this.$label = this.$body.find('[data-calendar-label="month"]');
 
         this.$next.on('click', () => {
-            this.clearCalendar();
             this.date.setMonth(this.date.getMonth() + 1);
             this.createMonth();
         });
 
         this.$previous.on('click', () => {
-            this.clearCalendar();
             this.date.setMonth(this.date.getMonth() - 1);
             this.createMonth();
         });
 
-        this.$label = $el.find('[data-calendar-label="month"]');
-
-        this.date.setDate(1);
-        this.createMonth();
-
         this.$body.on('click', '.calendar-date', async ev => {
             const date = $(ev.target).closest('.calendar-date').attr('data-calendar-date');
 
@@ -82,6 +66,19 @@ class CalendarWidget extends CollapsibleWidget {
         });
     }
 
+    async refreshWithNote(note) {
+        this.init(this.$body, note.getOwnedLabelValue("dateNote"));
+    }
+
+    init($el, activeDate) {
+        this.activeDate = new Date(activeDate + "T12:00:00"); // attaching time fixes local timezone handling
+        this.todaysDate = new Date();
+        this.date = new Date(this.activeDate.getTime());
+        this.date.setDate(1);
+
+        this.createMonth();
+    }
+
     createDay(dateNotesForMonth, num, day) {
         const $newDay = $('<a>')
             .addClass("calendar-date")
@@ -113,7 +110,7 @@ class CalendarWidget extends CollapsibleWidget {
         }
 
         $newDay.append($date);
-        this.$month.append($newDay);
+        return $newDay;
     }
 
     isEqual(a, b) {
@@ -126,14 +123,19 @@ class CalendarWidget extends CollapsibleWidget {
         const month = utils.formatDateISO(this.date).substr(0, 7);
         const dateNotesForMonth = await server.get('date-notes/notes-for-month/' + month);
 
+        this.$month.empty();
+
         const currentMonth = this.date.getMonth();
         while (this.date.getMonth() === currentMonth) {
-            this.createDay(
+            const $day = this.createDay(
                 dateNotesForMonth,
                 this.date.getDate(),
                 this.date.getDay(),
                 this.date.getFullYear()
             );
+
+            this.$month.append($day);
+
             this.date.setDate(this.date.getDate() + 1);
         }
         // while loop trips over and day is at 30/31, bring it back
@@ -159,10 +161,6 @@ class CalendarWidget extends CollapsibleWidget {
             'December'
         ][monthIndex];
     }
-
-    clearCalendar() {
-        this.$month.html('');
-    }
 }
 
 export default CalendarWidget;

src/public/javascripts/widgets/collapsible_widget.js

@@ -1,4 +1,3 @@
-import utils from "../services/utils.js";
 import TabAwareWidget from "./tab_aware_widget.js";
 
 const WIDGET_TPL = `
@@ -21,7 +20,7 @@ const WIDGET_TPL = `
 </div>
 `;
 
-class CollapsibleWidget extends TabAwareWidget {
+export default class CollapsibleWidget extends TabAwareWidget {
     getWidgetTitle() { return "Untitled widget"; }
 
     getHeaderActions() { return []; }
@@ -30,7 +29,7 @@ class CollapsibleWidget extends TabAwareWidget {
 
     getMaxHeight() { return null; }
 
-    render() {
+    doRender() {
         this.$widget = $(WIDGET_TPL);
         this.$widget.find('[data-target]').attr('data-target', "#" + this.componentId);
 
@@ -69,23 +68,15 @@ class CollapsibleWidget extends TabAwareWidget {
         this.$headerActions = this.$widget.find('.widget-header-actions');
         this.$headerActions.append(...this.getHeaderActions());
 
-        this.initialized = this.renderBody();
+        this.initialized = this.doRenderBody();
 
         return this.$widget;
     }
 
-    async renderBody() {
-        await this.doRenderBody();
-    }
-
     /** for overriding */
     async doRenderBody() {}
 
     isExpanded() {
         return this.$bodyWrapper.hasClass("show");
     }
-
-    cleanup() {}
-}
-
-export default CollapsibleWidget;
+}

src/public/javascripts/widgets/edited_notes.js

@@ -1,9 +1,9 @@
-import CollapsibleWidget from "./standard_widget.js";
+import CollapsibleWidget from "./collapsible_widget.js";
 import linkService from "../services/link.js";
 import server from "../services/server.js";
 import treeCache from "../services/tree_cache.js";
 
-class EditedNotesWidget extends CollapsibleWidget {
+export default class EditedNotesWidget extends CollapsibleWidget {
     getWidgetTitle() { return "Edited notes on this day"; }
 
     getHelp() {
@@ -19,8 +19,7 @@ class EditedNotesWidget extends CollapsibleWidget {
             && await this.tabContext.note.hasLabel("dateNote");
     }
 
-    async refreshWithNote() {
-        const note = this.tabContext.note;
+    async refreshWithNote(note) {
         // remember which title was when we found the similar notes
         this.title = note.title;
         let editedNotes = await server.get('edited-notes/' + await note.getLabelValue("dateNote"));
@@ -53,6 +52,4 @@ class EditedNotesWidget extends CollapsibleWidget {
 
         this.$body.empty().append($list);
     }
-}
-
-export default EditedNotesWidget;
+}

src/public/javascripts/widgets/link_map.js

@@ -1,4 +1,4 @@
-import CollapsibleWidget from "./standard_widget.js";
+import CollapsibleWidget from "./collapsible_widget.js";
 
 let linkMapContainerIdCtr = 1;
 
@@ -28,7 +28,7 @@ class LinkMapWidget extends CollapsibleWidget {
         return [$showFullButton];
     }
 
-    async refreshWithNote() {
+    async refreshWithNote(note) {
         this.$body.css('opacity', 0);
         this.$body.html(TPL);
 
@@ -38,9 +38,10 @@ class LinkMapWidget extends CollapsibleWidget {
 
         const LinkMapServiceClass = (await import('../services/link_map.js')).default;
 
-        this.linkMapService = new LinkMapServiceClass(this.tabContext.note, $linkMapContainer, {
+        this.linkMapService = new LinkMapServiceClass(note, $linkMapContainer, {
             maxDepth: 1,
-            zoom: 0.6
+            zoom: 0.6,
+            stopCheckerCallback: () => this.noteId !== note.noteId // stop when current note is not what was originally requested
         });
 
         await this.linkMapService.render();

src/public/javascripts/widgets/note_info.js

@@ -1,4 +1,4 @@
-import CollapsibleWidget from "./standard_widget.js";
+import CollapsibleWidget from "./collapsible_widget.js";
 
 const TPL = `
 <table class="note-info-widget-table">

src/public/javascripts/widgets/note_revisions.js

@@ -1,5 +1,5 @@
 import server from "../services/server.js";
-import CollapsibleWidget from "./standard_widget.js";
+import CollapsibleWidget from "./collapsible_widget.js";
 
 const TPL = `
 <ul class="note-revision-list" style="max-height: 150px; overflow: auto;">

src/public/javascripts/widgets/similar_notes.js

@@ -1,4 +1,4 @@
-import CollapsibleWidget from "./standard_widget.js";
+import CollapsibleWidget from "./collapsible_widget.js";
 import linkService from "../services/link.js";
 import server from "../services/server.js";
 import treeCache from "../services/tree_cache.js";

src/public/javascripts/widgets/tab_aware_widget.js

@@ -43,10 +43,22 @@ export default class TabAwareWidget extends BasicWidget {
         this.refresh();
     }
 
-    refresh() {
-        if (this.note) {
+    async isEnabled() {
+        return !!this.note;
+    }
+
+    async refresh() {
+        if (await this.isEnabled()) {
+            const start = Date.now();
+
             this.toggle(true);
-            this.refreshWithNote(this.note, this.notePath);
+            await this.refreshWithNote(this.note, this.notePath);
+
+            const end = Date.now();
+
+            if (end - start > 10) {
+                console.log(`Refresh of ${this.componentId} took ${end-start}ms`);
+            }
         }
         else {
             this.toggle(false);

src/public/javascripts/widgets/what_links_here.js

@@ -1,4 +1,4 @@
-import CollapsibleWidget from "./standard_widget.js";
+import CollapsibleWidget from "./collapsible_widget.js";
 import linkService from "../services/link.js";
 
 class WhatLinksHereWidget extends CollapsibleWidget {