From 295ab2210fb6856ab161fe0017dac5dfb0db86c9 Mon Sep 17 00:00:00 2001 From: chris Date: Thu, 14 Nov 2024 10:43:03 +0100 Subject: [PATCH] IMPRO,FIX,CLEAN: Preparing for new Release --- join_js_files.sh | 6 ++++ src/builder.js | 2 +- src/color.js | 12 ++++++++ src/component.js | 12 +++++--- src/context.js | 68 +++++++++++++++++++++++++++++++++--------- src/modifier.js | 28 +++++++++++++---- src/sizeSide/border.js | 4 +-- src/sizeSide/shapes.js | 4 +-- tsconfig.json | 16 ---------- 9 files changed, 108 insertions(+), 44 deletions(-) delete mode 100644 tsconfig.json diff --git a/join_js_files.sh b/join_js_files.sh index ba841de..8927ba3 100644 --- a/join_js_files.sh +++ b/join_js_files.sh @@ -1,6 +1,12 @@ TARGET="jpc-like-websites.js" SRC="src" +# The list are mirroring the correct import/usage order +# First "SUB_LIST" are the modifier subcategories +# Second "MODIFIER_LIST" comes the modifier and orga-/orientations +# Third "HIGHER_LIST" come several of the commons, the context as well as component +# and thoose that use component. + SUB_LIST="siding.js shapes.js border.js dimensions.js" MODIFIERS_LIST="alignment.js arrangement.js modifier.js" HIGHER_LIST="commonEvents.js context.js component.js baseComponents.js builder.js" diff --git a/src/builder.js b/src/builder.js index 4fa6286..bd51fbc 100644 --- a/src/builder.js +++ b/src/builder.js @@ -66,7 +66,7 @@ const builder = { * @param {Map} attr * @returns {Component} */ - paragraph: function (attr = {}) { return builder.genTag("paragraph", attr); }, + paragraph: function (attr = {}) { return builder.genTag("p", attr); }, /** * * @param {Map} attr diff --git a/src/color.js b/src/color.js index 4591630..16ac65c 100644 --- a/src/color.js +++ b/src/color.js @@ -7,6 +7,7 @@ /** * A simple Color class for rgb set color values. + * */ class Color { #red; @@ -14,6 +15,12 @@ class Color { #blue; #hex; + /** + * + * @param {number} red Red-Value for RGB Color definition + * @param {number} green Green-Value for RGB + * @param {number} blue Blue-Value + */ constructor(red, green, blue) { this.#red = red; this.#green = green; @@ -28,6 +35,11 @@ class Color { return `rgb(${this.#red}, ${this.#green}, ${this.#blue})`; } + /** + * + * @param {string} hexcode + * @returns + */ hex(hexcode) { this.#hex = hexcode; return this; diff --git a/src/component.js b/src/component.js index bf63aaf..504c89b 100644 --- a/src/component.js +++ b/src/component.js @@ -100,15 +100,19 @@ class Component { /** * * @param {string} styleClass + * @param {Modifier} modifier * @returns {Component} this component object */ - addStyleClass(styleClass) { + addStyleClass(styleClass, modifier = null) { + if (modifier) { + Page.registerStyling(styleClass, modifier._modifications); + } this._element.classList.add(styleClass); return this; } - registerStyleClass(styleClass, styleRuleMap){ - Page.registerStyling('.'+styleClass, styleRuleMap); + registerStyleClass(styleClass, styleRuleMap) { + Page.registerStyling('.' + styleClass, styleRuleMap); return this.addStyleClass(styleClass); } @@ -207,7 +211,7 @@ class Component { * within the list. * @param {Array} listName */ - registerOnGenerate(listName){ + subscribeOnGenerate(listName) { this._toRegister.push(listName); return this; } diff --git a/src/context.js b/src/context.js index c781211..a04a9e5 100644 --- a/src/context.js +++ b/src/context.js @@ -21,20 +21,53 @@ class PageBuilder { this.#functions = document.createElement("script"); this.#functionNames = []; this.#cssElementIdentifiers = []; - this.#delayedFunctions = []; - this.#repeatingFunctions = {}; } /** * Registers a function to be added later in a script tag in the head of the document. + * @ATTENTION Be careful with intended empty strings (e.g. in variable values), + * empty strings within the function code will be shrunk. * @param {string} name - * @param {func} fun + * @param {function} fun */ registerFunction(name, fun) { + /** + * Is supposed to shrink all empty strings to length 1 + * @param {string} text + * @returns {string} + */ + function shrinkEmptyStrings(text){ + for (let i = 1; i < 10; i++) { + text = text.replaceAll(" ".slice(i), ' '); + } + return text; + } if (!this.#functionNames.includes(name)) { - this.#functions.innerText += `const ${name} = ${fun};`; + let clearedFuncText = shrinkEmptyStrings( + fun.toString() + .replaceAll('\n', ' ') + .replaceAll('\r\n', ' ') + .replaceAll('\n\r', ' ') + ); + let isFuncWritten = clearedFuncText.startsWith('function'); + let funcHasName = fun.name && fun.name.trim() !== ''; + if(isFuncWritten){ + let isNameInFuncText = clearedFuncText.startsWith(`function ${name}`); + this.#functions.innerText += (funcHasName && isNameInFuncText + ? clearedFuncText + : clearedFuncText.replace('function ', 'function '+name) + )+'; '; + }else{ + this.#functions.innerText += `const ${name} = ${clearedFuncText}; ` + } this.#functionNames.push(name); } + return this; + } + + + registerNamedFunction(namedFunction) { + return this.registerFunction(namedFunction.name, namedFunction) } /** @@ -83,18 +116,22 @@ class PageBuilder { head.appendChild(this.#cssClasses) /* set repeating functions */ - let repeatedFun = Object.values(this.#repeatingFunctions) - .reduce((a, c, i, arr) => Object.assign(a, { - [c.name]: setInterval(c.fun, c.interval) - }), {}); + if (this.#repeatingFunctions) { + let repeatedFun = Object.values(this.#repeatingFunctions) + .reduce((a, c, i, arr) => Object.assign(a, { + [c.name]: setInterval(c.fun, c.interval) + }), {}); + } /* set timeouts for funcitons executed after load */ - for (let i = 0; i < this.#delayedFunctions.length; i++) { - let func = this.#delayedFunctions[i]; - if (func.repeat) { - setTimeout(setInterval(func.func, func.interval), func.dl, func.args); - } else { - setTimeout(func.func, func.dl, func.args); + if (this.#delayedFunctions) { + for (let i = 0; i < this.#delayedFunctions.length; i++) { + let func = this.#delayedFunctions[i]; + if (func.repeat) { + setTimeout(setInterval(func.func, func.interval), func.dl, func.args); + } else { + setTimeout(func.func, func.dl, func.args); + } } } console.log(this.#functionNames); @@ -113,6 +150,9 @@ class PageBuilder { if (name !== '') { this.registerFunction(name, func); } + if (!this.#delayedFunctions) { + this.#delayedFunctions = []; + } this.#delayedFunctions.push({ dl: delay, func: func, args: args, repeat: repeat, interval: interval }); } diff --git a/src/modifier.js b/src/modifier.js index 23230ae..d30b188 100644 --- a/src/modifier.js +++ b/src/modifier.js @@ -12,9 +12,10 @@ */ class Modifier { /** - * @property {Object} _modifications + * @property {Map} _modifications */ _modifications; + _shape; constructor() { this._modifications = new Object(); @@ -30,7 +31,7 @@ class Modifier { } /** - * Sets the modification for width to 100%. + * Sets the modification for width to the given fraction of 1 (default 1 := 100%). * @param {number} fraction * @returns {Modifier} this modifier object */ @@ -40,7 +41,7 @@ class Modifier { } /** - * Sets the modification for height to 100%. + * Sets the modification for height to the given fraction of 1 (default 1 := 100%). * @param {number} fraction * @returns {Modifier} this modifier object */ @@ -91,7 +92,15 @@ class Modifier { * @returns {Modifier} this modifier object */ margin(siding) { - this._modifications["margin"] = siding.getOrderedValues().join(' '); + let keyToAdd = ""; + if (siding instanceof Sides) { + keyToAdd = "margin-" + } + + siding.toModifications() + .forEach(kvpair => { + this._modifications[keyToAdd + kvpair.key] = kvpair.value; + }); return this; } @@ -148,13 +157,21 @@ class Modifier { * 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]. + * If the border has a shape defined, + * this shape will override earlier shape definitions. + * Otherwise existing shape definitions will be applied. * @param {Border} border the style of the border line * @returns {Modifier} this modifier object */ border(border) { + if (border._shape){ + this.clip(border._shape); + }else if(this._shape){ + border._shape = this._shape; + } border.toModifications() .forEach(e => this._modifications[e.key] = e.value); - return this.clip(border._shape) + return this; } /** @@ -163,6 +180,7 @@ class Modifier { * @returns {Modifier} */ clip(shape) { + this._shape = shape; this._modifications["border-radius"] = shape.getOrderedValues().join(' '); return this; } diff --git a/src/sizeSide/border.js b/src/sizeSide/border.js index f25d6aa..687d950 100644 --- a/src/sizeSide/border.js +++ b/src/sizeSide/border.js @@ -201,7 +201,7 @@ class BorderChain extends Border { */ toComponent() { return this._modifier - .dimensions(this) + .border(this) .toComponent(); } @@ -212,7 +212,7 @@ class BorderChain extends Border { */ childContext(innerComponent) { return this._modifier - .dimensions(this) + .border(this) .toComponent() .childContext(innerComponent); } diff --git a/src/sizeSide/shapes.js b/src/sizeSide/shapes.js index 8718ead..d2a789a 100644 --- a/src/sizeSide/shapes.js +++ b/src/sizeSide/shapes.js @@ -36,7 +36,7 @@ class Shape extends DirectionUnitDependentAttribute { * @returns {Shape} */ bottomLeft(amount) { - this._fThird = amount; + this._fForth = amount; return this; } /** @@ -45,7 +45,7 @@ class Shape extends DirectionUnitDependentAttribute { * @returns {Shape} */ bottomRight(amount) { - this._fForth = amount; + this.fThird = amount; return this; } /** diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index af96888..0000000 --- a/tsconfig.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "compilerOptions": { - "module": "AMD", - "target": "ES2015", - "declaration": true, - "outDir": "./lib", - "outFile": "jpc-like-websites.js" - }, - "include": [ - "./src/ts/*" - ], - "exclude": [ - "node_modules", - "./lib/**/*" - ] -}