chris
/
jpc-like-websites
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity
Browse Source

MAJOR,REFA: seperated and moved baseCompontent

dev-feat-component_preview
chris 2 months ago
parent
c34114c176
commit
89bc8106c9
5 changed files with 226 additions and 230 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 230
      src/baseComponents.js
  2. 19
      src/component/Column.js
  3. 110
      src/component/FlexContainerComponent.js
  4. 51
      src/component/InputComponent.js
  5. 46
      src/component/Row.js

230
src/baseComponents.js
View File

@ -1,230 +0,0 @@
/**
* Represents a Component (of an HTMLElement) that is capable of receiving input.
* @extends Component
* @inheritdoc
*/
class InputComponent extends Component {
/**
*
* @param {string} element
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(element, attr = {}, modifier = null) {
super(element, attr);
this.addStyleClass("el-input-comp");
if (modifier) {
this.modifier(modifier);
}
}
/**
* The parameter makes it optional to trigger the state by a variable
* @param {boolean} readonly
* @returns {Component}
*/
readonly(readonly = true) {
if (readonly) {
this._element.setAttribute("readonly", readonly);
}
return this;
}
/**
* Sets the value of the InputComponent
* @param {string} Value
* @returns {InputComponent|Component}
*/
value(value) {
this._element.value = value;
return this;
}
/**
*
* @param {string} name
* @returns {InputComponent|Component}
*/
name(name) {
return this.setAttribute("name", name);
}
}
/**
* Represents container Components.
* Some predefined modifications are applied on the child components.
* @extends Component
* @inheritdoc
*/
class FlexContainerComponent extends Component {
/**
* @type {boolean}
*/
_distributeEvenglyAfterGenerate;
/**
* @type {string}
*/
_flexDirection;
/**
*
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null, baseElement = "div") {
super(document.createElement(baseElement), attr);
this._flexDirection = "";
this._distributeEvenglyAfterGenerate = false;
this.addStyleClass("flex-container-component");
if (modifier) {
this.modifier(modifier);
}
}
/**
*
* @param {boolean} [vertical=true]
* @returns {FlexContainerComponent}
*/
setFlexDirection(vertical = true) {
return this.modifier(
new Modifier()
.setStyleRule(
"flex-direction",
(vertical ? "column" : "row")
)
)
}
/**
*
* @param {Component|Array<Component>} innerComponent
* @returns {FlexContainerComponent} this component object
*/
childContext(innerComponent) {
if (innerComponent instanceof Array) {
innerComponent
.map(cl => {
if (cl instanceof Component) {
return cl
} else {
return cl.ensureModifier().toComponent()
}
})
.forEach(icomp => {
icomp._modifier = new Modifier()
.setStyleRule("flex", "none")
.join(icomp._modifier)
})
}
return super.childContext(innerComponent);
}
/**
*
* @returns {FlexContainerComponent}
*/
distibuteSpacingEvenly() {
this._distributeEvenglyAfterGenerate = true;
return this;
}
/**
* @override
* @inheritdoc
* @extends Component.generate()
*/
generate(modifier = null, styleStore = null, functionStore = null) {
if (this._children && this._children.length > 0) {
if (this._distributeEvenglyAfterGenerate) {
let childDistributionFraction = Math.floor(
((100 - this._children.length) / this._children.length) * 100
) / 100;
let direction = (this._flexDirection === 'column' ? 'height' : "width");
for (const icomp of this._children) {
/* sets the width for all elements,
to avoid overlapping or line break because of lacking width,
a percent is subtracted for every child element */
/* To enable "override" a new Modifier is generated and joined
with the modifier of the component */
icomp._modifier._modifications[direction] = childDistributionFraction + "%";
icomp._modifier._modifications["max-"+direction] = childDistributionFraction + "%";
}
}
}
return super.generate(modifier, styleStore, functionStore);
}
}
/**
* A FlexContainerComponent, which organizes the children in a column like manner.
* @extends FlexContainerComponent
* @inheritdoc
*/
class Column extends FlexContainerComponent {
/**
*
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null) {
super(attr, modifier);
this.addStyleClass("column-component");
this._flexDirection = "column";
this.setFlexDirection();
}
}
/**
* A FlexContainerComponent, which organizes the children in a row like manner.
*
* @extends FlexContainerComponent
* @inheritdoc
*/
class Row extends FlexContainerComponent {
/**
*
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null) {
super(attr, modifier);
this.addStyleClass("row-component")
this._flexDirection = "row";
//this.modifier(new Modifier().fillMaxWidth());
this.setFlexDirection(false);
}
/**
*
* @param {Component|Array<Component>} innerComponent
* @returns {Row}
*/
childContext(innerComponent) {
function setFloat(comp, side = "right") {
comp._modifier = new Modifier()
.setStyleRule("float", side)
.join(comp._modifier);
}
super.childContext(innerComponent);
for (const child of this._children) {
onSingleOrArray(
child,
(e, i) => setFloat(e, (i === 0 ? "left" : "right"))
);
}
return this;
}
}

19
src/component/Column.js
View File

@ -0,0 +1,19 @@
/**
* A FlexContainerComponent, which organizes the children in a column like manner.
* @extends FlexContainerComponent
* @inheritdoc
*/
class Column extends FlexContainerComponent {
/**
*
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null) {
super(attr, modifier);
this.addStyleClass("column-component");
this._flexDirection = "column";
this.setFlexDirection();
}
}

110
src/component/FlexContainerComponent.js
View File

@ -0,0 +1,110 @@
/**
* Represents container Components.
* Some predefined modifications are applied on the child components.
* @extends Component
* @inheritdoc
*/
class FlexContainerComponent extends Component {
/**
* @type {boolean}
*/
_distributeEvenglyAfterGenerate;
/**
* @type {string}
*/
_flexDirection;
/**
*
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null, baseElement = "div") {
super(document.createElement(baseElement), attr);
this._flexDirection = "";
this._distributeEvenglyAfterGenerate = false;
this.addStyleClass("flex-container-component");
if (modifier) {
this.modifier(modifier);
}
}
/**
*
* @param {boolean} [vertical=true]
* @returns {FlexContainerComponent}
*/
setFlexDirection(vertical = true) {
return this.modifier(
new Modifier()
.setStyleRule(
"flex-direction",
(vertical ? "column" : "row")
)
);
}
/**
*
* @param {Component|Array<Component>} innerComponent
* @returns {FlexContainerComponent} this component object
*/
childContext(innerComponent) {
if (innerComponent instanceof Array) {
innerComponent
.map(cl => {
if (cl instanceof Component) {
return cl;
} else {
return cl.ensureModifier().toComponent();
}
})
.forEach(icomp => {
icomp._modifier = new Modifier()
.setStyleRule("flex", "none")
.join(icomp._modifier);
});
}
return super.childContext(innerComponent);
}
/**
*
* @returns {FlexContainerComponent}
*/
distibuteSpacingEvenly() {
this._distributeEvenglyAfterGenerate = true;
return this;
}
/**
* @override
* @inheritdoc
* @extends Component.generate()
*/
generate(modifier = null, styleStore = null, functionStore = null) {
if (this._children && this._children.length > 0) {
if (this._distributeEvenglyAfterGenerate) {
let childDistributionFraction = Math.floor(
((100 - this._children.length) / this._children.length) * 100
) / 100;
let direction = (this._flexDirection === 'column' ? 'height' : "width");
for (const icomp of this._children) {
/* sets the width for all elements,
to avoid overlapping or line break because of lacking width,
a percent is subtracted for every child element */
/* To enable "override" a new Modifier is generated and joined
with the modifier of the component */
icomp._modifier._modifications[direction] = childDistributionFraction + "%";
icomp._modifier._modifications["max-" + direction] = childDistributionFraction + "%";
}
}
}
return super.generate(modifier, styleStore, functionStore);
}
}

51
src/component/InputComponent.js
View File

@ -0,0 +1,51 @@
/**
* Represents a Component (of an HTMLElement) that is capable of receiving input.
* @extends Component
* @inheritdoc
*/
class InputComponent extends Component {
/**
*
* @param {string} element
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(element, attr = {}, modifier = null) {
super(element, attr);
this.addStyleClass("el-input-comp");
if (modifier) {
this.modifier(modifier);
}
}
/**
* The parameter makes it optional to trigger the state by a variable
* @param {boolean} readonly
* @returns {Component}
*/
readonly(readonly = true) {
if (readonly) {
this._element.setAttribute("readonly", readonly);
}
return this;
}
/**
* Sets the value of the InputComponent
* @param {string} Value
* @returns {InputComponent|Component}
*/
value(value) {
this._element.value = value;
return this;
}
/**
*
* @param {string} name
* @returns {InputComponent|Component}
*/
name(name) {
return this.setAttribute("name", name);
}
}

46
src/component/Row.js
View File

@ -0,0 +1,46 @@
/**
* A FlexContainerComponent, which organizes the children in a row like manner.
*
* @extends FlexContainerComponent
* @inheritdoc
*/
class Row extends FlexContainerComponent {
/**
*
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null) {
super(attr, modifier);
this.addStyleClass("row-component")
this._flexDirection = "row";
//this.modifier(new Modifier().fillMaxWidth());
this.setFlexDirection(false);
}
/**
*
* @param {Component|Array<Component>} innerComponent
* @returns {Row}
*/
childContext(innerComponent) {
function setFloat(comp, side = "right") {
comp._modifier = new Modifier()
.setStyleRule("float", side)
.join(comp._modifier);
}
super.childContext(innerComponent);
for (const child of this._children) {
onSingleOrArray(
child,
(e, i) => setFloat(e, (i === 0 ? "left" : "right"))
);
}
return this;
}
}
Write Preview
Loading…
Cancel
Save