@vandenberghinc/volt 1.1.2

package/frontend/src/ui/slider.ts

@@ -0,0 +1,215 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements } from "../elements/module.js"
+import { VStackElement, VStack, HStack, HStackElement } from "./stack"
+
+// Slider.
+@Elements.register
+export class SliderElement extends VStackElement {
+
+    // Macros.
+    #macro OnChangeCallback ((element: SliderElement, value: number) => void)
+
+    // Attributes.
+    public _type: string;
+    public _value: number;
+    public _enabled_color: string;
+    public _disabled_color: string;
+    public slider: VStackElement;
+    public button: VStackElement;
+    public dragging: boolean = false;
+
+    protected slider_on_mouse_down_handler: any;
+    protected on_mouse_down_handler: any;
+    protected on_mouse_move_handler: any;
+    protected on_mouse_up_handler: any;
+    protected on_change_handler: any;
+    protected rect?: DOMRect;
+    protected button_rect?: DOMRect;
+    protected slider_rect?: DOMRect;
+
+    constructor(value: number = 0.0) {
+
+        // Initialize base class.
+        super();
+        this._init_derived({ derived: SliderElement, })
+
+        // Attributes.
+        this._type = "SliderElement";
+        this._value = value;
+        this._enabled_color = "green";
+        this._disabled_color = "none";
+
+        // The slider background.
+        this.slider = VStack(
+            VStack()
+                .position(0, null, 0, 0)
+                .background(this._enabled_color)
+                .transition("right 0.05s ease-out"),
+            VStack()
+                .position(0, 0, 0, 0)
+                .background(this._disabled_color)
+                .transition("left 0.05s ease-out"),
+        )
+            .background("white")
+            .position("relative")
+            // .border(`1px solid ${SETTINGS.theme.lightest_widget_background}90`)
+            .frame("100%", 5)
+            .border_radius(10)
+            .overflow("hidden")
+            .box_shadow(`0px 0px 2px #00000030`)
+            .on_click((element, event) => this.slider_on_mouse_down_handler(event))
+            .parent(this)
+            .abs_parent(this)
+
+        // The button.
+        this.button = VStack()
+            .border_radius("50%")
+            .frame(15, 15)
+            .background("gray")
+            .position("absolute")
+            .left(0)
+            .top(0)
+            .transition("left 0.05s ease-out")
+            .box_shadow(`0px 0px 2px #00000060`)
+            .cursor("pointer")
+            .on_mouse_down(() => this.on_mouse_down_handler())
+            .parent(this)
+            .abs_parent(this)
+
+        // Append.
+        this.append(this.slider, this.button)
+
+        // Styling.
+        this.min_height(15)
+        this.position("relative")
+        this.flex_shrink(0)
+        this.center_vertical()
+        this.height("fit-content")
+
+        // On mouse down handler for the button.
+        this.slider_on_mouse_down_handler = (event) => {
+            this.rect = this.getBoundingClientRect();
+            this.button_rect = this.button.getBoundingClientRect();
+            const min = this.rect!.left;
+            const max = this.rect!.left + this.rect!.width;
+            const x = Math.max(min, Math.min(event.clientX, max));
+            this.value((x - min) / (max - min));
+        }
+
+        // On mouse down handler for the button.
+        this.on_mouse_down_handler = () => {
+            this.dragging = true;
+            this.rect = this.getBoundingClientRect();
+            this.button_rect = this.button.getBoundingClientRect();
+            document.body.addEventListener("mouseup", this.on_mouse_up_handler);
+            document.body.addEventListener("mousemove", this.on_mouse_move_handler);
+        }
+
+        // On mouse move handler for the button.
+        this.on_mouse_move_handler = (event) => {
+            this.rect = this.getBoundingClientRect();
+            this.button_rect = this.button.getBoundingClientRect();
+            const min = this.rect!.left;
+            const max = this.rect!.left + this.rect!.width;
+            const x = Math.max(min, Math.min(event.clientX, max));
+            this.value((x - min) / (max - min));
+        }
+
+        // On mouse up handler for the button.
+        this.on_mouse_up_handler = () => {
+            this.dragging = false;
+            document.body.removeEventListener("mouseup", this.on_mouse_up_handler);
+            document.body.removeEventListener("mousemove", this.on_mouse_move_handler);
+        }
+
+        // On change handler.
+        this.on_change_handler = (a, b) => {};
+
+        // Set value.
+        if (value != 0.0) {
+            this.on_render(() => {
+                this.value(value);
+            })
+        }
+
+    }
+
+    // Set default since it inherits HStackElement.
+    set_default() : this {
+        return super.set_default(SliderElement);
+    }
+
+    // Get or set the enabled color.
+    enabled_color(): string;
+    enabled_color(value: string): this;
+    enabled_color(value?: string): this | string {
+        if (value == null) {
+            return this._enabled_color;
+        }
+        this._enabled_color = value;
+        this.slider.child(0).background(this._enabled_color);
+        return this;
+    }
+
+    // Get or set the disabled color.
+    disabled_color(): string;
+    disabled_color(value: string): this;
+    disabled_color(value?: string): this | string {
+        if (value == null) {
+            return this._disabled_color;
+        }
+        this._disabled_color = value;
+        this.slider.child(1).background(this.disabled_color);
+        return this;
+    }
+
+    // Set the on change handler.
+    // @ts-ignore
+    on_change(): OnChangeCallback;
+    // @ts-ignore
+    on_change(handler: OnChangeCallback): this 
+    // @ts-ignore
+    on_change(handler?: OnChangeCallback): OnChangeCallback | this {
+        if (handler == null) {
+            return this.on_change_handler;
+        }
+        this.on_change_handler = handler;
+        return this;
+    }
+
+    // Set or get the value.
+    // @ts-ignore
+    value(): number;
+    // @ts-ignore
+    value(value: number): this;
+    // @ts-ignore
+    value(value?: number): this | number {
+        if (value == null) {
+            return this._value;
+        }
+        this._value = Math.max(0.0, Math.min(1.0, value));
+        this.rect = this.getBoundingClientRect();
+        this.button_rect = this.button.getBoundingClientRect();
+        this.slider_rect = this.slider.getBoundingClientRect();
+        const left = Math.min(
+            this.rect.width - this.button_rect.width, 
+            Math.max(
+                0, 
+                (this._value * this.rect.width) - (this.button_rect.width / 2)
+            )
+        );
+        this.button.style.left = `${left}px`
+        this.slider.child(0).right(this.slider_rect.width - left);
+        this.slider.child(1).left(left);
+        this.on_change_handler(this, this._value)
+        return this;
+    }
+}
+export const Slider = Elements.wrapper(SliderElement);
+export const NullSlider = Elements.create_null(SliderElement);
+declare module './any_element.d.ts' { interface AnyElementMap { SliderElement: SliderElement }}

