standard widget => collapsible widget

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.40.1",
+  "version": "0.40.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -566,8 +566,7 @@
     "@types/debug": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.5.tgz",
-      "integrity": "sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==",
+      "integrity": "sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ=="
-      "dev": true
     },
     "@types/events": {
       "version": "3.0.0",
@@ -3848,12 +3847,12 @@
       }
     },
     "file-type": {
-      "version": "13.1.2",
+      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-13.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-14.0.0.tgz",
-      "integrity": "sha512-NiHXbmclwHN38eHZfRklosbm7/W+1yacDzRCyddd0NiyuJUArQDmzJ8GPSFJGl82+I59u7sNGfcAVnJsfXJb8A==",
+      "integrity": "sha512-+gxNvurlwHfTohZC6gqf0ybMl+cXYB9f1x++kw9AgKItdFx20J0fV9wCVR38a5/jphL5EUcusJ9tLYkPRtGHaw==",
       "requires": {
         "readable-web-to-node-stream": "^2.0.0",
-        "strtok3": "^5.0.2",
+        "strtok3": "^6.0.0",
         "token-types": "^2.0.0",
         "typedarray-to-buffer": "^3.1.5"
       }
@@ -9522,11 +9521,12 @@
       }
     },
     "strtok3": {
-      "version": "5.0.2",
+      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-5.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-6.0.0.tgz",
-      "integrity": "sha512-EFeVpFC5qDsqPEJSrIYyS/ueFBknGhgSK9cW+YAJF/cgJG/KSjoK7X6rK5xnpcLe7y1LVkVFCXWbAb+ClNKzKQ==",
+      "integrity": "sha512-ZXlmE22LZnIBvEU3n/kZGdh770fYFie65u5+2hLK9s74DoFtpkQIdBZVeYEzlolpGa+52G5IkzjUWn+iXynOEQ==",
       "requires": {
         "@tokenizer/token": "^0.1.1",
+        "@types/debug": "^4.1.5",
         "debug": "^4.1.1",
         "peek-readable": "^3.1.0"
       }

package.json

@@ -37,7 +37,7 @@
     "electron-window-state": "5.0.3",
     "express": "4.17.1",
     "express-session": "1.17.0",
-    "file-type": "13.1.2",
+    "file-type": "14.0.0",
     "fs-extra": "8.1.0",
     "helmet": "3.21.2",
     "html": "1.0.0",

src/public/javascripts/services/frontend_script_api.js

@@ -7,7 +7,7 @@ import treeCache from './tree_cache.js';
 import noteTooltipService from './note_tooltip.js';
 import protectedSessionService from './protected_session.js';
 import dateNotesService from './date_notes.js';
-import StandardWidget from '../widgets/standard_widget.js';
+import CollapsibleWidget from '../widgets/standard_widget.js';
 import ws from "./ws.js";
 import hoistedNoteService from "./hoisted_note.js";
 import appContext from "./app_context.js";
@@ -37,8 +37,8 @@ function FrontendScriptApi(startNote, currentNote, originEntity = null, tabConte
     /** @property {TabContext|null} - experimental! */
     this.tabContext = tabContext;
 
-    /** @property {StandardWidget} */
+    /** @property {CollapsibleWidget} */
-    this.StandardWidget = StandardWidget;
+    this.StandardWidget = CollapsibleWidget;
 
     /**
      * Activates note in the tree and in the note detail.

src/public/javascripts/services/tab_context.js

@@ -69,7 +69,10 @@ class TabContext extends Component {
             protectedSessionHolder.touchProtectedSession();
         }
 
-        this.trigger('tabNoteSwitched', {tabId: this.tabId});
+        this.trigger('tabNoteSwitched', {
+            tabId: this.tabId,
+            notePath: this.notePath
+        });
         this.trigger('openTabsChanged');
     }
 
@@ -114,11 +117,14 @@ class TabContext extends Component {
     }
 
     noteDeletedListener({noteId}) {
-        if (this.note && noteId === this.note.noteId) {
+        if (this.noteId === noteId) {
-            this.note = null;
+            this.noteId = null;
             this.notePath = null;
 
-            this.trigger('tabNoteSwitched', {tabId: this.tabId});
+            this.trigger('tabNoteSwitched', {
+                tabId: this.tabId,
+                notePath: this.notePath
+            });
         }
     }
 

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.$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);
+        this.$noteId.text(note.noteId);
-        $dateCreated
+        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}) {
+    tabNoteSwitchedListener({tabId, notePath}) {
-        if (this.isTab(tabId)) {
+        // 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"; }