chris
/
jpc-like-websites
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity
Browse Source

MAJOR,REFA: externalized modifier extension classes

dev-feat-component_preview
chris 6 months ago
parent
1b81c4df0e
commit
0209c1012f
4 changed files with 209 additions and 214 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 122
      src/ChainableModifier.js
  2. 123
      src/modifier.js
  3. 87
      src/modifiers/ModificationSubChain.js
  4. 91
      src/modifiers/modificationSubChainMixins.js

122
src/ChainableModifier.js
View File

@ -0,0 +1,122 @@
/**
* @extends Modifier
* @inheritdoc
*/
class ChainableModifier extends Modifier {
/**
* @type {Component}
*/
_component;
/**
*
* @param {Component} component
*/
constructor(component) {
super();
this._component = component;
}
/**
* @inheritdoc
*
* In Case it is called from a ChainableModifier chain,
* the Return type would be DimensionsChainedModifier instead of DimensionsChain.
* @override
* @param {Dimensions | number | undefined} [modify=null] dimensions
* @returns {ChainableModifier | DimensionsChainedModifier}
*/
dimensions(modify = null) {
if (modify instanceof Dimensions || Number.isInteger(modify)) {
return super.dimensions(modify);
}
return new DimensionsChainedModifier(this);
}
/**
* @inheritdoc
* @override
* @param {Padding | number | undefined} [modify=null] modify as in modifiers
* @returns {ChainableModifier | PaddingChainedModifier}
*/
padding(modify = null) {
if (modify instanceof Padding || Number.isInteger(modify)) {
return super.padding(modify);
}
return new PaddingChainedModifier(this);
}
/**
* @inheritdoc
* @override
* @param {Margin | number | undefined} [modify=null] modify as in modifiers
* @returns {ChainableModifier | MarginChainedModifier}
*/
margin(modify = null) {
if (modify instanceof Margin || Number.isInteger(modify)) {
return super.margin(modify);
}
return new MarginChainedModifier(this);
}
/**
* @inheritdoc
*
* @override
* @param {Shape | number | undefined} [modify=null] modify
* @returns {ChainableModifier | ShapeChainedModifier}
*/
clip(modify = null) {
if (modify instanceof Shape || Number.isInteger(modify)) {
return super.clip(modify);
}
return new ShapeChainedModifier(this);
}
/**
*
* @inheritdoc
*
* @override
* @param {Border | number | undefined} [modify=null] modify
* @returns {ChainableModifier | BorderChainedModifier}
*/
border(modify = null) {
if (modify instanceof Border || Number.isInteger(modify)) {
return super.border(modify);
}
return new BorderChainedModifier(this);
}
/**
*
* @returns {Component}
*/
toComponent() {
return this._component.modifier(this);
}
/**
*
* @param {Component|Array<Component>} innerComponent
* @returns {Component} the parent Component
*/
childContext(innerComponent) {
return this._component
.modifier(this)
.childContext(innerComponent);
}
/**
* Calls chainChild() from Component (ChildbearerComponent)
* @see {ChildbearerComponent.chainChild}
* @returns {builder}
*/
chainChild() {
return this._component
.modifier(this)
.chainChild();
}
}

123
src/modifier.js
View File

@ -1,5 +1,3 @@
/** /**
* A chained class that sets most of the stylings of an element * A chained class that sets most of the stylings of an element
* Attributes: * Attributes:
@ -454,125 +452,4 @@ class Modifier {
} }
/**
* @extends Modifier
* @inheritdoc
*/
class ChainableModifier extends Modifier {
/**
* @type {Component}
*/
_component;
/**
*
* @param {Component} component
*/
constructor(component) {
super();
this._component = component;
}
/**
* @inheritdoc
*
* In Case it is called from a ChainableModifier chain,
* the Return type would be DimensionsChainedModifier instead of DimensionsChain.
* @override
* @param {Dimensions | number | undefined} [modify=null] dimensions
* @returns {ChainableModifier | DimensionsChainedModifier}
*/
dimensions(modify = null) {
if (modify instanceof Dimensions || Number.isInteger(modify)) {
return super.dimensions(modify);
}
return new DimensionsChainedModifier(this);
}
/**
* @inheritdoc
* @override
* @param {Padding | number | undefined} [modify=null] modify as in modifiers
* @returns {ChainableModifier | PaddingChainedModifier}
*/
padding(modify = null) {
if (modify instanceof Padding || Number.isInteger(modify)) {
return super.padding(modify);
}
return new PaddingChainedModifier(this);
}
/**
* @inheritdoc
* @override
* @param {Margin | number | undefined} [modify=null] modify as in modifiers
* @returns {ChainableModifier | MarginChainedModifier}
*/
margin(modify = null) {
if (modify instanceof Margin || Number.isInteger(modify)) {
return super.margin(modify);
}
return new MarginChainedModifier(this);
}
/**
* @inheritdoc
*
* @override
* @param {Shape | number | undefined} [modify=null] modify
* @returns {ChainableModifier | ShapeChainedModifier}
*/
clip(modify = null) {
if (modify instanceof Shape || Number.isInteger(modify)) {
return super.clip(modify);
}
return new ShapeChainedModifier(this);
}
/**
*
* @inheritdoc
*
* @override
* @param {Border | number | undefined} [modify=null] modify
* @returns {ChainableModifier | BorderChainedModifier}
*/
border(modify = null) {
if (modify instanceof Border || Number.isInteger(modify)) {
return super.border(modify);
}
return new BorderChainedModifier(this);
}
/**
*
* @returns {Component}
*/
toComponent() {
return this._component.modifier(this);
}
/**
*
* @param {Component|Array<Component>} innerComponent
* @returns {Component} the parent Component
*/
childContext(innerComponent) {
return this._component
.modifier(this)
.childContext(innerComponent);
}
/**
* Calls chainChild() from Component (ChildbearerComponent)
* @see {ChildbearerComponent.chainChild}
* @returns {builder}
*/
chainChild() {
return this._component
.modifier(this)
.chainChild()
}
}