package/frontend/src/ui/spacer.ts

@@ -0,0 +1,29 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js"
+
+// Spacer.
+@Elements.register
+export class SpacerElement extends VElementTagMap.div {
+	static default_style = {
+		"margin": "0px",
+		"padding": "0px",
+		"flex": "1",
+		"flex-grow": "1",
+		"background": "#00000000",
+		"filter": "opacity(0)",
+		"justify-content": "stretch",
+	};
+	constructor() {
+		super({
+			derived: SpacerElement,
+		});
+	}	
+}
+export const Spacer = Elements.wrapper(SpacerElement);
+export const NullSpacer = Elements.create_null(SpacerElement);
+declare module './any_element.d.ts' { interface AnyElementMap { SpacerElement: SpacerElement }}

package/frontend/src/ui/span.ts

@@ -0,0 +1,23 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap } from "../elements/module.js"
+
+// Span.
+@Elements.register
+export class SpanElement extends VElementTagMap.span {
+	constructor(inner_html?: string) {
+		
+		// Initialize base class.
+		super({ derived: SpanElement });
+	
+		// Set text.
+		if (inner_html) { this.inner_html(inner_html); }
+	}	
+}
+export const Span = Elements.wrapper(SpanElement);
+export const NullSpan = Elements.create_null(SpanElement);
+declare module './any_element.d.ts' { interface AnyElementMap { SpanElement: SpanElement }}

package/frontend/src/ui/stack.ts

