path: root/app/dom.js

export class DomOptions {
	attributes;
	children;
	classes;
	id;
	styles;

	/**
	 * @param {Object} [options]
	 * @param {Partial<CSSStyleDeclaration>} [options.styles]
	 * @param {string|null} [options.id]
	 * @param {string[]} [options.classes]
	 * @param {HTMLElement[]} [options.children]
	 * @param {Record<string, string>} [options.attributes]
	 */
	constructor({ id = "", styles = {}, classes = [], children = [], attributes = {} } = {}) {
		this.attributes = attributes;
		this.children = children;
		this.classes = classes;
		this.id = id;
		this.styles = styles;
	}
}

/**
 * Toast notification types
 * @enum {string}
 */
export const ToastType = {
	error: "error",
	success: "success",
	warning: "warning",
};

export class Dom {
	/**
	 * Create a `<div>`
	 * @param {DomOptions} options
	 * @returns {HTMLDivElement}
	 */
	static div(options = new DomOptions()) {
		const div = document.createElement("div");
		Object.assign(div.style, options.styles);
		if (options.id) div.id = options.id;
		for (const cls of options.classes) div.classList.add(cls);
		for (const [k, v] of Object.entries(options.attributes)) div.setAttribute(k, v);
		if (options.children) div.append(...options.children);
		return div;
	}

	/**
	 * Create a `<span>`
	 * @param {string} text
	 * @param {DomOptions} options
	 * @returns {HTMLSpanElement}
	 */
	static span(text, options = new DomOptions()) {
		const span = document.createElement("span");
		Object.assign(span.style, options.styles);
		if (options.id) span.id = options.id;
		for (const cls of options.classes) span.classList.add(cls);
		span.textContent = text;
		for (const [k, v] of Object.entries(options.attributes)) span.setAttribute(k, v);
		if (options.children) span.append(...options.children);
		return span;
	}

	/**
	 * Create a `<button>`
	 * @param { string} text
	 * @param { (e: Event) => void } onClick
	 * @param {DomOptions} o
	 * @returns {HTMLButtonElement}
	 */
	static button(text, onClick, o = new DomOptions()) {
		const button = document.createElement("button");
		Object.assign(button.style, o.styles);
		if (o.id) button.id = o.id;
		for (const cls of o.classes) button.classList.add(cls);
		if (text) button.textContent = text;
		for (const [k, v] of Object.entries(o.attributes)) button.setAttribute(k, v);
		if (o.children) button.append(...o.children);
		if (onClick) button.addEventListener("click", onClick);
		return button;
	}

	/**
	 * Create an `<input>`
	 * @param { string} type
	 * @param { (e: Event) => void } onChange
	 * @param { string|number} value
	 * @param { string} placeholder
	 * @param {DomOptions} [o]
	 * @returns {HTMLInputElement}
	 */
	static input(type, onChange, value = "", placeholder = "", o = new DomOptions()) {
		const input = document.createElement("input");
		Object.assign(input.style, o.styles);
		if (o.id) input.id = o.id;
		for (const cls of o.classes) input.classList.add(cls);
		for (const [k, v] of Object.entries(o.attributes)) input.setAttribute(k, v);

		input.type = type;
		input.placeholder = placeholder;
		input.value = value.toString();
		if (onChange) {
			input.addEventListener("change", onChange);
		}
		return input;
	}

	/**
	 * Create a `<strong>`
	 * @param {string} text
	 */
	static strong(text) {
		const strong = document.createElement("strong");
		strong.textContent = text;
		return strong;
	}

	/**
	 * Create a `<a>`
	 * @param {string} url
	 * @param {DomOptions} o
	 * @param {string|undefined} text
	 */
	static a(url, o, text = undefined) {
		const link = document.createElement("a");
		if (text) link.text = text;
		link.href = url;
		Object.assign(link.style, o.styles);
		if (o.id) link.id = o.id;
		for (const cls of o.classes) link.classList.add(cls);
		for (const [k, v] of Object.entries(o.attributes)) link.setAttribute(k, v);
		if (o.children) link.append(...o.children);
		return link;
	}

