You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.8 KiB
89 lines
2.8 KiB
/**
|
|
* Represents container Components.
|
|
* Some predefined modifications are applied on the child components.
|
|
*/
|
|
class FlexContainerComponent extends Component {
|
|
constructor(attr = {}) {
|
|
super(document.createElement("div"), attr)
|
|
.addStyleClass("flex-container-component")
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param {Component|Array<Component>} innerComponent
|
|
* @returns this component object
|
|
*/
|
|
childComponents(innerComponent) {
|
|
if (innerComponent instanceof Array) {
|
|
innerComponent.forEach(icomp => {
|
|
(icomp instanceof Component
|
|
? icomp
|
|
: icomp.backToComponent()
|
|
)
|
|
.chainModifier()
|
|
.setStyleRule("flex", "none")
|
|
|
|
})
|
|
} else if (!innerComponent instanceof Component) {
|
|
innerComponent
|
|
.backToComponent()
|
|
.chainModifier()
|
|
.setStyleRule("flex", "none")
|
|
}
|
|
return super.childComponents(innerComponent);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A FlexContainerComponent, which organizes the children in a column like manner.
|
|
*/
|
|
class Column extends FlexContainerComponent {
|
|
constructor(attr = {}) {
|
|
super(document.createElement("div"), attr)
|
|
.addStyleClass("column-component")
|
|
.modifier(
|
|
new Modifier()
|
|
.fillMaxHeight()
|
|
.setStyleRule("flex-direction", "column")
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A FlexContainerComponent, which organizes the children in a row like manner.
|
|
*/
|
|
class Row extends FlexContainerComponent {
|
|
constructor(attr = {}) {
|
|
super(attr)
|
|
.addStyleClass("row-component")
|
|
.modifier(
|
|
new Modifier()
|
|
.fillMaxWidth()
|
|
.setStyleRule("flex-direction", "row")
|
|
)
|
|
}
|
|
|
|
childComponents(innerComponent) {
|
|
if (innerComponent instanceof Array) {
|
|
innerComponent.forEach((icomp, i) => {
|
|
(icomp instanceof Component
|
|
? icomp
|
|
: icomp.backToComponent()
|
|
).modifier(
|
|
/* sets the width for all elements,
|
|
to avoid overlapping or line break because of lacking width,
|
|
a percent is subtracted for every child element */
|
|
new Modifier()
|
|
.setStyleRule("float", (i === 0 ? "left" : "right"))
|
|
.fillMaxWidth((Math.floor((10000 - 100 * innerComponent.length) / innerComponent.length) / 10000))
|
|
)
|
|
})
|
|
} else {
|
|
innerComponent.modifier(
|
|
new Modifier()
|
|
.setStyleRule("flex", "none")
|
|
)
|
|
}
|
|
return super.childComponents(innerComponent)
|
|
}
|
|
}
|
|
|