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

MINOR,FEAT: Introduced default parameter "modifier"

master
chris 2 months 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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 65
      src/baseComponents.js
  2. 159
      src/builder.js

65
src/baseComponents.js
View File

@ -10,9 +10,18 @@
* @inheritdoc * @inheritdoc
*/ */
class InputComponent extends Component { 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 * @inheritdoc
*/ */
class FlexContainerComponent extends Component { 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,10 +90,15 @@ class FlexContainerComponent extends Component {
* @inheritdoc * @inheritdoc
*/ */
class Column extends FlexContainerComponent { class Column extends FlexContainerComponent {
constructor(attr = {}) { /**
super(attr) *
.addStyleClass("column-component") * @param {Attr} attr
.modifier( * @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null) {
super(attr, modifier);
this.addStyleClass("column-component");
this.modifier(
new Modifier() new Modifier()
.setStyleRule("flex-direction", "column") .setStyleRule("flex-direction", "column")
); );
@ -89,10 +111,18 @@ class Column extends FlexContainerComponent {
* @inheritdoc * @inheritdoc
*/ */
class Row extends FlexContainerComponent { class Row extends FlexContainerComponent {
constructor(attr = {}) { /**
super(attr) *
.addStyleClass("row-component") * @param {Attr} attr
.modifier( * @param {Modifier} modifier
*/
constructor(attr = {}, modifier = null) {
super(attr);
this.addStyleClass("row-component")
if (modifier) {
this.modifier(modifier);
}
this.modifier(
new Modifier() new Modifier()
.fillMaxWidth() .fillMaxWidth()
.setStyleRule("flex-direction", "row") .setStyleRule("flex-direction", "row")
@ -101,7 +131,7 @@ class Row extends FlexContainerComponent {
/** /**
* *
* @param {*} innerComponent * @param {Component|Array<Component>} innerComponent
* @returns {Row} * @returns {Row}
*/ */
childContext(innerComponent) { childContext(innerComponent) {
@ -123,12 +153,13 @@ class Row extends FlexContainerComponent {
} }
/** /**
* * @todo - adapt to extStore logic
* @override
* @returns {Row} * @returns {Row}
*/ */
distibuteSpacingEvenly() { distibuteSpacingEvenly() {
this._element.children.forEach(child => { 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; return this;
} }

159
src/builder.js
View File

@ -25,37 +25,50 @@ const builder = {
* *
* @param {string} tag * @param {string} tag
* @param {Map<string,string>} attr * @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @returns {Component}
*/ */
input: function (type, attr = {}) { input: function (type, attr = {}, modifier = null) {
return new InputComponent( return new InputComponent(
document.createElement("input"), document.createElement("input"),
Object.assign({ "type": type }, attr) Object.assign({ "type": type }, attr),
modifier
) )
.addStyleClass(`el-input`); .addStyleClass(`el-input`);
}, },
@ -64,111 +77,125 @@ const builder = {
/** /**
* *
* @param {Map<string,string>} attr * @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Function<Component>} * @returns {Function<Component>}
*/ */
inputTags: Object.freeze({ inputTags: Object.freeze({
button: function (attr = {}) { return builder.input("button", attr) }, button: function (attr = {}, modifier = null) { return builder.input("button", attr, modifier) },
checkbox: function (attr = {}) { return builder.input("checkbox", attr) }, checkbox: function (attr = {}, modifier = null) { return builder.input("checkbox", attr, modifier) },
color: function (attr = {}) { return builder.input("color", attr) }, color: function (attr = {}, modifier = null) { return builder.input("color", attr, modifier) },
date: function (attr = {}) { return builder.input("date", attr) }, date: function (attr = {}, modifier = null) { return builder.input("date", attr, modifier) },
datetime: function (attr = {}) { return builder.input("datetime", attr) }, datetime: function (attr = {}, modifier = null) { return builder.input("datetime", attr, modifier) },
datetime_local: function (attr = {}) { return builder.input("datetime-local", attr) }, datetime_local: function (attr = {}, modifier = null) { return builder.input("datetime-local", attr, modifier) },
email: function (attr = {}) { return builder.input("email", attr) }, email: function (attr = {}, modifier = null) { return builder.input("email", attr, modifier) },
file: function (attr = {}) { return builder.input("file", attr) }, file: function (attr = {}, modifier = null) { return builder.input("file", attr, modifier) },
image: function (attr = {}) { return builder.input("image", attr) }, image: function (attr = {}, modifier = null) { return builder.input("image", attr, modifier) },
month: function (attr = {}) { return builder.input("month", attr) }, month: function (attr = {}, modifier = null) { return builder.input("month", attr, modifier) },
number: function (attr = {}) { return builder.input("number", attr) }, number: function (attr = {}, modifier = null) { return builder.input("number", attr, modifier) },
password: function (attr = {}) { return builder.input("password", attr) }, password: function (attr = {}, modifier = null) { return builder.input("password", attr, modifier) },
radio: function (attr = {}) { return builder.input("radio", attr) }, radio: function (attr = {}, modifier = null) { return builder.input("radio", attr, modifier) },
range: function (attr = {}) { return builder.input("range", attr) }, range: function (attr = {}, modifier = null) { return builder.input("range", attr, modifier) },
reset: function (attr = {}) { return builder.input("reset", attr) }, reset: function (attr = {}, modifier = null) { return builder.input("reset", attr, modifier) },
search: function (attr = {}) { return builder.input("search", attr) }, search: function (attr = {}, modifier = null) { return builder.input("search", attr, modifier) },
submit: function (attr = {}) { return builder.input("submit", attr) }, submit: function (attr = {}, modifier = null) { return builder.input("submit", attr, modifier) },
tel: function (attr = {}) { return builder.input("tel", attr) }, tel: function (attr = {}, modifier = null) { return builder.input("tel", attr, modifier) },
text: function (attr = {}) { return builder.input("text", attr) }, text: function (attr = {}, modifier = null) { return builder.input("text", attr, modifier) },
time: function (attr = {}) { return builder.input("time", attr) }, time: function (attr = {}, modifier = null) { return builder.input("time", attr, modifier) },
url: function (attr = {}) { return builder.input("url", attr) }, url: function (attr = {}, modifier = null) { return builder.input("url", attr, modifier) },
week: function (attr = {}) { return builder.input("week", attr) } week: function (attr = {}, modifier = null) { return builder.input("week", attr, modifier) }
}), }),
/** /**
* *
* @param {Map<string,string>} attr * @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @returns {Component}
*/ */
textarea: function (attr = {}) { textarea: function (attr = {}, modifier = null) {
return new InputComponent( return new InputComponent(
document.createElement("textarea"), document.createElement("textarea"),
attr attr,
modifier
) )
.addStyleClass(`el-textarea`); .addStyleClass(`el-textarea`);
}, },
@ -176,10 +203,11 @@ const builder = {
/** /**
* *
* @param {Map<string,string>} attr * @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @returns {Component}
*/ */
table: function (attr = {}) { table: function (attr = {}, modifier = null) {
return builder.genTag("table", attr) return builder.genTag("table", attr, modifier)
.chainModifier() .chainModifier()
.removeStyleRule("display") .removeStyleRule("display")
.toComponent(); .toComponent();
@ -188,38 +216,43 @@ const builder = {
/** /**
* *
* @param {Map<string,string>} attr * @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @returns {Component}
*/ */
tableBody: function (attr = {}) { tableBody: function (attr = {}, modifier = null) {
return builder.genTag("tbody", attr) return builder.genTag("tbody", attr, modifier)
.chainModifier() .chainModifier()
.removeStyleRule("display") .removeStyleRule("display")
.toComponent(); .toComponent();
@ -228,10 +261,11 @@ const builder = {
/** /**
* *
* @param {Map<string,string>} attr * @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @returns {Component}
*/ */
tableHead: function (attr = {}) { tableHead: function (attr = {}, modifier = null) {
return builder.genTag("thead", attr) return builder.genTag("thead", attr, modifier)
.chainModifier() .chainModifier()
.removeStyleRule("display") .removeStyleRule("display")
.toComponent(); .toComponent();
@ -240,10 +274,11 @@ const builder = {
/** /**
* *
* @param {Map<string,string>} attr * @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @returns {Component}
*/ */
tableFooter: function (attr = {}) { tableFooter: function (attr = {}, modifier = null) {
return builder.genTag("tfoot", attr) return builder.genTag("tfoot", attr, modifier)
.chainModifier() .chainModifier()
.removeStyleRule("display") .removeStyleRule("display")
.toComponent(); .toComponent();
@ -252,17 +287,19 @@ const builder = {
/** /**
* *
* @param {Map<string,string>} attr * @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @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 {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Component} * @returns {Component}
*/ */
form: function (attr = {}) { form: function (attr = {}, modifier = null) {
return builder.genTag("form", attr) return builder.genTag("form", attr, modifier)
.addStyleClass("flex-container-component") .addStyleClass("flex-container-component")
.chainModifier() .chainModifier()
.setStyleRule("flex-direction", "column") .setStyleRule("flex-direction", "column")
@ -272,17 +309,21 @@ const builder = {
/** /**
* *
* @param {*} attr *
* @param {Map<string,string>} attr
* @param {Modifier} modifier
* @returns {Row} * @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} * @returns {Column}
*/ */
column: function (attr = {}) { return new Column(attr) }, column: function (attr = {}, modifier = null) { return new Column(attr, modifier) },
/** /**
* *

Write Preview
Loading…
Cancel
Save