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

REFA: Removed samples and generated files

master
chris 7 months ago
parent
ff179f8cee
commit
0262bfb94b
5 changed files with 2 additions and 636 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .gitignore
  2. 18
      index.html
  3. 551
      jpc-like-websites.js
  4. 67
      samplePage.js
  5. 0
      samples/.gitkeep

2
.gitignore
View File

@ -1 +1,3 @@
node_modules/ node_modules/
samples/*/
jpc-like-websites.js

18
index.html
View File

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Page</title>
<script src="jpc-like-websites.js"></script>
</head>
<body>
<main>
<div id="root"></div>
</main>
<footer>
<script src="samplePage.js"></script>
</footer>
</body>
</html>

551
jpc-like-websites.js
View File

@ -1,551 +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();
/**
* Enum to access common events
*/
const CommonEvents = Object.freeze({
ONCLICK: "onClick",
})
/**
* A simple Color class for rgb set color values.
*/
class Color {
#red;
#green;
#blue;
constructor(red, green, blue) {
this.#red = red
this.#green = green
this.#blue = blue
}
/**
*
* @returns {string} an rgb object string
*/
cssRGBString() {
return `rgb(${this.#red}, ${this.#green}, ${this.#blue})`;
}
}
/**
* 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,
})
/**
* 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%.
* @returns this modifier object
*/
fillMaxWidth() {
this.modifications["width"] = "100%";
return this;
}
/**
* Sets the modification for height to 100%.
* @returns this modifier object
*/
fillMaxHeight() {
this.modifications["height"] = "100%";
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;
}
}
/**
* A chainable HTMLElement builder.
*/
class Component {
_element;
_modifier
_alignment;
_arrangement;
constructor(element, attr = {}) {
this._modifier = new Modifier().margin(new Siding().all(0));
this._element = element;
Object.keys(attr)
.forEach(key => {
this._element.setAttribute(key, attr[key]);
})
}
/**
* Sets the alignment (modifications) for this element or more specific for its children.
* @param {Alignment} alignment
* @returns this component object
*/
alignment(alignment) {
this._alignment = alignment;
return this;
}
/**
* Sets the arrangement (modifications) for this element or more specific for its children.
* @param {Arrangement} arrangement
* @returns this component object
*/
arrangement(arrangement) {
this._arrangement = arrangement;
switch (arrangement) {
case Arrangement.START:
this._modifier.modifications["justify-content", "start"]
break;
case Arrangement.END:
this._modifier.modifications["justify-content", "end"]
break;
case Arrangement.CENTER:
this._modifier.modifications["justify-content", "center"]
break;
case Arrangement.SPACE_AROUND:
this._modifier.modifications["justify-content", "space-around"]
break;
case Arrangement.SPACE_BETWEEN:
this._modifier.modifications["justify-content", "space-between"]
break;
case Arrangement.SPACE_EVENLY:
this._modifier.modifications["justify-content", "space-evenly"]
break;
}
return this;
}
/**
*
* @param {Modifier} modifier
* @returns this component object
*/
modifier(modifier) {
this._modifier = this._modifier.join(modifier)
return this;
}
/**
* Sets the innerText of the element
* @param {string} text
* @returns this component object
*/
text(text) {
this._element.innerText = text;
return this;
}
/**
*
* @param {string} styleClass
* @returns this component object
*/
addStyleClass(styleClass) {
this._element.classList.add(styleClass);
return this;
}
/**
*
* @param {string} key
* @param {string} value
* @returns this component object
*/
setAttribute(key, value) {
this._element.setAttribute(key, value);
return this;
}
/**
* Ends chain.
* Applies all modifications on the element.
* @returns {HTMLElemment} the html element
*/
generate() {
var mkeys = Object.keys(this._modifier.modifications);
for (let i = 0; i < mkeys.length; i++) {
this._element.style[mkeys[i]] = this._modifier.modifications[mkeys[i]];
}
return this._element;
}
/**
*
* @param {Component|Array<Component>} innerComponent
* @returns this component object
*/
childContext(innerComponent) {
if (innerComponent instanceof Array) {
for (let i = 0; i < innerComponent.length; i++) {
this._element.append(innerComponent[i].generate());
}
} else {
this._element.append(innerComponent.generate());
}
return this;
}
/**
*
* @param {CommonEvent} commonEvent
* @param {string} functionName
* @returns this component object
*/
setEvent(commonEvent, functionName) {
return this.setAttribute(commonEvent, `${functionName}(this)`)
}
}
/**
* 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
*/
childContext(innerComponent) {
if (innerComponent instanceof Array) {
innerComponent.forEach(icomp => {
icomp.modifier(
new Modifier()
.setStyleRule("flex", "none")
)
})
} else {
innerComponent.modifier(
new Modifier()
.setStyleRule("flex", "none")
)
}
return super.childContext(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()
.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()
.setStyleRule("flex-direction", "row")
)
}
}
const builder = {
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); },
row: function (attr = {}) { return new Row(attr) },
column: function (attr = {}) { return new Column(attr) },
page: function(innerComponents){
Page.generate();
document.querySelector('#root').appendChild(innerComponents.generate())
}
}

67
samplePage.js
View File

@ -1,67 +0,0 @@
const fileSelection = function (labelText) {
return builder.row()
.arrangement(Arrangement.SPACE_BETWEEN)
.modifier(
new Modifier().fillMaxWidth()
.padding(
new Siding()
.horizontal(64)
.vertical(16)
)
)
.childContext([
builder.label().text(labelText),
builder.input().setAttribute("type", "file")
])
}
const fileSelectionSection = function () {
return builder.column()
.arrangement(Arrangement.CENTER)
.modifier(
new Modifier()
.fillMaxWidth()
.padding(new Siding().vertical(16))
)
.childContext([
fileSelection("Script"),
builder.row()
.arrangement(Arrangement.CENTER)
.modifier(
new Modifier().fillMaxWidth()
)
.childContext([
builder.button()
.text('+')
.setEvent(CommonEvents.ONCLICK, "addFileSelection")
])
])
}
builder.page (
builder.column()
.modifier(
new Modifier()
.fillMaxSize()
)
.childContext([
builder.row()
.arrangement(Arrangement.SPACE_BETWEEN)
.modifier(
new Modifier().fillMaxWidth()
)
.childContext([
builder.header(1).text("Script Executer"),
builder.img().setAttribute("alt", "Logo")
])
,
fileSelectionSection()
,
builder.row()
.arrangement(Arrangement.CENTER)
.childContext(
builder.button()
.text("Execute Script")
)
])
)

0
samples/.gitkeep
View File

Write Preview
Loading…
Cancel
Save