From 9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22 Mon Sep 17 00:00:00 2001
From: Richard <q@1bpm.net>
Date: Sun, 13 Apr 2025 18:48:02 +0100
Subject: initial

---
 site/app/twirl/stdui.js | 494 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 494 insertions(+)
 create mode 100644 site/app/twirl/stdui.js

(limited to 'site/app/twirl/stdui.js')

diff --git a/site/app/twirl/stdui.js b/site/app/twirl/stdui.js
new file mode 100644
index 0000000..8141912
--- /dev/null
+++ b/site/app/twirl/stdui.js
@@ -0,0 +1,494 @@
+twirl.stdui = {
+	PlayButton: function(options) {
+		var self = this;
+		var txtPlay = "\u25b6";
+		var txtStop = "\u23f9";
+		
+		this.state = false;
+		
+		this.element = $("<p />").text(txtPlay).css("cursor", "pointer");
+		
+		if (options.hasOwnProperty("fontsize")) {
+			this.element.css("font-size", options.fontsize);
+		}
+		
+		this.show = function() {
+			self.element.css("visibility", "visible");
+		};
+		
+		this.hide = function() {
+			self.element.css("visibility", "hidden");
+		};
+		
+		this.element.click(function() {
+			if (!self.state) {
+				self.element.text(txtStop);
+				self.state = true;
+			} else {
+				self.element.text(txtPlay);
+				self.state = false;
+			}
+			if (options.stateAlter) {
+				options.stateAlter(self.state, self);
+			}
+			if (options.hasOwnProperty("change")) {
+				options.change(self.state, self);
+			}
+		});
+		
+		this.setValue = function(v, runChange) {
+			if (v) {
+				self.element.text(txtStop);
+				self.state = true;
+			} else {
+				self.element.text(txtPlay);
+				self.state = false;
+			}
+			
+			if (runChange && options.hasOwnProperty("change")) {
+				options.change(self.state, self);
+			}
+		};
+		
+		if (options.tooltip) {
+			this.element.on("mouseover", function(e){
+				twirl.tooltip.show(e, options.tooltip);
+			}).on("mouseout", function(){
+				twirl.tooltip.hide();
+			});
+		}
+		
+		if (options.target) {
+			$("#" + options.target).append(this.element);
+		}
+	},
+	StandardButton: function(options) {
+		var self = this;
+		this.element = $("<button />").addClass("smbut").text(options.label);
+		
+		this.show = function() {
+			self.element.css("visibility", "visible");
+		};
+		
+		this.hide = function() {
+			self.element.css("visibility", "hidden");
+		};
+		
+		this.element.click(function(e) {
+			options.change(e);
+		});
+		
+		if (options.tooltip) {
+			this.element.on("mouseover", function(e){
+				twirl.tooltip.show(e, options.tooltip);
+			}).on("mouseout", function(){
+				twirl.tooltip.hide();
+			});
+		}
+		
+		if (options.target) {
+			$("#" + options.target).append(this.element);
+		}
+	},
+	StandardToggle: function(options) {
+		var self = this;
+		var doChange = true;
+		this.element = $("<button />").addClass("smbut").attr(
+			"value",
+			options.hasOwnProperty("value") && options.value == 1 ? 1 : 0
+		).text(options.label);
+		
+		function setAppearance() {
+			var col;
+			if (self.element.attr("value") == 0) {
+				col = "#b5b01d";
+			} else {
+				col = "#f2e30c";
+			}
+			self.element.css("background-color", col);
+		};
+		
+		setAppearance();
+		
+		this.show = function() {
+			self.element.css("visibility", "visible");
+		};
+		
+		this.hide = function() {
+			self.element.css("visibility", "hidden");
+		};
+		
+		this.element.click(function() {
+			var val = (self.element.attr("value") == 0) ? 1 : 0;
+			self.element.attr("value", val);
+			setAppearance();
+			if (options.stateAlter) {
+				options.stateAlter(val, self);
+			}
+			if (doChange && options.hasOwnProperty("change")) {
+				options.change(val, self);
+			}
+		});
+		
+		this.setValue = function(v, runChange) {
+			if (!runChange) {
+				doChange = false;
+			}
+			if (options.stateAlter) {
+				options.stateAlter(v, self);
+			}
+			self.element.attr("value", v);
+			setAppearance();
+			if (runChange && options.hasOwnProperty("change")) {
+				options.change(v, self);
+			}
+			doChange = true;
+		};
+		
+		if (options.tooltip) {
+			this.element.on("mouseover", function(e){
+				twirl.tooltip.show(e, options.tooltip);
+			}).on("mouseout", function(){
+				twirl.tooltip.hide();
+			});
+		}
+
+		if (options.target) {
+			$("#" + options.target).append(this.element);
+		}
+	},
+	ComboBox: function(options) {
+		var self = this;
+		var doChange = true;
+		var tr = $("<tr />");
+		this.element = $("<select />");
+		
+		for (var v in options.options) {
+			var val = (options.asValue) ? options.options[v] : v;
+			$("<option />").attr("value", val).text(options.options[v]).appendTo(self.element);
+		}
+		
+		this.element.change(function() {
+			var val;
+			val = (options.asValue) ? self.element.find(":selected").text() : self.element.val();
+			if (options.stateAlter) {
+				options.stateAlter(val, self);
+			}
+			if (doChange && options.hasOwnProperty("change")) {			
+				options.change(val, self);
+			}
+		});
+		
+		this.show = function() {
+			self.element.css("visibility", "visible");
+			tr.show();
+		};
+		
+		this.hide = function() {
+			self.element.css("visibility", "hidden");
+			tr.hide();
+		};
+		
+		this.setValue = function(v, runChange) {
+			if (!runChange) {
+				doChange = false;
+			}
+			if (options.stateAlter) {
+				options.stateAlter(v, self);
+			}
+			self.element.val(v);
+			doChange = true;
+		};
+		
+		if (options.tooltip) {
+			this.element.on("mouseover", function(e){
+				twirl.tooltip.show(e, options.tooltip);
+			}).on("mouseout", function(){
+				twirl.tooltip.hide();
+			});
+		}
+		
+		if (options.target) {
+			if (options.asRow) {
+				tr.appendTo($("#" + options.target));
+				var tdl = $("<td />").appendTo(tr);
+				if (options.label) tdl.addClass("transparentinput").text(options.label);
+				$("<td />").append(self.element).appendTo(tr);
+				$("<td />").appendTo(tr);
+			} else {
+				$("#" + options.target).append(self.element);
+			}
+		}
+	},
+	TextArea: function(options) {
+		var self = this;
+		this.element = $("<textarea />").css({
+			"background-color": "var(--codeBgColor)",
+			"color": "var(--codeFgColor)",
+			"font-size": "var(--codeFontSize)",
+			"font-family": "var(--codeFontFace)"
+		});
+		
+		if (options.width) {
+			self.element.css("width", options.width);
+		}
+		if (options.height) {
+			self.element.css("height", options.height);
+		}
+		this.show = function() {
+			self.element.css("visibility", "visible");
+		};
+		
+		this.hide = function() {
+			self.element.css("visibility", "hidden");
+		};
+		
+		this.setValue = function(v) {
+			self.element.val(v);
+		};
+		if (options.target) {
+			$("#" + options.target).append(self.element);
+		}
+	},
+	TextInput: function(options) {
+		var self = this;
+		var doChange = true;
+		this.element = $("<input />").css({
+			"background-color": "var(--bgColor1)",
+			"color": "var(--fgColor1)"
+		});
+		
+		if (options.css) {
+			self.element.css(options.css);
+		}
+		
+		this.element.change(function() {
+			var val = self.element.val();
+			if (options.stateAlter) {
+				options.stateAlter(val, self);
+			}
+			if (doChange && options.hasOwnProperty("change")) {
+				options.change(val, self);
+			}
+		});
+		
+		this.show = function() {
+			self.element.css("visibility", "visible");
+		};
+		
+		this.hide = function() {
+			self.element.css("visibility", "hidden");
+		};
+			
+		this.setValue = function(v, runChange) {
+			if (!runChange) {
+				doChange = false;
+			}
+			if (options.stateAlter) {
+				options.stateAlter(v, self);
+			}
+			self.element.val(v);
+			if (runChange && options.hasOwnProperty("change")) {
+				options.change(v, self);
+			}
+			doChange = true;
+		};
+		
+		if (options.tooltip) {
+			this.element.on("mouseover", function(e){
+				twirl.tooltip.show(e, options.tooltip);
+			}).on("mouseout", function(){
+				twirl.tooltip.hide();
+			});
+		}
+		
+		if (options.target) {
+			$("#" + options.target).append(this.element);
+		}
+	},
+	ColourInput: function(options) {
+		var self = this;
+		var doChange = true;
+		this.element = $("<input />").attr("type", "color");
+		
+		if (options.css) {
+			self.element.css(options.css);
+		}
+		
+		this.element.change(function() {
+			var val = self.element.val();
+			if (options.stateAlter) {
+				options.stateAlter(val, self);
+			}
+			if (doChange && options.hasOwnProperty("change")) {
+				options.change(val, self);
+			}
+		});
+		
+		this.show = function() {
+			self.element.css("visibility", "visible");
+		};
+		
+		this.hide = function() {
+			self.element.css("visibility", "hidden");
+		};
+			
+		this.setValue = function(v, runChange) {
+			if (!runChange) {
+				doChange = false;
+			}
+			if (options.stateAlter) {
+				options.stateAlter(v, self);
+			}
+			self.element.val(v);
+			if (runChange && options.hasOwnProperty("change")) {
+				options.change(v, self);
+			}
+			doChange = true;
+		};
+		
+		if (options.tooltip) {
+			this.element.on("mouseover", function(e){
+				twirl.tooltip.show(e, options.tooltip);
+			}).on("mouseout", function(){
+				twirl.tooltip.hide();
+			});
+		}
+		
+		if (options.target) {
+			$("#" + options.target).append(this.element);
+		}
+	},
+	Slider: function(options) {
+		var self = this;
+		var doChange = true;
+		var label;
+		var tr = $("<tr />");
+		
+		if (!options.hasOwnProperty("min")) {
+			options.min = 0;
+		}
+		
+		if (!options.hasOwnProperty("max")) {
+			options.max = 1;
+		}
+		
+		if (!options.hasOwnProperty("step")) {
+			options.step = 0.000001;
+		}
+		
+		if (!options.hasOwnProperty("value")) {
+			options.value = 0;
+		}
+		
+		if (!options.hasOwnProperty("size")) {
+			options.size = 64;
+		}
+			
+		this.element = $("<input />")
+			.attr("type", "range")
+			.attr("min", options.min)
+			.attr("max", options.max)
+			.attr("step", options.step)
+			.attr("value", options.value)
+			.addClass("slider")
+			.addClass("transparentinput");
+		
+		this.valueLabel = null;
+		
+		this.show = function() {
+			tr.show();
+		};
+		
+		this.hide = function() {
+			tr.hide();
+		};
+			
+		var valueLabelUpdate = true;
+		if (options.hasOwnProperty("valueLabel") && options.valueLabel) {
+			self.valueLabel = $("<input />")
+				.attr("type", "number")
+				.attr("min", options.min)
+				.attr("max", options.max)
+				.attr("step", options.step)
+				.attr("value", options.value)
+				.addClass("transparentinput")
+				.val(options.value).change(function(){
+					valueLabelUpdate = false;
+					self.setValue($(this).val());
+					valueLabelUpdate = true;
+				});
+		}
+			
+		function applyChange() {
+			var val = self.element.val();
+			if (options.stateAlter) {
+				options.stateAlter(val, self);
+			}
+			if (doChange && options.hasOwnProperty("change")) {
+				options.change(val, self);
+			}
+			if (self.valueLabel) {
+				self.valueLabel.val(val);
+			}
+		}
+			
+		this.element.change(function() {
+			applyChange();
+		});
+		
+		this.element.on("input", function() {
+			if (options.changeOnInput) {
+				return applyChange();
+			}
+			if (options.input) {
+				options.input(self.element.val(), self);
+			}
+			if (self.valueLabel) {
+				self.valueLabel.val(self.element.val());
+			}
+		});
+			
+		this.setValue = function(v, runChange) {
+			if (!runChange) {
+				doChange = false;
+			}
+			if (options.stateAlter) {
+				options.stateAlter(v, self);
+			}
+			self.element.val(v);
+			if (runChange && options.hasOwnProperty("change")) {
+				options.change(v, self);
+			}
+			if (self.valueLabel && valueLabelUpdate) {
+				self.valueLabel.val(v);
+			};
+			doChange = true;
+		};
+		
+		
+		if (options.hasOwnProperty("label")) {
+			label = $("<p />").addClass("knoblabel").text(options.label);
+		}
+			
+		var tdl = $("<td />").appendTo(tr);
+		if (label) tdl.append(label);
+		
+		self.element.appendTo($("<td />").appendTo(tr));
+		
+		var tdv = $("<td />").appendTo(tr);
+		if (self.valueLabel) tdv.append(self.valueLabel);
+		
+		if (options.tooltip) {
+			this.element.on("mouseover", function(e){
+				twirl.tooltip.show(e, options.tooltip);
+			}).on("mouseout", function(){
+				twirl.tooltip.hide();
+			});
+		}
+		
+		if (options.target) {
+			$("#" + options.target).append(tr);
+		}
+	}
+}
\ No newline at end of file
-- 
cgit v1.2.3