87
src/modifiers/ModificationSubChain.js
View File

@ -0,0 +1,87 @@
/**
* @abstract
*/
class ModificationSubChain {
/**
* @type {Modifier}
*/
_modifier;
/**
* @type {string}
*/
_modMethod;
/**
*
* @param {Modifier} modifier
* @param {string} modMethod
*/
constructor(modifier, modMethod) {
this._modifier = modifier;
this._modMethod = modMethod;
}
/**
* Returns the Modifier SubChain to the Modifier
* @returns {Modifier|ChainableModifier}
*/
toModifier() {
return this._modifier[this._modMethod](this);
}
/**
* Returns chain to the Modifier
* @returns {Modifier|ChainableModifier}
*/
ensureModifier() {
return this.toModifier();
}
}
/**
* @inheritdoc
* @extends ModificationSubChain
* @abstract
*/
class ModificationSubChainReComp extends ModificationSubChain {
/**
*
* @param {ChainableModifier} modifier
* @param {string} modMethod
*/
constructor(modifier) {
super();
this._modifier = modifier;
}
/**
* Returns chain to the component that is under modification
* @returns {Component} the Component that was (supposed to be) modified by this obj.
*/
toComponent() {
return this._modifier[this._modMethod](this)
.toComponent();
}
/**
* Returns chain to the component that is under modification
* and adds the given innerComponent as children to the component.
* @param {Component|Array<Component>} innerComponent
* @returns {Component}
*/
childContext(innerComponent) {
return this._modifier[this._modMethod](this)
.toComponent()
.childContext(innerComponent);
}
/**
* Closes modifier chain and returns builder to define the next child of the component
* @returns {Component}
*/
chainChild() {
return this._modifier[this._modMethod](this)
.toComponent()
.chainChild();
}
}

91
src/modifiers/modificationSubChainMixins.js
View File

@ -1,94 +1,3 @@
/**
* @abstract
*/
class ModificationSubChain {
/**
* @type {Modifier}
*/
_modifier;
/**
* @type {string}
*/
_modMethod;
/**
*
* @param {Modifier} modifier
* @param {string} modMethod
*/
constructor(modifier, modMethod) {
this._modifier = modifier;
this._modMethod = modMethod;
}
/**
* Returns the Modifier SubChain to the Modifier
* @returns {Modifier|ChainableModifier}
*/
toModifier() {
return this._modifier[this._modMethod](this);
}
/**
* Returns chain to the Modifier
* @returns {Modifier|ChainableModifier}
*/
ensureModifier() {
return this.toModifier()
}
}
/**
* @inheritdoc
* @extends ModificationSubChain
* @abstract
*/
class ModificationSubChainReComp extends ModificationSubChain {
/**
*
* @param {ChainableModifier} modifier
* @param {string} modMethod
*/
constructor(modifier) {
super();
this._modifier = modifier;
}
/**
* Returns chain to the component that is under modification
* @returns {Component} the Component that was (supposed to be) modified by this obj.
*/
toComponent() {
return this._modifier[this._modMethod](this)
.toComponent();
}
/**
* Returns chain to the component that is under modification
* and adds the given innerComponent as children to the component.
* @param {Component|Array<Component>} innerComponent
* @returns {Component}
*/
childContext(innerComponent) {
return this._modifier[this._modMethod](this)
.toComponent()
.childContext(innerComponent);
}
/**
* Closes modifier chain and returns builder to define the next child of the component
* @returns {Component}
*/
chainChild() {
return this._modifier[this._modMethod](this)
.toComponent()
.chainChild();
}
}
/** /**
* Function is a mixin to add endings to a Modifier SubChain. * Function is a mixin to add endings to a Modifier SubChain.
* Explicitly used for "link..." methods called from a Modifier, * Explicitly used for "link..." methods called from a Modifier,

Write Preview
Loading…
Cancel
Save