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.3 KiB
89 lines
2.3 KiB
/**
|
|
* This file is part of the jps-like-websites lib
|
|
* URL: https://git.labos.goip.de/chris/jpc-like-websites
|
|
* @copyright by its creator Christian Martin
|
|
*/
|
|
|
|
/**
|
|
*
|
|
* @param {map<string,any>} attrs
|
|
* @param {Object} intoContainer
|
|
* @param {Function<string, any, Object>} cb
|
|
* @returns {Object} the filled container
|
|
*/
|
|
function fillAttrsInContainerByCb(attrs, intoContainer, cb) {
|
|
let keys = Object.keys(attrs);
|
|
for (let i = 0; i < keys.length; i++) {
|
|
cb(keys[i], attrs[keys[i]], intoContainer);
|
|
}
|
|
return intoContainer;
|
|
}
|
|
|
|
|
|
/**
|
|
* @extends ChildbearerComponent
|
|
* @abstract
|
|
*/
|
|
class ModifiableComponent extends ChildbearerComponent {
|
|
_modifier;
|
|
|
|
constructor(element, attr = {}) {
|
|
super(element, attr);
|
|
}
|
|
|
|
/**
|
|
* Sets, updates or overwrites the Modifier-Object for this component
|
|
* @param {Modifier} modifier
|
|
* @returns {Componant} this component object
|
|
*/
|
|
modifier(modifier) {
|
|
this._modifier = this._modifier
|
|
.join(modifier.ensureModifier());
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Returns a Modifier to chain modifications
|
|
* instead of setting them within an sepperate context.
|
|
* @returns {ChainableModifier}
|
|
*/
|
|
chainModifier() {
|
|
return new ChainableModifier(this);
|
|
}
|
|
|
|
/**
|
|
* @inheritdoc
|
|
* @override
|
|
* @param {Component|ChainableModifier|} component
|
|
*/
|
|
#appendChildComponent(component) {
|
|
this._element.append(
|
|
(component instanceof Component
|
|
? component
|
|
: component.toComponent()
|
|
)
|
|
.generate()
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @inheritdoc
|
|
* @override
|
|
* @returns {HTMLElement}
|
|
*/
|
|
generate() {
|
|
this._modifier._modifications["justify-content"] = this._arrangement;
|
|
this._modifier._modifications['display'] = "flex";
|
|
this._modifier._modifications["align-content"] = this._alignment;
|
|
this._modifier._modifications["align-items"] = this._alignment;
|
|
this._modifier._modifications["text-align"] = this._alignment;
|
|
|
|
fillAttrsInContainerByCb(
|
|
this._modifier._modifications,
|
|
this._element,
|
|
(key, val, el) => { el.style[key] = val; }
|
|
);
|
|
|
|
return this._element;
|
|
}
|
|
}
|
|
|