800 lines
24 KiB
JavaScript
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
|
||
|
|
*/
|