sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling

Browse Source
This commit is contained in:
metacryst
2025-11-24 01:29:20 -06:00
parent 6299e80268
commit fd08d13bee
5 changed files with 49 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
ui/_/code/quill.js
View File

@@ -1,7 +1,7 @@
/*
Sam Russell
Captured Sun
11.23.25 - Added onSubmit() event for form submission
11.23.25 - Added onSubmit() event for form submission, added marginHorizontal() and marginVertical()
11.20.25 - Added "pct" style unit, added alignVertical and alignHorizontal for flex boxes
11.19.25 - Allowing for "auto" values in otherwise numeric styles, adding vmin and vmax units
11.17.25.3 - Adding styles() and fixing dynamic function from earlier
@@ -279,11 +279,13 @@ function extendHTMLElementWithStyleSetters() {
case "bottom":
case "right":
case "padding":
case "paddingLeft":
case "paddingTop":
case "paddingBottom":
case "paddingRight":
case "margin":
case "marginLeft":
case "marginTop":
case "marginBottom":
@@ -336,73 +338,40 @@ extendHTMLElementWithStyleSetters();
HTMLElement.prototype.styles = function(cb) {
cb.call(this, this)
return this
}
HTMLElement.prototype.padding = function(one, two, three = "px") {
HTMLElement.prototype.paddingVertical = function(value, unit = "px") {
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
throw new Error(`Invalid value: ${value}. Expected a number.`);
this.style.paddingTop = value + unit
this.style.paddingBottom = value + unit
return this
}
const setPadding = (side, val) => {
const directionName = `padding${side.charAt(0).toUpperCase()}${side.slice(1)}`;
this.style[directionName] = (typeof val === 'number') ? `${val}${three}` : val;
};
HTMLElement.prototype.paddingHorizontal = function(value, unit = "px") {
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
throw new Error(`Invalid value: ${value}. Expected a number.`);
this.style.paddingRight = value + unit
this.style.paddingLeft = value + unit
return this
}
if(one === "horizontal" || one === "vertical") { // is one a direction
if (one === "horizontal") {
setPadding("left", two);
setPadding("right", two);
} else if (one === "vertical") {
setPadding("top", two);
setPadding("bottom", two);
}
} else { // is two a value
if(typeof one !== 'number' || isNaN(one)) {
this.style.padding = one
} else {
this.style.padding = one + two
}
}
return this;
};
HTMLElement.prototype.marginVertical = function(value, unit = "px") {
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
throw new Error(`Invalid value: ${value}. Expected a number.`);
this.style.marginTop = value + unit
this.style.marginBottom = value + unit
return this
}
HTMLElement.prototype.paddingVertical = function(value, unit = "px") {
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
throw new Error(`Invalid value: ${value}. Expected a number.`);
this.style.paddingTop = value + unit
this.style.paddingBottom = value + unit
return this
}
HTMLElement.prototype.paddingHorizontal = function(value, unit = "px") {
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
throw new Error(`Invalid value: ${value}. Expected a number.`);
this.style.paddingRight = value + unit
this.style.paddingLeft = value + unit
return this
}
HTMLElement.prototype.margin = function(direction, value, unit = "px") {
if (!value) {
this.style.margin = direction;
return this;
}
const setMargin = (side, val) => {
const directionName = `margin${side.charAt(0).toUpperCase()}${side.slice(1)}`;
this.style[directionName] = (typeof val === 'number') ? `${val}${unit}` : val;
};
if (direction === "horizontal") {
setMargin("left", value);
setMargin("right", value);
} else if (direction === "vertical") {
setMargin("top", value);
setMargin("bottom", value);
} else {
setMargin(direction, value);
}
return this;
};
HTMLElement.prototype.marginHorizontal = function(value, unit = "px") {
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
throw new Error(`Invalid value: ${value}. Expected a number.`);
this.style.marginRight = value + unit
this.style.marginLeft = value + unit
return this
}
HTMLElement.prototype.fontSize = function(value, unit = "px") {
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))