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

MINOR,FEAT: Introduced default parameter "modifier"

master
chris 1 month ago
parent
9447216e53
commit
4b6f4006d9
2 changed files with 155 additions and 83 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. 79
      src/baseComponents.js
  2. 159
      src/builder.js

79
src/baseComponents.js
View File

@ -10,9 +10,18 @@
* @inheritdoc
*/
class InputComponent extends Component {
constructor(element, attr = {}) {
super(element, attr)
.addStyleClass("el-input-comp");
/**
*
* @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);
}
}
/**
@ -36,9 +45,17 @@ class InputComponent extends Component {
* @inheritdoc
*/
class FlexContainerComponent extends Component {
constructor(attr = {}) {
super(document.createElement("div"), attr)
.addStyleClass("flex-container-component")
/**
*
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null) {
super(document.createElement("div"), attr);
this.addStyleClass("flex-container-component");
if (modifier) {
this.modifier(modifier);
}
}
/**
@ -73,13 +90,18 @@ class FlexContainerComponent extends Component {
* @inheritdoc
*/
class Column extends FlexContainerComponent {
constructor(attr = {}) {
super(attr)
.addStyleClass("column-component")
.modifier(
new Modifier()
.setStyleRule("flex-direction", "column")
);
/**
*
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null) {
super(attr, modifier);
this.addStyleClass("column-component");
this.modifier(
new Modifier()
.setStyleRule("flex-direction", "column")
);
}
}
@ -89,19 +111,27 @@ class Column extends FlexContainerComponent {
* @inheritdoc
*/
class Row extends FlexContainerComponent {
constructor(attr = {}) {
super(attr)
.addStyleClass("row-component")
.modifier(
new Modifier()
.fillMaxWidth()
.setStyleRule("flex-direction", "row")
)
/**
*
* @param {Attr} attr
* @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null) {
super(attr);
this.addStyleClass("row-component")
if (modifier) {
this.modifier(modifier);
}
this.modifier(
new Modifier()
.fillMaxWidth()
.setStyleRule("flex-direction", "row")
)
}
/**
*
* @param {*} innerComponent
* @param {Component|Array<Component>} innerComponent
* @returns {Row}
*/
childContext(innerComponent) {
@ -123,12 +153,13 @@ class Row extends FlexContainerComponent {
}
/**
*
* @todo - adapt to extStore logic
* @override
* @returns {Row}
*/
distibuteSpacingEvenly() {
this._element.children.forEach(child => {
child.style["width"] = ((100-this._element.childElementCount) / innerComponent.length);
child.style["width"] = ((100 - this._element.childElementCount) / innerComponent.length);
})
return this;
}

159
src/builder.js
View File

@ -25,37 +25,50 @@ const builder = {
*
* @param {string} tag
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr).addStyleClass(`el-${tag}`); },
genTag: function (tag, attr = {}, modifier = null) {
let compel = new Component(document.createElement(tag), attr).addStyleClass(`el-${tag}`);
if (modifier) {
return compel.modifier(modifier);
}
return compel;
},
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
anchor: function (attr = {}) { return builder.genTag("a", attr); },
anchor: function (attr = {}, modifier = null) { return builder.genTag("a", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
label: function (attr = {}) { return builder.genTag("label", attr); },
label: function (attr = {}, modifier = null) { return builder.genTag("label", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
button: function (attr = {}) { return builder.genTag("button", attr); },
button: function (attr = {}, modifier = null) { return builder.genTag("button", attr, modifier); },
/**
*
* @param {InputTypes|string} type
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
input: function (type, attr = {}) {
input: function (type, attr = {}, modifier = null) {
return new InputComponent(
document.createElement("input"),
Object.assign({ "type": type }, attr)
Object.assign({ "type": type }, attr),
modifier
)
.addStyleClass(`el-input`);
},
@ -64,111 +77,125 @@ const builder = {
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Function<Component>}
*/
inputTags: Object.freeze({
button: function (attr = {}) { return builder.input("button", attr) },
checkbox: function (attr = {}) { return builder.input("checkbox", attr) },
color: function (attr = {}) { return builder.input("color", attr) },
date: function (attr = {}) { return builder.input("date", attr) },
datetime: function (attr = {}) { return builder.input("datetime", attr) },
datetime_local: function (attr = {}) { return builder.input("datetime-local", attr) },
email: function (attr = {}) { return builder.input("email", attr) },
file: function (attr = {}) { return builder.input("file", attr) },
image: function (attr = {}) { return builder.input("image", attr) },
month: function (attr = {}) { return builder.input("month", attr) },
number: function (attr = {}) { return builder.input("number", attr) },
password: function (attr = {}) { return builder.input("password", attr) },
radio: function (attr = {}) { return builder.input("radio", attr) },
range: function (attr = {}) { return builder.input("range", attr) },
reset: function (attr = {}) { return builder.input("reset", attr) },
search: function (attr = {}) { return builder.input("search", attr) },
submit: function (attr = {}) { return builder.input("submit", attr) },
tel: function (attr = {}) { return builder.input("tel", attr) },
text: function (attr = {}) { return builder.input("text", attr) },
time: function (attr = {}) { return builder.input("time", attr) },
url: function (attr = {}) { return builder.input("url", attr) },
week: function (attr = {}) { return builder.input("week", attr) }
button: function (attr = {}, modifier = null) { return builder.input("button", attr, modifier) },
checkbox: function (attr = {}, modifier = null) { return builder.input("checkbox", attr, modifier) },
color: function (attr = {}, modifier = null) { return builder.input("color", attr, modifier) },
date: function (attr = {}, modifier = null) { return builder.input("date", attr, modifier) },
datetime: function (attr = {}, modifier = null) { return builder.input("datetime", attr, modifier) },
datetime_local: function (attr = {}, modifier = null) { return builder.input("datetime-local", attr, modifier) },
email: function (attr = {}, modifier = null) { return builder.input("email", attr, modifier) },
file: function (attr = {}, modifier = null) { return builder.input("file", attr, modifier) },
image: function (attr = {}, modifier = null) { return builder.input("image", attr, modifier) },
month: function (attr = {}, modifier = null) { return builder.input("month", attr, modifier) },
number: function (attr = {}, modifier = null) { return builder.input("number", attr, modifier) },
password: function (attr = {}, modifier = null) { return builder.input("password", attr, modifier) },
radio: function (attr = {}, modifier = null) { return builder.input("radio", attr, modifier) },
range: function (attr = {}, modifier = null) { return builder.input("range", attr, modifier) },
reset: function (attr = {}, modifier = null) { return builder.input("reset", attr, modifier) },
search: function (attr = {}, modifier = null) { return builder.input("search", attr, modifier) },
submit: function (attr = {}, modifier = null) { return builder.input("submit", attr, modifier) },
tel: function (attr = {}, modifier = null) { return builder.input("tel", attr, modifier) },
text: function (attr = {}, modifier = null) { return builder.input("text", attr, modifier) },
time: function (attr = {}, modifier = null) { return builder.input("time", attr, modifier) },
url: function (attr = {}, modifier = null) { return builder.input("url", attr, modifier) },
week: function (attr = {}, modifier = null) { return builder.input("week", attr, modifier) }
}),
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
div: function (attr = {}) { return builder.genTag("div", attr); },
div: function (attr = {}, modifier = null) { return builder.genTag("div", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
span: function (attr = {}) { return builder.genTag("span", attr); },
span: function (attr = {}, modifier = null) { return builder.genTag("span", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
paragraph: function (attr = {}) { return builder.genTag("p", attr); },
paragraph: function (attr = {}, modifier = null) { return builder.genTag("p", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); },
header: function (sizeGroup, attr = {}, modifier = null) { return builder.genTag(`h${sizeGroup}`, attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
checkbox: function (attr = {}) { return builder.input({ "type": "checkbox" }) },
checkbox: function (attr = {}, modifier = null) { return builder.input({ "type": "checkbox" }, modifier) },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
select: function (attr = {}) { return builder.genTag("select", attr); },
select: function (attr = {}, modifier = null) { return builder.genTag("select", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
option: function (attr = {}) { return builder.genTag("option", attr); },
option: function (attr = {}, modifier = null) { return builder.genTag("option", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); },
radioBtn: function (attr = {}, modifier = null) { return builder.genTag("radioBtn", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
icon: function (attr = {}) { return builder.genTag("icon", attr); },
icon: function (attr = {}, modifier = null) { return builder.genTag("icon", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
img: function (attr = {}) { return builder.genTag("img", attr); },
img: function (attr = {}, modifier = null) { return builder.genTag("img", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
textarea: function (attr = {}) {
textarea: function (attr = {}, modifier = null) {
return new InputComponent(
document.createElement("textarea"),
attr
attr,
modifier
)
.addStyleClass(`el-textarea`);
},
@ -176,10 +203,11 @@ const builder = {
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
table: function (attr = {}) {
return builder.genTag("table", attr)
table: function (attr = {}, modifier = null) {
return builder.genTag("table", attr, modifier)
.chainModifier()
.removeStyleRule("display")
.toComponent();
@ -188,38 +216,43 @@ const builder = {
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
tableRow: function (attr = {}) { return builder.genTag("tr", attr); },
tableRow: function (attr = {}, modifier = null) { return builder.genTag("tr", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
tableCell: function (attr = {}) { return builder.genTag("td", attr); },
tableCell: function (attr = {}, modifier = null) { return builder.genTag("td", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
tableCaption: function (attr = {}) { return builder.genTag("caption", attr); },
tableCaption: function (attr = {}, modifier = null) { return builder.genTag("caption", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
tableHeadCell: function (attr = {}) { return builder.genTag("th", attr); },
tableHeadCell: function (attr = {}, modifier = null) { return builder.genTag("th", attr, modifier); },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
tableBody: function (attr = {}) {
return builder.genTag("tbody", attr)
tableBody: function (attr = {}, modifier = null) {
return builder.genTag("tbody", attr, modifier)
.chainModifier()
.removeStyleRule("display")
.toComponent();
@ -228,10 +261,11 @@ const builder = {
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
tableHead: function (attr = {}) {
return builder.genTag("thead", attr)
tableHead: function (attr = {}, modifier = null) {
return builder.genTag("thead", attr, modifier)
.chainModifier()
.removeStyleRule("display")
.toComponent();
@ -240,10 +274,11 @@ const builder = {
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
tableFooter: function (attr = {}) {
return builder.genTag("tfoot", attr)
tableFooter: function (attr = {}, modifier = null) {
return builder.genTag("tfoot", attr, modifier)
.chainModifier()
.removeStyleRule("display")
.toComponent();
@ -252,17 +287,19 @@ const builder = {
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
iframe: function (attr = {}) { return builder.genTag("iframe", attr) },
iframe: function (attr = {}, modifier = null) { return builder.genTag("iframe", attr, modifier) },
/**
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component}
*/
form: function (attr = {}) {
return builder.genTag("form", attr)
form: function (attr = {}, modifier = null) {
return builder.genTag("form", attr, modifier)
.addStyleClass("flex-container-component")
.chainModifier()
.setStyleRule("flex-direction", "column")
@ -272,17 +309,21 @@ const builder = {
/**
*
* @param {*} attr
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Row}
*/
row: function (attr = {}) { return new Row(attr) },
row: function (attr = {}, modifier = null) { return new Row(attr, modifier) },
/**
*
* @param {*} attr
*
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Column}
*/
column: function (attr = {}) { return new Column(attr) },
column: function (attr = {}, modifier = null) { return new Column(attr, modifier) },
/**
*

Write Preview
Loading…
Cancel
Save