sorting of widgets

src/public/javascripts/services/bundle.js

@@ -36,7 +36,6 @@ async function getWidgetBundlesByParent() {
     const byParent = {};
 
     for (const bundle of scriptBundles) {
-
         let widget;
 
         try {
@@ -47,15 +46,13 @@ async function getWidgetBundlesByParent() {
             continue;
         }
 
-        if (!widget.getParentWidget) {
+        if (!widget.parentWidget) {
             console.log(`Custom widget does not have mandatory 'getParent()' method defined`);
             continue;
         }
 
-        const parentWidgetName = widget.getParentWidget();
+        byParent[widget.parentWidget] = byParent[widget.parentWidget] || [];
-
+        byParent[widget.parentWidget].push(widget);
-        byParent[parentWidgetName] = byParent[parentWidgetName] || [];
-        byParent[parentWidgetName].push(widget);
     }
 
     return byParent;

src/public/javascripts/services/entrypoints.js

@@ -58,6 +58,8 @@ export default class Entrypoints extends Component {
             textHoverBgColor: '#555',
             caseSelectedColor: 'var(--main-border-color)'
         });
+
+        findInPage.openFindWindow();
     }
 
     async createNoteIntoDayNoteCommand() {

src/public/javascripts/widgets/attributes.js

@@ -4,16 +4,16 @@ import ws from "../services/ws.js";
 import CollapsibleWidget from "./collapsible_widget.js";
 
 export default class AttributesWidget extends CollapsibleWidget {
-    getWidgetTitle() { return "Attributes"; }
+    get widgetTitle() { return "Attributes"; }
 
-    getHelp() {
+    get help() {
         return {
             title: "Attributes are key-value records owned by assigned to this note.",
             url: "https://github.com/zadam/trilium/wiki/Attributes"
         };
     }
 
-    getHeaderActions() {
+    get headerActions() {
         const $showFullButton = $("<a>").append("show dialog").addClass('widget-header-action');
         $showFullButton.on('click', async () => {
             const attributesDialog = await import("../dialogs/attributes.js");

src/public/javascripts/widgets/basic_widget.js

@@ -1,5 +1,4 @@
 import Component from "./component.js";
-import keyboardActionsService from "../services/keyboard_actions.js";
 
 class BasicWidget extends Component {
     constructor() {
@@ -9,8 +8,6 @@ class BasicWidget extends Component {
             style: ''
         };
         this.classes = [];
-
-        this.position = 0;
     }
 
     id(id) {

src/public/javascripts/widgets/calendar.js

@@ -25,7 +25,7 @@ const TPL = `
 `;
 
 export default class CalendarWidget extends CollapsibleWidget {
-    getWidgetTitle() { return "Calendar"; }
+    get widgetTitle() { return "Calendar"; }
 
     isEnabled() {
         return super.isEnabled()

src/public/javascripts/widgets/collapsible_widget.js

@@ -21,11 +21,11 @@ const WIDGET_TPL = `
 </div>`;
 
 export default class CollapsibleWidget extends TabAwareWidget {
-    getWidgetTitle() { return "Untitled widget"; }
+    get widgetTitle() { return "Untitled widget"; }
 
-    getHeaderActions() { return []; }
+    get headerActions() { return []; }
 
-    getHelp() { return {}; }
+    get help() { return {}; }
 
     doRender() {
         this.$widget = $(WIDGET_TPL);
@@ -47,16 +47,15 @@ export default class CollapsibleWidget extends TabAwareWidget {
         this.$body = this.$bodyWrapper.find('.card-body');
 
         this.$title = this.$widget.find('.widget-title');
-        this.$title.text(this.getWidgetTitle());
+        this.$title.text(this.widgetTitle);
 
         this.$help = this.$widget.find('.widget-help');
-        const help = this.getHelp();
 
-        if (help.title) {
+        if (this.help.title) {
-            this.$help.attr("title", help.title);
+            this.$help.attr("title", this.help.title);
-            this.$help.attr("href", help.url || "javascript:");
+            this.$help.attr("href", this.help.url || "javascript:");
 
-            if (!help.url) {
+            if (!this.help.url) {
                 this.$help.addClass('no-link');
             }
         }
@@ -65,7 +64,7 @@ export default class CollapsibleWidget extends TabAwareWidget {
         }
 
         this.$headerActions = this.$widget.find('.widget-header-actions');
-        this.$headerActions.append(...this.getHeaderActions());
+        this.$headerActions.append(...this.headerActions);
 
         this.initialized = this.doRenderBody();
 

src/public/javascripts/widgets/component.js

@@ -28,17 +28,11 @@ export default class Component {
         return this;
     }
 
-    child(component) {
+    child(...components) {
+        for (const component of components) {
             component.setParent(this);
 
             this.children.push(component);
-
-        return this;
-    }
-
-    addChildren(components = []) {
-        for (const component of components) {
-            this.child(component);
         }
 
         return this;

src/public/javascripts/widgets/desktop_layout.js

@@ -148,7 +148,7 @@ export default class DesktopLayout {
                     .child(new TabCachingWidget(() => new NoteRevisionsWidget()))
                     .child(new TabCachingWidget(() => new SimilarNotesWidget()))
                     .child(new TabCachingWidget(() => new WhatLinksHereWidget()))
-                    .addChildren(this.customWidgets['right-pane'])
+                    .child(...this.customWidgets['right-pane'])
                 )
                 .child(new SidePaneToggles().hideInZenMode())
             );

src/public/javascripts/widgets/edited_notes.js

@@ -4,9 +4,9 @@ import server from "../services/server.js";
 import treeCache from "../services/tree_cache.js";
 
 export default class EditedNotesWidget extends CollapsibleWidget {
-    getWidgetTitle() { return "Edited notes on this day"; }
+    get widgetTitle() { return "Edited notes on this day"; }
 
-    getHelp() {
+    get help() {
         return {
             title: "This contains a list of notes created or updated on this day."
         };

src/public/javascripts/widgets/flex_container.js

@@ -15,11 +15,17 @@ export default class FlexContainer extends BasicWidget {
         this.positionCounter = 10;
     }
 
-    child(component) {
+    child(...components) {
-        super.child(component);
+        super.child(...components);
 
+        for (const component of components) {
+            if (!component.position) {
                 component.position = this.positionCounter;
                 this.positionCounter += 10;
+            }
+        }
+
+        this.children.sort((a, b) => a.position - b.position < 0 ? -1 : 1);
 
         return this;
     }

src/public/javascripts/widgets/link_map.js

@@ -9,16 +9,16 @@ const TPL = `
 `;
 
 export default class LinkMapWidget extends CollapsibleWidget {
-    getWidgetTitle() { return "Link map"; }
+    get widgetTitle() { return "Link map"; }
 
-    getHelp() {
+    get help() {
         return {
             title: "Link map shows incoming and outgoing links from/to the current note.",
             url: "https://github.com/zadam/trilium/wiki/Link-map"
         };
     }
 
-    getHeaderActions() {
+    get headerActions() {
         const $showFullButton = $("<a>").append("show full").addClass('widget-header-action');
         $showFullButton.on('click', async () => {
             const linkMapDialog = await import("../dialogs/link_map.js");

src/public/javascripts/widgets/note_info.js

@@ -43,7 +43,7 @@ const TPL = `
 `;
 
 export default class NoteInfoWidget extends CollapsibleWidget {
-    getWidgetTitle() { return "Note info"; }
+    get widgetTitle() { return "Note info"; }
 
     async doRenderBody() {
         this.$body.html(TPL);

src/public/javascripts/widgets/note_revisions.js

@@ -7,16 +7,16 @@ const TPL = `
 `;
 
 class NoteRevisionsWidget extends CollapsibleWidget {
-    getWidgetTitle() { return "Note revisions"; }
+    get widgetTitle() { return "Note revisions"; }
 
-    getHelp() {
+    get help() {
         return {
             title: "Note revisions track changes in the note across the time.",
             url: "https://github.com/zadam/trilium/wiki/Note-revisions"
         };
     }
 
-    getHeaderActions() {
+    get headerActions() {
         const $showFullButton = $("<a>").append("show dialog").addClass('widget-header-action');
         $showFullButton.on('click', async () => {
             const attributesDialog = await import("../dialogs/note_revisions.js");

src/public/javascripts/widgets/similar_notes.js

@@ -4,9 +4,9 @@ import server from "../services/server.js";
 import treeCache from "../services/tree_cache.js";
 
 export default class SimilarNotesWidget extends CollapsibleWidget {
-    getWidgetTitle() { return "Similar notes"; }
+    get widgetTitle() { return "Similar notes"; }
 
-    getHelp() {
+    get help() {
         return {
             title: "This list contains notes which might be similar to the current note based on textual similarity of note title."
         };

src/public/javascripts/widgets/what_links_here.js

@@ -2,15 +2,15 @@ import CollapsibleWidget from "./collapsible_widget.js";
 import linkService from "../services/link.js";
 
 export default class WhatLinksHereWidget extends CollapsibleWidget {
-    getWidgetTitle() { return "What links here"; }
+    get widgetTitle() { return "What links here"; }
 
-    getHelp() {
+    get help() {
         return {
             title: "This list contains all notes which link to this note through links and relations."
         };
     }
 
-    getHeaderActions() {
+    get headerActions() {
         const $showFullButton = $("<a>").append("show link map").addClass('widget-header-action');
         $showFullButton.on('click', async () => {
             const linkMapDialog = await import("../dialogs/link_map.js");