From ea1786f379586745646466acfda2227cdf9b6816 Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 25 Dec 2024 21:51:51 +0100 Subject: [PATCH] FIX,IMPRO,REFA: Fixed framework after refactoring and -structuring --- src/builder.js | 4 +- src/commonEvents.js | 12 +++-- src/component.js | 14 ++++++ src/componentAncestry/addStyleAndFunctions.js | 45 +++++++++++++++---- src/componentAncestry/modifiableComponent.js | 3 +- src/componentAncestry/wrapperComponent.js | 23 ++++++++-- src/context.js | 12 ++++- src/context/extStore.js | 2 +- src/context/scriptAndStyleContext.js | 1 + src/modifier.js | 6 +-- 10 files changed, 97 insertions(+), 25 deletions(-) diff --git a/src/builder.js b/src/builder.js index 20b9cc1..c9f7d4f 100644 --- a/src/builder.js +++ b/src/builder.js @@ -216,7 +216,7 @@ const builder = { * @param {*} innerComponents */ page: function (innerComponents) { - let main = document.querySelector('main') + let main = document.querySelector('main'); main.parentElement.insertAdjacentElement( "afterbegin", @@ -225,7 +225,7 @@ const builder = { .arrangement(Arrangement.CENTER) .childContext(innerComponents) .generate() - ) + ); Page.generate(); main.remove(); } diff --git a/src/commonEvents.js b/src/commonEvents.js index 9626e5a..388ccd4 100644 --- a/src/commonEvents.js +++ b/src/commonEvents.js @@ -9,6 +9,12 @@ */ const CommonEvents = Object.freeze({ ONCLICK: "onclick", - ONCHANGE: "onchange" -}) - + ONCHANGE: "onchange", + SCROLL: "scroll", + DRAG_START: "dragstart", + DRAG_END: "dragend", + DRAG_ENTER: "dragenter", + DRAG_LEAVE: "dragleave", + DRAG_OVER: "dragover", + DROP: "drop", +}); diff --git a/src/component.js b/src/component.js index 7f9f693..3a8ac56 100644 --- a/src/component.js +++ b/src/component.js @@ -10,6 +10,7 @@ class Component extends ScriptStoringComponent { constructor(element, attr = {}) { + super(element, attr); this._modifier = new Modifier().margin(new Sides().all(0)); var akeys = Object.keys(attr); for (let i = 0; i < akeys.length; i++) { @@ -30,4 +31,17 @@ class Component extends ScriptStoringComponent { this._toRegister.push(listName); return this; } + /** + * @override + * @class Component + * @inheritdoc + */ + generate(styleStoreInternal = null, cssStore = null, funcStore = null) { + let wenity = super.generate(styleStoreInternal, cssStore, funcStore); + + for (let i = 0; i < this._toRegister.length; i++) { + this._toRegister[i].push(wenity.html); + } + return wenity.html; + } } diff --git a/src/componentAncestry/addStyleAndFunctions.js b/src/componentAncestry/addStyleAndFunctions.js index f1049a8..537f4c7 100644 --- a/src/componentAncestry/addStyleAndFunctions.js +++ b/src/componentAncestry/addStyleAndFunctions.js @@ -117,7 +117,7 @@ class StyleStoringComponent extends ModifiableComponent { * @override * @param {StyleStoringComponent|Component|ChainableModifier} component */ - #appendChildComponent(component) { + _appendChildComponent(component) { if (!(component instanceof Component)) { component = component.toComponent(); } @@ -134,7 +134,12 @@ class StyleStoringComponent extends ModifiableComponent { } } - this._element.append(wenity.html); + this._element.append( + (wenity instanceof WebTrinity + ? wenity.html + : wenity + ) + ); } /** @@ -142,6 +147,7 @@ class StyleStoringComponent extends ModifiableComponent { * @param {boolean|null} styleStoreInternal * @param {ExtStorageType|null} cssStore * @returns {WebTrinity} + * @class StyleStoringComponent */ generate(styleStoreInternal = null, cssStore = null) { let wenity = new WebTrinity(); @@ -227,7 +233,7 @@ class ScriptStoringComponent extends StyleStoringComponent { * @override * @param {ScriptStoringComponent|Component|ChainableModifier} component */ - #appendChildComponent(component) { + _appendChildComponent(component) { if (!(component instanceof Component)) { component = component.toComponent(); } @@ -244,7 +250,16 @@ class ScriptStoringComponent extends StyleStoringComponent { } } - this._element.append(wenity.html); + if (Object.hasOwn(wenity, "css") & wenity.css) { + super._appendChildComponent(wenity); + } else { + this._element.append( + (wenity instanceof WebTrinity + ? wenity.html + : wenity + ) + ); + } } /** @@ -257,7 +272,7 @@ class ScriptStoringComponent extends StyleStoringComponent { } /** - * + * @todo potential code duplication - and doc * @returns {HTMLScriptElement} */ _generateScriptTag() { @@ -322,6 +337,7 @@ class ScriptStoringComponent extends StyleStoringComponent { * @param {boolean} styleStoreInternal * @param {ExtStorageType} cssStore * @param {ExtStore} funcStore + * @class ScriptStoringComponent */ generate(styleStoreInternal = null, cssStore = null, funcStore = null) { let wenity = super.generate(styleStoreInternal, cssStore); @@ -329,9 +345,9 @@ class ScriptStoringComponent extends StyleStoringComponent { /* Sort Styling Storage Types */ this.setFunctionStorage(funcStore); - let tag = this._generateStyleTag(); - if (this._funcStore.type === ExtStorageType.INDIVIDUALLY) { + let tag = this._generateScriptTag(); + switch (this._funcStore.position) { case ExtStoragePos.WITHIN: wenity.html.insertAdjacentElement( @@ -365,10 +381,21 @@ class ScriptStoringComponent extends StyleStoringComponent { case ExtStorageType.COLLECTED: case ExtStorageType.CENTRALIZED: default: - wenity.js = tag; + /** + * @todo implement difference between collected and centralized in + * generate, appendChild and childContext function-chain + */ + Object.entries(this.#functions) + .forEach(tuple => { + Page.registerPageFunction( + fun = tuple[1].fun, + underTheName = tuple[0], + overwriteBehaviour = tuple[1].overwrite + ); + }); + //wenity.js = tag; } } - return wenity; } } diff --git a/src/componentAncestry/modifiableComponent.js b/src/componentAncestry/modifiableComponent.js index 5bf9bf3..d0c50fd 100644 --- a/src/componentAncestry/modifiableComponent.js +++ b/src/componentAncestry/modifiableComponent.js @@ -56,7 +56,7 @@ class ModifiableComponent extends ChildbearerComponent { * @override * @param {Component|ChainableModifier|} component */ - #appendChildComponent(component) { + _appendChildComponent(component) { this._element.append( (component instanceof Component ? component @@ -70,6 +70,7 @@ class ModifiableComponent extends ChildbearerComponent { * @inheritdoc * @override * @returns {HTMLElement} + * @class ModifiableComponent */ generate() { this._modifier._modifications["justify-content"] = this._arrangement; diff --git a/src/componentAncestry/wrapperComponent.js b/src/componentAncestry/wrapperComponent.js index 7d3d5a0..bde3784 100644 --- a/src/componentAncestry/wrapperComponent.js +++ b/src/componentAncestry/wrapperComponent.js @@ -23,6 +23,11 @@ class ElementWrapper { * @type {string} */ _compName; + /** + * The auto-generated name of the component. + * @type {string} + */ + _givenName; /** * Initializes the component @@ -35,8 +40,15 @@ class ElementWrapper { element.setAttribute(akeys[i], attr[akeys[i]]); } this._element = element; - this._compName = Page.registerComponent(); - this.setAttribute('data-compel', this._compName); + this._compName = Page.autoRegisterComponent(); + this.setAttribute('data-autocompel', this._compName); + } + + setComponentName(name){ + this._givenName = name; + this.setAttribute('data-compel', name); + Page.registerComponent(name); + return this; } /** @@ -96,7 +108,9 @@ class ElementWrapper { * Ends chain. * Applies all modifications on the element. * Returns the constructed HTMLElement of this Component. + * @class ElementWrapper * @returns {HTMLElement} + * @class ElementWrapper */ generate() { return this._element; @@ -161,7 +175,7 @@ class ChildbearerComponent extends ElementWrapper { * Defines how a child Component is to be appended. * @param {Component} component the child component to add it. */ - #appendChildComponent(component) { + _appendChildComponent(component) { this._element.append( component.generate() ); @@ -170,6 +184,7 @@ class ChildbearerComponent extends ElementWrapper { /** * @override * @inheritdoc + * @class ChildbearerComponent */ generate() { this._element.style.justifyContent = this._arrangement; @@ -196,7 +211,7 @@ class ChildbearerComponent extends ElementWrapper { this.childContext(component[i]); } } else { - this.#appendChildComponent(component); + this._appendChildComponent(component); } return this; } diff --git a/src/context.js b/src/context.js index 67a3ae2..4f4d627 100644 --- a/src/context.js +++ b/src/context.js @@ -10,14 +10,22 @@ * @extends ScriptAndStyleContext */ class PageBuilder extends ScriptAndStyleContext { + #autoRegisteredComponents; #registeredComponents; constructor() { + super(); + this.#autoRegisteredComponents = []; this.#registeredComponents = []; } - registerComponent() { - let compName = 'comp-el-' + this.#registeredComponents.length; + autoRegisterComponent() { + let compName = 'comp-el-' + this.#autoRegisteredComponents.length; + this.#autoRegisteredComponents.push(compName); + return compName; + } + + registerComponent(compName) { this.#registeredComponents.push(compName); return compName; } diff --git a/src/context/extStore.js b/src/context/extStore.js index 8352459..4f7664e 100644 --- a/src/context/extStore.js +++ b/src/context/extStore.js @@ -94,7 +94,6 @@ class InternalExtStore extends ExtStore{ */ constructor(typeName) { super(typeName); - this.type = typeName; this.position = ExtStoragePos.WITHIN; } } @@ -105,6 +104,7 @@ class ExtExtStorage extends ExtStore{ * @param {string} type */ constructor(typeName) { + super(typeName); this.type = typeName; } diff --git a/src/context/scriptAndStyleContext.js b/src/context/scriptAndStyleContext.js index 3a17937..6d1ffae 100644 --- a/src/context/scriptAndStyleContext.js +++ b/src/context/scriptAndStyleContext.js @@ -211,6 +211,7 @@ class ScriptAndStyleContext { * - function tag(s) * - sets and registers repeatedly executed functions * - sets (timeout and) functions that are supposed to be executed after load + * @class ScriptAndStyleContext */ generate() { let head = document.querySelector('head'); diff --git a/src/modifier.js b/src/modifier.js index b1a2c66..2394be2 100644 --- a/src/modifier.js +++ b/src/modifier.js @@ -163,9 +163,9 @@ class Modifier { * @returns {Modifier} this modifier object */ border(border) { - if (border._shape){ + if (border._shape) { this.clip(border._shape); - }else if(this._shape){ + } else if (this._shape) { border._shape = this._shape; } border.toModifications() @@ -183,7 +183,7 @@ class Modifier { this._modifications["border-radius"] = shape.getOrderedValues().join(' '); return this; } - + /** * * @param {number} size of width and height in pixels