	/**
	 * Create a `<label>`
	 * @param {string} to
	 * @param {string} text
	 * @param {DomOptions} o
	 * @returns {HTMLLabelElement}
	 */
	static label(to, text, o = new DomOptions()) {
		const label = document.createElement("label");
		Object.assign(label.style, o.styles);
		if (o.id) label.id = o.id;
		for (const cls of o.classes) label.classList.add(cls);
		for (const [k, v] of Object.entries(o.attributes)) label.setAttribute(k, v);
		if (o.children) label.append(...o.children);
		label.textContent = text;
		label.htmlFor = to;
		return label;
	}

	/**
	 * Create a heading `<h1>`–`<h6>`
	 * @param {1|2|3|4|5|6} level
	 * @param {string} text
	 * @param {DomOptions} o
	 * @returns {HTMLHeadingElement}
	 */
	static heading(level, text, o = new DomOptions()) {
		const heading = document.createElement(`h${level}`);
		Object.assign(heading.style, o.styles);
		if (o.id) heading.id = o.id;
		for (const cls of o.classes) heading.classList.add(cls);
		if (text) heading.textContent = text;
		for (const [k, v] of Object.entries(o.attributes)) heading.setAttribute(k, v);
		if (o.children) heading.append(...o.children);
		return heading;
	}

	/**
	 * Create an `<img>`
	 * @param {string} src
	 * @param {DomOptions} o
	 * @returns {HTMLImageElement}
	 */
	static img(src, o = new DomOptions()) {
		const img = document.createElement("img");
		Object.assign(img.style, o.styles);
		if (o.id) img.id = o.id;
		for (const cls of o.classes) img.classList.add(cls);
		for (const [k, v] of Object.entries(o.attributes)) img.setAttribute(k, v);
		img.src = src;
		return img;
	}

	/**
	 * Create a `<select>`
	 * @param {DomOptions} o
	 * @param { (e: Event) => void } onChange
	 * @returns {HTMLSelectElement}
	 */
	static select(onChange, o = new DomOptions()) {
		const select = document.createElement("select");
		Object.assign(select.style, o.styles);
		if (o.id) select.id = o.id;
		for (const cls of o.classes) select.classList.add(cls);
		for (const [k, v] of Object.entries(o.attributes)) select.setAttribute(k, v);
		if (o.children) select.append(...o.children);
		if (onChange) select.addEventListener("change", onChange);
		return select;
	}

	/**
	 * Create an `<option>`
	 * @param {string} value
	 * @param {string} text
	 * @param {boolean} [selected=false]
	 * @returns {HTMLOptionElement}
	 */
	static option(value, text, selected = false) {
		const opt = document.createElement("option");
		opt.value = value;
		opt.textContent = text;
		opt.selected = selected;
		return opt;
	}

	/**
	 * Create a `<p>`
	 * @param {string} text
	 * @param {DomOptions} o
	 * @returns {HTMLParagraphElement}
	 */
	static p(text, o = new DomOptions()) {
		const p = document.createElement("p");
		Object.assign(p.style, o.styles);
		if (o.id) p.id = o.id;
		for (const cls of o.classes) p.classList.add(cls);
		if (text) p.textContent = text;
		for (const [k, v] of Object.entries(o.attributes)) p.setAttribute(k, v);
		if (o.children) p.append(...o.children);
		return p;
	}

