refactoring of layout finished

src/public/javascripts/widgets/component.js

@@ -13,6 +13,15 @@ export default class Component {
     setParent(parent) {
         /** @type Component */
         this.parent = parent;
+        return this;
+    }
+
+    child(component) {
+        component.setParent(this);
+
+        this.children.push(component);
+
+        return this;
     }
 
     async handleEvent(name, data) {

src/public/javascripts/widgets/flex_container.js

@@ -4,12 +4,12 @@ export default class FlexContainer extends BasicWidget {
     constructor(direction) {
         super();
 
-        if (!direction) {
-            throw new Error(`Direction argument missing, use either 'row' or 'column'`);
+        if (!direction || !['row', 'column'].includes(direction)) {
+            throw new Error(`Direction argument given as "${direction}", use either 'row' or 'column'`);
         }
 
         this.attrs = {
-            style: 'display: flex;'
+            style: `display: flex; flex-direction: ${direction};`,
         };
 
         this.children = [];
@@ -25,13 +25,8 @@ export default class FlexContainer extends BasicWidget {
         return this;
     }
 
-    rowFlex() {
-        this.css('flex-direction', 'row');
-        return this;
-    }
-
-    columnFlex() {
-        this.css('flex-direction', 'column');
+    collapsible() {
+        this.css('min-height', '0');
         return this;
     }
 
@@ -40,10 +35,6 @@ export default class FlexContainer extends BasicWidget {
         return this;
     }
 
-    child(widgetFactory) {
-        this.children = widgetFactory(this);
-    }
-
     doRender() {
         this.$widget = $(`<div>`);
 
@@ -55,8 +46,6 @@ export default class FlexContainer extends BasicWidget {
             this.$widget.attr(key, this.attrs[key]);
         }
 
-        if (!this.children)
-
         for (const widget of this.children) {
             this.$widget.append(widget.render());
         }

src/public/javascripts/widgets/layout.js

@@ -28,43 +28,42 @@ import SidePaneToggles from "./side_pane_toggles.js";
 
 export default class Layout {
     getRootWidget(appContext) {
-        const root = new FlexContainer(appContext)
+        const root = new FlexContainer('column').id('root-widget')
             .child(new FlexContainer('row')
                 .child(new GlobalMenuWidget())
                 .child(new TabRowWidget())
                 .child(new TitleBarButtonsWidget()))
             .child(new StandardTopWidget())
-            new FlexContainer({ 'flex-direction': 'row', 'min-height': '0' }, [
-                new SidePaneContainer('left', [
-                    new GlobalButtonsWidget(),
-                    new SearchBoxWidget(),
-                    new SearchResultsWidget(),
-                    new NoteTreeWidget()
-                ]),
-                new FlexContainer({ id: 'center-pane', 'flex-direction': 'column' }, [
-                    new FlexContainer({ 'flex-direction': 'row' }, [
-                        new TabCachingWidget(new NotePathsWidget()),
-                        new NoteTitleWidget(),
-                        new RunScriptButtonsWidget(),
-                        new ProtectedNoteSwitchWidget(),
-                        new NoteTypeWidget(),
-                        new NoteActionsWidget()
-                    ]),
-                    new TabCachingWidget(new PromotedAttributesWidget()),
-                    new TabCachingWidget(new NoteDetailWidget())
-                ]),
-                new SidePaneContainer('right', [
-                    new NoteInfoWidget(),
-                    new TabCachingWidget(() => new CalendarWidget()),
-                    new TabCachingWidget(() => new AttributesWidget()),
-                    new TabCachingWidget(() => new LinkMapWidget()),
-                    new TabCachingWidget(() => new NoteRevisionsWidget()),
-                    new TabCachingWidget(() => new SimilarNotesWidget()),
-                    new TabCachingWidget(() => new WhatLinksHereWidget())
-                ]),
-                new SidePaneToggles()
-            ])
-        ]);
+            .child(new FlexContainer('row').collapsible()
+                .child(new SidePaneContainer('left')
+                    .child(new GlobalButtonsWidget())
+                    .child(new SearchBoxWidget())
+                    .child(new SearchResultsWidget())
+                    .child(new NoteTreeWidget())
+                )
+                .child(new FlexContainer('column').id('center-pane')
+                    .child(new FlexContainer('row')
+                        .child(new TabCachingWidget(() => new NotePathsWidget()))
+                        .child(new NoteTitleWidget())
+                        .child(new RunScriptButtonsWidget())
+                        .child(new ProtectedNoteSwitchWidget())
+                        .child(new NoteTypeWidget())
+                        .child(new NoteActionsWidget())
+                    )
+                    .child(new TabCachingWidget(() => new PromotedAttributesWidget()))
+                    .child(new TabCachingWidget(() => new NoteDetailWidget()))
+                )
+                .child(new SidePaneContainer('right')
+                    .child(new NoteInfoWidget())
+                    .child(new TabCachingWidget(() => new CalendarWidget()))
+                    .child(new TabCachingWidget(() => new AttributesWidget()))
+                    .child(new TabCachingWidget(() => new LinkMapWidget()))
+                    .child(new TabCachingWidget(() => new NoteRevisionsWidget()))
+                    .child(new TabCachingWidget(() => new SimilarNotesWidget()))
+                    .child(new TabCachingWidget(() => new WhatLinksHereWidget()))
+                )
+                .child(new SidePaneToggles())
+            );
 
         root.setParent(appContext);
         

src/public/javascripts/widgets/note_detail.js

@@ -43,8 +43,8 @@ const typeWidgetClasses = {
 };
 
 export default class NoteDetailWidget extends TabAwareWidget {
-    constructor(parent) {
-        super(parent);
+    constructor() {
+        super();
 
         this.typeWidgets = {};
 
@@ -107,10 +107,10 @@ export default class NoteDetailWidget extends TabAwareWidget {
         if (!(this.type in this.typeWidgets)) {
             const clazz = typeWidgetClasses[this.type];
 
-            const typeWidget = this.typeWidgets[this.type] = new clazz(this);
+            const typeWidget = this.typeWidgets[this.type] = new clazz();
             typeWidget.spacedUpdate = this.spacedUpdate;
 
-            this.children.push(typeWidget);
+            this.child(typeWidget);
 
             const $renderedWidget = typeWidget.render();
             keyboardActionsService.updateDisplayedShortcuts($renderedWidget);

src/public/javascripts/widgets/note_title.js

@@ -23,8 +23,8 @@ const TPL = `
 </div>`;
 
 export default class NoteTitleWidget extends TabAwareWidget {
-    constructor(parent) {
-        super(parent);
+    constructor() {
+        super();
 
         this.spacedUpdate = new SpacedUpdate(async () => {
             const title = this.$noteTitle.val();

src/public/javascripts/widgets/side_pane_container.js

@@ -2,10 +2,13 @@ import options from "../services/options.js";
 import FlexContainer from "./flex_container.js";
 
 export default class SidePaneContainer extends FlexContainer {
-    constructor(parent, side, widgetFactories) {
-        super(parent, {id: side + '-pane', 'flex-direction': 'column', 'height': '100%'}, widgetFactories);
+    constructor(side) {
+        super('column');
 
         this.side = side;
+
+        this.id(side + '-pane');
+        this.css('height', '100%');
     }
 
     isEnabled() {

src/public/javascripts/widgets/side_pane_toggles.js

@@ -29,8 +29,8 @@ const TPL = `
 `;
 
 export default class SidePaneToggles extends BasicWidget {
-    constructor(parent) {
-        super(parent);
+    constructor() {
+        super();
 
         this.paneVisible = {};
     }

src/public/javascripts/widgets/type_widgets/type_widget.js

@@ -1,13 +1,6 @@
 import TabAwareWidget from "../tab_aware_widget.js";
 
 export default class TypeWidget extends TabAwareWidget {
-    constructor(parent) {
-        super(parent);
-
-        /** @var {NoteDetailWidget} */
-        this.noteDetailWidget = parent;
-    }
-
     // for overriding
     static getType() {}
 
@@ -18,7 +11,7 @@ export default class TypeWidget extends TabAwareWidget {
 
     async refresh() {
         const thisWidgetType = this.constructor.getType();
-        const noteWidgetType = await this.noteDetailWidget.getWidgetType();
+        const noteWidgetType = await this.parent.getWidgetType();
 
         if (thisWidgetType !== noteWidgetType) {
             this.toggle(false);