2020-10-31 22:47:15 +01:00
|
|
|
import BasicWidget from "./basic_widget.js";
|
2020-02-06 21:16:02 +01:00
|
|
|
|
2020-10-31 22:47:15 +01:00
|
|
|
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 10:03:14 +01:00
|
|
|
if (!direction || !['row', 'column'].includes(direction)) {
|
|
|
|
throw new Error(`Direction argument given as "${direction}", use either 'row' or 'column'`);
|
2020-02-27 00:58:10 +01:00
|
|
|
}
|
|
|
|
|
2020-03-01 18:57:13 +01:00
|
|
|
this.attrs.style = `display: flex; flex-direction: ${direction};`;
|
2020-10-31 22:47:15 +01:00
|
|
|
|
|
|
|
this.children = [];
|
|
|
|
|
|
|
|
this.positionCounter = 10;
|
|
|
|
}
|
|
|
|
|
|
|
|
child(...components) {
|
|
|
|
if (!components) {
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
|
|
|
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;
|
2020-02-27 00:58:10 +01:00
|
|
|
}
|
|
|
|
|
2020-02-08 21:54:39 +01:00
|
|
|
doRender() {
|
2020-02-27 00:58:10 +01:00
|
|
|
this.$widget = $(`<div>`);
|
|
|
|
|
2020-02-06 21:16:02 +01:00
|
|
|
for (const widget of this.children) {
|
|
|
|
this.$widget.append(widget.render());
|
|
|
|
}
|
|
|
|
}
|
2020-07-03 22:27:45 +02:00
|
|
|
}
|