layout changes WIP

src/public/javascripts/widgets/flex_container.js

@@ -1,25 +1,62 @@
 import BasicWidget from "./basic_widget.js";
 
 export default class FlexContainer extends BasicWidget {
-    constructor(parent, attrs, widgetFactories) {
-        super(parent);
+    constructor(direction) {
+        super();
 
-        this.attrs = attrs;
-        this.children = widgetFactories.map(wf => wf(this));
+        if (!direction) {
+            throw new Error(`Direction argument missing, use either 'row' or 'column'`);
+        }
+
+        this.attrs = {
+            style: 'display: flex;'
+        };
+
+        this.children = [];
+    }
+
+    id(id) {
+        this.attrs.id = id;
+        return this;
+    }
+
+    css(name, value) {
+        this.attrs.style += `${name}: ${value};`;
+        return this;
+    }
+
+    rowFlex() {
+        this.css('flex-direction', 'row');
+        return this;
+    }
+
+    columnFlex() {
+        this.css('flex-direction', 'column');
+        return this;
+    }
+
+    cssBlock(block) {
+        this.cssEl = block;
+        return this;
+    }
+
+    child(widgetFactory) {
+        this.children = widgetFactory(this);
     }
 
     doRender() {
-        this.$widget = $(`<div style="display: flex;">`);
+        this.$widget = $(`<div>`);
+
+        if (this.cssEl) {
+            this.$widget.append($(`<style>`).append(this.cssEl));
+        }
 
         for (const key in this.attrs) {
-            if (key === 'id') {
-                this.$widget.attr(key, this.attrs[key]);
-            }
-            else {
-                this.$widget.css(key, this.attrs[key]);
-            }
+            this.$widget.attr(key, this.attrs[key]);
         }
 
+        if (!this.children)
+
         for (const widget of this.children) {
             this.$widget.append(widget.render());
         }