continuing refactoring

src/public/javascripts/widgets/basic_widget.js

@@ -1,9 +1,8 @@
-class BasicWidget {
-    /**
-     * @param {AppContext} appContext
-     */
+import Component from "./component.js";
+
+class BasicWidget extends Component {
     constructor(appContext) {
-        this.appContext = appContext;
+        super(appContext);
         this.widgetId = `widget-${this.constructor.name}`;
     }
 
@@ -25,20 +24,6 @@ class BasicWidget {
      */
     doRender() {}
 
-    eventReceived(name, data) {
-        console.log("received", name, "to", this.widgetId);
-
-        const fun = this[name + 'Listener'];
-
-        if (typeof fun === 'function') {
-            fun.call(this, data);
-        }
-    }
-
-    trigger(name, data) {
-        this.appContext.trigger(name, data);
-    }
-
     toggle(show) {
         this.$widget.toggle(show);
     }

src/public/javascripts/widgets/component.js

@@ -0,0 +1,24 @@
+export default class Component {
+    /** @param {AppContext} appContext */
+    constructor(appContext) {
+        this.appContext = appContext;
+        /** @type Component[] */
+        this.children = [];
+    }
+
+    eventReceived(name, data) {
+        const fun = this[name + 'Listener'];
+
+        if (typeof fun === 'function') {
+            fun.call(this, data);
+        }
+
+        for (const child of this.children) {
+            child.eventReceived(name, data);
+        }
+    }
+
+    trigger(name, data) {
+        this.appContext.trigger(name, data);
+    }
+}

src/public/javascripts/widgets/note_detail.js

@@ -58,6 +58,24 @@ export default class NoteDetailWidget extends TabAwareWidget {
 
         this.getComponent().show();
         await this.getComponent().render();
+
+        this.setupClasses();
+    }
+
+    setupClasses() {
+        const note = this.tabContext.note;
+
+        for (const clazz of Array.from(this.$widget[0].classList)) { // create copy to safely iterate over while removing classes
+            if (clazz !== 'note-detail') {
+                this.$widget.removeClass(clazz);
+            }
+        }
+
+        this.$widget.addClass(note.cssClass);
+        this.$widget.addClass(utils.getNoteTypeClass(note.type));
+        this.$widget.addClass(utils.getMimeTypeClass(note.mime));
+
+        this.$widget.toggleClass("protected", note.isProtected);
     }
 
     getComponent() {

src/public/javascripts/widgets/note_tree.js

@@ -101,7 +101,7 @@ export default class NoteTreeWidget extends BasicWidget {
 
                 const notePath = await treeUtils.getNotePath(data.node);
 
-                noteDetailService.switchToNote(notePath);
+                this.appContext.activateNote(notePath);
             },
             expand: (event, data) => treeService.setExpandedToServer(data.node.data.branchId, true),
             collapse: (event, data) => treeService.setExpandedToServer(data.node.data.branchId, false),

src/public/javascripts/widgets/row_flex_container.js

@@ -1,6 +1,6 @@
 import BasicWidget from "./basic_widget.js";
 
-export default class HorizontalFlexContainer extends BasicWidget {
+export default class RowFlexContainer extends BasicWidget {
     constructor(appContext, widgets) {
         super(appContext);