Browse Source
Code and functionallity of the Component and Context classes/files were split into several super-classes.master
chris
4 months ago
9 changed files with 1168 additions and 381 deletions
@ -0,0 +1,374 @@ |
|||||
|
/** |
||||
|
* This file is part of the jps-like-websites lib |
||||
|
* URL: https://git.labos.goip.de/chris/jpc-like-websites
|
||||
|
* @copyright by its creator Christian Martin |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* @abstract |
||||
|
* @extends ModifiableComponent |
||||
|
*/ |
||||
|
class StyleStoringComponent extends ModifiableComponent { |
||||
|
/** |
||||
|
* @property {boolean} _styleStoreInternal |
||||
|
*/ |
||||
|
_styleStoreInternal; |
||||
|
/** |
||||
|
* The style-rule collection of this component |
||||
|
* @property {map<string,map<string,string>>} css |
||||
|
*/ |
||||
|
#css; |
||||
|
|
||||
|
/** |
||||
|
* @property {ExtStorageType} cssExtStore |
||||
|
*/ |
||||
|
_cssExtStore; |
||||
|
|
||||
|
/** |
||||
|
* @property {HTMLStyleElement} styleTag |
||||
|
*/ |
||||
|
#styleTag; |
||||
|
|
||||
|
constructor(element, attr = {}) { |
||||
|
super(element, attr); |
||||
|
this.#css = {}; |
||||
|
this._styleStoreInternal = true; |
||||
|
this._cssExtStore = ExtStorageType.CENTRALIZED; |
||||
|
this.#css = {}; |
||||
|
this.addStyleClass(this._compName); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* Ads class to classList via HTMLElement.classList.add() method. |
||||
|
* Further collects rules in a property until generate is called. |
||||
|
* @override |
||||
|
* @param {string} styleClass |
||||
|
* @param {Modifier} modifier |
||||
|
* @param {OverwriteBehaviour} overwriteBehaviour |
||||
|
* @returns {Componant} this component object |
||||
|
*/ |
||||
|
addStyleClass(styleClass, modifier = null, overwriteBehaviour = OverwriteBehaviour.REPLACE) { |
||||
|
this._element.classList.add(styleClass); |
||||
|
|
||||
|
let selector = '.' + styleClass; |
||||
|
|
||||
|
if (Object.keys(this.#css).includes(selector)) { |
||||
|
selector = resolveOverwrite(selector, this.#css); |
||||
|
} |
||||
|
|
||||
|
this.#css[selector] = (modifier |
||||
|
? (modifier instanceof Modifier |
||||
|
? modifier._modifications |
||||
|
: modifier |
||||
|
) |
||||
|
: {} |
||||
|
); |
||||
|
|
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param {boolean} storeInternal |
||||
|
* @returns {Component} |
||||
|
*/ |
||||
|
setStylingsStorage(storeInternal) { |
||||
|
if (storeInternal) { |
||||
|
this._styleStoreInternal = storeInternal; |
||||
|
} |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param {ExtStorageType} storageType |
||||
|
* @returns {Component} |
||||
|
*/ |
||||
|
setCssStorage(storageType) { |
||||
|
if (storageType) { |
||||
|
this._cssExtStore = storageType; |
||||
|
} |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* Takes all "collected" styling rules associated to a selector (in #css) |
||||
|
* and inserts them as innerText to a created HTMLStyleElement. |
||||
|
* @returns {HTMLStyleElement} |
||||
|
*/ |
||||
|
_generateStyleTag() { |
||||
|
return Object.keys(this.#css) |
||||
|
.reduce((styleTag, selector) => { |
||||
|
let styleRules = this.#css[selector]; |
||||
|
let rulesText = Object.keys(styleRules) |
||||
|
.map(key => `${key}:${styleRules[key]}; `) |
||||
|
.join(' '); |
||||
|
|
||||
|
styleTag.innerText += `${selector} {${rulesText}} `; |
||||
|
return styleTag; |
||||
|
|
||||
|
}, document.createElement('style')); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* @override |
||||
|
* @param {StyleStoringComponent|Component|ChainableModifier} component |
||||
|
*/ |
||||
|
#appendChildComponent(component) { |
||||
|
if (!(component instanceof Component)) { |
||||
|
component = component.toComponent(); |
||||
|
} |
||||
|
let wenity = component.generate(); |
||||
|
|
||||
|
if (Object.hasOwn(wenity, "css") & wenity.css) { |
||||
|
if (wenity.css instanceof HTMLStyleElement) { |
||||
|
this.#styleTag = wenity.css; |
||||
|
} else { |
||||
|
Object.entries(wenity.css) |
||||
|
.forEach(kv => { |
||||
|
this.#css[kv[0]] = kv[1]; |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this._element.append(wenity.html); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @override |
||||
|
* @param {boolean|null} styleStoreInternal |
||||
|
* @param {ExtStorageType|null} cssStore |
||||
|
* @returns {WebTrinity} |
||||
|
*/ |
||||
|
generate(styleStoreInternal = null, cssStore = null) { |
||||
|
let wenity = new WebTrinity(); |
||||
|
|
||||
|
/* Sort Styling Storage Types */ |
||||
|
this.setStylingsStorage(styleStoreInternal); |
||||
|
this.setCssStorage(cssStore); |
||||
|
|
||||
|
/* invoke Storage Types/generate Element */ |
||||
|
if (this._styleStoreInternal) { |
||||
|
wenity.html = super.generate(); |
||||
|
} else { |
||||
|
this.addStyleClass(this._compName, this._modifier); |
||||
|
wenity.html = this._element; |
||||
|
} |
||||
|
|
||||
|
if (this._cssExtStore === ExtStorageType.CENTRALIZED) { |
||||
|
Object.entries(this.#css) |
||||
|
.forEach(kv => Page.registerStyling(kv[0], kv[1])); |
||||
|
} else { |
||||
|
switch (this._cssExtStore) { |
||||
|
case ExtStorageType.INDIVIDUALLY: |
||||
|
let tag = this._generateStyleTag(); |
||||
|
tag.setAttribute('data-compel-for', this._compName); |
||||
|
document.querySelector('head') |
||||
|
.insertAdjacentElement( |
||||
|
"beforeend", |
||||
|
tag |
||||
|
); |
||||
|
break; |
||||
|
case ExtStorageType.COLLECTED: |
||||
|
wenity.css = this.#css; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return wenity; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
*/ |
||||
|
class FunctionRegistration { |
||||
|
/** |
||||
|
* |
||||
|
* @param {Function} func |
||||
|
* @param {OverwriteBehaviour} overwriteBehaviour |
||||
|
*/ |
||||
|
constructor(func, overwriteBehaviour = OverwriteBehaviour.RENAME) { |
||||
|
this.fun = func; |
||||
|
this.overwrite = overwriteBehaviour; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
*/ |
||||
|
class ScriptStoringComponent extends StyleStoringComponent { |
||||
|
/** |
||||
|
* Collection of component associated/used functions |
||||
|
* @property {map<string,FunctionRegistration>} functions |
||||
|
*/ |
||||
|
#functions; |
||||
|
/** |
||||
|
* @property {ExtStore} |
||||
|
*/ |
||||
|
_funcStore; |
||||
|
/** |
||||
|
* @property {HTMLScriptElement} scriptTag |
||||
|
*/ |
||||
|
#scriptTag; |
||||
|
|
||||
|
constructor(element, attr = {}) { |
||||
|
super(element, attr); |
||||
|
this.#functions = {}; |
||||
|
this._funcStore = StoreExtAs.CENTRALIZED.positionedAt().BEGINNING(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @override |
||||
|
* @param {ScriptStoringComponent|Component|ChainableModifier} component |
||||
|
*/ |
||||
|
#appendChildComponent(component) { |
||||
|
if (!(component instanceof Component)) { |
||||
|
component = component.toComponent(); |
||||
|
} |
||||
|
let wenity = component.generate(); |
||||
|
|
||||
|
if (Object.hasOwn(wenity, "js") & wenity.js) { |
||||
|
if (wenity.js instanceof HTMLScriptElement) { |
||||
|
this.#scriptTag = wenity.js; |
||||
|
} else { |
||||
|
Object.entries(wenity.js) |
||||
|
.forEach(kv => { |
||||
|
this.#functions[kv[0]] = kv[1]; |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this._element.append(wenity.html); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param {string} nameAddition |
||||
|
* @returns |
||||
|
*/ |
||||
|
_getFunctionName(nameAddition = "") { |
||||
|
return `func${this.#functions.length}${nameAddition}`; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @returns {HTMLScriptElement} |
||||
|
*/ |
||||
|
_generateScriptTag() { |
||||
|
return Object.keys(this.#functions) |
||||
|
.reduce((scriptTag, funName) => { |
||||
|
let funReg = this.#functions[funName]; |
||||
|
if (funReg.fun.startsWith('function')) { |
||||
|
let funcNameDeclaration = `function ${funName}`; |
||||
|
scriptTag.innerText += (funReg.fun.startsWith(funcNameDeclaration) |
||||
|
? funReg.fun |
||||
|
: funReg.fun.split('(') |
||||
|
.replace((a, c, i) => (i === 0 ? [funcNameDeclaration] : [...a, c]),) |
||||
|
.join('(') |
||||
|
) |
||||
|
} else { |
||||
|
scriptTag.innerText += `const ${funName} = ${funReg.fun}; `; |
||||
|
} |
||||
|
return scriptTag; |
||||
|
}, document.createElement('script')); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param {ExtStore} functionStore |
||||
|
* @returns {Component} |
||||
|
*/ |
||||
|
setFunctionStorage(functionStore) { |
||||
|
if (functionStore) { |
||||
|
this._funcStore = functionStore; |
||||
|
} |
||||
|
if (this._funcStore === ExtStorageType.INTERNALIZED) { |
||||
|
this._funcStore = ExtStorageType.INDIVIDUALLY; |
||||
|
} |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param {Function} func |
||||
|
* @param {string} underTheName |
||||
|
* @param {OverwriteBehaviour} overwriteBehaviour |
||||
|
* @returns |
||||
|
*/ |
||||
|
registerFunction(func, underTheName = "", overwriteBehaviour = OverwriteBehaviour.RENAME) { |
||||
|
let registrationName = [underTheName.trim(), func.name.trim(), this._getFunctionName()] |
||||
|
.find(e !== ''); |
||||
|
|
||||
|
/* deal with name already present */ |
||||
|
let functionNames = Object.keys(this.#functions); |
||||
|
if (functionNames.some(key => key.includes(registrationName))) { |
||||
|
registrationName = resolveOverwrite( |
||||
|
registrationName, |
||||
|
this.#functions |
||||
|
); |
||||
|
} |
||||
|
this.#functions[registrationName] = new FunctionRegistration(func, overwriteBehaviour); |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param {boolean} styleStoreInternal |
||||
|
* @param {ExtStorageType} cssStore |
||||
|
* @param {ExtStore} funcStore |
||||
|
*/ |
||||
|
generate(styleStoreInternal = null, cssStore = null, funcStore = null) { |
||||
|
let wenity = super.generate(styleStoreInternal, cssStore); |
||||
|
|
||||
|
/* Sort Styling Storage Types */ |
||||
|
this.setFunctionStorage(funcStore); |
||||
|
|
||||
|
let tag = this._generateStyleTag(); |
||||
|
|
||||
|
if (this._funcStore.type === ExtStorageType.INDIVIDUALLY) { |
||||
|
switch (this._funcStore.position) { |
||||
|
case ExtStoragePos.WITHIN: |
||||
|
wenity.html.insertAdjacentElement( |
||||
|
"afterbegin", |
||||
|
tag |
||||
|
); |
||||
|
break; |
||||
|
|
||||
|
case ExtStoragePos.BEGINNING: |
||||
|
document.querySelector('head') |
||||
|
.insertAdjacentElement( |
||||
|
"beforeend", |
||||
|
tag |
||||
|
); |
||||
|
break; |
||||
|
case ExtStoragePos.END: |
||||
|
document.querySelector('body') |
||||
|
.insertAdjacentElement( |
||||
|
"beforeend", |
||||
|
tag |
||||
|
); |
||||
|
break; |
||||
|
case ExtStoragePos.BEFORE: |
||||
|
case ExtStoragePos.SEGMENT_BEGIN: |
||||
|
default: |
||||
|
wenity.js = tag; |
||||
|
break; |
||||
|
} |
||||
|
} else { |
||||
|
switch (this._funcStore.type) { |
||||
|
case ExtStorageType.COLLECTED: |
||||
|
case ExtStorageType.CENTRALIZED: |
||||
|
default: |
||||
|
wenity.js = tag; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return wenity; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,89 @@ |
|||||
|
/** |
||||
|
* This file is part of the jps-like-websites lib |
||||
|
* URL: https://git.labos.goip.de/chris/jpc-like-websites
|
||||
|
* @copyright by its creator Christian Martin |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param {map<string,any>} attrs |
||||
|
* @param {Object} intoContainer |
||||
|
* @param {Function<string, any, Object>} cb |
||||
|
* @returns {Object} the filled container |
||||
|
*/ |
||||
|
function fillAttrsInContainerByCb(attrs, intoContainer, cb) { |
||||
|
let keys = Object.keys(attrs); |
||||
|
for (let i = 0; i < keys.length; i++) { |
||||
|
cb(keys[i], attrs[keys[i]], intoContainer); |
||||
|
} |
||||
|
return intoContainer; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* @extends ChildbearerComponent |
||||
|
* @abstract |
||||
|
*/ |
||||
|
class ModifiableComponent extends ChildbearerComponent { |
||||
|
_modifier; |
||||
|
|
||||
|
constructor(element, attr = {}) { |
||||
|
super(element, attr); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Sets, updates or overwrites the Modifier-Object for this component |
||||
|
* @param {Modifier} modifier |
||||
|
* @returns {Componant} this component object |
||||
|
*/ |
||||
|
modifier(modifier) { |
||||
|
this._modifier = this._modifier |
||||
|
.join(modifier.ensureModifier()); |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Returns a Modifier to chain modifications |
||||
|
* instead of setting them within an sepperate context. |
||||
|
* @returns {ChainableModifier} |
||||
|
*/ |
||||
|
chainModifier() { |
||||
|
return new ChainableModifier(this); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @inheritdoc |
||||
|
* @override |
||||
|
* @param {Component|ChainableModifier|} component |
||||
|
*/ |
||||
|
#appendChildComponent(component) { |
||||
|
this._element.append( |
||||
|
(component instanceof Component |
||||
|
? component |
||||
|
: component.toComponent() |
||||
|
) |
||||
|
.generate() |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @inheritdoc |
||||
|
* @override |
||||
|
* @returns {HTMLElement} |
||||
|
*/ |
||||
|
generate() { |
||||
|
this._modifier._modifications["justify-content"] = this._arrangement; |
||||
|
this._modifier._modifications['display'] = "flex"; |
||||
|
this._modifier._modifications["align-content"] = this._alignment; |
||||
|
this._modifier._modifications["align-items"] = this._alignment; |
||||
|
this._modifier._modifications["text-align"] = this._alignment; |
||||
|
|
||||
|
fillAttrsInContainerByCb( |
||||
|
this._modifier._modifications, |
||||
|
this._element, |
||||
|
(key, val, el) => { el.style[key] = val; } |
||||
|
); |
||||
|
|
||||
|
return this._element; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,203 @@ |
|||||
|
/** |
||||
|
* This file is part of the jps-like-websites lib |
||||
|
* URL: https://git.labos.goip.de/chris/jpc-like-websites
|
||||
|
* @copyright by its creator Christian Martin |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* Represents the most basic and simple form of a Component. |
||||
|
* It is mainly a collection of wrapper methods |
||||
|
* around the HTMLElement methods to make them chainable. |
||||
|
* It serves as base for further functionallity extensions. |
||||
|
* @abstract |
||||
|
*/ |
||||
|
class ElementWrapper { |
||||
|
/** |
||||
|
* The basic HTMLElement the Component is wrapped around. |
||||
|
* It will be modified in several ways and in the end returned. |
||||
|
* @type {HTMLElement} |
||||
|
*/ |
||||
|
_element; |
||||
|
/** |
||||
|
* The auto-generated name of the component. |
||||
|
* @type {string} |
||||
|
*/ |
||||
|
_compName; |
||||
|
|
||||
|
/** |
||||
|
* Initializes the component |
||||
|
* @param {HTMLElement} element the base element |
||||
|
* @param {map<string,string>} attr Specific already known attributes |
||||
|
*/ |
||||
|
constructor(element, attr = {}) { |
||||
|
let akeys = Object.keys(attr); |
||||
|
for (let i = 0; i < akeys.length; i++) { |
||||
|
element.setAttribute(akeys[i], attr[akeys[i]]); |
||||
|
} |
||||
|
this._element = element; |
||||
|
this._compName = Page.registerComponent(); |
||||
|
this.setAttribute('data-compel', this._compName); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* (Wrapper) Sets the innerText of the element |
||||
|
* @param {string} text |
||||
|
* @returns {Component} this component object |
||||
|
*/ |
||||
|
text(text) { |
||||
|
this._element.innerText = text; |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Wrapper to set the HTMLElement.title attribute |
||||
|
* @param {string} text |
||||
|
* @returns {Component} |
||||
|
*/ |
||||
|
title(text) { |
||||
|
this._element.title = text; |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Wrapper for HTMLElement.classList.add() |
||||
|
* @param {string} styleClass |
||||
|
* @returns {Component} this component object |
||||
|
*/ |
||||
|
addStyleClass(styleClass) { |
||||
|
this._element.classList.add(styleClass); |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Wrapper for the HTMLElement.setAttribute() method. |
||||
|
* @param {string} key |
||||
|
* @param {string} value |
||||
|
* @returns {Component} this component object |
||||
|
*/ |
||||
|
setAttribute(key, value) { |
||||
|
this._element.setAttribute(key, value); |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Wrapper for the HTMLElement.addEventListener() |
||||
|
* @param {keyof WindowEventMap|CommonEvents} theEvent |
||||
|
* @param {Function} theListener |
||||
|
* @param {boolean|AddEventListenerOptions} options |
||||
|
* @returns {Component} this component object |
||||
|
*/ |
||||
|
addEventListener(theEvent, theListener, options = null) { |
||||
|
this._element.addEventListener(theEvent, theListener, options) |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Ends chain. |
||||
|
* Applies all modifications on the element. |
||||
|
* Returns the constructed HTMLElement of this Component. |
||||
|
* @returns {HTMLElement} |
||||
|
*/ |
||||
|
generate() { |
||||
|
return this._element; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* @extends ElementWrapper |
||||
|
* @abstract |
||||
|
*/ |
||||
|
class ChildbearerComponent extends ElementWrapper { |
||||
|
/** |
||||
|
* @property {Alignment} alignment |
||||
|
*/ |
||||
|
_alignment; |
||||
|
|
||||
|
/** |
||||
|
* @property {Arrangement} arrangement |
||||
|
*/ |
||||
|
_arrangement; |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* @todo: Unify logic extract modifications into responsible construct |
||||
|
* @todo: Make it work as expected, fix docu |
||||
|
* @todo: Differentiate between directions (horizontal, vertiacl) |
||||
|
* |
||||
|
* Sets the alignment (modifications) for this element or more specific for its children. |
||||
|
* @param {Alignment} alignment |
||||
|
* @returns {Component} this component object |
||||
|
*/ |
||||
|
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._alignment = alignment; |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @todo: Unify logic extract modifications into responsible construct |
||||
|
* @todo: Differentiate between directions (horizontal, vertical) |
||||
|
* @todo: Make it work as expected, fix docu |
||||
|
* |
||||
|
* Sets the arrangement (modifications) for this element or more specific for its children. |
||||
|
* @param {Arrangement} arrangement |
||||
|
* @returns {Component} this component object |
||||
|
*/ |
||||
|
arrangement(arrangement) { |
||||
|
/* |
||||
|
this._modifier._modifications["justify-content"] = arrangement; |
||||
|
*/ |
||||
|
this._arrangement = arrangement; |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Defines how a child Component is to be appended. |
||||
|
* @param {Component} component the child component to add it. |
||||
|
*/ |
||||
|
#appendChildComponent(component) { |
||||
|
this._element.append( |
||||
|
component.generate() |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @override |
||||
|
* @inheritdoc |
||||
|
*/ |
||||
|
generate() { |
||||
|
this._element.style.justifyContent = this._arrangement; |
||||
|
this._element.style.display = "flex"; |
||||
|
this._element.style.alignContent = this._alignment; |
||||
|
this._element.style.alignItems = this._alignment; |
||||
|
this._element.style.textAlign = this._alignment; |
||||
|
return super.generate(); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Opens a context to create children elements. |
||||
|
* Either as one component or a list/array of components. |
||||
|
* @param {Component|Array<Component>} component |
||||
|
* @returns {Component} this component object |
||||
|
*/ |
||||
|
childContext(component) { |
||||
|
if (arguments.length > 1) { |
||||
|
for (let i = 0; i < arguments.length; i++) { |
||||
|
this.childContext(arguments[i]); |
||||
|
} |
||||
|
} else if (component instanceof Array) { |
||||
|
for (let i = 0; i < component.length; i++) { |
||||
|
this.childContext(component[i]); |
||||
|
} |
||||
|
} else { |
||||
|
this.#appendChildComponent(component); |
||||
|
} |
||||
|
return this; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,157 @@ |
|||||
|
/** |
||||
|
* This file is part of the jps-like-websites lib |
||||
|
* URL: https://git.labos.goip.de/chris/jpc-like-websites
|
||||
|
* @copyright by its creator Christian Martin |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* ExtStorage := Extensions storage (type) |
||||
|
* Extensions in this context are stylings and scripts (currently only javascript). |
||||
|
* internalized: the extensions are part of the element code/attributes - only styling |
||||
|
* individually: an individual tag is created/used |
||||
|
* collected: the extension can/will be collected with others in a higher position of the element hierarchy |
||||
|
* (but not document - root) |
||||
|
* centralized: the extensions are send to the Page to be joined in a centralized tag/position of the document |
||||
|
* (either head or footer tag) |
||||
|
*/ |
||||
|
const ExtStorageType = Object.freeze({ |
||||
|
INDIVIDUALLY: 1, |
||||
|
COLLECTED: 2, |
||||
|
CENTRALIZED: 3, |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
* ExtStoragePos := Extensions Storage Position |
||||
|
* |
||||
|
* Determines where the extensions are positioned. |
||||
|
* Only relevant if ExtStorage is not 'internalized'. |
||||
|
* Determines where the tag (if individually) or the extensions are positioned. |
||||
|
*/ |
||||
|
const ExtStoragePos = Object.freeze({ |
||||
|
WITHIN: 0, |
||||
|
BEFORE: 1, |
||||
|
SEGMENT_BEGIN: 2, |
||||
|
BEGINNING: 3, |
||||
|
END: 4 |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
* Extension class for setting the ExternalStorage definitions |
||||
|
* in a chained manner. |
||||
|
*/ |
||||
|
class ExtStoragePositioned { |
||||
|
#extStore; |
||||
|
/** |
||||
|
* |
||||
|
* @param {ExtStore} extStore |
||||
|
*/ |
||||
|
constructor(extStore) { |
||||
|
this.#extStore = extStore; |
||||
|
} |
||||
|
|
||||
|
WITHIN() { |
||||
|
this.#extStore.position = ExtStoragePos.WITHIN; |
||||
|
return this.#extStore; |
||||
|
} |
||||
|
BEFORE() { |
||||
|
this.#extStore.position = ExtStoragePos.BEFORE; |
||||
|
return this.#extStore; |
||||
|
} |
||||
|
SEGMENT_BEGIN() { |
||||
|
this.#extStore.position = ExtStoragePos.SEGMENT_BEGIN; |
||||
|
return this.#extStore; |
||||
|
} |
||||
|
BEGINNING() { |
||||
|
this.#extStore.position = ExtStoragePos.BEGINNING; |
||||
|
return this.#extStore; |
||||
|
} |
||||
|
END() { |
||||
|
this.#extStore.position = ExtStoragePos.END; |
||||
|
return this.#extStore; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Extracted this super class to differentiate between |
||||
|
* internal and external store. |
||||
|
*/ |
||||
|
class ExtStore { |
||||
|
type; |
||||
|
position; |
||||
|
/** |
||||
|
* |
||||
|
* @param {string} type |
||||
|
*/ |
||||
|
constructor(typeName) { |
||||
|
this.type = typeName; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
class InternalExtStore extends ExtStore{ |
||||
|
/** |
||||
|
* |
||||
|
* @param {string} type |
||||
|
*/ |
||||
|
constructor(typeName) { |
||||
|
super(typeName); |
||||
|
this.type = typeName; |
||||
|
this.position = ExtStoragePos.WITHIN; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
class ExtExtStorage extends ExtStore{ |
||||
|
/** |
||||
|
* |
||||
|
* @param {string} type |
||||
|
*/ |
||||
|
constructor(typeName) { |
||||
|
this.type = typeName; |
||||
|
} |
||||
|
|
||||
|
positionedAt() { |
||||
|
return new ExtStoragePositioned(this); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const StoreExtAs = Object.freeze({ |
||||
|
INTERNALIZED: new InternalExtStore(ExtStorageType.INTERNALIZED), |
||||
|
INDIVIDUALLY: new ExtExtStorage(ExtStorageType.INDIVIDUALLY), |
||||
|
COLLECTED: new ExtExtStorage(ExtStorageType.COLLECTED), |
||||
|
CENTRALIZED: new ExtExtStorage(ExtStorageType.CENTRALIZED), |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
const OverwriteBehaviour = Object.freeze({ |
||||
|
REPLACE: 0, |
||||
|
RENAME: 1, |
||||
|
RENAME_OLD: 2 |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
* Resolves an overwrite case for a map/object. |
||||
|
* @param {string} key |
||||
|
* @param {Object} container |
||||
|
* @param {OverwriteBehaviour} overwriteBehaviour |
||||
|
* @returns {string} the key to be used |
||||
|
*/ |
||||
|
function resolveOverwrite(key, container, overwriteBehaviour) { |
||||
|
let occurances = Object.keys(container) |
||||
|
.filter(e => e.includes(key)) |
||||
|
.length; |
||||
|
|
||||
|
switch (overwriteBehaviour) { |
||||
|
case OverwriteBehaviour.REPLACE: |
||||
|
break; |
||||
|
case OverwriteBehaviour.RENAME_OLD: |
||||
|
nameForOld = `${key}${occurances}`; |
||||
|
container[nameForOld] = container[key]; |
||||
|
delete container[key]; |
||||
|
break; |
||||
|
case OverwriteBehaviour.RENAME: |
||||
|
default: |
||||
|
key = `${key}${occurances}`; |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
return key; |
||||
|
} |
||||
@ -0,0 +1,266 @@ |
|||||
|
/** |
||||
|
* This file is part of the jps-like-websites lib |
||||
|
* URL: https://git.labos.goip.de/chris/jpc-like-websites
|
||||
|
* @copyright by its creator Christian Martin |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* Is supposed to shrink all empty strings to length 1 |
||||
|
* @param {Function} func |
||||
|
* @returns {string} |
||||
|
*/ |
||||
|
function clearFunctionDeclarationText(func) { |
||||
|
function shrinkEmptyStrings(text) { |
||||
|
for (let i = 1; i < 10; i++) { |
||||
|
text = text.replaceAll(" ".slice(i), ' '); |
||||
|
} |
||||
|
return text; |
||||
|
} |
||||
|
return shrinkEmptyStrings( |
||||
|
func.toString() |
||||
|
.replaceAll('\n', ' ') |
||||
|
.replaceAll('\r\n', ' ') |
||||
|
.replaceAll('\n\r', ' ') |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function getPageInjectionText(func, registrationName) { |
||||
|
let funcHasName = func.name && func.name.trim() !== ''; |
||||
|
if (func.startWith('function')) { |
||||
|
let label = `function ${registrationName}`; |
||||
|
let isNameInFuncText = func.startWith(label); |
||||
|
if (funcHasName && isNameInFuncText) { |
||||
|
return func; |
||||
|
} else { |
||||
|
return [label, '(', func.split('(', 1)[1]].join('') |
||||
|
} |
||||
|
} else { |
||||
|
return `const ${registrationName} = ${func}; `; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Stores a function until generate is called. |
||||
|
* Then the additional informations of the store wil be applied |
||||
|
* and the funcitons added to the page. |
||||
|
*/ |
||||
|
class FunctionStoreBuffer { |
||||
|
/** |
||||
|
* Stores a function until generate is called. |
||||
|
* Then the additional informations of the store wil be applied |
||||
|
* and the funcitons added to the page. |
||||
|
* @param {Function} func the function that will be stored |
||||
|
* @param {Array<any>} args additional arguments that will be given to the function |
||||
|
* @param {boolean} repeats weither the funciton is supposed to execute repeatedly |
||||
|
* @param {number} interval the time in milliseconds between executions |
||||
|
* @param {boolean} execAfterStart weither the function is supposed to be executed after pageload |
||||
|
* @param {number} delay the time in milliseconds the execution will be delayed |
||||
|
*/ |
||||
|
constructor( |
||||
|
func, |
||||
|
args = [], |
||||
|
repeats = false, |
||||
|
interval = -1, |
||||
|
execAfterStart = false, |
||||
|
delay = -1 |
||||
|
) { |
||||
|
this.func = func; |
||||
|
this.args = args; |
||||
|
this.execAfterStart = execAfterStart; |
||||
|
this.delay = delay; |
||||
|
this.repeats = repeats; |
||||
|
this.interval = interval; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @abstract |
||||
|
* Class adds function and style storing properties to the context (PageBuilder). |
||||
|
*/ |
||||
|
class ScriptAndStyleContext { |
||||
|
/** |
||||
|
* @property {map<string, map<string,string>>} functions |
||||
|
*/ |
||||
|
#css; |
||||
|
/** |
||||
|
* @property {map<string, FunctionStoreBuffer>} functions |
||||
|
*/ |
||||
|
#functions; |
||||
|
|
||||
|
constructor() { |
||||
|
this.#functions = {}; |
||||
|
this.#css = {}; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param {string} nameAddition text that will be added to the end of the generated name |
||||
|
* @returns a name for a function (e.g. for storing) |
||||
|
*/ |
||||
|
getFunctionName(nameAddition = "") { |
||||
|
return `func${this.#functions.length}${nameAddition}`; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 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 {Function} fun The function that will be registered |
||||
|
* @param {string} underTheName (alternative) name for the registration of the function, |
||||
|
* if none the name of the function will be used, if that is missing a name will be generated. |
||||
|
* @param {OverwriteBehaviour} overwriteBehaviour defines what to do, |
||||
|
* if the registration name already exists (default: OverwriteBehaviour.RENAME - adds a nr to the name) |
||||
|
* @returns {string} the name under witch the function is registered (and therefore can be called from) |
||||
|
*/ |
||||
|
registerPageFunction(fun, underTheName = '', overwriteBehaviour = OverwriteBehaviour.RENAME) { |
||||
|
|
||||
|
/* Find name-root */ |
||||
|
let registrationName = [ |
||||
|
underTheName.trim(), |
||||
|
fun.name.trim(), |
||||
|
this.getFunctionName() |
||||
|
].find(e !== ''); |
||||
|
|
||||
|
/* deal with name already present */ |
||||
|
let functionNames = Object.keys(this.#functions); |
||||
|
if (functionNames.includes(registrationName)) { |
||||
|
registrationName = resolveOverwrite(registrationName, this.#functions, overwriteBehaviour); |
||||
|
} |
||||
|
|
||||
|
/* clear function text */ |
||||
|
let clearedFuncText = clearFunctionDeclarationText(fun); |
||||
|
|
||||
|
this.#functions[registrationName] = new FunctionStoreBuffer(clearedFuncText); |
||||
|
|
||||
|
return registrationName; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @experimental Attention is adviced, registration mechanism doesn't work yet |
||||
|
* @param {Function} fun The function that is supposed to be executed repeatedly |
||||
|
* @param {number} interval the time in ms between executions |
||||
|
* @param {string} underTheName the name the interval will be tied to |
||||
|
* @param {OverwriteBehaviour} overwriteBehaviour defines what to do, |
||||
|
* if the registration name already exists (default: OverwriteBehaviour.RENAME - adds a nr to the name) |
||||
|
*/ |
||||
|
registerRepeatingFunction(fun, interval, underTheName = '', overwriteBehaviour = OverwriteBehaviour.RENAME, args = []) { |
||||
|
let registrationName = this.registerPageFunction(fun, underTheName, overwriteBehaviour); |
||||
|
let fsb = this.#functions[registrationName]; |
||||
|
fsb.repeats = true; |
||||
|
fsb.interval = interval; |
||||
|
fsb.args = args; |
||||
|
return registrationName; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* Registeres a function to be executed after page-load |
||||
|
* @param {Function} func the function that will be executed |
||||
|
* @param {number} delay the time in ms the execution is delayed after load |
||||
|
* @param {string} name if provided the function will be registered as well |
||||
|
* @param {Array<any>} args arguments for the function |
||||
|
* @param {boolean} repeat defines if the function is supposed to be repeated as well |
||||
|
* @param {number} interval if the function is supposed to repeat, this defines the interval of repetition |
||||
|
*/ |
||||
|
executeAfterLoad(fun, delay = 1000, underTheName = '', overwriteBehaviour = OverwriteBehaviour.RENAME, interval = -1, args = []) { |
||||
|
let registrationName = this.registerPageFunction(fun, underTheName, overwriteBehaviour); |
||||
|
let fsb = this.#functions[registrationName]; |
||||
|
|
||||
|
fsb.execAfterStart = true; |
||||
|
fsb.delay = delay; |
||||
|
fsb.args = args; |
||||
|
|
||||
|
if (interval > 0) { |
||||
|
fsb.repeats = true; |
||||
|
fsb.interval = interval; |
||||
|
} |
||||
|
|
||||
|
return registrationName; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param {string} nameAddition text that will be added to the end of the generated name |
||||
|
* @returns a name for a styling (e.g. for storing) |
||||
|
*/ |
||||
|
getStyleName(nameAddition = "") { |
||||
|
return `styling${this.#css.length}${nameAddition}`; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 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} elementIdentifier The element identifier |
||||
|
* @param {map<string, string>} styleRuleMap The Styling rules/values |
||||
|
*/ |
||||
|
registerStyling(elementIdentifier, styleRuleMap) { |
||||
|
if (!Object.keys(this.#css).includes(elementIdentifier)) { |
||||
|
this.#css[elementIdentifier] = styleRuleMap |
||||
|
} |
||||
|
return elementIdentifier; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Adds into the (head) document. |
||||
|
* - script tag |
||||
|
* - function tag(s) |
||||
|
* - sets and registers repeatedly executed functions |
||||
|
* - sets (timeout and) functions that are supposed to be executed after load |
||||
|
*/ |
||||
|
generate() { |
||||
|
let head = document.querySelector('head'); |
||||
|
|
||||
|
/* generate style tag and fill it with stored stylings */ |
||||
|
let styleTag = document.createElement('style'); |
||||
|
|
||||
|
Object.entries(this.#css) |
||||
|
.forEach((tuple) => { |
||||
|
styleTag.innerText += `${tuple[0]} {${Object.entries(tuple[1]) |
||||
|
.map(style => style[0] + ": " + style[1] + "; ") |
||||
|
.join(" ") |
||||
|
}} `;
|
||||
|
}); |
||||
|
|
||||
|
head.appendChild(styleTag); |
||||
|
|
||||
|
/* |
||||
|
generate script tag(s) and fill it with stored functions |
||||
|
for now there will be 3 script tags, so interval, execAfterStart and normal functions are sepperated. |
||||
|
*/ |
||||
|
|
||||
|
let containersTag = document.createElement('script'); |
||||
|
containersTag.innerText = 'const delayed = {}; '; |
||||
|
containersTag.innerText += 'const repeated = {}; '; |
||||
|
head.appendChild(containersTag); |
||||
|
|
||||
|
if (this.#functions.length > 0) { |
||||
|
let funcTag = document.createElement('script'); |
||||
|
Object.entries(this.#functions) |
||||
|
.forEach(tuple => { |
||||
|
let regName = tuple[0]; |
||||
|
let fsb = tuple[1]; |
||||
|
funcTag.innerText += getPageInjectionText(fsb.func, regName); |
||||
|
|
||||
|
if (fsb.repeats && !fsb.execAfterStart) { |
||||
|
repeated[regName] = setInterval(regName, fsb.interval, fsb.args); |
||||
|
} |
||||
|
|
||||
|
if (!fsb.repeats && fsb.execAfterStart) { |
||||
|
delayed[regName] = setTimeout(regName, fsb.interval, fsb.args); |
||||
|
} |
||||
|
|
||||
|
if (fsb.repeats && fsb.execAfterStart) { |
||||
|
repeated[regName] = setInterval(regName, fsb.interval, fsb.args); |
||||
|
delayed[regName] = setTimeout(repeated[regName], fsb.delay, fsb.args); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
head.appendChild(funcTag); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
/** |
||||
|
* This file is part of the jps-like-websites lib |
||||
|
* URL: https://git.labos.goip.de/chris/jpc-like-websites
|
||||
|
* @copyright by its creator Christian Martin |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* Wenity := Web Trinity |
||||
|
*/ |
||||
|
class WebTrinity { |
||||
|
/** |
||||
|
* |
||||
|
* @param {HTMLElement|Component} html |
||||
|
* @param {HTMLScriptElement|map<string,FunctionRegistration>} js |
||||
|
* @param {HTMLStyleElement|map<string, map<string,string>>} css |
||||
|
*/ |
||||
|
constructor(html = null, js = null, css = null) { |
||||
|
this.html = html; |
||||
|
this.js = js; |
||||
|
this.css = css; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue