mirror of
https://github.com/Ardour/ardour.git
synced 2026-01-02 19:59:30 +01:00
WS: Improve mixer demo
This commit is contained in:
Luciano Iam
Robin Gareus
parent
2987350892
commit
1109fc7983
192 changed files with 29395 additions and 548 deletions
799
share/web_surfaces/builtin/mixer/toolkit/widgets/widget.js
Normal file
799
share/web_surfaces/builtin/mixer/toolkit/widgets/widget.js
Normal file
|
|
@ -0,0 +1,799 @@
|
|||
/*
|
||||
* 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
|
||||
*/
|
||||
Loading…
Add table
Add a link
Reference in a new issue