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/twirl.js | 479 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 479 insertions(+)
 create mode 100644 site/app/twirl/twirl.js

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

diff --git a/site/app/twirl/twirl.js b/site/app/twirl/twirl.js
new file mode 100644
index 0000000..5f201f6
--- /dev/null
+++ b/site/app/twirl/twirl.js
@@ -0,0 +1,479 @@
+window.twirl = {
+	debug: false, //window.location.href.startsWith("file://"),
+	themes: ["Default", "Basic", "Hacker", "Monoclassic", "Doze"],
+	audioTypes: ["audio/mpeg", "audio/mp4", "audio/ogg", "audio/vorbis", "audio/x-flac","audio/aiff","audio/x-aiff", "audio/vnd.wav", "audio/wave", "audio/x-wav", "audio/wav", "audio/flac"],
+	maxFileSize: 1e+8, // 100MB
+	latencyCorrection: 40,
+	storage: {},
+	errorState: null,
+	audioContext: null,
+	_booted: false,
+	_initialised: false,
+	_remote: {sessionID: null, sending: false},
+	_els: {
+		base: null,
+		toolTip: null,
+		prompt: {},
+		loading: {},
+		contextMenu: null
+	}
+};
+
+twirl.boot = function() {
+	if (twirl._booted) return;
+	twirl.audioContext = new AudioContext();
+	twirl._booted = true;
+};
+
+twirl.init = function() {
+	if (twirl._initialised) return;
+	
+	var NoteData = function() {
+		var self = this;
+		this.data = null;
+		fetch("https://apps.csound.1bpm.net/app/twirl/notedata.json").then(function(r) {
+			r.json().then(function(j) {
+				self.data = j;
+			});
+		});
+	};
+	twirl.noteData = new NoteData();
+	
+	// storage
+	twirl.storage.data = localStorage.getItem("twirl");
+	if (twirl.storage.data) {
+		twirl.storage.data = JSON.parse(twirl.storage.data);
+	} else {
+		twirl.storage.data = {};
+	}
+	
+	// base
+	twirl._els.base = $("<div />").attr("id", "twirl").appendTo($("body"));
+	
+	// tooltip
+	twirl._els.toolTip = $("<div />").addClass("twirl_tooltip").appendTo(twirl._els.base);
+	
+	// context menu
+	twirl._els.contextMenu = $("<div />").addClass("twirl_contextmenu").appendTo(twirl._els.base);
+	
+	// prompt
+	var p = twirl._els.prompt;
+	p.base = $("<div />").attr("id", "twirl_prompt").appendTo(twirl._els.base);
+	$("<div />").attr("id", "twirl_prompt_background").appendTo(p.base);
+	var promptInner = $("<div />").attr("id", "twirl_prompt_inner").appendTo(p.base);
+	p.text = $("<div />").attr("id", "twirl_prompt_text").appendTo(promptInner);
+	p.button = $("<button />").attr("id", "twirl_prompt_button_text").text("OK");
+	p.buttonContainer = $("<div />").attr("id", "twirl_prompt_button").append($("<hr />")).append(p.button).appendTo(promptInner);
+	
+	// loading
+	var l = twirl._els.loading;
+	l.base = $("<div />").attr("id", "twirl_loading").appendTo(twirl._els.base);
+	$("<div />").attr("id", "twirl_loading_background").appendTo(l.base);
+	var loadingInner = $("<div />").attr("id", "twirl_loading_inner").appendTo(l.base);
+	l.text = $("<p />").attr("id", "twirl_loading_text").text("Processing").appendTo(loadingInner);
+	l.percentContainer = $("<div />").attr("id", "twirl_loading_percent").appendTo(loadingInner);
+	l.percent = $("<div />").attr("id", "twirl_loading_percent_inner").appendTo(l.percentContainer);
+	
+	// theme
+	if (twirl.storage.data.theme) {
+		twirl.setTheme(twirl.storage.data.theme, true);
+	}
+	twirl._initialised = true;
+};
+
+twirl.storage.save = function() {
+	localStorage.setItem("twirl", JSON.stringify(twirl.storage.data));
+};
+
+twirl.random = {
+	rgbColour: function() {
+		return "rgb(" + (Math.round(Math.random() * 50) + 205) + ","
+		+ (Math.round(Math.random() * 50) + 205) + ","
+		+ (Math.round(Math.random() * 50) + 205) + ")";
+	}
+};
+
+twirl.createIcon = function(definition) {
+	var state = true;
+	var active = true;
+	function formatPath(i) {
+		return "../twirl/icon/" + i + ".svg";
+	}
+	var el = $("<img />");
+	
+	if (definition.size) {
+		el.css("width", definition.size + "px");
+	}
+	
+	var obj = {
+		el: el,
+		setState: function(tstate) {
+			if (!definition.icon2) return;
+			state = tstate;
+			if (state) {
+				el.attr("src", formatPath(definition.icon));
+			} else {
+				el.attr("src", formatPath(definition.icon2));
+			}
+			
+		},
+		setActive: function(state) {
+			if (state) {
+				el.css("opacity", 1);
+				active = true;
+			} else {
+				el.css("opacity", 0.4);
+				active = false;
+			}
+		},
+		definition: definition
+	};
+	
+	obj.click = function() {
+		definition.click(obj);
+	};
+	
+	el.addClass("twirl_icon").css("opacity", 1).attr("src", formatPath(definition.icon)).on("mouseover", function(event){
+		var label = (!state && definition.label2) ? definition.label2 : definition.label;
+		twirl.tooltip.show(event, label);
+	}).on("mouseout", function(){
+		twirl.tooltip.hide();
+	}).click(function(el) {
+		if (active || definition.clickOnInactive) definition.click(obj);
+	});
+	return obj;
+};
+
+twirl.setTheme = function(name, noSave) {
+	var html = $("html");
+	if (html.attr("class")) {
+		for (let c of html.attr("class").split(/\s+/)) {
+			if (c.startsWith("theme")) {
+				html.removeClass(c);
+			}
+		}
+	}
+	html.addClass("theme" + name[0].toUpperCase() + name.substr(1).toLowerCase());
+	if (!noSave) {
+		twirl.storage.data.theme = name;
+		twirl.storage.save();
+	}
+};
+
+twirl.prompt = {
+	hide: function() {
+		twirl._els.prompt.base.hide();
+	},
+	show: function(text, onComplete, noButton) {
+		var p = twirl._els.prompt;
+		twirl.loading.hide();
+		p.text.empty();
+		if (typeof(text) == "string") {
+			p.text.text(text);
+		} else {
+			p.text.append(text);
+		}
+		if (!noButton) {
+			p.buttonContainer.show();
+			p.button.unbind().click(function(){
+				twirl.prompt.hide();
+				if (onComplete) onComplete();
+			});
+		} else {
+			p.buttonContainer.hide();
+		}
+		p.base.show();
+	}
+};
+
+twirl.loading = {
+	hide: function() {
+		$("body").css("cursor", "default");
+		twirl._els.loading.base.hide();
+	},
+	show: function(text, showPercent) {
+		var l = twirl._els.loading;
+		$("body").css("cursor", "wait");
+		l.text.text((text) ? text : "Processing");
+		if (showPercent) {
+			l.percentContainer.show();
+		} else {
+			l.percentContainer.hide();
+		}
+		l.base.show();
+	},
+	setPercent: function(percent) {
+		twirl._els.loading.percent.width(percent + "%");
+	}
+};
+
+twirl._setContextPosition = function(event, el, augmentations) {
+	var margin = 100;
+	if (!augmentations) augmentations = [0, 0];
+	if (event.clientX >= window.innerWidth - margin) {
+		el.css({right: margin + "px", left: "auto"});
+	} else {
+		el.css({right: "auto", left: (event.clientX + augmentations[0]) + "px"});
+	}
+	
+	if (event.clientY >= window.innerHeight - margin) {
+		el.css({bottom: margin + "px", top: "auto"});
+	} else {
+		el.css({bottom: "auto", top: (event.clientY + augmentations[1]) + "px"});
+	}
+};
+
+twirl.contextMenu = {
+	show: function(event, data) {
+		event.preventDefault();
+		twirl._els.contextMenu.empty().unbind().on("mouseout", function(){
+			twirl._els.contextMenu.hide().off("mouseout");
+		});
+		for (let i in data) {
+			let d = data[i];
+			$("<div />").addClass("twirl_contextmenu_item").text(d.name).click(function(){
+				twirl._els.contextMenu.hide().off("mouseout");
+				d.click();
+			}).appendTo(twirl._els.contextMenu).on("mouseout", function(e){
+				e.stopPropagation();
+			});
+		}
+		twirl._setContextPosition(event, twirl._els.contextMenu, [-10, -10]);
+		twirl._els.contextMenu.show();
+		return false;
+	}
+};
+
+twirl.tooltip = {
+	show: function(event, text, colour) {
+		if (!colour) colour = "#bbbbbb";
+		var el = twirl._els.toolTip;
+		el.html(text).css({opacity: 0.8, "background-color": colour});
+		twirl._setContextPosition(event, el, [20, -15]);
+	
+	},
+	hide: function() {
+		twirl._els.toolTip.css("opacity", 0);
+	}
+};
+
+twirl.sendErrorState = async function(errorObj) {
+	if (twirl._remote.sending) return;
+		twirl._remote.sending = true;
+		if (typeof(errorObj) == "function") {
+			errorObj = errorObj();
+		}
+		errorObj.application = $("title").text();
+		var data = {
+			request_type: "LogError",
+			error: errorObj
+		};
+				
+		if (twirl._remote.sessionID) {
+			data.session_id = twirl._remote.sessionID;
+		}
+		var resp = await fetch("https:///service/", {
+			method: "POST",
+			headers: {
+				"Content-type": "application/json"
+			},
+			body: JSON.stringify(data)
+		});
+		var json = await resp.json();
+		if (json.session_id && !twirl._remote.sessionID) {
+			twirl._remote.sessionID = json.session_id;
+		}
+		twirl._remote.sending = false;
+};
+
+twirl.errorHandler = function(text, onComplete, errorObj) {
+	var errorText = (!text) ? twirl.errorState : text;
+	if (!errorObj) errorObj = {};
+	errorObj.text = errorText;
+	//twirl.sendErrorState(errorObj);
+	twirl.prompt.show(errorText, onComplete);
+	twirl.errorState = null;
+};
+
+twirl.showSettings = function(host, settings, onThemeChange) {
+	var el = $("<div />").css("font-size", "var(--fontSizeDefault)").append($("<h3 />").text("Settings"));
+	var tb = $("<tbody />");
+	$("<table />").append(tb).appendTo(el);
+	
+	var currentThemeIndex;
+	if (twirl.storage.data.theme) currentThemeIndex = twirl.themes.indexOf(twirl.storage.data.theme);
+	if (!currentThemeIndex) currentThemeIndex = 0;
+	
+	var tpTheme = new twirl.transform.Parameter({
+		definition: {name: "Theme", options: twirl.themes, dfault: currentThemeIndex, fireChanges: false, automatable: false}, 
+		host: host,
+		onChange: function(val) {
+			twirl.setTheme(twirl.themes[val]);
+			if (onThemeChange) onThemeChange();
+		}
+	});
+	tb.append(tpTheme.getElementRow(true))
+	
+	for (let s of settings) {
+		var value;
+		if (s.options && s.storageKey) {
+			if (host.storage[s.storageKey]) value = host.storage[s.storageKey];
+			if (value < 0) value = s.dfault;
+		} else if (s.storageKey) {
+			value = (host.storage[s.storageKey]) ? host.storage[s.storageKey] : s.dfault;
+			if (s.bool) {
+				s.min = 0;
+				s.max = 1;
+				s.step = 1;
+			}
+		} else {
+			value = s.dfault;
+		}
+		
+		let param = new twirl.transform.Parameter({
+			definition: {
+				name: s.name,
+				description: s.description,
+				fireChanges: false, automatable: false,
+				min: s.min, max: s.max, step: s.step, dfault: value,
+				options: s.options, asvalue: s.asvalue
+				
+			}, host: host, onChange: function(val) {
+				if (s.storageKey) {
+					host.storage[s.storageKey] = val;
+					host.saveStorage();
+				}
+				if (s.onChange) s.onChange(val);
+			}
+		});
+		tb.append(param.getElementRow(true));
+	}
+	twirl.prompt.show(el);
+};
+
+twirl.TopMenu = function(host, menuData, elTarget) {
+	var self = this;
+	var opened = false;
+	var keyHandlers = [];
+	
+	function keyHandler(e) {
+		if (!host.visible) return;
+		var nodeType = e.target.nodeName.toLowerCase();
+		if (nodeType == "input" || nodeType == "textarea") return;
+		e.preventDefault();
+		for (let h of keyHandlers) {
+			if (
+				(h.key == e.key.toLowerCase()) &&
+				((!h.hasOwnProperty("ctrlKey") && !e.ctrlKey) || (h.ctrlKey && e.ctrlKey)) &&
+				((!h.hasOwnProperty("shiftKey") && !e.shiftKey) || (h.shiftKey && e.shiftKey)) &&
+				((!h.hasOwnProperty("altKey") && !e.altKey) || (h.altKey && e.altKey))
+			) {
+				if (h.hasOwnProperty("condition") && !h.condition(host)) {
+					return;
+				}
+				if (h.hasOwnProperty("keyCondition") && !h.keyCondition(host)) {
+					return;
+				}
+				return h.func(host);
+			}
+		}
+	}
+
+	function construct(data) {
+		if (!data) data = menuData;
+		let onPlayDisables = [];
+		elTarget.empty();
+		var elMenuBar = $("<div />").addClass("topmenu").appendTo(elTarget);
+		for (let d of data) {
+			let elTopItem = $("<div />").addClass("topmenu_item").text(d.name).appendTo(elMenuBar);
+			let elMenu = $("<div />").addClass("topmenu_dropdown").appendTo(elTopItem);
+			let showConditions = [];
+			let onShows = [];
+			for (let c of d.contents) {
+				let elItem;
+				if (c.preset) {
+					if (c.preset == "divider") {
+						elItem = $("<hr />").appendTo(elMenu);
+					}
+				} else {
+					elItem = $("<div />").addClass("topmenu_dropdown_item").appendTo(elMenu);
+					if (typeof(c.name) == "function") {
+						onShows.push(function(){
+							elItem.text(c.name(host));
+						});
+					} else {
+						elItem.text(c.name);
+					}
+					if (c.click) elItem.click(function(){
+						if (c.condition && !c.condition(host)) return;
+						elMenu.hide();
+						opened = false;
+						c.click(host);
+					});
+					if (c.shortcut) {
+						$("<div />").addClass("topmenu_dropdown_itemright").text(c.shortcut.name).appendTo(elItem);
+						var obj = {func: c.click};
+						Object.assign(obj, c.shortcut);
+						if (c.condition) obj.condition = c.condition;
+						if (c.keyCondition) obj.keyCondition = c.keyCondition;
+						delete obj.name;
+						keyHandlers.push(obj);
+					}
+					if (c.disableOnPlay) {
+						onPlayDisables.push(elItem);
+					}
+				}
+				if (c.condition) {
+					showConditions.push({el: elItem, func: c.condition});
+				}
+			}
+			
+			function showMenu() {
+				for (let c of showConditions) {
+					if (c.func(host)) {
+						c.el.removeClass("topmenu_dropdown_item_disabled");
+					} else {
+						c.el.addClass("topmenu_dropdown_item_disabled");
+					}
+				}
+				for (let o of onShows) {
+					o(host);
+				}
+				elMenu.show();
+			}
+			
+			
+			elTopItem.on("mouseover", function(){
+				if (opened) {
+					setTimeout(function(){
+						opened = true;
+					}, 10);
+					showMenu();
+				}
+			}).on("click", function() {
+				opened = true;
+				showMenu();
+			}).on("mouseleave", function() {
+				elMenu.hide();
+				setTimeout(function(){
+					opened = false;
+				}, 5);
+			});
+			
+		}
+		if (host.onPlays) {
+			host.onPlays.push(async function(playing){
+				for (let o of onPlayDisables) {
+					if (playing) {
+						o.addClass("topmenu_dropdown_item_disabled");
+					} else {
+						o.removeClass("topmenu_dropdown_item_disabled");
+					}
+				}
+			});
+		}
+		$("body").off("keydown", keyHandler).on("keydown", keyHandler);
+	}
+	construct();
+};
+
-- 
cgit v1.2.3