From 5b74731cf111a6814e6014486cf2df89e0355302 Mon Sep 17 00:00:00 2001 From: chris Date: Tue, 18 Feb 2025 15:28:17 +0100 Subject: [PATCH] REFA,STEP,FEAT: added style remove functionallity and refactored inputTag-organisation in builder --- src/baseComponents.js | 35 +++++++++++- src/builder.js | 122 ++++++++++++++++++++++++++++++------------ src/modifier.js | 25 ++++++++- 3 files changed, 143 insertions(+), 39 deletions(-) diff --git a/src/baseComponents.js b/src/baseComponents.js index 6977c6f..6440022 100644 --- a/src/baseComponents.js +++ b/src/baseComponents.js @@ -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; } diff --git a/src/builder.js b/src/builder.js index 6b49f7c..c770920 100644 --- a/src/builder.js +++ b/src/builder.js @@ -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} 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} attr + * @returns {Function} + */ + 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} attr * @returns {Component} */ div: function (attr = {}) { return builder.genTag("div", attr); }, + /** * * @param {Map} attr * @returns {Component} */ span: function (attr = {}) { return builder.genTag("span", attr); }, + /** * * @param {Map} attr * @returns {Component} */ paragraph: function (attr = {}) { return builder.genTag("p", attr); }, + /** * * @param {Map} attr * @returns {Component} */ header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); }, + /** * * @param {Map} attr * @returns {Component} */ checkbox: function (attr = {}) { return builder.input({ "type": "checkbox" }) }, + /** * * @param {Map} attr * @returns {Component} */ select: function (attr = {}) { return builder.genTag("select", attr); }, + /** * * @param {Map} attr * @returns {Component} */ option: function (attr = {}) { return builder.genTag("option", attr); }, + /** * * @param {Map} attr * @returns {Component} */ radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); }, + /** * * @param {Map} attr @@ -141,62 +165,90 @@ const builder = { * @param {Map} 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} 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} attr * @returns {Component} */ - tableRow: function (attr = {}) { return builder.genTag("tr", attr) }, + tableRow: function (attr = {}) { return builder.genTag("tr", attr); }, /** * * @param {Map} attr * @returns {Component} */ - tableCell: function (attr = {}) { return builder.genTag("td", attr) }, + tableCell: function (attr = {}) { return builder.genTag("td", attr); }, /** * * @param {Map} attr * @returns {Component} */ - tableCaption: function (attr = {}) { return builder.genTag("caption", attr) }, + tableCaption: function (attr = {}) { return builder.genTag("caption", attr); }, /** * * @param {Map} attr * @returns {Component} */ - tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) }, + tableHeadCell: function (attr = {}) { return builder.genTag("th", attr); }, /** * * @param {Map} 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} 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} 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} attr diff --git a/src/modifier.js b/src/modifier.js index 612e584..9c2c4a0 100644 --- a/src/modifier.js +++ b/src/modifier.js @@ -14,6 +14,7 @@ class Modifier { * @property {Map} _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