@@ -0,0 +1,238 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Elements, VElementTagMap, VElement } from "../elements/module.js"
+
+// Div element
+// export const VDivElement = Elements.create({type: "Div", tag: "div"}); // should always remain a "div" since some elements like LoaderButton rely on the behaviour of a div.
+// export type VDivElement = InstanceType<typeof VDivElement>;
+// export const VDiv = Elements.wrapper(VDivElement);
+// export const NullVDiv = Elements.create_null(VDivElement);
+// declare module './any_element.d.ts' { interface AnyElementMap { VDivElement: VDivElement }}
+
+// VStack.
+@Elements.register
+export class FrameElement extends VElementTagMap.div {
+
+	static default_style = {
+		// "position": "relative",
+		"margin": "0px",
+		"padding": "0px",
+		// "clear": "both",
+		"display": "block",
+		"overflow": "visible",
+	};
+	
+	// Constructor.
+	constructor(...children: any[]) {
+		
+		// Initialize base class.
+		super({
+			derived: FrameElement,
+		});
+
+		// Add children.
+		this.append(...children);
+
+	}
+}
+export const Frame = Elements.wrapper(FrameElement);
+export const NullFrame = Elements.create_null(FrameElement);
+declare module './any_element.d.ts' { interface AnyElementMap { FrameElement: FrameElement }}
+
+// VStack.
+@Elements.register
+export class VStackElement extends VElementTagMap.div {
+
+	static default_style = {
+		// "position": "relative",
+		"margin": "0px",
+		"padding": "0px",
+		// "clear": "both",
+		"display": "flex", // to support vertical spacers.
+		"overflow": "visible",
+		// "flex": "1", // disabled to support horizontal spacers in VStacks.
+		"align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
+		// "align-items": "flex-start", // otherwise the children automatically expand width to match the vstacks width.
+		"flex-direction": "column",
+		// "text-align": "start",
+		"outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+		"border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+	};
+	
+	// Constructor.
+	constructor(...children: any[]) {
+		
+		// Initialize base class.
+		super({
+			derived: VStackElement,
+		});
+
+		// Add children.
+		this.append(...children);
+
+	}	
+}
+export const VStack = Elements.wrapper(VStackElement);
+export const NullVStack = Elements.create_null(VStackElement);
+declare module './any_element.d.ts' { interface AnyElementMap { VStackElement: VStackElement }}
+
+// AnchorVStack.
+@Elements.register
+export class AnchorVStackElement extends VElementTagMap.a {
+
+	static default_style = {
+		// "position": "relative",
+		"margin": "0px",
+		"padding": "0px",
+		// "clear": "both",
+		"display": "flex", // to support vertical spacers.
+		"overflow": "visible",
+		// "flex": "1", // disabled to support horizontal spacers in VStacks.
+		"align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
+		// "align-items": "flex-start", // otherwise the children automatically expand width to match the vstacks width.
+		"flex-direction": "column",
+		// "text-align": "start",
+		"outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+		"border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+		"text-decoration": "none",
+
+		// After extending VStack.
+		"color": "inherit", // inherit colors since <a> does not have that and a <div> does.
+	};
+	
+	// Constructor.
+	constructor(...children: any[]) {
+		
+		// Initialize base class.
+		super({
+			derived: AnchorVStackElement,
+		});
+
+		// Add children.
+		this.append(...children);
+
+	}
+}
+export const AnchorVStack = Elements.wrapper(AnchorVStackElement);
+export const NullAnchorVStack = Elements.create_null(AnchorVStackElement);
+declare module './any_element.d.ts' { interface AnyElementMap { AnchorVStackElement: AnchorVStackElement }}
+
+// const stack: VElement = new AnchorVStackElement();
+
+// HStack.
+@Elements.register
+export class HStackElement extends VElementTagMap.div {
+
+	static default_style = {
+		// "position": "relative",
+		"margin": "0px",
+		"padding": "0px",
+		// "clear": "both",
+		"overflow-x": "visible",
+		"overflow-y": "visible",
+		// "text-align": "start",
+		"display": "flex",
+		"flex-direction": "row",
+		"align-items": "flex-start", // disable the auto extending of the childs height to the max child height.
+		// "flex": "1", // disabled to support horizontal spacers in VStacks.
+		"flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
+		"outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+		"border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+	};
+
+	// Constructor.
+	constructor(...children: any[]) {
+		
+		// Initialize base class.
+		super({
+			derived: HStackElement,
+		});
+		
+		// Add children.
+		this.append(...children);
+	}
+}
+export const HStack = Elements.wrapper(HStackElement);
+export const NullHStack = Elements.create_null(HStackElement);
+declare module './any_element.d.ts' { interface AnyElementMap { HStackElement: HStackElement }}
+
+// AnchorHStack
+@Elements.register
+export class AnchorHStackElement extends VElementTagMap.a {
+
+	static default_style = {
+		// "position": "relative",
+		"margin": "0px",
+		"padding": "0px",
+		// "clear": "both",
+		"overflow-x": "visible",
+		"overflow-y": "visible",
+		// "text-align": "start",
+		"display": "flex",
+		"flex-direction": "row",
+		"align-items": "flex-start", // disable the auto extending of the childs height to the max child height.
+		// "flex": "1", // disabled to support horizontal spacers in VStacks.
+		"flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
+		"outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+		"border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+		"text-decoration": "none",
+
+		// After extending VStack.
+		"color": "inherit", // inherit colors since <a> does not have that and a <div> does.
+	};
+
+	// Constructor.
+	constructor(...children: any[]) {
+		
+		// Initialize base class.
+		super({
+			derived: AnchorHStackElement,
+		});
+		
+		// Add children.
+		this.append(...children);
+	}
+}
+export const AnchorHStack = Elements.wrapper(AnchorHStackElement);
+export const NullAnchorHStack = Elements.create_null(AnchorHStackElement);
+declare module './any_element.d.ts' { interface AnyElementMap { AnchorHStackElement: AnchorHStackElement }}
+
+// ZStack.
+@Elements.register
+export class ZStackElement extends VElementTagMap.div {
+
+	static default_style = {
+		// "position": "relative",
+		"margin": "0px",
+		"padding": "0px",
+		"display": "grid",
+		// "text-align": "start",
+		"outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+		"border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+	};
+	
+	// Constructor.
+	constructor(...children: any[]) {
+		
+		// Initialize base class.
+		super({
+			derived: ZStackElement,
+		});
+		
+		// Add children.
+		this.zstack_append(...children);
+
+	}
+	
+	// Override append.
+	append(...children: any[]) : this {
+		return this.zstack_append(...children);
+	}
+}
+export const ZStack = Elements.wrapper(ZStackElement);
+export const NullZStack = Elements.create_null(ZStackElement);
+declare module './any_element.d.ts' { interface AnyElementMap { ZStackElement: ZStackElement }}