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