@vandenberghinc/volt 1.1.2

package/frontend/src/ui/color.ts

@@ -0,0 +1,117 @@
+
+// // Imports.
+// import { Colors } from "../modules/colors"
+// import { Elements } from "../elements/module.js"
+
+// // Types.
+// type Hex = string;
+// type RGBArray = number[];
+// interface RGBObject {
+// 	r: number;
+// 	g: number;
+// 	b: number;
+// 	a: number;
+// }
+
+// /*	@docs:
+// 	@nav: Frontend
+// 	@chapter: Styling
+// 	@title: Color range
+// 	@description: Used to create a range between two different colors. Can be initialized using alias function `ColorRange`.
+// 	@param:
+// 		@name: start
+// 		@descr: The start color (lightest). May either be a HEX string or an rgb(a) array.
+// 		@type: string, array
+// 	@param:
+// 		@name: end
+// 		@descr: The end color (darkest). May either be a HEX string or an rgb(a) array.
+// 		@type: string, array
+//  */
+// export class ColorRangeClass {
+
+// 	public start: RGBObject;
+// 	public end: RGBObject;
+
+//     constructor(start: Hex | RGBArray, end: Hex | RGBArray) {
+//     	if (Array.isArray(start)) {
+//     		this.start = this.array_to_rgba(start);
+//     	} else if (typeof start === "string") {
+//     		this.start = Colors.hex.to_rgb(start);
+//     	} else {
+//     		throw new Error(`Invalid type "${typeof start}" for parameter "start", the valid types are "string" or "array".`);
+//     	}
+//     	if (Array.isArray(end)) {
+//     		this.end = this.array_to_rgba(end);
+//     	} else if (typeof end === "string") {
+//     		this.end = Colors.hex.to_rgb(end);
+//     	} else {
+//     		throw new Error(`Invalid type "${typeof end}" for parameter "end", the valid types are "string" or "array".`);
+//     	}
+//     }
+
+//     // Array to rgba.
+//     array_to_rgba(array: RGBArray): RGBObject {
+//     	return {
+// 			r: array[0],
+// 			g: array[1],
+// 			b: array[2],
+// 			a: array.length < 4 ? 1 : array[3],
+// 		}
+//     }
+
+//     /*	@docs:
+// 		@title: Interpolate
+// 		@description: Interpolate between the start and end colors. When `percent` is 0 it will return the `start` color and when percent is `1` it will return the end color without computations.
+// 		@param:
+// 			@name: percent
+// 			@descr: The percentage to interpolate from start to end, the valid range is `0.0` till `1.0`.
+// 			@type: number
+// 		@param:
+// 			@name: alpha
+// 			@descr: The alpha channel, the valid range is `0.0` till `1.0`.
+// 			@type: number
+// 			@default: 1
+// 	 */
+//     interpolate(percent: number = 0.5, alpha: number = 1.0) : Hex {
+//     	if (percent <= 0) {
+//     		return Colors.rgb.to_str(
+// 				this.start.r,
+// 				this.start.g,
+// 				this.start.b,
+// 				this.start.a,
+// 			)
+//     	} else if (percent >= 1) {
+//     		return Colors.rgb.to_str(
+// 				this.end.r,
+// 				this.end.g,
+// 				this.end.b,
+// 				this.end.a,
+// 			)
+//     	}
+//     	return Colors.rgba.to_str(
+// 			Math.round(this.start.r + (this.end.r - this.start.r) * percent),
+// 			Math.round(this.start.g + (this.end.g - this.start.g) * percent),
+// 			Math.round(this.start.b + (this.end.b - this.start.b) * percent),
+// 			alpha,
+// 		)
+//     }
+
+//     // RGBA to hex.
+//     // rgb_to_hex(r, g, b, a = 1) {
+//     // 	const hex = [r, g, b].map(x => {
+//     //         const hex = x.toString(16);
+//     //         return hex.length === 1 ? '0' + hex : hex;
+//     //     })
+//     //     if (a != null && a < 1) {
+//     //     	let a = a / 100;
+//     //     	if (a < 10) {
+//     //     		hex.push("0" + a.toString())
+//     //     	} else {
+//     //     		hex.push(a.toString())
+//     //     	}
+//     //     }
+//     //     return '#' + hex.join('');
+//     // }
+// }
+// export const ColorRange = Elements.wrapper(ColorRangeClass);
+// export const NullColorRange = Elements.create_null(ColorRangeClass);

