diff options
| author | Richard <q@1bpm.net> | 2025-04-13 18:48:02 +0100 |
|---|---|---|
| committer | Richard <q@1bpm.net> | 2025-04-13 18:48:02 +0100 |
| commit | 9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22 (patch) | |
| tree | 291bd79ce340e67affa755a8a6b4f6a83cce93ea /site/app/twirl/stdui.js | |
| download | apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.tar.gz apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.tar.bz2 apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.zip | |
initial
Diffstat (limited to 'site/app/twirl/stdui.js')
| -rw-r--r-- | site/app/twirl/stdui.js | 494 |
1 files changed, 494 insertions, 0 deletions
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 |