13
0
livetrax/share/web_surfaces/builtin/mixer/toolkit/widgets/widget.js
2020-07-21 06:49:27 +02:00

800 lines
24 KiB
JavaScript

/*
* 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
*/
"use strict";
(function(w, TK){
function Invalid(options) {
for (var key in options) this[key] = true;
};
Invalid.prototype = {
validate : function() {
var i = 0, key;
var ret = false;
for (i = 0; i < arguments.length; i++) {
key = arguments[i];
if (this.hasOwnProperty(key) && this[key]) {
this[key] = false;
ret = true;
}
}
return ret;
},
test : function() {
var i = 0, key;
for (i = 0; i < arguments.length; i++) {
key = arguments[i];
if (this.hasOwnProperty(key) && this[key]) {
return true;
}
}
}
};
function redraw(fun) {
if (!this._drawn) return;
this.needs_redraw = false;
/**
* Is fired when a redraw is executed.
*
* @event TK.Widget#redraw
*/
this.fire_event("redraw");
fun.call(this);
}
function resize() {
if (this.is_destructed()) return;
this.resize();
}
function dblclick (e) {
/**
* Is fired after a double click appeared. Set `dblclick` to 0 to
* disable click event handling.
*
* @event TK.Widget#doubleclick
*
* @param {string} event - The browsers `MouseEvent`.
*
*/
var O = this.options;
var dbc = O.dblclick;
if (!dbc) return;
var d = + new Date();
if (this.__lastclick + dbc > d) {
e.lastclick = this.__lastclick;
this.fire_event("doubleclick", e);
this.__lastclick = 0;
} else {
this.__lastclick = d;
}
}
TK.Widget = TK.class({
/**
* TK.Widget is the base class for all widgets drawing DOM elements. It
* provides basic functionality like delegating events, setting options and
* firing some events.
*
* @class TK.Widget
*
* @extends TK.Base
*
* @param {Object} [options={ }] - An object containing initial options.
*
* @property {String} [options.class=""] - A class to add to the class attribute of the main element.
* @property {HTMLElement} [options.container] - A container the main element shall be added to.
* @property {String} [options.id=""] - A string to be set as id attribute on the main element.
* @property {Object} [options.styles=""] - An object containing CSS declarations to be added directly to the main element.
* @property {Boolean} [options.disabled=false] - Toggles the class <code>toolkit-disabled</code>.
* @property {HTMLElement} [options.element] - An element to be used as the main element.
* @property {Boolean} [options.active] - Toggles the class <code>toolkit-inactive</code>.
* @property {Boolean} [options.needs_resize=true] - Set to true if the resize function shall be called before the next redraw.
* @property {Boolean} [options.dblclick=400] - Set a time in milliseconds for triggering double click event. If 0, no double click events are fired.
*/
/**
* The <code>set</code> event is emitted when an option was set using the {@link TK.Widget#set}
* method. The arguments are the option name and its new value.
*
* Note that this happens both for user interaction and programmatical option changes.
*
* @event TK.Widget#set
*/
/**
* The <code>redraw</code> event is emitted when a widget is redrawn. This can be used
* to do additional DOM modifications to a Widget.
*
* @event TK.Widget#redraw
*/
/**
* The <code>resize</code> event is emitted whenever a widget is being resized. This event can
* be used to e.g. measure its new size. Note that some widgets do internal adjustments after
* the <code>resize</code> event. If that is relevant, the {@link TK.Widget#resized} event can
* be used, instead.
*
* @event TK.Widget#resize
*/
/**
* The <code>resized</code> event is emitted after each rendering frame, which was triggered by
* a resize event.
*
* @event TK.Widget#resized
*/
/**
* The <code>hide</code> event is emitted when a widget is hidden and is not rendered anymore.
* This happens both with browser visibility changes and also internally when using layout widgets
* such as {@link TK.Pager}.
*
* @event TK.Widget#hide
*/
/**
* The <code>show</code> event is emitted when a widget is shown and is being rendered. This is the
* counterpart to {@link TK.Widget#hide}.
*
* @event TK.Widget#show
*/
Extends : TK.Base,
_class: "Widget",
_options: {
// A CSS class to add to the main element
class: "string",
// A DOM element as container to inject the element
// into
container: "object",
// a id to set on the element. If omitted a random
// string is generated.
id: "string",
// If an element was stylized, styles can be applied
styles: "object",
disabled: "boolean",
element: "object",
active: "boolean",
needs_resize: "boolean",
dblclick: "number",
},
options: {
// these options are of less use and only here to show what we need
disabled: false, // Widgets can be disabled by setting this to true
needs_resize: true,
dblclick: 0,
},
static_events: {
set_container: function(value) {
if (value && this.element) {
value.appendChild(this.element);
} else if (!value && this.element.parentElement) {
this.element.parentElement.removeChild(this.element);
}
},
set_dblclick: function (val) {
if (!this.__delegated) return;
if (!!val)
this.__delegated.addEventListener("click", this.__dblclick_cb);
else
this.__delegated.removeEventListener("click", this.__dblclick_cb);
},
initialized: function () {
var v = this.options.dblclick;
if (v > 0)
this.set("dblclick", v);
},
},
initialize: function (options) {
// Main actions every widget needs to take
if (!options) options = {};
/** @property {HTMLElement} TK.Widget#element - The main element. */
if (options.element)
this.element = options.element;
TK.Base.prototype.initialize.call(this, options);
this.__classified = null;
this.__stylized = null;
this.__delegated = null;
this.__widgetized = null;
this.invalid = new Invalid(this.options);
if (!this.value_time) this.value_time = null;
this.needs_redraw = false;
this._redraw = redraw.bind(this, this.redraw);
this.__resize = resize.bind(this);
this._schedule_resize = this.schedule_resize.bind(this);
this._drawn = false;
this.parent = null;
this.children = null;
this.draw_queue = null;
this.__lastclick = 0;
this.__dblclick_cb = dblclick.bind(this);
},
is_destructed: function() {
return this.options === null;
},
invalidate_all: function() {
for (var key in this.options) {
if (!this._options[key]) {
if (key.charCodeAt(0) !== 95)
TK.warn("%O %s: unknown option %s", this, this._class, key);
} else this.invalid[key] = true;
}
},
assert_none_invalid: function() {
var warn = [];
for (var key in this.invalid) {
if (this.invalid[key] === true) {
warn.push(key);
}
}
if (warn.length) {
TK.warn("found", warn.length, "invalid in", this, ":", warn);
}
},
trigger_resize: function() {
if (!this.options.needs_resize) {
if (this.is_destructed()) {
// This object was destroyed but trigger resize was still scheduled for the next frame.
// FIXME: fix this whole problem properly
return;
}
this.set("needs_resize", true);
var C = this.children;
if (!C) return;
for (var i = 0; i < C.length; i++) {
C[i].trigger_resize();
}
}
},
trigger_resize_children: function() {
var C = this.children;
if (!C) return;
for (var i = 0; i < C.length; i++) {
C[i].trigger_resize();
}
},
schedule_resize: function() {
TK.S.add(this.__resize, 0);
},
resize: function() {
/**
* Is fired when a resize is requested.
*
* @event TK.Widget#resize
*/
this.fire_event("resize");
if (this._options.resized)
this.set("resized", true);
/**
* Is fired after the resize was executed and the DOM is updated.
*
* @event TK.Widget#resized
*/
if (this.has_event_listeners("resized")) {
TK.S.after_frame(this.fire_event.bind(this, "resized"));
}
},
trigger_draw: function() {
if (!this.needs_redraw) {
this.needs_redraw = true;
if (this._drawn) TK.S.add(this._redraw, 1);
}
},
trigger_draw_next : function() {
if (!this.needs_redraw) {
this.needs_redraw = true;
if (this._drawn) TK.S.add_next(this._redraw, 1);
}
},
initialized: function () {
// Main actions every widget needs to take
/**
* Is fired when a widget is initialized.
*
* @event TK.Widget#initialized
*/
this.fire_event("initialized");
this.trigger_draw();
},
draw_once: function(fun) {
var q = this.draw_queue;
if (q === null) {
this.draw_queue = [ fun ];
} else {
for (var i = 0; i < q.length; i++) if (q[i] === fun) return;
q[i] = fun;
}
this.trigger_draw();
},
redraw: function () {
var I = this.invalid;
var O = this.options;
var E = this.element;
if (E) {
if (I.id) {
I.id = false;
if (O.id) E.setAttribute("id", O.id);
}
}
E = this.__stylized;
if (E) {
if (I.active) {
I.active = false;
TK.toggle_class(E, "toolkit-inactive", !O.active);
}
if (I.disabled) {
I.disabled = false;
TK.toggle_class(E, "toolkit-disabled", O.disabled);
}
if (I.styles) {
I.styles = false;
if (O.styles) TK.set_styles(E, O.styles);
}
}
if (I.needs_resize) {
I.needs_resize = false;
if (O.needs_resize) {
O.needs_resize = false;
TK.S.after_frame(this._schedule_resize);
}
}
var q = this.draw_queue;
this.draw_queue = null;
if (q) for (var i = 0; i < q.length; i++) {
q[i].call(this, O);
}
},
destroy: function () {
/**
* Is fired when a widget is destroyed.
*
* @event TK.Widget#destroy
*/
if (this.is_destructed()) {
TK.warn("destroy called twice on ", this);
return;
}
this.fire_event("destroy");
this.disable_draw();
if (this.parent) this.parent.remove_child(this);
TK.Base.prototype.destroy.call(this);
this._redraw = null;
this.__resize = null;
this._schedule_resize = null;
this.children = null;
this.options = null;
this.parent = null;
if (this.element) {
this.element.remove();
this.element = null;
}
},
delegate: function (element) {
this.delegate_events(element);
this.__delegated = element;
/**
* Is fired when a widget gets delegated.
*
* @event TK.Widget#initialized
*
* @param {HTMLElement} element - The element all native DOM events are delegated to.
*/
this.fire_event("delegated", element);
return element;
},
add_class: function (cls) {
TK.add_class(this.__classified, cls);
},
remove_class: function (cls) {
TK.remove_class(this.__classified, cls);
},
has_class: function (cls) {
return TK.has_class(this.__classified, cls);
},
classify: function (element) {
// Takes a DOM element and adds its CSS functionality to the
// widget instance
this.__classified = element;
if (this.options.class && element)
TK.add_class(element, this.options.class);
/**
* Is fired when a widget is classified.
*
* @event TK.Widget#classified
*
* @param {HTMLElement} element - The element which receives all further class changes.
*/
this.fire_event("classified", element);
return element;
},
set_style: function (name, value) {
TK.set_style(this.__stylized, name, value);
},
/**
* Sets a CSS style property in this widgets DOM element.
*
* @method TK.Widget#set_style
*/
set_styles: function (styles) {
TK.set_styles(this.__stylized, styles);
},
/**
* Returns the computed style of this widgets DOM element.
*
* @method TK.Widget#get_style
*/
get_style: function (name) {
return TK.get_style(this.__stylized, name);
},
stylize: function (element) {
// Marks a DOM element as receiver for the "styles" options
this.__stylized = element;
if (this.options.styles) {
TK.set_styles(element, this.options.styles);
}
/**
* Is fired when a widget is stylized.
*
* @event TK.Widget#stylized
*
* @param {HTMLElement} element - The element which receives all further style changes.
*/
this.fire_event("stylized", element);
return element;
},
widgetize: function (element, delegate, classify, stylize) {
/**
* Set the DOM elements of this widgets. This method is usually only used internally.
* Basically it means to add the id from options and set a basic CSS class.
* If delegate is true, basic events will be delegated from the element to the widget instance
* if classify is true, CSS functions will be bound to the widget instance.
*
* @method TK.Widget#widgetize
* @emits TK.Widget#widgetize
*/
var O = this.options;
// classify?
TK.add_class(element, "toolkit-widget");
if (typeof O.id !== "string") {
O.id = element.getAttribute("id");
if (!O.id) {
O.id = TK.unique_id()
element.setAttribute("id", O.id);
}
} else element.setAttribute("id", O.id);
if (O.class) {
var c = O.class.split(" ");
for (var i = 0; i < c.length; i++)
TK.add_class(element, c[i]);
}
if (O.container)
O.container.appendChild(element);
if (delegate)
this.delegate(element);
if (classify)
this.classify(element);
if (stylize)
this.stylize(element);
this.__widgetized = element;
/**
* Is fired when a widget is widgetized.
*
* @event TK.Widget#widgetize
*
* @param {HTMLElement} element - The element which got widgetized.
*/
this.fire_event("widgetized", element);
return element;
},
// GETTER & SETTER
/**
* Sets an option.
*
* @method TK.Widget#set
*
* @param {string} key - The option name.
* @param value - The option value.
*/
set: function (key, value) {
/* These options are special and need to be handled immediately, in order
* to preserve correct ordering */
if (key === "class" && this.__classified) {
if (this.options.class) TK.remove_class(this.__classified, this.options.class);
if (value) TK.add_class(this.__classified, value);
}
if (this._options[key]) {
this.invalid[key] = true;
if (this.value_time && this.value_time[key])
this.value_time[key] = Date.now();
this.trigger_draw();
} else if (key.charCodeAt(0) !== 95) {
TK.warn("%O: %s.set(%s, %O): unknown option.", this, this._class, key, value);
}
TK.Base.prototype.set.call(this, key, value);
return value;
},
track_option: function(key) {
if (!this.value_time) this.value_time = {};
this.value_time[key] = Date.now();
},
/**
* Schedules this widget for drawing.
*
* @method TK.Widget#enable_draw
*
* @emits TK.Widget#show
*/
enable_draw: function () {
if (this._drawn) return;
this._drawn = true;
if (this.needs_redraw) {
TK.S.add(this._redraw, 1);
}
/**
* Is fired when a widget gets enabled for drawing.
*
* @event TK.Widget#show
*/
this.fire_event("show");
this.fire_event("visibility", true);
var C = this.children;
if (C) for (var i = 0; i < C.length; i++) C[i].enable_draw();
},
/**
* Stop drawing this widget.
*
* @method TK.Widget#enable_draw
*
* @emits TK.Widget#hide
*/
disable_draw: function () {
if (!this._drawn) return;
this._drawn = false;
if (this.needs_redraw) {
TK.S.remove(this._redraw, 1);
TK.S.remove_next(this._redraw, 1);
}
/**
* Is fired when a widget is hidden and not rendered anymore.
*
* @event TK.Widget#hide
*/
/**
* Is fired when the visibility state changes. The first argument
* is the visibility state, which is either <code>true</code>
* or <code>false</code>.
*
* @event TK.Widget#visibility
*/
this.fire_event("hide");
this.fire_event("visibility", false);
var C = this.children;
if (C) for (var i = 0; i < C.length; i++) C[i].disable_draw();
},
/**
* Make the widget visible. This does not modify the DOM, instead it will only schedule
* the widget for rendering.
*
* @method TK.Widget#show
*/
show: function () {
this.enable_draw();
},
/**
* This is an alias for hide, which may be overloaded.
* See {@link TK.Container} for an example.
*
* @method TK.Widget#force_show
*/
force_show: function() {
this.enable_draw();
},
/**
* Make the widget hidden. This does not modify the DOM, instead it will stop rendering
* this widget. Options changed after calling hide will only be rendered (i.e. applied
* to the DOM) when the widget is made visible again using {@link TK.Widget#show}.
*
* @method TK.Widget#hide
*/
hide: function () {
this.disable_draw();
},
/**
* This is an alias for hide, which may be overloaded.
* See {@link TK.Container} for an example.
*
* @method TK.Widget#force_hide
*/
force_hide: function () {
this.disable_draw();
},
show_nodraw: function() { },
hide_nodraw: function() { },
/**
* Returns the current hidden status.
*
* @method TK.Widget#hidden
*/
hidden: function() {
return !this._drawn;
},
is_drawn: function() {
return this._drawn;
},
/**
* TK.Toggle the hidden status. This is equivalent to calling hide() or show(), depending on
* the current hidden status of this widget.
*
* @method TK.Widget#toggle_hidden
*/
toggle_hidden: function() {
if (this.hidden()) this.show();
else this.hide();
},
set_parent: function(parent) {
if (this.parent) {
this.parent.remove_child(this);
}
this.parent = parent;
},
/**
* Registers a widget as a child widget. This method is used to build up the widget tree. It does not modify the DOM tree.
*
* @method TK.Widget#add_child
*
* @param {TK.Widget} child - The child to add.
*
* @see TK.Container#append_child
*/
add_child: function(child) {
var C = this.children;
if (!C) this.children = C = [];
child.set_parent(this);
C.push(child);
if (!this.hidden()) {
child.enable_draw();
} else {
child.disable_draw();
}
child.trigger_resize();
},
/**
* Removes a child widget. Note that this method only modifies
* the widget tree and does not change the DOM.
*
* @method TK.Widget#remove_child
*
* @param {TK.Widget} child - The child to remove.
*/
remove_child : function(child) {
child.disable_draw();
child.parent = null;
var C = this.children;
if (C === null) return;
var i = C.indexOf(child);
if (i !== -1) {
C.splice(i, 1);
}
if (!C.length) this.children = null;
},
/**
* Removes an array of children.
*
* @method TK.Widget#remove_children
*
* @param {Array.<TK.Widget>} a - An array of Widgets.
*/
remove_children : function(a) {
a.map(this.remove_child, this);
},
/**
* Registers an array of widgets as children.
*
* @method TK.Widget#add_children
*
* @param {Array.<TK.Widget>} a - An array of Widgets.
*/
add_children : function (a) {
a.map(this.add_child, this);
},
/**
* Returns an array of all visible children.
*
* @method TK.Widget#visible_children
*/
visible_children: function(a) {
if (!a) a = [];
var C = this.children;
if (C) for (var i = 0; i < C.length; i++) {
a.push(C[i]);
C[i].visible_children(a);
}
return a;
},
/**
* Returns an array of all children.
*
* @method TK.Widget#all_children
*/
all_children: function(a) {
if (!a) a = [];
var C = this.children;
if (C) for (var i = 0; i < C.length; i++) {
a.push(C[i]);
C[i].all_children(a);
}
return a;
},
});
TK.Module = TK.class({
Extends: TK.Base,
initialize: function(widget, options) {
this.parent = widget;
TK.Base.prototype.initialize.call(this, options);
},
destroy: function() {
this.parent = null;
TK.Base.prototype.destroy.call(this);
},
});
})(this, this.TK);
/**
* Generic DOM events. Please refer to
* <a href="https://www.w3schools.com/jsref/dom_obj_event.asp">
* W3Schools
* </a> for further details.
*
* @event TK.Widget##GenericDOMEvents
*/