Browse Source
- Moved all files. - dropping TS line of development - split several funcitons/classes into seperate filesmaster 1.2.0
chris
7 months ago
23 changed files with 1321 additions and 594 deletions
@ -0,0 +1,37 @@ |
|||
/** |
|||
* Enum providing common alignment rules |
|||
*/ |
|||
const Alignment = Object.freeze({ |
|||
/* Normal alignment */ |
|||
NORMAL: "normal", |
|||
|
|||
/* Basic positional alignment */ |
|||
/* align-content does not take left and right values */ |
|||
START: "start", |
|||
CENTER: "center", |
|||
END: "end", |
|||
FLEX_START: "flex-start", |
|||
FLEX_END: "flex-end", |
|||
|
|||
/* Baseline alignment */ |
|||
BASELINE: "baseline", |
|||
FIRST_BASELINE: "first baseline", |
|||
LAST_BASELINE: "last baseline", |
|||
|
|||
/* Distributed alignment */ |
|||
SPACE_BETWEEN: "space-between", |
|||
SPACE_AROUND: "space-around", |
|||
SPACE_EVENLY: "space-evenly", |
|||
STRETCH: "stretch", |
|||
|
|||
/* Overflow alignment */ |
|||
SAFE_CENTER: "safe center", |
|||
UNSAFE_CENTER: "unsafe center", |
|||
|
|||
/* Global values */ |
|||
INHERIT: "inherit", |
|||
INITIAL: "initial", |
|||
REVERT: "revert", |
|||
REVERT_LAYER: "revert-layer", |
|||
UNSET: "unset" |
|||
}) |
|||
@ -0,0 +1,12 @@ |
|||
/** |
|||
* Enum providing common alignment rules |
|||
*/ |
|||
const Arrangement = Object.freeze({ |
|||
START: "start", |
|||
END: "end", |
|||
CENTER: "center", |
|||
SPACE_BETWEEN: "space-between", |
|||
SPACE_EVENLY: "space-evenly", |
|||
SPACE_AROUND: "space-around", |
|||
|
|||
}) |
|||
@ -0,0 +1,100 @@ |
|||
/** |
|||
* Represents container Components. |
|||
* Some predefined modifications are applied on the child components. |
|||
*/ |
|||
class FlexContainerComponent extends Component { |
|||
constructor(attr = {}) { |
|||
super(document.createElement("div"), attr) |
|||
.addStyleClass("flex-container-component") |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {Component|Array<Component>} innerComponent |
|||
* @returns {FlexContainerComponent} this component object |
|||
*/ |
|||
componentChildren(innerComponent) { |
|||
if (innerComponent instanceof Array) { |
|||
innerComponent |
|||
.map(cl => { |
|||
if (cl instanceof Component) { |
|||
return cl |
|||
} else { |
|||
return cl.ensureModifier().toComponent() |
|||
} |
|||
}) |
|||
.forEach(icomp => { |
|||
icomp._modifier = new Modifier() |
|||
.setStyleRule("flex", "none") |
|||
.join(icomp._modifier) |
|||
|
|||
}) |
|||
} |
|||
return super.componentChildren(innerComponent); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* A FlexContainerComponent, which organizes the children in a column like manner. |
|||
*/ |
|||
class Column extends FlexContainerComponent { |
|||
constructor(attr = {}) { |
|||
super(document.createElement("div"), attr) |
|||
.addStyleClass("column-component") |
|||
.modifier( |
|||
new Modifier() |
|||
.fillMaxHeight() |
|||
.setStyleRule("flex-direction", "column") |
|||
); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* A FlexContainerComponent, which organizes the children in a row like manner. |
|||
*/ |
|||
class Row extends FlexContainerComponent { |
|||
constructor(attr = {}) { |
|||
super(attr) |
|||
.addStyleClass("row-component") |
|||
.modifier( |
|||
new Modifier() |
|||
.fillMaxWidth() |
|||
.setStyleRule("flex-direction", "row") |
|||
) |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {*} innerComponent |
|||
* @returns {Row} |
|||
*/ |
|||
componentChildren(innerComponent) { |
|||
if (innerComponent instanceof Array) { |
|||
innerComponent |
|||
.map(cl => (cl instanceof Component ? cl : cl.ensureModifier().toComponent())) |
|||
.forEach((icomp, i) => { |
|||
/* sets the width for all elements, |
|||
to avoid overlapping or line break because of lacking width, |
|||
a percent is subtracted for every child element */ |
|||
/* To enable "override" a new Modifier is generated and joined |
|||
with the modifier of the component */ |
|||
icomp._modifier = new Modifier() |
|||
.setStyleRule("float", (i === 0 ? "left" : "right")) |
|||
.join(icomp._modifier) |
|||
}) |
|||
} |
|||
return super.componentChildren(innerComponent) |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {Row} |
|||
*/ |
|||
distibuteSpacingEvenly() { |
|||
this._element.children.forEach(child => { |
|||
child.style["width"] = (100 / innerComponent.length); |
|||
}) |
|||
return this; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,211 @@ |
|||
const builder = { |
|||
components: { |
|||
parent: {}, |
|||
current: {}, |
|||
previous: {}, |
|||
next: {}, |
|||
openedChain: {} |
|||
}, |
|||
|
|||
/** |
|||
* |
|||
* @param {string} tag |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr); }, |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
anchor: function (attr = {}) { return builder.genTag("a", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
label: function (attr = {}) { return builder.genTag("label", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
button: function (attr = {}) { return builder.genTag("button", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
input: function (attr = {}) { return builder.genTag("input", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
div: function (attr = {}) { return builder.genTag("div", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
paragraph: function (attr = {}) { return builder.genTag("paragraph", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
checkbox: function (attr = {}) { return builder.input({ "type": "checkbox" }) }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
select: function (attr = {}) { return builder.genTag("select", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
option: function (attr = {}) { return builder.genTag("option", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
select: function (attr = {}) { return builder.genTag("select", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
icon: function (attr = {}) { return builder.genTag("icon", attr); }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
img: function (attr = {}) { return builder.genTag("img", attr); }, |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
textarea: function (attr = {}) { return builder.genTag("textarea", attr); }, |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
table: function (attr = {}) { return builder.genTag("table", attr) }, |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
tableRow: function (attr = {}) { return builder.genTag("tr", attr) }, |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
tableCell: function (attr = {}) { return builder.genTag("td", attr) }, |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
tableCaption: function (attr = {}) { return builder.genTag("caption", attr) }, |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) }, |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
tableBody: function (attr = {}) { return builder.genTag("tbody", attr) }, |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
tableHead: function (attr = {}) { return builder.genTag("thead", attr) }, |
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) }, |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<string,string>} attr |
|||
* @returns {Component} |
|||
*/ |
|||
form: function (attr = {}) { |
|||
return builder.genTag("form", attr) |
|||
.addStyleClass("flex-container-component") |
|||
.chainModifier() |
|||
.setStyleRule("flex-direction", "column") |
|||
.ensureModifier() |
|||
.toComponent() |
|||
}, |
|||
|
|||
/** |
|||
* |
|||
* @param {*} attr |
|||
* @returns {Row} |
|||
*/ |
|||
row: function (attr = {}) { return new Row(attr) }, |
|||
|
|||
/** |
|||
* |
|||
* @param {*} attr |
|||
* @returns {Column} |
|||
*/ |
|||
column: function (attr = {}) { return new Column(attr) }, |
|||
|
|||
/** |
|||
* |
|||
* @param {*} innerComponents |
|||
*/ |
|||
page: function (innerComponents) { |
|||
Page.generate(); |
|||
let main = document.querySelector('main') |
|||
|
|||
main.parentElement.insertAdjacentElement( |
|||
"afterbegin", |
|||
builder.genTag("main") |
|||
.alignment(Alignment.CENTER) |
|||
.arrangement(Arrangement.CENTER) |
|||
.componentChild(innerComponents) |
|||
.generate() |
|||
) |
|||
main.remove(); |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
/** |
|||
* Enum to access common events |
|||
*/ |
|||
const CommonEvents = Object.freeze({ |
|||
ONCLICK: "onClick", |
|||
}) |
|||
|
|||
@ -0,0 +1,69 @@ |
|||
/** |
|||
* The class provides overreaching options for building the website. |
|||
*/ |
|||
class PageBuilder { |
|||
#cssClasses; |
|||
#functions; |
|||
#functionNames; |
|||
#cssElementIdentifiers; |
|||
|
|||
constructor() { |
|||
this.#cssClasses = document.createElement("style"); |
|||
this.#functions = document.createElement("script"); |
|||
this.#functionNames = []; |
|||
this.#cssElementIdentifiers = []; |
|||
} |
|||
|
|||
/** |
|||
* Registers a function to be added later in a script tag in the head of the document. |
|||
* @param {string} name |
|||
* @param {func} fun |
|||
*/ |
|||
registerFunction(name, fun) { |
|||
if (!this.#functionNames.includes(name)) { |
|||
this.#functions.innerText += `const ${name} = ${fun}`; |
|||
this.#functionNames.push(name); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 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} elementDefinition The element identifier |
|||
* @param {Map<string, string>} styleRuleMap The Styling rules/values |
|||
*/ |
|||
registerStyling(elementDefinition, styleRuleMap) { |
|||
if (!this.#cssElementIdentifiers.includes(elementDefinition)) { |
|||
this.#cssClasses.innerText += `${elementDefinition |
|||
} {${Object.keys(styleRuleMap) |
|||
.map(e => e + ": " + styleRuleMap[e] + "; ") |
|||
.join(" ") |
|||
}} ` |
|||
this.#cssElementIdentifiers.push(elementDefinition) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Adds a script tag into the head of the document. |
|||
*/ |
|||
generate() { |
|||
let head = document.querySelector("head"); |
|||
head.appendChild(this.#functions) |
|||
head.appendChild(this.#cssClasses) |
|||
} |
|||
|
|||
inDev() { |
|||
let head = document.querySelector("head"); |
|||
let meta = document.createElement("meta"); |
|||
meta.setAttribute("http-equiv", "refresh"); |
|||
meta.setAttribute("content", "20"); |
|||
|
|||
head.insertAdjacentElement("beforeend", meta); |
|||
this.#functions.innerText = ` |
|||
let ts = new Date(); |
|||
console.log("Refreshed at: ", ts.getHours()+':'+ts.getMinutes()+':'+ts.getSeconds()); |
|||
`;
|
|||
} |
|||
} |
|||
|
|||
const Page = new PageBuilder(); |
|||
@ -1,89 +0,0 @@ |
|||
/** |
|||
* Represents container Components. |
|||
* Some predefined modifications are applied on the child components. |
|||
*/ |
|||
class FlexContainerComponent extends Component { |
|||
constructor(attr = {}) { |
|||
super(document.createElement("div"), attr) |
|||
.addStyleClass("flex-container-component") |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {Component|Array<Component>} innerComponent |
|||
* @returns this component object |
|||
*/ |
|||
childComponents(innerComponent) { |
|||
if (innerComponent instanceof Array) { |
|||
innerComponent.forEach(icomp => { |
|||
(icomp instanceof Component |
|||
? icomp |
|||
: icomp.backToComponent() |
|||
) |
|||
.chainModifier() |
|||
.setStyleRule("flex", "none") |
|||
|
|||
}) |
|||
} else if (!innerComponent instanceof Component) { |
|||
innerComponent |
|||
.backToComponent() |
|||
.chainModifier() |
|||
.setStyleRule("flex", "none") |
|||
} |
|||
return super.childComponents(innerComponent); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* A FlexContainerComponent, which organizes the children in a column like manner. |
|||
*/ |
|||
class Column extends FlexContainerComponent { |
|||
constructor(attr = {}) { |
|||
super(document.createElement("div"), attr) |
|||
.addStyleClass("column-component") |
|||
.modifier( |
|||
new Modifier() |
|||
.fillMaxHeight() |
|||
.setStyleRule("flex-direction", "column") |
|||
); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* A FlexContainerComponent, which organizes the children in a row like manner. |
|||
*/ |
|||
class Row extends FlexContainerComponent { |
|||
constructor(attr = {}) { |
|||
super(attr) |
|||
.addStyleClass("row-component") |
|||
.modifier( |
|||
new Modifier() |
|||
.fillMaxWidth() |
|||
.setStyleRule("flex-direction", "row") |
|||
) |
|||
} |
|||
|
|||
childComponents(innerComponent) { |
|||
if (innerComponent instanceof Array) { |
|||
innerComponent.forEach((icomp, i) => { |
|||
(icomp instanceof Component |
|||
? icomp |
|||
: icomp.backToComponent() |
|||
).modifier( |
|||
/* sets the width for all elements, |
|||
to avoid overlapping or line break because of lacking width, |
|||
a percent is subtracted for every child element */ |
|||
new Modifier() |
|||
.setStyleRule("float", (i === 0 ? "left" : "right")) |
|||
.fillMaxWidth((Math.floor((10000 - 100 * innerComponent.length) / innerComponent.length) / 10000)) |
|||
) |
|||
}) |
|||
} else { |
|||
innerComponent.modifier( |
|||
new Modifier() |
|||
.setStyleRule("flex", "none") |
|||
) |
|||
} |
|||
return super.childComponents(innerComponent) |
|||
} |
|||
} |
|||
@ -1,44 +0,0 @@ |
|||
const builder = { |
|||
components: { |
|||
parent: {}, |
|||
current: {}, |
|||
previous: {}, |
|||
next: {}, |
|||
openedChain: {} |
|||
}, |
|||
|
|||
genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr); }, |
|||
|
|||
anchor: function (attr = {}) { return builder.genTag("a", attr); }, |
|||
label: function (attr = {}) { return builder.genTag("label", attr); }, |
|||
button: function (attr = {}) { return builder.genTag("button", attr); }, |
|||
input: function (attr = {}) { return builder.genTag("input", attr); }, |
|||
div: function (attr = {}) { return builder.genTag("div", attr); }, |
|||
paragraph: function (attr = {}) { return builder.genTag("paragraph", attr); }, |
|||
header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); }, |
|||
checkbox: function (attr = {}) { return builder.genTag("checkbox", attr); }, |
|||
selection: function (attr = {}) { return builder.genTag("selection", attr); }, |
|||
option: function (attr = {}) { return builder.genTag("option", attr); }, |
|||
section: function (attr = {}) { return builder.genTag("section", attr); }, |
|||
radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); }, |
|||
icon: function (attr = {}) { return builder.genTag("icon", attr); }, |
|||
img: function (attr = {}) { return builder.genTag("img", attr); }, |
|||
textarea: function (attr = {}) { return builder.genTag("textarea", attr); }, |
|||
|
|||
table: function (attr = {}) { return builder.genTag("table", attr) }, |
|||
tableRow: function (attr = {}) { return builder.genTag("tr", attr) }, |
|||
tableCell: function (attr = {}) { return builder.genTag("td", attr) }, |
|||
tableCaption: function (attr = {}) { return builder.genTag("caption", attr) }, |
|||
tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) }, |
|||
tableBody: function (attr = {}) { return builder.genTag("tbody", attr) }, |
|||
tableHead: function (attr = {}) { return builder.genTag("thead", attr) }, |
|||
tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) }, |
|||
|
|||
|
|||
row: function (attr = {}) { return new Row(attr) }, |
|||
column: function (attr = {}) { return new Column(attr) }, |
|||
page: function (innerComponents) { |
|||
Page.generate(); |
|||
document.querySelector('main').appendChild(innerComponents.generate()) |
|||
} |
|||
} |
|||
@ -1,212 +0,0 @@ |
|||
/** |
|||
* Enum to access common events |
|||
*/ |
|||
const CommonEvents = Object.freeze({ |
|||
ONCLICK: "onClick", |
|||
}) |
|||
|
|||
|
|||
/** |
|||
* Simple Dimensions container for the height and width in pixels. |
|||
*/ |
|||
class Dimensions { |
|||
#x; |
|||
#y; |
|||
|
|||
/** |
|||
* Sets width (x) value of pixels |
|||
* @param {number} pixels |
|||
* @returns this Dimensions Modifier |
|||
*/ |
|||
width(pixels) { |
|||
this.#x = pixels; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets height (y) value of pixels |
|||
* @param {number} pixels |
|||
* @returns this Dimensions Modifier |
|||
*/ |
|||
height(pixels) { |
|||
this.#y = pixels; |
|||
return this; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* The Class holds values from each side/direction of an element. |
|||
* Used for margin/padding. |
|||
*/ |
|||
class Siding { |
|||
pxLeft = 0; |
|||
pxRight = 0; |
|||
pxTop = 0; |
|||
pxBottom = 0; |
|||
|
|||
/** |
|||
* sets the pixels-value for all sides. |
|||
* @param {number} pixels siding from all sides |
|||
* @returns this Siding Object |
|||
*/ |
|||
all(pixels) { |
|||
this.pxLeft = pixels; |
|||
this.pxRight = pixels; |
|||
this.pxTop = pixels; |
|||
this.pxBottom = pixels; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the pixels-value for the horizontal sides (left and right). |
|||
* @param {number} pixels siding for left and right. |
|||
* @returns this Siding Object |
|||
*/ |
|||
horizontal(pixels) { |
|||
this.pxLeft = pixels; |
|||
this.pxRight = pixels; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the pixels-value for the vertical sides (left and right). |
|||
* @param {number} pixels siding for top and bottom. |
|||
* @returns this Siding Object |
|||
*/ |
|||
vertical(pixels) { |
|||
this.pxTop = pixels; |
|||
this.pxBottom = pixels; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the pixels-value for the left side. |
|||
* @param {number} pixels siding for left |
|||
* @returns this Siding Object |
|||
*/ |
|||
left(pixels) { |
|||
this.pxLeft = pixels; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the pixels-value for the right side. |
|||
* @param {number} pixels siding for right |
|||
* @returns this Siding Object |
|||
*/ |
|||
right(pixels) { |
|||
this.pxRight = pixels; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the pixels-value for the top side. |
|||
* @param {number} pixels siding for top |
|||
* @returns this Siding Object |
|||
*/ |
|||
top(pixels) { |
|||
this.pxTop = pixels; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the pixels-value for the bottom side. |
|||
* @param {number} pixels siding for bottom |
|||
* @returns this Siding Object |
|||
*/ |
|||
bottom(pixels) { |
|||
this.pxBottom = pixels; |
|||
return this; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Enum providing common alignment rules |
|||
*/ |
|||
const Alignment = Object.freeze({ |
|||
BEGIN_BORDER: 0, |
|||
CENTER: 1, |
|||
END_BORDER: 2, |
|||
}) |
|||
|
|||
/** |
|||
* Enum providing common alignment rules |
|||
*/ |
|||
const Arrangement = Object.freeze({ |
|||
START: 0, |
|||
END: 1, |
|||
CENTER: 2, |
|||
SPACE_BETWEEN: 3, |
|||
SPACE_EVENLY: 4, |
|||
SPACE_AROUND: 5, |
|||
}) |
|||
|
|||
|
|||
class ChainableDimensions extends Dimensions { |
|||
#modifier; |
|||
constructor(modifier) { |
|||
super(); |
|||
this.#modifier = modifier; |
|||
} |
|||
|
|||
backToModifier() { |
|||
return this.#modifier; |
|||
} |
|||
|
|||
backToComponent() { |
|||
return this.#modifier.backToComponent(); |
|||
} |
|||
|
|||
componentChild(innerComponent) { |
|||
return this.#modifier.backToComponent() |
|||
.child(innerComponent); |
|||
} |
|||
|
|||
componentChildComponents(innerComponent) { |
|||
return this.#modifier.backToComponent() |
|||
.childComponents(innerComponent); |
|||
} |
|||
} |
|||
|
|||
class ChainableSiding extends Siding { |
|||
#modifier; |
|||
constructor(modifier) { |
|||
super(); |
|||
this.#modifier = modifier; |
|||
} |
|||
|
|||
backToModifier() { |
|||
return this.#modifier; |
|||
} |
|||
|
|||
backToComponent() { |
|||
return this.#modifier.backToComponent(); |
|||
} |
|||
|
|||
|
|||
|
|||
componentChild(innerComponent) { |
|||
return this.#modifier |
|||
.backToComponent() |
|||
.child(innerComponent); |
|||
} |
|||
|
|||
componentChildComponents(innerComponent) { |
|||
return this.#modifier |
|||
.backToComponent() |
|||
.childComponents(innerComponent); |
|||
} |
|||
} |
|||
|
|||
const LineStyles = Object.freeze({ |
|||
dotted: 0, |
|||
dashed: 1, |
|||
solid: 2, |
|||
double: 3, |
|||
groove: 4, |
|||
ridge: 5, |
|||
inset: 6, |
|||
outset: 7, |
|||
none: 8, |
|||
hidden: 9 |
|||
}) |
|||
@ -1,32 +0,0 @@ |
|||
/** |
|||
* The class provides overreaching options for building the website. |
|||
*/ |
|||
class PageBuilder { |
|||
#cssClasses; |
|||
#functions; |
|||
|
|||
constructor() { |
|||
this.#cssClasses = document.createElement("style"); |
|||
this.#functions = document.createElement("script"); |
|||
} |
|||
|
|||
/** |
|||
* Registers a function to be added later in a script tag in the head of the document. |
|||
* @param {string} name |
|||
* @param {func} fun |
|||
*/ |
|||
registerFunction(name, fun) { |
|||
this.#functions.innerText += `const ${name} = ${fun}`; |
|||
} |
|||
|
|||
/** |
|||
* Adds a script tag into the head of the document. |
|||
*/ |
|||
generate() { |
|||
document.querySelector("head") |
|||
.appendChild(this.#functions) |
|||
} |
|||
|
|||
} |
|||
|
|||
const Page = new PageBuilder(); |
|||
@ -1,179 +0,0 @@ |
|||
/** |
|||
* A chained class that sets most of the stylings of an element. |
|||
*/ |
|||
class Modifier { |
|||
modifications = {}; |
|||
|
|||
constructor() { |
|||
this.modifications = new Object(); |
|||
} |
|||
|
|||
/** |
|||
* Sets the modifications for widht and height to 100%. |
|||
* @returns this modifier object |
|||
*/ |
|||
fillMaxSize() { |
|||
this.modifications["width"] = "100%"; |
|||
this.modifications["height"] = "100%"; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the modification for width to 100%. |
|||
* @param {number} fraction |
|||
* @returns this modifier object |
|||
*/ |
|||
fillMaxWidth(fraction) { |
|||
this.modifications["width"] = (100 * fraction) + "%"; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the modification for height to 100%. |
|||
* @param {number} fraction |
|||
* @returns this modifier object |
|||
*/ |
|||
fillMaxHeight(fraction) { |
|||
this.modifications["height"] = (100 * fraction) + "%"; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets modifications according to the dimensions object. |
|||
* @param {Dimensions} dimensions |
|||
* @returns this modifier object |
|||
*/ |
|||
size(dimensions) { |
|||
this.modifications["height"] = dimensions.height + "px"; |
|||
this.modifications["width"] = dimensions.width + "px"; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the padding on all sides according to the given siding object. |
|||
* Currently the padding will always be set |
|||
* to the most recent padding/siding. |
|||
* @param {Siding} siding |
|||
* @returns this modifier object |
|||
*/ |
|||
padding(siding) { |
|||
this.modifications["padding-right"] = siding.pxRight + "px"; |
|||
this.modifications["padding-left"] = siding.pxLeft + "px"; |
|||
this.modifications["padding-top"] = siding.pxTop + "px"; |
|||
this.modifications["padding-bottom"] = siding.pxBottom + "px"; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the margin on all sides according to the given siding object. |
|||
* Currently the margin will always be set |
|||
* to the most recent margin/siding. |
|||
* @param {Siding} siding |
|||
* @returns this modifier object |
|||
*/ |
|||
margin(siding) { |
|||
this.modifications["margin-right"] = siding.pxRight + "px"; |
|||
this.modifications["margin-left"] = siding.pxLeft + "px"; |
|||
this.modifications["margin-top"] = siding.pxTop + "px"; |
|||
this.modifications["margin-bottom"] = siding.pxBottom + "px"; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the background-color as a rgb color. |
|||
* @param {Color} color |
|||
* @returns this modifier object |
|||
*/ |
|||
background(color) { |
|||
this.modifications["background-color"] = color.cssRGBString(); |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the color as a rgb color. |
|||
* @param {Color} color |
|||
* @returns this modifier object |
|||
*/ |
|||
color(color) { |
|||
this.modifications["color"] = color.cssRGBString(); |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Adds the modifications of the given Modifier to current Modifier. |
|||
* This is especailly used in the cases of extending existing/pre defined |
|||
* Components. |
|||
* CAUTION matching existing modifications will be ignored. |
|||
* @param modifier The "new" Modifier |
|||
* @returns The "old/current" Modifier, |
|||
* extended with the modifications of the given Modifier. |
|||
*/ |
|||
join(modifier, modifications = {}) { |
|||
var keys = Object.keys(modifier.modifications); |
|||
for (let i = 0; i < keys.length; i++) { |
|||
if (!this.modifications.hasOwnProperty(keys[i])) |
|||
this.modifications[keys[i]] = modifier.modifications[keys[i]]; |
|||
} |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {string} key a css style rule |
|||
* @param {string} value the corresponding value to the css style rule |
|||
* @returns this modifier object |
|||
*/ |
|||
setStyleRule(key, value) { |
|||
this.modifications[key] = value; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* 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]. |
|||
* @param {LineStyles|Array<LineStyles>} lineStyle the style of the border line |
|||
* @returns this modifier object |
|||
*/ |
|||
border(lineStyle, width = 1, color = Colors.black) { |
|||
var lstyle = (lineStyle instanceof Array |
|||
? lineStyle.join(" ") |
|||
: lineStyle); |
|||
this.modifications["border"] = `${width}px ${lstyle} ${color.cssRGBString}`; |
|||
return this; |
|||
} |
|||
|
|||
} |
|||
|
|||
class ChainableModifier extends Modifier { |
|||
_component; |
|||
|
|||
constructor(component) { |
|||
super(); |
|||
this._component = component; |
|||
} |
|||
|
|||
backToComponent() { |
|||
return this._component.modifier(this); |
|||
} |
|||
|
|||
chainSize() { |
|||
return new ChainableDimensions(this); |
|||
} |
|||
|
|||
chainPaddingSiding() { |
|||
return new ChainableSiding(this); |
|||
} |
|||
|
|||
componentChild(innerComponent) { |
|||
return this._component |
|||
.modifier(this) |
|||
.child(innerComponent); |
|||
} |
|||
|
|||
componentChildComponents(innerComponent) { |
|||
return this._component |
|||
.modifier(this) |
|||
.childComponents(innerComponent); |
|||
} |
|||
} |
|||
@ -0,0 +1,255 @@ |
|||
/** |
|||
* A chained class that sets most of the stylings of an element. |
|||
*/ |
|||
class Modifier { |
|||
_modifications; |
|||
|
|||
constructor() { |
|||
this._modifications = new Object(); |
|||
} |
|||
|
|||
/** |
|||
* Sets the modifications for widht and height to 100%. |
|||
* @returns {Modifier} this modifier object |
|||
*/ |
|||
fillMaxSize(widthFraction = 1, heightFraction = 1) { |
|||
this.fillMaxWidth(widthFraction); |
|||
return this.fillMaxHeight(heightFraction); |
|||
} |
|||
|
|||
/** |
|||
* Sets the modification for width to 100%. |
|||
* @param {number} fraction |
|||
* @returns {Modifier} this modifier object |
|||
*/ |
|||
fillMaxWidth(fraction = 1) { |
|||
this._modifications["width"] = (100 * fraction) + "%"; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the modification for height to 100%. |
|||
* @param {number} fraction |
|||
* @returns {Modifier} this modifier object |
|||
*/ |
|||
fillMaxHeight(fraction = 1) { |
|||
this._modifications["height"] = (100 * fraction) + "%"; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets modifications according to the dimensions object. |
|||
* @param {Dimensions} dimensions |
|||
* @returns {Modifier} this modifier object |
|||
*/ |
|||
dimensions(dimensions) { |
|||
if (dimensions._fFirst > 0) { |
|||
this._modifications["width"] = dimensions.getBySidingRef(SidingRefDimensions.WIDTH) + dimensions._unit; |
|||
} |
|||
if (dimensions._fSecond > 0) { |
|||
this._modifications["height"] = dimensions.getBySidingRef(SidingRefDimensions.HEIGHT) + dimensions._unit; |
|||
} |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the padding on all sides according to the given padding object. |
|||
* Currently the padding will always be set |
|||
* to the most recent padding/padding. |
|||
* @param {Sides} siding |
|||
* @returns {Modifier} this modifier object |
|||
*/ |
|||
padding(siding) { |
|||
this._modifications["padding-right"] = siding.getSidingRefValueMap()[SidingRefSides.RIGHT] + siding._unit; |
|||
this._modifications["padding-left"] = siding.getSidingRefValueMap()[SidingRefSides.LEFT] + siding._unit; |
|||
this._modifications["padding-top"] = siding.getSidingRefValueMap()[SidingRefSides.TOP] + siding._unit; |
|||
this._modifications["padding-bottom"] = siding.getSidingRefValueMap()[SidingRefSides.BOTTOM] + siding._unit; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the margin on all sides according to the given siding object. |
|||
* Currently the margin will always be set |
|||
* to the most recent margin/siding. |
|||
* @param {Sides} siding |
|||
* @returns {Modifier} this modifier object |
|||
*/ |
|||
margin(siding) { |
|||
this._modifications["margin-right"] = siding.getSidingRefValueMap()[SidingRefSides.RIGHT] + siding._unit; |
|||
this._modifications["margin-left"] = siding.getSidingRefValueMap()[SidingRefSides.LEFT] + siding._unit; |
|||
this._modifications["margin-top"] = siding.getSidingRefValueMap()[SidingRefSides.TOP] + siding._unit; |
|||
this._modifications["margin-bottom"] = siding.getSidingRefValueMap()[SidingRefSides.BOTTOM] + siding._unit; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the background-color as a rgb color. |
|||
* @param {Color} color |
|||
* @returns {Modifier} this modifier object |
|||
*/ |
|||
background(color) { |
|||
this._modifications["background-color"] = color.cssRGBString(); |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the color as a rgb color. |
|||
* @param {Color} color |
|||
* @returns {Modifier} this modifier object |
|||
*/ |
|||
color(color) { |
|||
this._modifications["color"] = color.cssRGBString(); |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Adds the modifications of the given Modifier to current Modifier. |
|||
* This is especailly used in the cases of extending existing/pre defined |
|||
* Components. |
|||
* CAUTION matching existing modifications will be overwritten. |
|||
* @param modifier The "new" Modifier |
|||
* @returns {Modifier} The "old/current" Modifier, |
|||
* extended with the modifications of the given Modifier. |
|||
*/ |
|||
join(modifier, modifications = {}) { |
|||
var keys = Object.keys(modifier.ensureModifier()._modifications); |
|||
for (let i = 0; i < keys.length; i++) { |
|||
/* if (!this._modifications.hasOwnProperty(keys[i])) */ |
|||
this._modifications[keys[i]] = modifier.ensureModifier()._modifications[keys[i]]; |
|||
} |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {string} key a css style rule |
|||
* @param {string} value the corresponding value to the css style rule |
|||
* @returns {Modifier} this modifier object |
|||
*/ |
|||
setStyleRule(key, value) { |
|||
this._modifications[key] = value; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* 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]. |
|||
* @param {Border} border the style of the border line |
|||
* @returns {Modifier} this modifier object |
|||
*/ |
|||
border(border) { |
|||
console.log(border); |
|||
this._modifications["border"] = border._width + border._unit; |
|||
this._modifications["border-style"] = border._sidingStyles.getOrderedValues().join(' '); |
|||
this._modifications["border-color"] = border._color.cssRGBString(); |
|||
this.clip(border) |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {Shape} shape |
|||
* @returns {Modifier} |
|||
*/ |
|||
clip(shape) { |
|||
this._modifications["border-radius"] = shape.getOrderedValues().join(' '); |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {DimensionsChain} |
|||
*/ |
|||
linkDimensions() { |
|||
return new DimensionsChain(this); |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {PaddingChain} |
|||
*/ |
|||
linkPadding() { |
|||
return new PaddingChain(this); |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {ShapeChain} |
|||
*/ |
|||
linkClip() { |
|||
return new ShapeChain(this); |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {Modifier} |
|||
*/ |
|||
ensureModifier() { |
|||
return this; |
|||
} |
|||
|
|||
} |
|||
|
|||
class ChainableModifier extends Modifier { |
|||
_component; |
|||
|
|||
constructor(component) { |
|||
super(); |
|||
this._component = component; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {ChainableDimensions} |
|||
*/ |
|||
linkDimensions() { |
|||
return new ChainableDimensions(this); |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {ChainablePadding} |
|||
*/ |
|||
linkPadding() { |
|||
return new ChainablePadding(this); |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {ChainableShape} |
|||
*/ |
|||
linkClip() { |
|||
return new ChainableShape(this); |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {Component} |
|||
*/ |
|||
toComponent() { |
|||
return this._component.modifier(this); |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {Component} innerComponent |
|||
* @returns {Component} the parent Component |
|||
*/ |
|||
componentChild(innerComponent) { |
|||
return this._component |
|||
.modifier(this) |
|||
.componentChild(innerComponent); |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {Array<Component>} innerComponent |
|||
* @returns {Component} the parent Component |
|||
*/ |
|||
componentChildren(innerComponent) { |
|||
return this._component |
|||
.modifier(this) |
|||
.componentChildren(innerComponent); |
|||
} |
|||
} |
|||
@ -0,0 +1,98 @@ |
|||
|
|||
const SidingRefDimensions = Object.freeze({ |
|||
WIDTH: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fFirst, |
|||
HEIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fSecond |
|||
}) |
|||
|
|||
/** |
|||
* Simple Dimensions container for the height and width in pixels. |
|||
*/ |
|||
class Dimensions extends SideUnitDependentAttribute { |
|||
constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { |
|||
super(); |
|||
this._unit = defaultUnit; |
|||
this._fFirst = defaultValue; |
|||
this._fSecond = defaultValue; |
|||
} |
|||
|
|||
/** |
|||
* Sets width (x) value of amount |
|||
* @param {number} amount |
|||
* @returns {Dimensions} this Dimensions Modifier |
|||
*/ |
|||
width(amount) { |
|||
this._fFirst = amount; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets height (y) value of amount |
|||
* @param {number} amount |
|||
* @returns {Dimensions} this Dimensions Modifier |
|||
*/ |
|||
height(amount) { |
|||
this._fSecond = amount; |
|||
return this; |
|||
} |
|||
|
|||
|
|||
getOrderedValues() { |
|||
return this.getOrderedValues().slice(2) |
|||
} |
|||
|
|||
getSidingRefValueMap() { |
|||
return { |
|||
[SidingRefDimensions.WIDTH]: this.getBySidingRef(SidingRefDimensions.WIDTH), |
|||
[SidingRefDimensions.HEIGHT]: this.getBySidingRef(SidingRefDimensions.HEIGHT) |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
class DimensionsChain extends Dimensions { |
|||
_modifier; |
|||
constructor(modifier) { |
|||
super(); |
|||
this._modifier = modifier; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {Modifier|ChainableModifier} |
|||
*/ |
|||
toModifier() { |
|||
return this._modifier |
|||
.dimensions(this); |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @returns {Modifier|ChainableModifier} |
|||
*/ |
|||
ensureModifier() { |
|||
return this.toModifier() |
|||
} |
|||
} |
|||
|
|||
class ChainableDimensions extends DimensionsChain { |
|||
toComponent() { |
|||
return this._modifier |
|||
.dimensions(this) |
|||
.toComponent(); |
|||
} |
|||
|
|||
componentChild(innerComponent) { |
|||
return this._modifier |
|||
.dimensions(this) |
|||
.toComponent() |
|||
.componentChild(innerComponent); |
|||
} |
|||
|
|||
componentChildren(innerComponent) { |
|||
return this._modifier |
|||
.dimensions(this) |
|||
.toComponent() |
|||
.componentChildren(innerComponent); |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,224 @@ |
|||
const SidingRefCorners = Object.freeze({ |
|||
TOPLEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fFirst, |
|||
TOPRIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fSecond, |
|||
BOTTOMLEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fThird, |
|||
BOTTOMRIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fForth |
|||
}) |
|||
|
|||
class Shape extends Siding { |
|||
constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { |
|||
super(defaultValue, defaultUnit); |
|||
} |
|||
/** |
|||
* |
|||
* @param {*} amount |
|||
* @returns {Shape} |
|||
*/ |
|||
topLeft(amount) { |
|||
this._fFirst = amount; |
|||
return this; |
|||
} |
|||
/** |
|||
* |
|||
* @param {*} amount |
|||
* @returns {Shape} |
|||
*/ |
|||
topRight(amount) { |
|||
this._fSecond = amount; |
|||
return this; |
|||
} |
|||
/** |
|||
* |
|||
* @param {*} amount |
|||
* @returns {Shape} |
|||
*/ |
|||
bottomLeft(amount) { |
|||
this._fThird = amount; |
|||
return this; |
|||
} |
|||
/** |
|||
* |
|||
* @param {*} amount |
|||
* @returns {Shape} |
|||
*/ |
|||
bottomRight(amount) { |
|||
this._fForth = amount; |
|||
return this; |
|||
} |
|||
/** |
|||
* |
|||
* @param {*} amount |
|||
* @returns {Shape} |
|||
*/ |
|||
diagonalPositive(amount) { |
|||
this._fThird = amount; |
|||
this._fSecond = amount; |
|||
return this; |
|||
} |
|||
/** |
|||
* |
|||
* @param {*} amount |
|||
* @returns {Shape} |
|||
*/ |
|||
diagonalNegative(amount) { |
|||
this._fFirst = amount; |
|||
this._fForth = amount; |
|||
return this; |
|||
} |
|||
|
|||
left(amount) { |
|||
this._fFirst = amount; |
|||
this._fSecond = 0; |
|||
this._fThird = 0; |
|||
this._fForth = amount; |
|||
return this |
|||
} |
|||
|
|||
right(amount) { |
|||
this._fFirst = 0; |
|||
this._fSecond = amount; |
|||
this._fThird = amount; |
|||
this._fForth = 0; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {*} amount |
|||
*/ |
|||
getSidingRefValueMap() { |
|||
return { |
|||
[SidingRefCorners.TOPLEFT]: this.getBySidingRef(SidingRefCorners.TOPLEFT), |
|||
[SidingRefCorners.TOPRIGHT]: this.getBySidingRef(SidingRefCorners.TOPRIGHT), |
|||
[SidingRefCorners.BOTTOMLEFT]: this.getBySidingRef(SidingRefCorners.BOTTOMLEFT), |
|||
[SidingRefCorners.BOTTOMRIGHT]: this.getBySidingRef(SidingRefCorners.BOTTOMRIGHT), |
|||
} |
|||
} |
|||
} |
|||
|
|||
class ShapeChain extends Shape { |
|||
_modifier; |
|||
constructor(modifier) { |
|||
super(); |
|||
this._modifier = modifier; |
|||
} |
|||
|
|||
toModifier() { |
|||
return this._modifier |
|||
.clip(this); |
|||
} |
|||
|
|||
ensureModifier() { |
|||
return this.toModifier() |
|||
} |
|||
|
|||
} |
|||
|
|||
class ChainableShape extends ShapeChain { |
|||
toComponent() { |
|||
return this._modifier |
|||
.clip(this) |
|||
.toComponent(); |
|||
} |
|||
|
|||
componentChild(innerComponent) { |
|||
return this._modifier |
|||
.clip(this) |
|||
.toComponent() |
|||
.componentChild(innerComponent); |
|||
} |
|||
|
|||
componentChildren(innerComponent) { |
|||
return this._modifier |
|||
.clip(this) |
|||
.toComponent() |
|||
.componentChildren(innerComponent); |
|||
} |
|||
} |
|||
|
|||
const Shapes = Object.freeze({ |
|||
RoundedCorner: new Shape(), |
|||
Circle: new Shape(49, SizeUnits.PERCENT) |
|||
}) |
|||
|
|||
const LineStyles = Object.freeze({ |
|||
dotted: "dotted", |
|||
dashed: "dashed", |
|||
solid: "solid", |
|||
double: "double", |
|||
groove: "groove", |
|||
ridge: "ridge", |
|||
inset: "inset", |
|||
outset: "outset", |
|||
none: "none", |
|||
hidden: "hidden" |
|||
}) |
|||
|
|||
class Border extends Shape { |
|||
_color; |
|||
_sidingStyles; |
|||
_width; |
|||
|
|||
constructor(width = 1) { |
|||
super(); |
|||
this._width = width; |
|||
this._color = Colors.black; |
|||
this._sidingStyles = new Sides(LineStyles.solid, "") |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {number} width |
|||
* @returns {Border} |
|||
*/ |
|||
width(width) { |
|||
this._width = width; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {*} color |
|||
* @returns {Border} |
|||
*/ |
|||
color(color) { |
|||
this._color = color; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* Sets the border-style of all sides to the given. |
|||
* @param {LineStyles} lineStyle style of the border |
|||
* @returns {Border} |
|||
*/ |
|||
setStyleAll(lineStyle) { |
|||
this._sidingStyles.all(lineStyle) |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {LineStyles} lineStyle |
|||
* @param {*} sidingRefSide |
|||
* @returns {Border} |
|||
*/ |
|||
setLineStyle(lineStyle, sidingRefSide) { |
|||
this._sidingStyles.setBySidingRef(sidingRefSide, lineStyle) |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {Map<SidingRefSides, LineStyles} refSideStyleMap |
|||
* @returns {Border} |
|||
*/ |
|||
setLineStyles(refSideStyleMap) { |
|||
let rkeys = Object.keys(refSideStyleMap); |
|||
for (let i = 0; i < array.length; i++) { |
|||
this._sidingStyles.setBySidingRef(rkeys[i]) = refSideStyleMap[rkeys[i]]; |
|||
} |
|||
return this; |
|||
} |
|||
|
|||
|
|||
} |
|||
@ -0,0 +1,211 @@ |
|||
const SizeUnits = Object.freeze({ |
|||
PIXEL: "px", |
|||
PERCENT: "%" |
|||
}) |
|||
|
|||
|
|||
class SideUnitDependentAttribute { |
|||
_unit; |
|||
_fFirst; |
|||
_fSecond; |
|||
_fThird; |
|||
_fForth; |
|||
|
|||
/** |
|||
* |
|||
* @param {Units} unit The unit of the amount or style |
|||
* @returns {SideUnitDependentAttribute} this - Object |
|||
*/ |
|||
setUnit(unit) { |
|||
this._unit = unit; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* @returns {Array<string>} |
|||
*/ |
|||
getOrderedValues() { |
|||
return [this._fFirst + this._unit, this._fSecond + this._unit, this._fThird + this._unit, this._fForth + this._unit] |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {SidingRef} sidingRef |
|||
* @param {*} value |
|||
* @returns {SideUnitDependentAttribute} this |
|||
*/ |
|||
setBySidingRef(sidingRef, value) { |
|||
sidingRef(this) = value; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param {SidingRef} sidingRef the reference enum for this SideUnitDependenAttribute (child) |
|||
* @returns the value of the referenced SidingRef. |
|||
*/ |
|||
getBySidingRef(sidingRef) { |
|||
return sidingRef(this) |
|||
} |
|||
|
|||
} |
|||
|
|||
const SidingRefSides = Object.freeze({ |
|||
LEFT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fFirst, |
|||
TOP: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fSecond, |
|||
RIGHT: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fThird, |
|||
BOTTOM: (sideUnitDependentAttribute) => sideUnitDependentAttribute._fForth |
|||
}) |
|||
|
|||
|
|||
/** |
|||
* The Class holds values from each side/direction of an element. |
|||
* Used for margin/padding. |
|||
* Extended Logic is used for Dimensions, Shape, Border as well. |
|||
*/ |
|||
class Siding extends SideUnitDependentAttribute { |
|||
constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { |
|||
super(); |
|||
this._unit = defaultUnit; |
|||
this._fFirst = defaultValue; |
|||
this._fSecond = defaultValue; |
|||
this._fThird = defaultValue; |
|||
this._fForth = defaultValue; |
|||
} |
|||
|
|||
/** |
|||
* sets the amount-value for all sides. |
|||
* @param {number} amount siding from all sides |
|||
* @returns {Siding} this Siding Object |
|||
*/ |
|||
all(amount) { |
|||
this._fFirst = amount; |
|||
this._fSecond = amount; |
|||
this._fThird = amount; |
|||
this._fForth = amount; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the amount-value for the left side. |
|||
* @param {number} amount siding for left |
|||
* @returns {Siding} this Siding Object |
|||
*/ |
|||
left(amount) { |
|||
this._fFirst = amount; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the amount-value for the right side. |
|||
* @param {number} amount siding for right |
|||
* @returns {Siding} this Siding Object |
|||
*/ |
|||
right(amount) { |
|||
this._fThird = amount; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the amount-value for the top side. |
|||
* @param {number} amount siding for top |
|||
* @returns {Siding} this Siding Object |
|||
*/ |
|||
top(amount) { |
|||
this._fSecond = amount; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the amount-value for the bottom side. |
|||
* @param {number} amount siding for bottom |
|||
* @returns {Siding} this Siding Object |
|||
*/ |
|||
bottom(amount) { |
|||
this._fForth = amount; |
|||
return this; |
|||
} |
|||
|
|||
getSidingRefValueMap() { |
|||
return { |
|||
[SidingRefSides.LEFT]: this.getBySidingRef(SidingRefSides.LEFT), |
|||
[SidingRefSides.TOP]: this.getBySidingRef(SidingRefSides.TOP), |
|||
[SidingRefSides.RIGHT]: this.getBySidingRef(SidingRefSides.RIGHT), |
|||
[SidingRefSides.BOTTOM]: this.getBySidingRef(SidingRefSides.BOTTOM) |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
class Sides extends Siding { |
|||
/** |
|||
* |
|||
* @param {number|string} defaultValue |
|||
* @param {*} defaultUnit |
|||
*/ |
|||
constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) { |
|||
super(defaultValue, defaultUnit); |
|||
} |
|||
/** |
|||
* sets the amount-value for the horizontal sides (left and right). |
|||
* @param {number} amount siding for left and right. |
|||
* @returns {Sides} this Siding Object |
|||
*/ |
|||
horizontal(amount) { |
|||
this._fFirst = amount; |
|||
this._fThird = amount; |
|||
return this; |
|||
} |
|||
|
|||
/** |
|||
* sets the amount-value for the vertical sides (left and right). |
|||
* @param {number} amount siding for top and bottom. |
|||
* @returns {Sides} this Siding Object |
|||
*/ |
|||
vertical(amount) { |
|||
this._fSecond = amount; |
|||
this._fForth = amount; |
|||
return this; |
|||
} |
|||
} |
|||
|
|||
class PaddingChain extends Sides{ |
|||
_modifier; |
|||
constructor(modifier) { |
|||
super(); |
|||
this._modifier = modifier; |
|||
} |
|||
|
|||
toModifier() { |
|||
return this._modifier |
|||
.padding(this); |
|||
} |
|||
|
|||
ensureModifier(){ |
|||
return this.toModifier() |
|||
} |
|||
} |
|||
|
|||
|
|||
class ChainablePadding extends PaddingChain { |
|||
toComponent() { |
|||
return this._modifier |
|||
.padding(this) |
|||
.toComponent(); |
|||
} |
|||
|
|||
componentChild(innerComponent) { |
|||
return this._modifier |
|||
.padding(this) |
|||
.toComponent() |
|||
.componentChild(innerComponent); |
|||
} |
|||
|
|||
componentChildren(innerComponent) { |
|||
return this._modifier |
|||
.padding(this) |
|||
.toComponent() |
|||
.componentChildren(innerComponent); |
|||
} |
|||
} |
|||
|
|||
Loading…
Reference in new issue