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

DOC,REFA: unified used "imports", updated usage of deprecated methods

dev-feat-component_preview
chris 2 months ago
parent
b9a92a4df2
commit
60776d6fc3
6 changed files with 113 additions and 36 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      src/builder.js
  2. 11
      src/context/framework-controls.js
  3. 26
      src/decorators/border.js
  4. 4
      src/handlers/contextMenu.js
  5. 65
      src/modifier/ChainableModifier.js
  6. 20
      src/modifier/Modifier.js

21
src/builder.js
View File

@ -336,9 +336,7 @@ const builder = {
*/
table: function (attr = {}, modifier = null) {
return builder.genTag("table", attr, modifier)
.chainModifier()
.removeStyleRule("display")
.toComponent();
.modifier(new Modifier().removeStyleRule("display"))
},
/**
@ -381,9 +379,7 @@ const builder = {
*/
tableBody: function (attr = {}, modifier = null) {
return builder.genTag("tbody", attr, modifier)
.chainModifier()
.removeStyleRule("display")
.toComponent();
.modifier(new Modifier().removeStyleRule("display"))
},
/**
@ -394,9 +390,7 @@ const builder = {
*/
tableHead: function (attr = {}, modifier = null) {
return builder.genTag("thead", attr, modifier)
.chainModifier()
.removeStyleRule("display")
.toComponent();
.modifier(new Modifier().removeStyleRule("display"))
},
/**
@ -407,9 +401,7 @@ const builder = {
*/
tableFooter: function (attr = {}, modifier = null) {
return builder.genTag("tfoot", attr, modifier)
.chainModifier()
.removeStyleRule("display")
.toComponent();
.modifier(new Modifier().removeStyleRule("display"))
},
/**
@ -429,10 +421,7 @@ const builder = {
form: function (attr = {}, modifier = null) {
return builder.genTag("form", attr, modifier)
.addStyleClass("flex-container-component")
.chainModifier()
.setStyleRule("flex-direction", "column")
.ensureModifier()
.toComponent()
.modifier(new Modifier().setStyleRule("flex-direction", "column"))
},
/**

11
src/context/framework-controls.js
View File

@ -15,15 +15,12 @@ function frameworkControlPanel(
new Modifier()
.fillMaxWidth()
.background(MaterialFiveHundredlColors.ORANGE)
.dimensions(
new Dimensions()
.height(200)
)
.padding(4)
.border(
new Border(3)
.color(Colors.goldenrod_3)
)
.padding(4)
.dimensions().height(200)
)
.childContext([
builder.column()
@ -35,8 +32,8 @@ function frameworkControlPanel(
.overflow()
.modifier(
new Modifier()
.linkPadding(4).ensureModifier()
.linkBorder(1)
.padding(4)
.border(1)
)
.childContext(
extensions.map(

26
src/decorators/border.js
View File

@ -15,24 +15,50 @@ const LineStyles = Object.freeze({
})
class BorderDefinition {
/**
*
* @param {number} width
* @param {Color} color
* @param {LineStyles} style
*/
constructor(width = 0, color = Colors.black, style = LineStyles.solid) {
this._width = width;
this._color = color;
this._style = style;
}
/**
*
* @param {number} width
* @returns {BorderDefinition}
*/
width(width) {
this._width = width;
return this;
}
/**
*
* @param {Color} color
* @returns {BorderDefinition}
*/
color(color) {
this._color = color;
return this;
}
/**
*
* @param {LineStyles} style
* @returns {BorderDefinition}
*/
style(style) {
this._style = style;
return this;
}
/**
*
* @param {BorderDefinition} def
* @returns {BorderDefinition}
*/
join(def) {
Object.keys(def)
.forEach(key => this[key] = def[key]);

4
src/handlers/contextMenu.js
View File

@ -23,8 +23,8 @@ const DefaultContextMenu = {
menu.style.left = `${refPos.getByIndex(SideDirections.LEFT)}px`;
menu.style.top = `${refPos.getByIndex(SideDirections.TOP)}px`;
toggleElementVisibility(menu, true);
toggleElementVisibility(menu);
helperFun.toggleElementVisibility(menu, true);
helperFun.toggleElementVisibility(menu);
document.addEventListener(
"click",

65
src/modifier/ChainableModifier.js
View File

@ -17,6 +17,71 @@ class ChainableModifier extends Modifier {
this._component = component;
}
/**
* @inheritdoc
* @override
* @returns {ChainableModifier}
*/
fillMaxSize(widthFraction = 1, heightFraction = 1) {
return super.fillMaxSize(widthFraction = 1, heightFraction = 1);
}
/**
* @inheritdoc
* @override
* @returns {ChainableModifier}
*/
fillMaxWidth(fraction = 1) {
return super.fillMaxWidth(fraction = 1);
}
/**
* @inheritdoc
* @override
* @returns {ChainableModifier}
*/
fillMaxHeight(fraction = 1) {
return super.fillMaxHeight(fraction = 1);
}
/**
* @inheritdoc
* @override
* @returns {ChainableModifier}
*/
background(color) {
return super.background(color);
}
/**
* @inheritdoc
* @override
* @returns {ChainableModifier}
*/
color(color) {
return super.color(color);
}
/**
* @inheritdoc
* @override
* @returns {ChainableModifier}
*/
setStyleRule(key, value) {
return super.setStyleRule(key, value);
}
/**
* @inheritdoc
* @override
* @returns {ChainableModifier}
*/
addStyleRuleMap(rulemap) {
return super.addStyleRuleMap(rulemap);
}
/**
* @inheritdoc
* @override
* @returns {ChainableModifier}
*/
removeStyleRule(key) {
return super.removeStyleRule(key);
}
/**
* @inheritdoc
*

20
src/modifier/Modifier.js
View File

@ -28,7 +28,7 @@ class Modifier {
/**
* Sets the modifications for widht and height to 100%.
* @returns {Modifier | ChainableModifier} this modifier object
* @returns {Modifier} this modifier object
*/
fillMaxSize(widthFraction = 1, heightFraction = 1) {
return this.fillMaxWidth(widthFraction)
@ -38,7 +38,7 @@ class Modifier {
/**
* Sets the modification for width to the given fraction of 1 (default 1 := 100%).
* @param {number} fraction
* @returns {Modifier | ChainableModifier} this modifier object
* @returns {Modifier} this modifier object
*/
fillMaxWidth(fraction = 1) {
this._modifications["width"] = (100 * fraction) + "%";
@ -49,7 +49,7 @@ class Modifier {
/**
* Sets the modification for height to the given fraction of 1 (default 1 := 100%).
* @param {number} fraction
* @returns {Modifier | ChainableModifier} this modifier object
* @returns {Modifier} this modifier object
*/
fillMaxHeight(fraction = 1) {
this._modifications["height"] = (100 * fraction) + "%";
@ -199,7 +199,7 @@ class Modifier {
* If no color is given/specified the styling will be set to "inherit"
* and use the color setting from (one of) the parent.
* @param {Color} color
* @returns {Modifier | ChainableModifier} this modifier object
* @returns {Modifier} this modifier object
*/
background(color) {
if (color) {
@ -219,7 +219,7 @@ class Modifier {
* If no color is given/specified the styling will be set to "inherit"
* and use the color setting from (one of) the parent.
* @param {Color} color
* @returns {Modifier | ChainableModifier} this modifier object
* @returns {Modifier} this modifier object
*/
color(color) {
this._modifications["color"] = (
@ -240,7 +240,7 @@ class Modifier {
* @todo finish second parameter "modifications" - logic
*
* @param modifier The "new" Modifier
* @returns {Modifier | ChainableModifier} The "old/current" Modifier,
* @returns {Modifier} The "old/current" Modifier,
* extended with the modifications of the given Modifier.
*/
join(modifier, modifications = {}) {
@ -265,7 +265,7 @@ class Modifier {
*
* @param {string} key a css style rule
* @param {string} value the corresponding value to the css style rule
* @returns {Modifier | ChainableModifier} this modifier object
* @returns {Modifier} this modifier object
*/
setStyleRule(key, value) {
this._modifications[key] = value;
@ -275,7 +275,7 @@ class Modifier {
/**
*
* @param {StylePropertyMap} rulemap
* @returns {Modifier | ChainableModifier}
* @returns {Modifier}
*/
addStyleRuleMap(rulemap) {
for (const ruleKey of Object.keys(rulemap)) {
@ -287,7 +287,7 @@ class Modifier {
/**
*
* @param {string} key
* @returns {Modifier | ChainableModifier} this modifier object
* @returns {Modifier} this modifier object
*/
removeStyleRule(key) {
this._removeMods.push(key);
@ -444,7 +444,7 @@ class Modifier {
/**
*
* @returns {Modifier|ChainableModifier}
* @returns {Modifier}
*/
ensureModifier() {
return this;

Write Preview
Loading…
Cancel
Save