package/frontend/src/ui/context_menu.ts

@@ -0,0 +1,194 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements } from "../elements/module.js"
+import { Button } from "./button"
+import { VStackElement, VStack } from "./stack"
+
+// Context Menu.
+@Elements.register
+export class ContextMenuElement extends VStackElement {
+
+	// Attributes.
+	public remove_child_callback: any;
+
+	// Constructor.
+	// The content may either be an array with nodes, or an array with object like {label: ..., on_click: (element, event) => {}, on_render: (element) => {}}.
+	// A node / object may also be "null" and it will be ignored.
+	constructor(content: {
+		label: string,
+		on_click?: Function,
+		on_render?: Function,
+	}[] | HTMLElement[]) {
+		
+		// Initialize base classes.
+		super();
+		this._init_derived({
+			derived: ContextMenuElement,
+		})
+
+        // Append content.
+        content.iterate((item) => {
+        	if (item == null) {
+        		return null;
+        	}
+        	else if (!(item instanceof HTMLElement)) {
+        		const button = Button(item.label)
+	                .padding(5, 10, 5, 10)
+	                .margin(0)
+	                .font_size(12)
+	                .leading()
+	                .background("#FFFFFF15")
+	                .border_radius(0)
+	            if (typeof item.on_click === "function") {
+	                button.on_click((element, event) => (item.on_click as Function)(element, event, this));
+	            }
+	            if (typeof item.on_render === "function") {
+	                button.on_render((element) => (item.on_render as Function)(element));
+	            }
+        		this.append(button);
+        	} else {
+        		this.append(item);
+        	}
+        })
+
+		// Set styling
+		this
+	        .z_index(2) // one higher than sidebar.
+	        .padding(5, 0, 5, 0)
+	        .color("white")
+	        .background("gray")
+	        .box_shadow("0px 0px 10px #00000050")
+	        .border_radius(10)
+	        .min_width(150)
+
+	    // Remove child callback.
+	    this.remove_child_callback = (event) => {
+	    	if (!this.contains(event.target)) {
+                this.remove();
+            }
+            document.body.removeEventListener("mousedown", this.remove_child_callback);
+	    }
+	}
+
+	// Set default since it inherits an element.
+	// set_default() : this {
+	// 	return super.set_default(ContextMenuElement);
+	// }
+
+	// Popup the context menu by a event.
+	popup(event) : this {
+
+		// Prevent default.
+		event.preventDefault();
+
+		// Show.
+		super.show();
+
+		// Set position.
+		this.position(event.clientY, undefined, undefined, event.clientX)
+
+		// Add child.
+        document.body.appendChild(this as any);
+
+        // Add event listener to body.
+        document.body.addEventListener("mousedown", this.remove_child_callback);
+
+        // Response.
+        return this;
+	}
+
+	// Close the context menu.
+	close() : this {
+
+		// Remove from content.
+		super.remove();
+
+		// Remove event listener from body.
+        document.body.removeEventListener("mousedown", this.remove_child_callback);
+
+        // Response.
+        return this;
+	}
+	// @ts-ignore
+	remove() : this {
+
+		// Remove from content.
+		super.remove();
+
+		// Remove event listener from body.
+        document.body.removeEventListener("mousedown", this.remove_child_callback);
+
+        // Response.
+        return this;
+	}		
+}
+export const ContextMenu = Elements.wrapper(ContextMenuElement);
+export const NullContextMenu = Elements.create_null(ContextMenuElement);
+declare module './any_element.d.ts' { interface AnyElementMap { ContextMenuElement: ContextMenuElement }}
+
+// Extend.
+declare global {
+    interface VElementExtensions {
+        _context_menu: ContextMenuElement | undefined;
+        on_context_menu(): Function | undefined;
+        on_context_menu(callback?: Function | ContextMenuElement | any[]): this;
+    }
+}
+Elements.extend({
+	_context_menu: undefined as any,
+
+	/**
+	 * @docs:
+	 * @parent: VElement
+	 * @title: On Context Menu
+	 * @desc: 
+	 *     Script to be run when a context menu is triggered. This function can set or get the context menu callback.
+	 * @param:
+	 *     @name: callback
+	 *     @descr: 
+	 *         The parameter may either be a callback function, a ContextMenu object, or an Array as the ContextMenu parameter.
+	 * @return:
+	 *     @description Returns the `VElement` object. If `callback` is `null`, then the attribute's value is returned.
+	 * @funcs: 2
+	 */
+	on_context_menu(this, callback) {
+		if (callback == null) {
+			if (this._context_menu !== undefined) {
+				return this._context_menu;
+			} else {
+				return this.oncontextmenu ?? undefined;
+			}
+		}
+		if (callback instanceof ContextMenuElement || (callback as any).element_type === "ContextMenu") {
+			this._context_menu = callback as ContextMenuElement;
+			const _this_ = this;
+			this.oncontextmenu = (event) => {
+				if (this._context_menu instanceof ContextMenuElement) {
+					this._context_menu.popup(event);
+				}
+			};
+		} else if (Array.isArray(callback)) {
+			this._context_menu = ContextMenu(callback);
+			const _this_ = this;
+			this.oncontextmenu = (event) => {
+				if (this._context_menu instanceof ContextMenuElement) {
+					this._context_menu.popup(event);
+				}
+			};
+		} else {
+			const _this_ = this;
+			this.oncontextmenu = (event) => callback(_this_, event);
+		}
+		return this;
+	},
+})
+
+// @test
+// new VStackElement().on_context_menu();
+// VStack().on_context_menu();
+// VStack().on_context_menu_UNKNOWN();
+

