13
0
livetrax/share/web_surfaces/builtin/mixer/toolkit/widgets/valuebutton.js

219 lines
7.6 KiB
JavaScript
Raw Normal View History

2020-06-21 17:29:27 -04:00
/*
* This file is part of Toolkit.
*
* Toolkit is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public
* License as published by the Free Software Foundation; either
* version 3 of the License, or (at your option) any later version.
*
* Toolkit is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU General
* Public License along with this program; if not, write to the
* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
* Boston, MA 02110-1301 USA
*/
/**
* The <code>useraction</code> event is emitted when a widget gets modified by user interaction.
* The event is emitted for the option <code>value</code>.
*
* @event TK.ValueButton#useraction
*
* @param {string} name - The name of the option which was changed due to the users action
* @param {mixed} value - The new value of the option
*/
"use strict";
(function(w, TK){
TK.ValueButton = TK.class({
/**
* This widget combines a {@link TK.Button}, a {@link TK.Scale} and a {@link TK.Value}.
* TK.ValueButton uses {@link TK.DragValue} and {@link TK.ScrollValue}
* for setting its value.
* It inherits all options of {@link TK.DragValue} and {@link TK.Scale}.
*
* @class TK.ValueButton
*
* @extends TK.Button
*
* @param {Object} [options={ }] - An object containing initial options.
*
* @property {Number} [options.value=0] - The value of the widget.
* @property {Number} [options.value_format=function (val) { return val.toFixed(2); }] - Callback to format the value label.
* @property {Number} [options.value_size=5] - Amount of digits of the value input.
* @property {String} [options.direction="polar"] - Direction for changing the value.
* Can be "polar", "vertical" or "horizontal". See {@link TK.DragValue} for more details.
* @property {Number} [options.blind_angle=20] - If `options.direction` is "polar",
* this is the angle of separation between positive and negative value changes. See {@link TK.DragValue} for more details.
* @property {Number} [options.rotation=45] - Defines the angle of the center of the positive value
* changes. 0 means straight upward. For instance, a value of 45 leads to increasing value when
* moving towards top and right. See {@link TK.DragValue} for more details.
* @property {Number} [options.snap=0.01] - Snap value while dragging.
* @property {Number} [options.basis=300] - Distance to drag between <code>min</code> and <code>max</code> in pixels.
*/
_class: "ValueButton",
Extends: TK.Button,
Implements: [TK.Warning, TK.Ranged],
_options: Object.assign(Object.create(TK.Button.prototype._options), TK.Ranged.prototype._options, {
value: "number",
value_format: "function",
value_size: "number",
drag_direction: "string",
rotation: "number",
blind_angle: "number",
snap: "number",
reset: "number",
}),
options: {
layout: "bottom",
value: 0,
value_format: function (val) { return val.toFixed(2); },
value_size: 5,
drag_direction: "polar",
rotation: 45,
blind_angle: 20,
snap: 0.01,
basis: 300,
labels: TK.FORMAT("%d"),
},
static_events: {
set_drag_direction: function(value) {
this.drag.set("direction", value);
},
set_drag_rotation: function(value) {
this.drag.set("rotation", value);
},
set_blind_angle: function(value) {
this.drag.set("blind_angle", value);
},
},
initialize: function (options) {
TK.Button.prototype.initialize.call(this, options);
/**
* @member {HTMLDivElement} TK.ValueButton#element - The main DIV container.
* Has class <code>toolkit-valuebutton</code>.
*/
TK.add_class(this.element, "toolkit-valuebutton");
/**
* @member {TK.DragValue} TK.ValueButton#drag - The {@link TK.DragValue} module.
*/
this.drag = new TK.DragValue(this, {
node: this.element,
direction: this.options.drag_direction,
rotation: this.options.rotation,
blind_angle: this.options.blind_angle,
});
/**
* @member {TK.ScrollValue} TK.ValueButton#scroll - The {@link ScrollValue} module.
*/
this.scroll = new TK.ScrollValue(this, {
node: this.element,
});
if (this.options.reset === void(0))
this.options.reset = this.options.value;
this.element.addEventListener("dblclick", function () {
this.userset("value", this.options.reset);
/**
* Is fired when the user doubleclicks the valuebutton in order to to reset to initial value.
* The Argument is the new value.
*
* @event TK.ValueButton#doubleclick
*
* @param {number} value - The value of the widget.
*/
this.fire_event("doubleclick", this.options.value);
}.bind(this));
},
destroy: function () {
this.drag.destroy();
this.scroll.destroy();
this.scale.destroy();
TK.Button.prototype.destroy.call(this);
},
// GETTERS & SETTERS
set: function (key, value) {
switch (key) {
case "value":
if (value > this.options.max || value < this.options.min)
this.warning(this.element);
value = this.snap(value);
break;
}
return TK.Button.prototype.set.call(this, key, value);
}
});
function value_clicked() {
var self = this.parent;
self.scroll.set("active", false);
self.drag.set("active", false);
/**
* Is fired when the user starts editing the value manually
*
* @event TK.ValueButton#valueedit
*
* @param {number} value - The value of the widget.
*/
self.fire_event("valueedit", self.options.value);
}
function value_done() {
var self = this.parent;
self.scroll.set("active", true);
self.drag.set("active", true);
/**
* Is fired when the user finished editing the value manually
*
* @event TK.ValueButton#valueset
*
* @param {number} value - The value of the widget.
*/
self.fire_event("valueset", self.options.value);
}
/**
* @member {TK.Value} TK.ValueButton#value - The value widget for editing the value manually.
*/
TK.ChildWidget(TK.ValueButton, "value", {
create: TK.Value,
show: true,
map_options: {
value: "value",
value_format: "format",
value_size: "size",
},
userset_delegate: true,
static_events: {
dblclick: function(e) {
e.stopPropagation();
},
valueclicked: value_clicked,
valuedone: value_done,
},
});
/**
* @member {TK.Scale} TK.ValueButton#scale - The {@link TK.Scale} showing the value.
*/
TK.ChildWidget(TK.ValueButton, "scale", {
create: TK.Scale,
show: true,
toggle_class: true,
inherit_options: true,
map_options: {
value: "bar",
},
static_events: {
"set_layout" : function (v) {
if (v == "horizontal") this.scale.set("layout", "bottom");
if (v == "vertical") this.scale.set("layout", "left");
},
},
});
})(this, this.TK);