	/**
	 * Create a dual range input (min and max)
	 * @param {number} min - Minimum possible value
	 * @param {number} max - Maximum possible value
	 * @param {number} currentMin - Current minimum value
	 * @param {number} currentMax - Current maximum value
	 * @param {number} step - Step size
	 * @param {(min: number, max: number) => void} onChange - Callback when range changes
	 * @param {DomOptions} options - DOM options
	 * @returns {HTMLDivElement}
	 */
	static range(min, max, currentMin, currentMax, step, onChange, options = new DomOptions()) {
		const container = document.createElement("div");
		Object.assign(container.style, options.styles);
		if (options.id) container.id = options.id;
		for (const cls of options.classes) container.classList.add(cls);
		for (const [k, v] of Object.entries(options.attributes)) container.setAttribute(k, v);

		// Ensure current values are within bounds
		const safeCurrentMin = Math.max(min, Math.min(currentMin, max));
		const safeCurrentMax = Math.max(min, Math.min(currentMax, max));

		// Create track container
		const trackContainer = Dom.div(
			new DomOptions({
				styles: {
					alignItems: "center",
					display: "flex",
					height: "20px",
					margin: "10px 0",
					position: "relative",
				},
			}),
		);

		// Create track
		const track = Dom.div(
			new DomOptions({
				styles: {
					background: "#e0e0e0",
					borderRadius: "4px",
					height: "6px",
					position: "relative",
					width: "100%",
				},
			}),
		);

		// Create active range
		const activeRange = Dom.div(
			new DomOptions({
				styles: {
					background: "#4caf50",
					borderRadius: "4px",
					height: "100%",
					left: "0%",
					position: "absolute",
					width: "100%",
				},
			}),
		);

		// Create min slider
		const minSlider = document.createElement("input");
		minSlider.type = "range";
		minSlider.min = min.toString();
		minSlider.max = max.toString();
		minSlider.step = step.toString();
		minSlider.value = safeCurrentMin.toString();
		Object.assign(minSlider.style, {
			appearance: "none",
			background: "transparent",
			height: "100%",
			pointerEvents: "none",
			position: "absolute",
			width: "100%",
			zIndex: "2",
		});
		minSlider.style.pointerEvents = "auto";

		// Create max slider
		const maxSlider = document.createElement("input");
		maxSlider.type = "range";
		maxSlider.min = min.toString();
		maxSlider.max = max.toString();
		maxSlider.step = step.toString();
		maxSlider.value = safeCurrentMax.toString();
		Object.assign(maxSlider.style, {
			appearance: "none",
			background: "transparent",
			height: "100%",
			pointerEvents: "none",
			position: "absolute",
			width: "100%",
			zIndex: "2",
		});
		maxSlider.style.pointerEvents = "auto";

		// Value displays
		const minValueDisplay = Dom.span(
			safeCurrentMin.toString(),
			new DomOptions({
				styles: {
					color: "#0066cc",
					fontSize: "0.85rem",
					fontWeight: "bold",
				},
			}),
		);

		const maxValueDisplay = Dom.span(
			safeCurrentMax.toString(),
			new DomOptions({
				styles: {
					color: "#0066cc",
					fontSize: "0.85rem",
					fontWeight: "bold",
				},
			}),
		);

		const valueDisplay = Dom.div(
			new DomOptions({
				children: [minValueDisplay, maxValueDisplay],
				styles: {
					display: "flex",
					justifyContent: "space-between",
					marginBottom: "5px",
				},
			}),
		);

		// Update active range position
		const updateActiveRange = () => {
			const minVal = parseInt(minSlider.value);
			const maxVal = parseInt(maxSlider.value);

			const minPercent = ((minVal - min) / (max - min)) * 100;
			const maxPercent = ((maxVal - min) / (max - min)) * 100;

			activeRange.style.left = `${minPercent}%`;
			activeRange.style.width = `${maxPercent - minPercent}%`;

			minValueDisplay.textContent = minVal.toString();
			maxValueDisplay.textContent = maxVal.toString();
		};

		// Event listeners
		minSlider.addEventListener("input", () => {
			const minVal = parseInt(minSlider.value);
			const maxVal = parseInt(maxSlider.value);

			if (minVal > maxVal) {
				minSlider.value = maxVal.toString();
			}

			updateActiveRange();
			onChange(parseInt(minSlider.value), parseInt(maxSlider.value));
		});

		maxSlider.addEventListener("input", () => {
			const minVal = parseInt(minSlider.value);
			const maxVal = parseInt(maxSlider.value);

			if (maxVal < minVal) {
				maxSlider.value = minVal.toString();
			}

			updateActiveRange();
			onChange(parseInt(minSlider.value), parseInt(maxSlider.value));
		});

		// Initial update
		updateActiveRange();

		// Assemble track
		track.appendChild(activeRange);
		track.appendChild(minSlider);
		track.appendChild(maxSlider);
		trackContainer.appendChild(track);

		// Assemble container
		container.appendChild(valueDisplay);
		container.appendChild(trackContainer);

		if (options.children) container.append(...options.children);

		return container;
	}
}