package/frontend/src/ui/css.ts

@@ -0,0 +1,57 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements } from "../elements/module.js"
+
+// Button.
+export class Stylesheet {
+
+	// Attributes.
+	public _element: HTMLStyleElement;
+
+	// Constructor.
+	constructor(data, auto_append = false) {
+		this._element = document.createElement("style");
+		this._element.innerHTML = data;
+		if (auto_append) {
+			this.attach();
+		}
+	}
+
+	// Data.
+	data() : string;
+	data(val: string) : this;
+	data(val?: string) : this | string {
+		if (val == null) { return this._element.innerHTML ?? ""; }
+		this._element.innerHTML = val;
+		return this;
+	}
+
+	// Attach.
+	attach(): this {
+		document.head.appendChild(this._element);
+		return this;
+	}
+	join(): this {
+		document.head.appendChild(this._element);
+		return this;
+	}
+
+	// Remove.
+	remove() : this {
+		this._element.remove();
+		return this;
+	}
+
+	// Append to.
+	append_to(parent: any) : this  {
+		parent.appendChild(this._element);
+		return this;
+	}
+}
+// export const CSS = Elements.wrapper(CSSElement);
+// export const NullCSS = Elements.create_null(CSSElement);
+// declare module './any_element.d.ts' { interface AnyElementMap { CSSElement: CSSElement }}

package/frontend/src/ui/divider.ts

@@ -0,0 +1,28 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js"
+
+// Divider.
+@Elements.register
+export class DividerElement extends VElementTagMap.div {
+	static default_style = {
+		"margin": "0px",
+		"padding": "0px",
+		"width": "100%",
+		"height": "1px",
+		"min-height": "1px",
+		// "background": "black",
+	}
+	constructor() {
+		super({
+			derived: DividerElement,
+		});
+	}	
+}
+export const Divider = Elements.wrapper(DividerElement);
+export const NullDivider = Elements.create_null(DividerElement);
+declare module './any_element.d.ts' { interface AnyElementMap { DividerElement: DividerElement }}