Initial commit

utils.js

@@ -0,0 +1,187 @@
+class ElementBuilder {
+	constructor(tag) {
+		let parts = tag.split(/(\.|#)/);
+
+		if(parts.length % 2 == 0) {
+			throw new Error("invalid element builder tag string");
+		}
+
+		this.element = document.createElement(parts[0]);
+
+		parts = parts.slice(1);
+
+		for(let i = 0; i < parts.length; i += 2) {
+			let type = parts[i];
+			let value = parts[i + 1];
+
+			switch(type) {
+				case ".":
+					this.element.classList.add(value);
+					break;
+
+				case "#":
+					this.element.id = value;
+					break;
+			}
+		}
+	}
+
+	// Need more stuff? Just implement it here.
+
+	id(id) {
+		this.element.id = id;
+		return this;
+	}
+
+	class(clazz) {
+		for(const subclass of clazz.split(" ").filter(x => x !== "")) {
+			this.element.classList.add(subclass);
+		}
+
+		return this;
+	}
+
+	text(text) {
+		this.element.innerText = text;
+		return this;
+	}
+
+	html(html) {
+		this.element.innerHTML = html;
+		return this;
+	}
+
+	on_click(handler) {
+		this.element.onclick = handler;
+		return this;
+	}
+
+	on_input(handler) {
+		this.element.oninput = handler;
+		return this;
+	}
+
+	for(fr) {
+		this.element.htmlFor = fr;
+		return this;
+	}
+
+	src(src) {
+		this.element.src = src;
+		return this;
+	}
+
+	target(target) {
+		this.element.target = target;
+		return this;
+	}
+
+	href(href) {
+		this.element.href = href;
+		return this;
+	}
+
+	download(download) {
+		this.element.download = download;
+		return this;
+	}
+
+	type(type) {
+		this.element.type = type;
+		return this;
+	}
+
+	checked(checked) {
+		this.element.checked = checked;
+		return this;
+	}
+
+	placeholder(placeholder) {
+		this.element.placeholder = placeholder;
+		return this;
+	}
+
+	append(element) {
+		if(element instanceof ElementBuilder) {
+			element = element.finish();
+		}
+
+		this.element.appendChild(element);
+		return this;
+	}
+
+	append_all(elements) {
+		for(const element of elements) {
+			this.element.appendChild(element);
+		}
+
+		return this;
+	}
+
+	style(name, value) {
+		this.element.style[name] = value;
+		return this;
+	}
+
+	if(cond, handler) {
+		if(cond) handler(this);
+		return this;
+	}
+
+	finish() {
+		return this.element;
+	}
+}
+
+class ButtonListBuilder {
+	constructor(list) {
+		this.list = list;
+		this.display_handler = null;
+		this.onclick_handler = null;
+		this.modify_handler = null;
+	}
+
+	should_be_pressed(handler) {
+		this.display_handler = handler;
+		return this;
+	}
+
+	on_click(handler) {
+		this.onclick_handler = handler;
+		return this;
+	}
+
+	modify(handler) {
+		this.modify_handler = handler;
+		return this;
+	}
+
+	finish() {
+		let buttons = this.list.map((key) => new ElementBuilder("button")
+			.if(this.modify_handler !== null, (b) => this.modify_handler(b, key))
+			.if(this.display_handler(key), (b) => b.class("accent"))
+			.finish()
+		);
+
+		for(let i = 0; i < buttons.length; i++) {
+			buttons[i].onclick = () => {
+				if(this.onclick_handler !== null) this.onclick_handler(this.list[i]);
+
+				for(let j = 0; j < buttons.length; j++) {
+					buttons[j].classList.remove("accent");
+
+					if(this.display_handler(this.list[j])) {
+						buttons[j].classList.add("accent");
+					}
+				}
+			};
+		}
+
+		return buttons;
+	}
+}
+
+async function delay_ms(ms) {
+	await new Promise((r) => setTimeout(r, ms));
+}
+