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

REFA,STEP,FEAT: added style remove functionallity and refactored inputTag-organisation in builder

master
chris 2 months ago
parent
94ef6186cf
commit
5b74731cf1
3 changed files with 143 additions and 39 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. 35
      src/baseComponents.js
  2. 122
      src/builder.js
  3. 25
      src/modifier.js

35
src/baseComponents.js
View File

@ -4,9 +4,36 @@
* @copyright by its creator Christian Martin
*/
/**
* Represents a Component (of an HTMLElement) that is capable of receiving input.
*
* @inheritdoc
*/
class InputComponent extends Component {
constructor(element, attr = {}) {
super(element, attr)
.addStyleClass("el-input-comp");
}
/**
* 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;
}
}
/**
* Represents container Components.
* Some predefined modifications are applied on the child components.
*
* @inheritdoc
*/
class FlexContainerComponent extends Component {
constructor(attr = {}) {
@ -42,6 +69,8 @@ class FlexContainerComponent extends Component {
/**
* A FlexContainerComponent, which organizes the children in a column like manner.
*
* @inheritdoc
*/
class Column extends FlexContainerComponent {
constructor(attr = {}) {
@ -56,7 +85,9 @@ class Column extends FlexContainerComponent {
/**
* A FlexContainerComponent, which organizes the children in a row like manner.
*/
*
* @inheritdoc
*/
class Row extends FlexContainerComponent {
constructor(attr = {}) {
super(attr)
@ -97,7 +128,7 @@ class Row extends FlexContainerComponent {
*/
distibuteSpacingEvenly() {
this._element.children.forEach(child => {
child.style["width"] = (100 / innerComponent.length);
child.style["width"] = ((100-this._element.childElementCount) / innerComponent.length);
})
return this;
}

122
src/builder.js
View File

@ -16,6 +16,11 @@ const builder = {
openedChain: {}
},
componentFromHTML: function (htmlText) {
let compel = new Component(new DOMParser().parseFromString(htmlText, "text/html"));
return compel;
},
/**
*
* @param {string} tag
@ -47,82 +52,101 @@ const builder = {
* @param {Map<string,string>} attr
* @returns {Component}
*/
input: function (attr = {}) { return builder.genTag("input", attr); },
inputTags: function (attr = {}) {
return {
button() { return builder.genTag("input", Object.assign(attr, { "type": "button" })) },
checkbox() { return builder.genTag("input", Object.assign(attr, { "type": "checkbox" })) },
color() { return builder.genTag("input", Object.assign(attr, { "type": "color" })) },
date() { return builder.genTag("input", Object.assign(attr, { "type": "date" })) },
datetime() { return builder.genTag("input", Object.assign(attr, { "type": "datetime" })) },
datetime_local() { return builder.genTag("input", Object.assign(attr, { "type": "datetime-local" })) },
email() { return builder.genTag("input", Object.assign(attr, { "type": "email" })) },
file() { return builder.genTag("input", Object.assign(attr, { "type": "file" })) },
image() { return builder.genTag("input", Object.assign(attr, { "type": "image" })) },
month() { return builder.genTag("input", Object.assign(attr, { "type": "month" })) },
number() { return builder.genTag("input", Object.assign(attr, { "type": "number" })) },
password() { return builder.genTag("input", Object.assign(attr, { "type": "password" })) },
radio() { return builder.genTag("input", Object.assign(attr, { "type": "radio" })) },
range() { return builder.genTag("input", Object.assign(attr, { "type": "range" })) },
reset() { return builder.genTag("input", Object.assign(attr, { "type": "reset" })) },
search() { return builder.genTag("input", Object.assign(attr, { "type": "search" })) },
submit() { return builder.genTag("input", Object.assign(attr, { "type": "submit" })) },
tel() { return builder.genTag("input", Object.assign(attr, { "type": "tel" })) },
text() { return builder.genTag("input", Object.assign(attr, { "type": "text" })) },
time() { return builder.genTag("input", Object.assign(attr, { "type": "time" })) },
url() { return builder.genTag("input", Object.assign(attr, { "type": "url" })) },
week() { return builder.genTag("input", Object.assign(attr, { "type": "week" })) }
}
input: function (type, attr = {}) {
return new InputComponent(
document.createElement("input"),
Object.assign({ "type": type }, attr)
)
.addStyleClass(`el-input`);
},
/**
*
* @param {Map<string,string>} attr
* @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) }
}),
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
div: function (attr = {}) { return builder.genTag("div", attr); },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
span: function (attr = {}) { return builder.genTag("span", attr); },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
paragraph: function (attr = {}) { return builder.genTag("p", attr); },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
checkbox: function (attr = {}) { return builder.input({ "type": "checkbox" }) },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
select: function (attr = {}) { return builder.genTag("select", attr); },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
option: function (attr = {}) { return builder.genTag("option", attr); },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); },
/**
*
* @param {Map<string,string>} attr
@ -141,62 +165,90 @@ const builder = {
* @param {Map<string,string>} attr
* @returns {Component}
*/
textarea: function (attr = {}) { return builder.genTag("textarea", attr); },
textarea: function (attr = {}) {
return new InputComponentComponent(
document.createElement("textarea"),
attr
)
.addStyleClass(`el-textarea`);
},
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
table: function (attr = {}) { return builder.genTag("table", attr) },
table: function (attr = {}) {
return builder.genTag("table", attr)
.chainModifier()
.removeStyleRule("display")
.toComponent();
},
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
tableRow: function (attr = {}) { return builder.genTag("tr", attr) },
tableRow: function (attr = {}) { return builder.genTag("tr", attr); },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
tableCell: function (attr = {}) { return builder.genTag("td", attr) },
tableCell: function (attr = {}) { return builder.genTag("td", attr); },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
tableCaption: function (attr = {}) { return builder.genTag("caption", attr) },
tableCaption: function (attr = {}) { return builder.genTag("caption", attr); },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) },
tableHeadCell: function (attr = {}) { return builder.genTag("th", attr); },
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
tableBody: function (attr = {}) { return builder.genTag("tbody", attr) },
tableBody: function (attr = {}) {
return builder.genTag("tbody", attr)
.chainModifier()
.removeStyleRule("display")
.toComponent();
},
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
tableHead: function (attr = {}) { return builder.genTag("thead", attr) },
tableHead: function (attr = {}) {
return builder.genTag("thead", attr)
.chainModifier()
.removeStyleRule("display")
.toComponent();
},
/**
*
* @param {Map<string,string>} attr
* @returns {Component}
*/
tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) },
tableFooter: function (attr = {}) {
return builder.genTag("tfoot", attr)
.chainModifier()
.removeStyleRule("display")
.toComponent();
},
/**
*
* @param {Map<string,string>} attr

25
src/modifier.js
View File

@ -14,6 +14,7 @@ class Modifier {
* @property {Map<string,string>} _modifications
*/
_modifications;
_removeMods;
_shape;
/**
* @property {Sides} paddingValues
@ -22,6 +23,7 @@ class Modifier {
constructor() {
this._modifications = new Object();
this._removeMods = [];
}
/**
@ -130,7 +132,7 @@ class Modifier {
this._paddingValues = siding;
let keyToAdd = "";
if (siding instanceof PaddingChain) {
/* TODO what is this supposed to do */
} else if (siding instanceof Sides) {
keyToAdd = "padding-"
}
@ -196,6 +198,12 @@ class Modifier {
/* if (!this._modifications.hasOwnProperty(keys[i])) */
this._modifications[keys[i]] = modifier.ensureModifier()._modifications[keys[i]];
}
let removeMods = modifier.ensureModifier()._removeMods;
if (removeMods.length > 0) {
for (let i = 0; i < removeMods.length; i++) {
delete this._modifications[removeMods[i]];
}
}
return this;
}
@ -210,6 +218,19 @@ class Modifier {
return this;
}
/**
*
* @param {string} key
* @returns {Modifier} this modifier object
*/
removeStyleRule(key) {
this._removeMods.push(key);
if (Object.keys(this._modifications).includes(key)) {
delete this._modifications[key];
}
return this;
}
/**
* Sets a border line (with given linestyle) to all sides.
* If lineStyle is an array, the containing LineStyles,
@ -241,7 +262,7 @@ class Modifier {
this._modifications["border-radius"] = shape.getOrderedValues().join(' ');
return this;
}
/**
*
* @param {number} size of width and height in pixels

Write Preview
Loading…
Cancel
Save