2020-02-06 21:16:02 +01:00
|
|
|
import BasicWidget from "./basic_widget.js";
|
|
|
|
|
|
|
|
export default class FlexContainer extends BasicWidget {
|
2020-02-27 00:58:10 +01:00
|
|
|
constructor(direction) {
|
|
|
|
super();
|
2020-02-06 21:16:02 +01:00
|
|
|
|
2020-02-27 00:58:10 +01:00
|
|
|
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);
|
2020-02-06 21:16:02 +01:00
|
|
|
}
|
|
|
|
|
2020-02-08 21:54:39 +01:00
|
|
|
doRender() {
|
2020-02-27 00:58:10 +01:00
|
|
|
this.$widget = $(`<div>`);
|
|
|
|
|
|
|
|
if (this.cssEl) {
|
|
|
|
this.$widget.append($(`<style>`).append(this.cssEl));
|
|
|
|
}
|
2020-02-06 21:16:02 +01:00
|
|
|
|
|
|
|
for (const key in this.attrs) {
|
2020-02-27 00:58:10 +01:00
|
|
|
this.$widget.attr(key, this.attrs[key]);
|
2020-02-06 21:16:02 +01:00
|
|
|
}
|
|
|
|
|
2020-02-27 00:58:10 +01:00
|
|
|
if (!this.children)
|
|
|
|
|
2020-02-06 21:16:02 +01:00
|
|
|
for (const widget of this.children) {
|
|
|
|
this.$widget.append(widget.render());
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.$widget;
|
|
|
|
}
|
|
|
|
}
|