diff --git a/README.md b/README.md index c2bc8c3..4608ac5 100644 --- a/README.md +++ b/README.md @@ -32,4 +32,3 @@ Javascript is by far not my strongest field, typescript even less. So it is recommended to not expect to much, you have been warned. - \ No newline at end of file diff --git a/join_js_files.sh b/join_js_files.sh index 239b971..90388b8 100644 --- a/join_js_files.sh +++ b/join_js_files.sh @@ -1,6 +1,6 @@ TARGET="jpc-like-websites.js" SRC="src/js" -ORDERED_LIST="context.js componentAttribute.js color.js modifier.js component.js baseComponents.js builder.js" +ORDERED_LIST="alignment.js arrangement.js color.js commonEvents.js componentAttribute.js sizeSideDependence.js modifier.js context.js component.js baseComponents.js builder.js" echo "" > $TARGET diff --git a/package-lock.json b/package-lock.json index 80ad93c..756ab42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,16 +5,17 @@ "requires": true, "packages": { "": { + "name": "websites-like-jpc", "version": "1.0.0", "license": "ISC", "devDependencies": { - "typescript": "^5.5.4" + "typescript": "^5.6.2" } }, "node_modules/typescript": { - "version": "5.5.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", - "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz", + "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -27,9 +28,9 @@ }, "dependencies": { "typescript": { - "version": "5.5.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", - "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz", + "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==", "dev": true } } diff --git a/package.json b/package.json index fa58ec5..5e46865 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,6 @@ "author": "", "license": "ISC", "devDependencies": { - "typescript": "^5.5.4" + "typescript": "^5.6.2" } } diff --git a/src/alignment.js b/src/alignment.js new file mode 100644 index 0000000..83d2276 --- /dev/null +++ b/src/alignment.js @@ -0,0 +1,37 @@ +/** + * Enum providing common alignment rules + */ +const Alignment = Object.freeze({ + /* Normal alignment */ + NORMAL: "normal", + + /* Basic positional alignment */ + /* align-content does not take left and right values */ + START: "start", + CENTER: "center", + END: "end", + FLEX_START: "flex-start", + FLEX_END: "flex-end", + + /* Baseline alignment */ + BASELINE: "baseline", + FIRST_BASELINE: "first baseline", + LAST_BASELINE: "last baseline", + + /* Distributed alignment */ + SPACE_BETWEEN: "space-between", + SPACE_AROUND: "space-around", + SPACE_EVENLY: "space-evenly", + STRETCH: "stretch", + + /* Overflow alignment */ + SAFE_CENTER: "safe center", + UNSAFE_CENTER: "unsafe center", + + /* Global values */ + INHERIT: "inherit", + INITIAL: "initial", + REVERT: "revert", + REVERT_LAYER: "revert-layer", + UNSET: "unset" +}) diff --git a/src/arrangement.js b/src/arrangement.js new file mode 100644 index 0000000..e57d96d --- /dev/null +++ b/src/arrangement.js @@ -0,0 +1,12 @@ +/** + * Enum providing common alignment rules + */ +const Arrangement = Object.freeze({ + START: "start", + END: "end", + CENTER: "center", + SPACE_BETWEEN: "space-between", + SPACE_EVENLY: "space-evenly", + SPACE_AROUND: "space-around", + +}) diff --git a/src/baseComponents.js b/src/baseComponents.js new file mode 100644 index 0000000..e79e45a --- /dev/null +++ b/src/baseComponents.js @@ -0,0 +1,100 @@ +/** + * Represents container Components. + * Some predefined modifications are applied on the child components. + */ +class FlexContainerComponent extends Component { + constructor(attr = {}) { + super(document.createElement("div"), attr) + .addStyleClass("flex-container-component") + } + + /** + * + * @param {Component|Array} innerComponent + * @returns {FlexContainerComponent} this component object + */ + componentChildren(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.componentChildren(innerComponent); + } +} + +/** + * A FlexContainerComponent, which organizes the children in a column like manner. + */ +class Column extends FlexContainerComponent { + constructor(attr = {}) { + super(document.createElement("div"), attr) + .addStyleClass("column-component") + .modifier( + new Modifier() + .fillMaxHeight() + .setStyleRule("flex-direction", "column") + ); + } +} + +/** + * A FlexContainerComponent, which organizes the children in a row like manner. +*/ +class Row extends FlexContainerComponent { + constructor(attr = {}) { + super(attr) + .addStyleClass("row-component") + .modifier( + new Modifier() + .fillMaxWidth() + .setStyleRule("flex-direction", "row") + ) + } + + /** + * + * @param {*} innerComponent + * @returns {Row} + */ + componentChildren(innerComponent) { + if (innerComponent instanceof Array) { + innerComponent + .map(cl => (cl instanceof Component ? cl : cl.ensureModifier().toComponent())) + .forEach((icomp, i) => { + /* 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 = new Modifier() + .setStyleRule("float", (i === 0 ? "left" : "right")) + .join(icomp._modifier) + }) + } + return super.componentChildren(innerComponent) + } + + /** + * + * @returns {Row} + */ + distibuteSpacingEvenly() { + this._element.children.forEach(child => { + child.style["width"] = (100 / innerComponent.length); + }) + return this; + } +} + diff --git a/src/builder.js b/src/builder.js new file mode 100644 index 0000000..714f785 --- /dev/null +++ b/src/builder.js @@ -0,0 +1,211 @@ +const builder = { + components: { + parent: {}, + current: {}, + previous: {}, + next: {}, + openedChain: {} + }, + + /** + * + * @param {string} tag + * @param {Map} attr + * @returns {Component} + */ + genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr); }, + + /** + * + * @param {Map} attr + * @returns {Component} + */ + anchor: function (attr = {}) { return builder.genTag("a", attr); }, + /** + * + * @param {Map} attr + * @returns {Component} + */ + label: function (attr = {}) { return builder.genTag("label", attr); }, + /** + * + * @param {Map} attr + * @returns {Component} + */ + button: function (attr = {}) { return builder.genTag("button", attr); }, + /** + * + * @param {Map} attr + * @returns {Component} + */ + input: function (attr = {}) { return builder.genTag("input", attr); }, + /** + * + * @param {Map} attr + * @returns {Component} + */ + div: function (attr = {}) { return builder.genTag("div", attr); }, + /** + * + * @param {Map} attr + * @returns {Component} + */ + paragraph: function (attr = {}) { return builder.genTag("paragraph", 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} + */ + select: function (attr = {}) { return builder.genTag("select", attr); }, + /** + * + * @param {Map} attr + * @returns {Component} + */ + radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); }, + /** + * + * @param {Map} attr + * @returns {Component} + */ + icon: function (attr = {}) { return builder.genTag("icon", attr); }, + /** + * + * @param {Map} attr + * @returns {Component} + */ + img: function (attr = {}) { return builder.genTag("img", attr); }, + + /** + * + * @param {Map} attr + * @returns {Component} + */ + textarea: function (attr = {}) { return builder.genTag("textarea", attr); }, + + /** + * + * @param {Map} attr + * @returns {Component} + */ + table: function (attr = {}) { return builder.genTag("table", attr) }, + + /** + * + * @param {Map} attr + * @returns {Component} + */ + tableRow: function (attr = {}) { return builder.genTag("tr", attr) }, + + /** + * + * @param {Map} attr + * @returns {Component} + */ + tableCell: function (attr = {}) { return builder.genTag("td", attr) }, + + /** + * + * @param {Map} attr + * @returns {Component} + */ + tableCaption: function (attr = {}) { return builder.genTag("caption", attr) }, + + /** + * + * @param {Map} attr + * @returns {Component} + */ + tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) }, + + /** + * + * @param {Map} attr + * @returns {Component} + */ + tableBody: function (attr = {}) { return builder.genTag("tbody", attr) }, + + /** + * + * @param {Map} attr + * @returns {Component} + */ + tableHead: function (attr = {}) { return builder.genTag("thead", attr) }, + /** + * + * @param {Map} attr + * @returns {Component} + */ + tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) }, + + /** + * + * @param {Map} attr + * @returns {Component} + */ + form: function (attr = {}) { + return builder.genTag("form", attr) + .addStyleClass("flex-container-component") + .chainModifier() + .setStyleRule("flex-direction", "column") + .ensureModifier() + .toComponent() + }, + + /** + * + * @param {*} attr + * @returns {Row} + */ + row: function (attr = {}) { return new Row(attr) }, + + /** + * + * @param {*} attr + * @returns {Column} + */ + column: function (attr = {}) { return new Column(attr) }, + + /** + * + * @param {*} innerComponents + */ + page: function (innerComponents) { + Page.generate(); + let main = document.querySelector('main') + + main.parentElement.insertAdjacentElement( + "afterbegin", + builder.genTag("main") + .alignment(Alignment.CENTER) + .arrangement(Arrangement.CENTER) + .componentChild(innerComponents) + .generate() + ) + main.remove(); + } +} diff --git a/src/js/color.js b/src/color.js similarity index 98% rename from src/js/color.js rename to src/color.js index 87a1921..3e0487d 100644 --- a/src/js/color.js +++ b/src/color.js @@ -583,3 +583,22 @@ const Colors = Object.freeze({ gray_2: new Color(5, 5, 5).hex('#050505'), gray_1: new Color(3, 3, 3).hex('#030303') }); + + +const MaterialFiveHundredlColors = Object.freeze({ + SOFT_ORANGE: new Color(244, 67, 54), + SOFT_RED: new Color(233, 30, 99), + MAGENTA: new Color(156, 39, 176), + VIOLET: new Color(103, 58, 183), + DARGK_BLUE: new Color(63, 81, 181), + BLUE: new Color(33, 150, 243), + LIGHT_BLUE: new Color(3, 169, 244), + BLUE_GREEN: new Color(0, 188, 212), + SEA_GREEN: new Color(0, 150, 136), + GREEN: new Color(76, 175, 80), + LIGHT_GREEN: new Color(139, 195, 74), + YELLOW: new Color(205, 220, 57), + GOLD: new Color(255, 235, 59), + YELLO_ORANGE: new Color(255, 152, 0), + ORANGE: new Color(255, 87, 34), +}) \ No newline at end of file diff --git a/src/commonEvents.js b/src/commonEvents.js new file mode 100644 index 0000000..8689475 --- /dev/null +++ b/src/commonEvents.js @@ -0,0 +1,7 @@ +/** + * Enum to access common events + */ +const CommonEvents = Object.freeze({ + ONCLICK: "onClick", +}) + diff --git a/src/js/component.js b/src/component.js similarity index 50% rename from src/js/component.js rename to src/component.js index dcf6c39..a1b515f 100644 --- a/src/js/component.js +++ b/src/component.js @@ -8,7 +8,7 @@ class Component { _arrangement; constructor(element, attr = {}) { - this._modifier = new Modifier().margin(new Siding().all(0)); + this._modifier = new Modifier().margin(new Sides().all(0)); var akeys = Object.keys(attr); for (let i = 0; i < akeys.length; i++) { element.setAttribute(akeys[i], attr[akeys[i]]); @@ -19,38 +19,45 @@ class Component { /** * Sets the alignment (modifications) for this element or more specific for its children. * @param {Alignment} alignment - * @returns this component object + * @returns {Component} this component object */ alignment(alignment) { this._alignment = alignment; + + this._modifier._modifications["display"] = "flex"; + this._modifier._modifications["align-content"] = alignment; + this._modifier._modifications["align-items"] = alignment; + this._modifier._modifications["text-align"] = alignment; + //this._modifier._modifications["justify-content"] = alignment; + return this; } /** * Sets the arrangement (modifications) for this element or more specific for its children. * @param {Arrangement} arrangement - * @returns this component object + * @returns {Component} this component object */ arrangement(arrangement) { this._arrangement = arrangement; switch (arrangement) { case Arrangement.START: - this._modifier.modifications["justify-content", "start"] + this._modifier._modifications["justify-content"] = "start"; break; case Arrangement.END: - this._modifier.modifications["justify-content", "end"] + this._modifier._modifications["justify-content"] = "end"; break; case Arrangement.CENTER: - this._modifier.modifications["justify-content", "center"] + this._modifier._modifications["justify-content"] = "center"; break; case Arrangement.SPACE_AROUND: - this._modifier.modifications["justify-content", "space-around"] + this._modifier._modifications["justify-content"] = "space-around"; break; case Arrangement.SPACE_BETWEEN: - this._modifier.modifications["justify-content", "space-between"] + this._modifier._modifications["justify-content"] = "space-between"; break; case Arrangement.SPACE_EVENLY: - this._modifier.modifications["justify-content", "space-evenly"] + this._modifier._modifications["justify-content"] = "space-evenly"; break; } return this; @@ -59,27 +66,31 @@ class Component { /** * * @param {Modifier} modifier - * @returns this component object + * @returns {Component} this component object */ modifier(modifier) { - this._modifier = this._modifier.join(modifier) + this._modifier = this._modifier.join(modifier.ensureModifier()) return this; } /** * Sets the innerText of the element * @param {string} text - * @returns this component object + * @returns {Component} this component object */ text(text) { this._element.innerText = text; return this; } + title(text) { + this._element.title = text; + return this; + } /** * * @param {string} styleClass - * @returns this component object + * @returns {Component} this component object */ addStyleClass(styleClass) { this._element.classList.add(styleClass); @@ -90,7 +101,7 @@ class Component { * * @param {string} key * @param {string} value - * @returns this component object + * @returns {Component} this component object */ setAttribute(key, value) { this._element.setAttribute(key, value); @@ -104,10 +115,11 @@ class Component { * @returns {HTMLElemment} the html element */ generate() { - var mkeys = Object.keys(this._modifier.modifications); + var mkeys = Object.keys(this._modifier._modifications); for (let i = 0; i < mkeys.length; i++) { - this._element.style[mkeys[i]] = this._modifier.modifications[mkeys[i]]; + this._element.style[mkeys[i]] = this._modifier._modifications[mkeys[i]]; } + return this._element; } @@ -115,15 +127,15 @@ class Component { /** * * @param {Component} component - * @returns this component object + * @returns {Component} this component object */ - child(component) { + componentChild(component) { this._element.append( (component instanceof Component - ?component - :component.backToComponent() + ? component + : component.toComponent() ) - .generate() + .generate() ); return this; } @@ -131,11 +143,11 @@ class Component { /** * * @param {Array} innerComponent - * @returns this component object + * @returns {Component} this component object */ - childComponents(innerComponent) { + componentChildren(innerComponent) { for (let i = 0; i < innerComponent.length; i++) { - this.child(innerComponent[i]); + this.componentChild(innerComponent[i]); } return this; } @@ -144,7 +156,7 @@ class Component { * * @param {CommonEvent} commonEvent * @param {string} functionName - * @returns this component object + * @returns {Component} this component object */ setEvent(commonEvent, functionName) { return this.setAttribute(commonEvent, `${functionName}(this)`); @@ -158,4 +170,31 @@ class Component { return new ChainableModifier(this); } + /* + clickable(eventName) { + let cssClass = "button-like" + this.addStyleClass(cssClass) + this._modifier._modifications["box-shadow"] = "4px 6px #999"; + + let bckk = "background-color"; + if (this._modifier._modifications.hasOwnProperty(bckk)) { + let bckc = this._modifier._modifications[bckk]; + delete this._modifier._modifications[bckk]; + Page.registerStyling(`.${cssClass}`, { + [bckk]: bckc + }) + } + + Page.registerStyling(`.${cssClass}:hover`, { + "background-color": Colors.greenyellow.cssRGBString(), + }) + Page.registerStyling(`.${cssClass}:active`, { + "background-color": Colors.greenyellow.cssRGBString(), + "box-shadow": "1px 2px #666", + "transform": "translateY(4px)" + }) + + return this.setEvent(CommonEvents.ONCLICK, eventName); + } + */ } diff --git a/src/componentAttribute.js b/src/componentAttribute.js new file mode 100644 index 0000000..e69de29 diff --git a/src/context.js b/src/context.js new file mode 100644 index 0000000..72b7826 --- /dev/null +++ b/src/context.js @@ -0,0 +1,69 @@ +/** + * The class provides overreaching options for building the website. + */ +class PageBuilder { + #cssClasses; + #functions; + #functionNames; + #cssElementIdentifiers; + + constructor() { + this.#cssClasses = document.createElement("style"); + this.#functions = document.createElement("script"); + this.#functionNames = []; + this.#cssElementIdentifiers = []; + } + + /** + * Registers a function to be added later in a script tag in the head of the document. + * @param {string} name + * @param {func} fun + */ + registerFunction(name, fun) { + if (!this.#functionNames.includes(name)) { + this.#functions.innerText += `const ${name} = ${fun}`; + this.#functionNames.push(name); + } + } + + /** + * Adds the styling rules to the element identifiers into the style tag. + * An elementDefinition can only be used once, repeated use will be ignored. + * @param {string} elementDefinition The element identifier + * @param {Map} styleRuleMap The Styling rules/values + */ + registerStyling(elementDefinition, styleRuleMap) { + if (!this.#cssElementIdentifiers.includes(elementDefinition)) { + this.#cssClasses.innerText += `${elementDefinition + } {${Object.keys(styleRuleMap) + .map(e => e + ": " + styleRuleMap[e] + "; ") + .join(" ") + }} ` + this.#cssElementIdentifiers.push(elementDefinition) + } + } + + /** + * Adds a script tag into the head of the document. + */ + generate() { + let head = document.querySelector("head"); + head.appendChild(this.#functions) + head.appendChild(this.#cssClasses) + } + + inDev() { + let head = document.querySelector("head"); + let meta = document.createElement("meta"); + meta.setAttribute("http-equiv", "refresh"); + meta.setAttribute("content", "20"); + + head.insertAdjacentElement("beforeend", meta); + this.#functions.innerText = ` + let ts = new Date(); + console.log("Refreshed at: ", ts.getHours()+':'+ts.getMinutes()+':'+ts.getSeconds()); + `; + } +} + +const Page = new PageBuilder(); diff --git a/src/js/baseComponents.js b/src/js/baseComponents.js deleted file mode 100644 index 6214e7e..0000000 --- a/src/js/baseComponents.js +++ /dev/null @@ -1,89 +0,0 @@ -/** - * Represents container Components. - * Some predefined modifications are applied on the child components. - */ -class FlexContainerComponent extends Component { - constructor(attr = {}) { - super(document.createElement("div"), attr) - .addStyleClass("flex-container-component") - } - - /** - * - * @param {Component|Array} innerComponent - * @returns this component object - */ - childComponents(innerComponent) { - if (innerComponent instanceof Array) { - innerComponent.forEach(icomp => { - (icomp instanceof Component - ? icomp - : icomp.backToComponent() - ) - .chainModifier() - .setStyleRule("flex", "none") - - }) - } else if (!innerComponent instanceof Component) { - innerComponent - .backToComponent() - .chainModifier() - .setStyleRule("flex", "none") - } - return super.childComponents(innerComponent); - } -} - -/** - * A FlexContainerComponent, which organizes the children in a column like manner. - */ -class Column extends FlexContainerComponent { - constructor(attr = {}) { - super(document.createElement("div"), attr) - .addStyleClass("column-component") - .modifier( - new Modifier() - .fillMaxHeight() - .setStyleRule("flex-direction", "column") - ); - } -} - -/** - * A FlexContainerComponent, which organizes the children in a row like manner. -*/ -class Row extends FlexContainerComponent { - constructor(attr = {}) { - super(attr) - .addStyleClass("row-component") - .modifier( - new Modifier() - .fillMaxWidth() - .setStyleRule("flex-direction", "row") - ) - } - - childComponents(innerComponent) { - if (innerComponent instanceof Array) { - innerComponent.forEach((icomp, i) => { - (icomp instanceof Component - ? icomp - : icomp.backToComponent() - ).modifier( - /* sets the width for all elements, - to avoid overlapping or line break because of lacking width, - a percent is subtracted for every child element */ - new Modifier() - .setStyleRule("float", (i === 0 ? "left" : "right")) - .fillMaxWidth((Math.floor((10000 - 100 * innerComponent.length) / innerComponent.length) / 10000)) - ) - }) - } else { - innerComponent.modifier( - new Modifier() - .setStyleRule("flex", "none") - ) - } - return super.childComponents(innerComponent) - } -} diff --git a/src/js/builder.js b/src/js/builder.js deleted file mode 100644 index 7df34df..0000000 --- a/src/js/builder.js +++ /dev/null @@ -1,44 +0,0 @@ -const builder = { - components: { - parent: {}, - current: {}, - previous: {}, - next: {}, - openedChain: {} - }, - - genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr); }, - - anchor: function (attr = {}) { return builder.genTag("a", attr); }, - label: function (attr = {}) { return builder.genTag("label", attr); }, - button: function (attr = {}) { return builder.genTag("button", attr); }, - input: function (attr = {}) { return builder.genTag("input", attr); }, - div: function (attr = {}) { return builder.genTag("div", attr); }, - paragraph: function (attr = {}) { return builder.genTag("paragraph", attr); }, - header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); }, - checkbox: function (attr = {}) { return builder.genTag("checkbox", attr); }, - selection: function (attr = {}) { return builder.genTag("selection", attr); }, - option: function (attr = {}) { return builder.genTag("option", attr); }, - section: function (attr = {}) { return builder.genTag("section", attr); }, - radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); }, - icon: function (attr = {}) { return builder.genTag("icon", attr); }, - img: function (attr = {}) { return builder.genTag("img", attr); }, - textarea: function (attr = {}) { return builder.genTag("textarea", attr); }, - - table: function (attr = {}) { return builder.genTag("table", attr) }, - tableRow: function (attr = {}) { return builder.genTag("tr", attr) }, - tableCell: function (attr = {}) { return builder.genTag("td", attr) }, - tableCaption: function (attr = {}) { return builder.genTag("caption", attr) }, - tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) }, - tableBody: function (attr = {}) { return builder.genTag("tbody", attr) }, - tableHead: function (attr = {}) { return builder.genTag("thead", attr) }, - tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) }, - - - row: function (attr = {}) { return new Row(attr) }, - column: function (attr = {}) { return new Column(attr) }, - page: function (innerComponents) { - Page.generate(); - document.querySelector('main').appendChild(innerComponents.generate()) - } -} diff --git a/src/js/componentAttribute.js b/src/js/componentAttribute.js deleted file mode 100644 index 16847cb..0000000 --- a/src/js/componentAttribute.js +++ /dev/null @@ -1,212 +0,0 @@ -/** - * Enum to access common events - */ -const CommonEvents = Object.freeze({ - ONCLICK: "onClick", -}) - - -/** - * Simple Dimensions container for the height and width in pixels. - */ -class Dimensions { - #x; - #y; - - /** - * Sets width (x) value of pixels - * @param {number} pixels - * @returns this Dimensions Modifier - */ - width(pixels) { - this.#x = pixels; - return this; - } - - /** - * Sets height (y) value of pixels - * @param {number} pixels - * @returns this Dimensions Modifier - */ - height(pixels) { - this.#y = pixels; - return this; - } -} - -/** - * The Class holds values from each side/direction of an element. - * Used for margin/padding. - */ -class Siding { - pxLeft = 0; - pxRight = 0; - pxTop = 0; - pxBottom = 0; - - /** - * sets the pixels-value for all sides. - * @param {number} pixels siding from all sides - * @returns this Siding Object - */ - all(pixels) { - this.pxLeft = pixels; - this.pxRight = pixels; - this.pxTop = pixels; - this.pxBottom = pixels; - return this; - } - - /** - * sets the pixels-value for the horizontal sides (left and right). - * @param {number} pixels siding for left and right. - * @returns this Siding Object - */ - horizontal(pixels) { - this.pxLeft = pixels; - this.pxRight = pixels; - return this; - } - - /** - * sets the pixels-value for the vertical sides (left and right). - * @param {number} pixels siding for top and bottom. - * @returns this Siding Object - */ - vertical(pixels) { - this.pxTop = pixels; - this.pxBottom = pixels; - return this; - } - - /** - * sets the pixels-value for the left side. - * @param {number} pixels siding for left - * @returns this Siding Object - */ - left(pixels) { - this.pxLeft = pixels; - return this; - } - - /** - * sets the pixels-value for the right side. - * @param {number} pixels siding for right - * @returns this Siding Object - */ - right(pixels) { - this.pxRight = pixels; - return this; - } - - /** - * sets the pixels-value for the top side. - * @param {number} pixels siding for top - * @returns this Siding Object - */ - top(pixels) { - this.pxTop = pixels; - return this; - } - - /** - * sets the pixels-value for the bottom side. - * @param {number} pixels siding for bottom - * @returns this Siding Object - */ - bottom(pixels) { - this.pxBottom = pixels; - return this; - } -} - -/** - * Enum providing common alignment rules - */ -const Alignment = Object.freeze({ - BEGIN_BORDER: 0, - CENTER: 1, - END_BORDER: 2, -}) - -/** - * Enum providing common alignment rules - */ -const Arrangement = Object.freeze({ - START: 0, - END: 1, - CENTER: 2, - SPACE_BETWEEN: 3, - SPACE_EVENLY: 4, - SPACE_AROUND: 5, -}) - - -class ChainableDimensions extends Dimensions { - #modifier; - constructor(modifier) { - super(); - this.#modifier = modifier; - } - - backToModifier() { - return this.#modifier; - } - - backToComponent() { - return this.#modifier.backToComponent(); - } - - componentChild(innerComponent) { - return this.#modifier.backToComponent() - .child(innerComponent); - } - - componentChildComponents(innerComponent) { - return this.#modifier.backToComponent() - .childComponents(innerComponent); - } -} - -class ChainableSiding extends Siding { - #modifier; - constructor(modifier) { - super(); - this.#modifier = modifier; - } - - backToModifier() { - return this.#modifier; - } - - backToComponent() { - return this.#modifier.backToComponent(); - } - - - - componentChild(innerComponent) { - return this.#modifier - .backToComponent() - .child(innerComponent); - } - - componentChildComponents(innerComponent) { - return this.#modifier - .backToComponent() - .childComponents(innerComponent); - } -} - -const LineStyles = Object.freeze({ - dotted: 0, - dashed: 1, - solid: 2, - double: 3, - groove: 4, - ridge: 5, - inset: 6, - outset: 7, - none: 8, - hidden: 9 -}) diff --git a/src/js/context.js b/src/js/context.js deleted file mode 100644 index c30bc6f..0000000 --- a/src/js/context.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * The class provides overreaching options for building the website. - */ -class PageBuilder { - #cssClasses; - #functions; - - constructor() { - this.#cssClasses = document.createElement("style"); - this.#functions = document.createElement("script"); - } - - /** - * Registers a function to be added later in a script tag in the head of the document. - * @param {string} name - * @param {func} fun - */ - registerFunction(name, fun) { - this.#functions.innerText += `const ${name} = ${fun}`; - } - - /** - * Adds a script tag into the head of the document. - */ - generate() { - document.querySelector("head") - .appendChild(this.#functions) - } - -} - -const Page = new PageBuilder(); diff --git a/src/js/modifier.js b/src/js/modifier.js deleted file mode 100644 index cb2879d..0000000 --- a/src/js/modifier.js +++ /dev/null @@ -1,179 +0,0 @@ -/** - * A chained class that sets most of the stylings of an element. - */ -class Modifier { - modifications = {}; - - constructor() { - this.modifications = new Object(); - } - - /** - * Sets the modifications for widht and height to 100%. - * @returns this modifier object - */ - fillMaxSize() { - this.modifications["width"] = "100%"; - this.modifications["height"] = "100%"; - return this; - } - - /** - * Sets the modification for width to 100%. - * @param {number} fraction - * @returns this modifier object - */ - fillMaxWidth(fraction) { - this.modifications["width"] = (100 * fraction) + "%"; - return this; - } - - /** - * Sets the modification for height to 100%. - * @param {number} fraction - * @returns this modifier object - */ - fillMaxHeight(fraction) { - this.modifications["height"] = (100 * fraction) + "%"; - return this; - } - - /** - * Sets modifications according to the dimensions object. - * @param {Dimensions} dimensions - * @returns this modifier object - */ - size(dimensions) { - this.modifications["height"] = dimensions.height + "px"; - this.modifications["width"] = dimensions.width + "px"; - return this; - } - - /** - * Sets the padding on all sides according to the given siding object. - * Currently the padding will always be set - * to the most recent padding/siding. - * @param {Siding} siding - * @returns this modifier object - */ - padding(siding) { - this.modifications["padding-right"] = siding.pxRight + "px"; - this.modifications["padding-left"] = siding.pxLeft + "px"; - this.modifications["padding-top"] = siding.pxTop + "px"; - this.modifications["padding-bottom"] = siding.pxBottom + "px"; - return this; - } - - /** - * Sets the margin on all sides according to the given siding object. - * Currently the margin will always be set - * to the most recent margin/siding. - * @param {Siding} siding - * @returns this modifier object - */ - margin(siding) { - this.modifications["margin-right"] = siding.pxRight + "px"; - this.modifications["margin-left"] = siding.pxLeft + "px"; - this.modifications["margin-top"] = siding.pxTop + "px"; - this.modifications["margin-bottom"] = siding.pxBottom + "px"; - return this; - } - - /** - * Sets the background-color as a rgb color. - * @param {Color} color - * @returns this modifier object - */ - background(color) { - this.modifications["background-color"] = color.cssRGBString(); - return this; - } - - /** - * Sets the color as a rgb color. - * @param {Color} color - * @returns this modifier object - */ - color(color) { - this.modifications["color"] = color.cssRGBString(); - return this; - } - - /** - * Adds the modifications of the given Modifier to current Modifier. - * This is especailly used in the cases of extending existing/pre defined - * Components. - * CAUTION matching existing modifications will be ignored. - * @param modifier The "new" Modifier - * @returns The "old/current" Modifier, - * extended with the modifications of the given Modifier. - */ - join(modifier, modifications = {}) { - var keys = Object.keys(modifier.modifications); - for (let i = 0; i < keys.length; i++) { - if (!this.modifications.hasOwnProperty(keys[i])) - this.modifications[keys[i]] = modifier.modifications[keys[i]]; - } - return this; - } - - /** - * - * @param {string} key a css style rule - * @param {string} value the corresponding value to the css style rule - * @returns this modifier object - */ - setStyleRule(key, value) { - this.modifications[key] = value; - return this; - } - - /** - * Sets a border line (with given linestyle) to all sides. - * If lineStyle is an array, the containing LineStyles, - * are applied in the order: [top, right, bottom, left]. - * @param {LineStyles|Array} lineStyle the style of the border line - * @returns this modifier object - */ - border(lineStyle, width = 1, color = Colors.black) { - var lstyle = (lineStyle instanceof Array - ? lineStyle.join(" ") - : lineStyle); - this.modifications["border"] = `${width}px ${lstyle} ${color.cssRGBString}`; - return this; - } - -} - -class ChainableModifier extends Modifier { - _component; - - constructor(component) { - super(); - this._component = component; - } - - backToComponent() { - return this._component.modifier(this); - } - - chainSize() { - return new ChainableDimensions(this); - } - - chainPaddingSiding() { - return new ChainableSiding(this); - } - - componentChild(innerComponent) { - return this._component - .modifier(this) - .child(innerComponent); - } - - componentChildComponents(innerComponent) { - return this._component - .modifier(this) - .childComponents(innerComponent); - } -} \ No newline at end of file diff --git a/src/modifier.js b/src/modifier.js new file mode 100644 index 0000000..227bb32 --- /dev/null +++ b/src/modifier.js @@ -0,0 +1,255 @@ +/** + * A chained class that sets most of the stylings of an element. + */ +class Modifier { + _modifications; + + constructor() { + this._modifications = new Object(); + } + + /** + * Sets the modifications for widht and height to 100%. + * @returns {Modifier} this modifier object + */ + fillMaxSize(widthFraction = 1, heightFraction = 1) { + this.fillMaxWidth(widthFraction); + return this.fillMaxHeight(heightFraction); + } + + /** + * Sets the modification for width to 100%. + * @param {number} fraction + * @returns {Modifier} this modifier object + */ + fillMaxWidth(fraction = 1) { + this._modifications["width"] = (100 * fraction) + "%"; + return this; + } + + /** + * Sets the modification for height to 100%. + * @param {number} fraction + * @returns {Modifier} this modifier object + */ + fillMaxHeight(fraction = 1) { + this._modifications["height"] = (100 * fraction) + "%"; + return this; + } + + /** + * Sets modifications according to the dimensions object. + * @param {Dimensions} dimensions + * @returns {Modifier} this modifier object + */ + dimensions(dimensions) { + if (dimensions._fFirst > 0) { + this._modifications["width"] = dimensions.getBySidingRef(SidingRefDimensions.WIDTH) + dimensions._unit; + } + if (dimensions._fSecond > 0) { + this._modifications["height"] = dimensions.getBySidingRef(SidingRefDimensions.HEIGHT) + dimensions._unit; + } + return this; + } + + /** + * Sets the padding on all sides according to the given padding object. + * Currently the padding will always be set + * to the most recent padding/padding. + * @param {Sides} siding + * @returns {Modifier} this modifier object + */ + padding(siding) { + this._modifications["padding-right"] = siding.getSidingRefValueMap()[SidingRefSides.RIGHT] + siding._unit; + this._modifications["padding-left"] = siding.getSidingRefValueMap()[SidingRefSides.LEFT] + siding._unit; + this._modifications["padding-top"] = siding.getSidingRefValueMap()[SidingRefSides.TOP] + siding._unit; + this._modifications["padding-bottom"] = siding.getSidingRefValueMap()[SidingRefSides.BOTTOM] + siding._unit; + return this; + } + + /** + * Sets the margin on all sides according to the given siding object. + * Currently the margin will always be set + * to the most recent margin/siding. + * @param {Sides} siding + * @returns {Modifier} this modifier object + */ + margin(siding) { + this._modifications["margin-right"] = siding.getSidingRefValueMap()[SidingRefSides.RIGHT] + siding._unit; + this._modifications["margin-left"] = siding.getSidingRefValueMap()[SidingRefSides.LEFT] + siding._unit; + this._modifications["margin-top"] = siding.getSidingRefValueMap()[SidingRefSides.TOP] + siding._unit; + this._modifications["margin-bottom"] = siding.getSidingRefValueMap()[SidingRefSides.BOTTOM] + siding._unit; + return this; + } + + /** + * Sets the background-color as a rgb color. + * @param {Color} color + * @returns {Modifier} this modifier object + */ + background(color) { + this._modifications["background-color"] = color.cssRGBString(); + return this; + } + + /** + * Sets the color as a rgb color. + * @param {Color} color + * @returns {Modifier} this modifier object + */ + color(color) { + this._modifications["color"] = color.cssRGBString(); + return this; + } + + /** + * Adds the modifications of the given Modifier to current Modifier. + * This is especailly used in the cases of extending existing/pre defined + * Components. + * CAUTION matching existing modifications will be overwritten. + * @param modifier The "new" Modifier + * @returns {Modifier} The "old/current" Modifier, + * extended with the modifications of the given Modifier. + */ + join(modifier, modifications = {}) { + var keys = Object.keys(modifier.ensureModifier()._modifications); + for (let i = 0; i < keys.length; i++) { + /* if (!this._modifications.hasOwnProperty(keys[i])) */ + this._modifications[keys[i]] = modifier.ensureModifier()._modifications[keys[i]]; + } + return this; + } + + /** + * + * @param {string} key a css style rule + * @param {string} value the corresponding value to the css style rule + * @returns {Modifier} this modifier object + */ + setStyleRule(key, value) { + this._modifications[key] = value; + return this; + } + + /** + * Sets a border line (with given linestyle) to all sides. + * If lineStyle is an array, the containing LineStyles, + * are applied in the order: [top, right, bottom, left]. + * @param {Border} border the style of the border line + * @returns {Modifier} this modifier object + */ + border(border) { + console.log(border); + this._modifications["border"] = border._width + border._unit; + this._modifications["border-style"] = border._sidingStyles.getOrderedValues().join(' '); + this._modifications["border-color"] = border._color.cssRGBString(); + this.clip(border) + return this; + } + + /** + * + * @param {Shape} shape + * @returns {Modifier} + */ + clip(shape) { + this._modifications["border-radius"] = shape.getOrderedValues().join(' '); + return this; + } + + /** + * + * @returns {DimensionsChain} + */ + linkDimensions() { + return new DimensionsChain(this); + } + + /** + * + * @returns {PaddingChain} + */ + linkPadding() { + return new PaddingChain(this); + } + + /** + * + * @returns {ShapeChain} + */ + linkClip() { + return new ShapeChain(this); + } + + /** + * + * @returns {Modifier} + */ + ensureModifier() { + return this; + } + +} + +class ChainableModifier extends Modifier { + _component; + + constructor(component) { + super(); + this._component = component; + } + + /** + * + * @returns {ChainableDimensions} + */ + linkDimensions() { + return new ChainableDimensions(this); + } + + /** + * + * @returns {ChainablePadding} + */ + linkPadding() { + return new ChainablePadding(this); + } + + /** + * + * @returns {ChainableShape} + */ + linkClip() { + return new ChainableShape(this); + } + + /** + * + * @returns {Component} + */ + toComponent() { + return this._component.modifier(this); + } + + /** + * + * @param {Component} innerComponent + * @returns {Component} the parent Component + */ + componentChild(innerComponent) { + return this._component + .modifier(this) + .componentChild(innerComponent); + } + + /** + * + * @param {Array} innerComponent + * @returns {Component} the parent Component + */ + componentChildren(innerComponent) { + return this._component + .modifier(this) + .componentChildren(innerComponent); + } +} diff --git a/src/sizeSide/dimensions.js b/src/sizeSide/dimensions.js new file mode 100644 index 0000000..ac657cc --- /dev/null +++ b/src/sizeSide/dimensions.js @@ -0,0 +1,98 @@ + +const SidingRefDimensions = Object.freeze({ + WIDTH: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fFirst, + HEIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fSecond +}) + +/** + * Simple Dimensions container for the height and width in pixels. + */ +class Dimensions extends SideUnitDependentAttribute { + constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { + super(); + this._unit = defaultUnit; + this._fFirst = defaultValue; + this._fSecond = defaultValue; + } + + /** + * Sets width (x) value of amount + * @param {number} amount + * @returns {Dimensions} this Dimensions Modifier + */ + width(amount) { + this._fFirst = amount; + return this; + } + + /** + * Sets height (y) value of amount + * @param {number} amount + * @returns {Dimensions} this Dimensions Modifier + */ + height(amount) { + this._fSecond = amount; + return this; + } + + + getOrderedValues() { + return this.getOrderedValues().slice(2) + } + + getSidingRefValueMap() { + return { + [SidingRefDimensions.WIDTH]: this.getBySidingRef(SidingRefDimensions.WIDTH), + [SidingRefDimensions.HEIGHT]: this.getBySidingRef(SidingRefDimensions.HEIGHT) + } + } +} + + +class DimensionsChain extends Dimensions { + _modifier; + constructor(modifier) { + super(); + this._modifier = modifier; + } + + /** + * + * @returns {Modifier|ChainableModifier} + */ + toModifier() { + return this._modifier + .dimensions(this); + } + + /** + * + * @returns {Modifier|ChainableModifier} + */ + ensureModifier() { + return this.toModifier() + } +} + +class ChainableDimensions extends DimensionsChain { + toComponent() { + return this._modifier + .dimensions(this) + .toComponent(); + } + + componentChild(innerComponent) { + return this._modifier + .dimensions(this) + .toComponent() + .componentChild(innerComponent); + } + + componentChildren(innerComponent) { + return this._modifier + .dimensions(this) + .toComponent() + .componentChildren(innerComponent); + } +} + diff --git a/src/sizeSide/shapes.js b/src/sizeSide/shapes.js new file mode 100644 index 0000000..5e8f4a7 --- /dev/null +++ b/src/sizeSide/shapes.js @@ -0,0 +1,224 @@ +const SidingRefCorners = Object.freeze({ + TOPLEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fFirst, + TOPRIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fSecond, + BOTTOMLEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fThird, + BOTTOMRIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fForth +}) + +class Shape extends Siding { + constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { + super(defaultValue, defaultUnit); + } + /** + * + * @param {*} amount + * @returns {Shape} + */ + topLeft(amount) { + this._fFirst = amount; + return this; + } + /** + * + * @param {*} amount + * @returns {Shape} + */ + topRight(amount) { + this._fSecond = amount; + return this; + } + /** + * + * @param {*} amount + * @returns {Shape} + */ + bottomLeft(amount) { + this._fThird = amount; + return this; + } + /** + * + * @param {*} amount + * @returns {Shape} + */ + bottomRight(amount) { + this._fForth = amount; + return this; + } + /** + * + * @param {*} amount + * @returns {Shape} + */ + diagonalPositive(amount) { + this._fThird = amount; + this._fSecond = amount; + return this; + } + /** + * + * @param {*} amount + * @returns {Shape} + */ + diagonalNegative(amount) { + this._fFirst = amount; + this._fForth = amount; + return this; + } + + left(amount) { + this._fFirst = amount; + this._fSecond = 0; + this._fThird = 0; + this._fForth = amount; + return this + } + + right(amount) { + this._fFirst = 0; + this._fSecond = amount; + this._fThird = amount; + this._fForth = 0; + return this; + } + + /** + * + * @param {*} amount + */ + getSidingRefValueMap() { + return { + [SidingRefCorners.TOPLEFT]: this.getBySidingRef(SidingRefCorners.TOPLEFT), + [SidingRefCorners.TOPRIGHT]: this.getBySidingRef(SidingRefCorners.TOPRIGHT), + [SidingRefCorners.BOTTOMLEFT]: this.getBySidingRef(SidingRefCorners.BOTTOMLEFT), + [SidingRefCorners.BOTTOMRIGHT]: this.getBySidingRef(SidingRefCorners.BOTTOMRIGHT), + } + } +} + +class ShapeChain extends Shape { + _modifier; + constructor(modifier) { + super(); + this._modifier = modifier; + } + + toModifier() { + return this._modifier + .clip(this); + } + + ensureModifier() { + return this.toModifier() + } + +} + +class ChainableShape extends ShapeChain { + toComponent() { + return this._modifier + .clip(this) + .toComponent(); + } + + componentChild(innerComponent) { + return this._modifier + .clip(this) + .toComponent() + .componentChild(innerComponent); + } + + componentChildren(innerComponent) { + return this._modifier + .clip(this) + .toComponent() + .componentChildren(innerComponent); + } +} + +const Shapes = Object.freeze({ + RoundedCorner: new Shape(), + Circle: new Shape(49, SizeUnits.PERCENT) +}) + +const LineStyles = Object.freeze({ + dotted: "dotted", + dashed: "dashed", + solid: "solid", + double: "double", + groove: "groove", + ridge: "ridge", + inset: "inset", + outset: "outset", + none: "none", + hidden: "hidden" +}) + +class Border extends Shape { + _color; + _sidingStyles; + _width; + + constructor(width = 1) { + super(); + this._width = width; + this._color = Colors.black; + this._sidingStyles = new Sides(LineStyles.solid, "") + } + + /** + * + * @param {number} width + * @returns {Border} + */ + width(width) { + this._width = width; + return this; + } + + /** + * + * @param {*} color + * @returns {Border} + */ + color(color) { + this._color = color; + return this; + } + + /** + * Sets the border-style of all sides to the given. + * @param {LineStyles} lineStyle style of the border + * @returns {Border} + */ + setStyleAll(lineStyle) { + this._sidingStyles.all(lineStyle) + return this; + } + + /** + * + * @param {LineStyles} lineStyle + * @param {*} sidingRefSide + * @returns {Border} + */ + setLineStyle(lineStyle, sidingRefSide) { + this._sidingStyles.setBySidingRef(sidingRefSide, lineStyle) + return this; + } + + /** + * + * @param {Map} + */ + getOrderedValues() { + return [this._fFirst + this._unit, this._fSecond + this._unit, this._fThird + this._unit, this._fForth + this._unit] + } + + /** + * + * @param {SidingRef} sidingRef + * @param {*} value + * @returns {SideUnitDependentAttribute} this + */ + setBySidingRef(sidingRef, value) { + sidingRef(this) = value; + return this; + } + + /** + * + * @param {SidingRef} sidingRef the reference enum for this SideUnitDependenAttribute (child) + * @returns the value of the referenced SidingRef. + */ + getBySidingRef(sidingRef) { + return sidingRef(this) + } + +} + +const SidingRefSides = Object.freeze({ + LEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fFirst, + TOP: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fSecond, + RIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fThird, + BOTTOM: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fForth +}) + + +/** + * The Class holds values from each side/direction of an element. + * Used for margin/padding. + * Extended Logic is used for Dimensions, Shape, Border as well. + */ +class Siding extends SideUnitDependentAttribute { + constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { + super(); + this._unit = defaultUnit; + this._fFirst = defaultValue; + this._fSecond = defaultValue; + this._fThird = defaultValue; + this._fForth = defaultValue; + } + + /** + * sets the amount-value for all sides. + * @param {number} amount siding from all sides + * @returns {Siding} this Siding Object + */ + all(amount) { + this._fFirst = amount; + this._fSecond = amount; + this._fThird = amount; + this._fForth = amount; + return this; + } + + /** + * sets the amount-value for the left side. + * @param {number} amount siding for left + * @returns {Siding} this Siding Object + */ + left(amount) { + this._fFirst = amount; + return this; + } + + /** + * sets the amount-value for the right side. + * @param {number} amount siding for right + * @returns {Siding} this Siding Object + */ + right(amount) { + this._fThird = amount; + return this; + } + + /** + * sets the amount-value for the top side. + * @param {number} amount siding for top + * @returns {Siding} this Siding Object + */ + top(amount) { + this._fSecond = amount; + return this; + } + + /** + * sets the amount-value for the bottom side. + * @param {number} amount siding for bottom + * @returns {Siding} this Siding Object + */ + bottom(amount) { + this._fForth = amount; + return this; + } + + getSidingRefValueMap() { + return { + [SidingRefSides.LEFT]: this.getBySidingRef(SidingRefSides.LEFT), + [SidingRefSides.TOP]: this.getBySidingRef(SidingRefSides.TOP), + [SidingRefSides.RIGHT]: this.getBySidingRef(SidingRefSides.RIGHT), + [SidingRefSides.BOTTOM]: this.getBySidingRef(SidingRefSides.BOTTOM) + } + } +} + + +class Sides extends Siding { + /** + * + * @param {number|string} defaultValue + * @param {*} defaultUnit + */ + constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { + super(defaultValue, defaultUnit); + } + /** + * sets the amount-value for the horizontal sides (left and right). + * @param {number} amount siding for left and right. + * @returns {Sides} this Siding Object + */ + horizontal(amount) { + this._fFirst = amount; + this._fThird = amount; + return this; + } + + /** + * sets the amount-value for the vertical sides (left and right). + * @param {number} amount siding for top and bottom. + * @returns {Sides} this Siding Object + */ + vertical(amount) { + this._fSecond = amount; + this._fForth = amount; + return this; + } +} + +class PaddingChain extends Sides{ + _modifier; + constructor(modifier) { + super(); + this._modifier = modifier; + } + + toModifier() { + return this._modifier + .padding(this); + } + + ensureModifier(){ + return this.toModifier() + } +} + + +class ChainablePadding extends PaddingChain { + toComponent() { + return this._modifier + .padding(this) + .toComponent(); + } + + componentChild(innerComponent) { + return this._modifier + .padding(this) + .toComponent() + .componentChild(innerComponent); + } + + componentChildren(innerComponent) { + return this._modifier + .padding(this) + .toComponent() + .componentChildren(innerComponent); + } +} + diff --git a/tsconfig.json b/tsconfig.json index e3ed51a..af96888 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,9 +1,10 @@ { "compilerOptions": { - "module": "CommonJS", - "target": "ES2020", + "module": "AMD", + "target": "ES2015", "declaration": true, - "outDir": "./lib" + "outDir": "./lib", + "outFile": "jpc-like-websites.js" }, "include": [ "./src/ts/*"