44,6 → 44,9 |
* @namespace |
*/ |
jsx.dom.widgets = { |
/** |
* @version |
*/ |
version: "$Id$" |
}; |
|
105,243 → 108,227 |
} |
}; |
|
jsx.dom.widgets.Widget.extend(null, { |
/** |
* Widgets are `div' elements by default. Inheriting classes should |
* override this when appropriate (e. g., a menu should be a `ul'). |
* |
* @memberOf jsx.dom.widgets.Widget.prototype |
*/ |
elementType: "div", |
jsx.dom.widgets.Widget.extend(null, (function () { |
var _getKeys = jsx.object.getKeys; |
var _css = jsx.dom.css; |
|
/** |
* @type Element |
*/ |
_target: null, |
return { |
/** |
* Widgets are `div' elements by default. Inheriting classes should |
* override this when appropriate (e. g., a menu should be a `ul'). |
* |
* @memberOf jsx.dom.widgets.Widget.prototype |
*/ |
elementType: "div", |
|
/** |
* Defines actions to be performed when the widget is initialized. |
* Can be overridden by inheriting types. If it is overridden, |
* it must also be called. |
*/ |
init: function () { |
if (this._parent) |
{ |
/* |
* Automagically append widget to parent |
* (without necessarily rendering it) |
*/ |
/* FIXME */ |
// this.appendTo(); |
} |
}, |
/** |
* @type Element |
*/ |
_target: null, |
|
/** |
* Gets a property of this widget's target object. |
* |
* @param {String} name |
* @return {any} |
*/ |
getTargetProperty: function (name) { |
return this._target[name]; |
}, |
/** |
* Defines actions to be performed when the widget is initialized. |
* Can be overridden by inheriting types. If it is overridden, |
* it must also be called. |
*/ |
init: function () { |
if (this._parent) |
{ |
/* |
* Automagically append widget to parent |
* (without necessarily rendering it) |
*/ |
/* FIXME */ |
// this.appendTo(); |
} |
}, |
|
/** |
* Sets a property of this widget's target object. |
* |
* Use {@link #setStyleProperty()}, {@link #resetStyleProperty()} |
* or {@link #setStyle()} for setting style properties instead. |
* |
* @param {String} name |
* @param value |
* @return {jsx.dom.widgets.Widget} |
*/ |
setTargetProperty: function (name, value) { |
this._target[name] = value; |
return this; |
}, |
/** |
* Gets a property of this widget's target object. |
* |
* @param {String} name |
* @return {any} |
*/ |
getTargetProperty: function (name) { |
return this._target[name]; |
}, |
|
/** |
* Sets several property of this widget's target object. |
* |
* Use {@link #setStyleProperty()}, {@link #resetStyleProperty()} |
* or {@link #setStyle()} for setting style properties instead. |
* |
* @param {String} name |
* @param value |
* @return {jsx.dom.widgets.Widget} |
*/ |
setTargetProperties: function (properties) { |
var keys = jsx.object.getKeys(properties); |
for (var i = 0, len = keys.length; i < len; ++i) |
{ |
var propertyName = keys[i]; |
this.setTargetProperty(propertyName, properties[propertyName]); |
} |
/** |
* Sets a property of this widget's target object. |
* |
* Use {@link #setStyleProperty()}, {@link #resetStyleProperty()} |
* or {@link #setStyle()} for setting style properties instead. |
* |
* @param {String} name |
* @param value |
* @return {jsx.dom.widgets.Widget} |
*/ |
setTargetProperty: function (name, value) { |
this._target[name] = value; |
return this; |
}, |
|
return this; |
}, |
/** |
* Sets several property of this widget's target object. |
* |
* Use {@link #setStyleProperty()}, {@link #resetStyleProperty()} |
* or {@link #setStyle()} for setting style properties instead. |
* |
* @param {String} name |
* @param value |
* @return {jsx.dom.widgets.Widget} |
*/ |
setTargetProperties: function (properties) { |
var keys = _getKeys(properties); |
for (var i = 0, len = keys.length; i < len; ++i) |
{ |
var propertyName = keys[i]; |
this.setTargetProperty(propertyName, properties[propertyName]); |
} |
|
/** |
* Sets a style property of this widget |
* |
* @function |
*/ |
setStyleProperty: (function () { |
var jsx_dom_css_setStyleProperty = jsx.dom.css.setStyleProperty; |
return this; |
}, |
|
/** |
* Sets a style property of this widget |
* |
* @param {String} name |
* @param value |
* @return {boolean} |
* @see jsx.dom.css.setStyleProperty() |
*/ |
function Widget_setStyleProperty (name, value) |
{ |
return jsx_dom_css_setStyleProperty(this._target, name, value); |
} |
setStyleProperty: function (name, value) { |
return _css.setStyleProperty(this._target, name, value); |
}, |
|
return Widget_setStyleProperty; |
}()), |
/** |
* Resets a style property of this widget to its inherited value |
* |
* @param {String} name |
*/ |
resetStyleProperty: function (name) { |
_css.resetStyleProperty(this._target, name); |
}, |
|
/** |
* Resets a style property of this widget to its inherited value |
* |
* @function |
*/ |
resetStyleProperty: (function (name) { |
var jsx_dom_css_resetStyleProperty = jsx.dom.css.resetStyleProperty; |
|
/** |
* @param name |
* @returns {Function} |
* Sets several style properties of this widget at once |
* |
* @param {Object} style |
*/ |
function Widget_resetStyleProperty (name) |
{ |
jsx_dom_css_resetStyleProperty(this._target, name); |
} |
setStyle: function (style) { |
var result = true; |
|
return Widget_resetStyleProperty; |
}()), |
for (var propertyName in style) |
{ |
var resultPart = this.setStyleProperty(propertyName, style[propertyName]); |
if (result && !resultPart) |
{ |
result = false; |
} |
} |
|
/** |
* Sets several style properties of this widget at once |
* |
* @param {Object} style |
*/ |
setStyle: function (style) { |
var result = true; |
return result; |
}, |
|
for (var propertyName in style) |
{ |
var resultPart = this.setStyleProperty(propertyName, style[propertyName]); |
if (result && !resultPart) |
/** |
* Defines actions to be performed when the widget's canvas should be |
* updated to reflect its current status; should be overridden |
* and called by inheriting types. |
*/ |
update: function () { |
this.setStyle(this.style); |
|
for (var i = 0, len = this.children.length; i < len; ++i) |
{ |
result = false; |
this.children[i].update(); |
} |
} |
|
return result; |
}, |
return this; |
}, |
|
/** |
* Defines actions to be performed when the widget's canvas should be |
* updated to reflect its current status; should be overridden |
* and called by inheriting types. |
*/ |
update: function () { |
this.setStyle(this.style); |
/** |
* Causes the widget to be rendered, and attached to the document tree |
* if not already attached. |
* |
* @param {Element} parent (optional) |
* Reference to the object representing the parent element to |
* which the widget should be appended as child. The default is |
* document.body. |
*/ |
render: function (parent) { |
this.update(); |
this.appendTo(parent); |
this._target.style.display = ""; |
return this; |
}, |
|
for (var i = 0, len = this.children.length; i < len; ++i) |
{ |
this.children[i].update(); |
} |
/** |
* Causes the widget not to be rendered, without removing it |
* from the document tree. |
*/ |
unrender: function () { |
this._target.style.display = "none"; |
return this; |
}, |
|
return this; |
}, |
/** |
* Shows the widget |
*/ |
show: function () { |
this._target.style.visibility = "visible"; |
return this; |
}, |
|
/** |
* Causes the widget to be rendered, and attached to the document tree |
* if not already attached. |
* |
* @param {Element} parent (optional) |
* Reference to the object representing the parent element to |
* which the widget should be appended as child. The default is |
* document.body. |
*/ |
render: function (parent) { |
this.update(); |
this.appendTo(parent); |
this._target.style.display = ""; |
return this; |
}, |
/** |
* Hides the widget, but keeps its box |
*/ |
hide: function () { |
this._target.style.visibility = "hidden"; |
return this; |
}, |
|
/** |
* Causes the widget not to be rendered, without removing it |
* from the document tree. |
*/ |
unrender: function () { |
this._target.style.display = "none"; |
return this; |
}, |
/** |
* Appends the widget as a child element |
* |
* @param {jsx.dom.widgets.Container} parent (optional) |
* The widget that this widget should be appended to. |
* The default is the current parent widget. |
* @see jsx.dom.widgets.Container.prototype.appendChild() |
*/ |
appendTo: function (parent) { |
if (typeof parent == "undefined") |
{ |
parent = this._parent; |
} |
|
/** |
* Shows the widget |
*/ |
show: function () { |
this._target.style.visibility = "visible"; |
return this; |
}, |
return parent.appendChild(this); |
}, |
|
/** |
* Hides the widget, but keeps its box |
*/ |
hide: function () { |
this._target.style.visibility = "hidden"; |
return this; |
}, |
/** |
* Removes the widget from the document |
* |
* @see jsx.dom.widgets.Container.prototype.removeChild() |
*/ |
remove: function () { |
for (var i = 0, len = this.children.length; i < len; ++i) |
{ |
this.children[i].remove(); |
} |
|
/** |
* Appends the widget as a child element |
* |
* @param {jsx.dom.widgets.Container} parent (optional) |
* The widget that this widget should be appended to. |
* The default is the current parent widget. |
* @see jsx.dom.widgets.Container.prototype.appendChild() |
*/ |
appendTo: function (parent) { |
if (typeof parent == "undefined") |
{ |
parent = this._parent; |
} |
/* TODO: Clean-up event listener */ |
|
return parent.appendChild(this); |
}, |
return this._parent.removeChild(this); |
}, |
|
/** |
* Removes the widget from the document |
* |
* @see jsx.dom.widgets.Container.prototype.removeChild() |
*/ |
remove: function () { |
for (var i = 0, len = this.children.length; i < len; ++i) |
{ |
this.children[i].remove(); |
_getSetterFor: function (propertyName) { |
var setterName = |
"set" + propertyName.charAt(0).toUpperCase() + propertyName.substring(1); |
var setter = this[setterName]; |
return (typeof setter == "function") ? setter : null; |
} |
}; |
}())); |
|
/* TODO: Clean-up event listener */ |
|
return this._parent.removeChild(this); |
}, |
|
_getSetterFor: function (propertyName) { |
var setterName = |
"set" + propertyName.charAt(0).toUpperCase() + propertyName.substring(1); |
var setter = this[setterName]; |
return (typeof setter == "function") ? setter : null; |
} |
}); |
|
/** |
* <code>Container</code>s are widgets that may have content, such |
* as other widgets and text. |
409,11 → 396,20 |
}; |
}()), |
|
/** |
* @memberOf jsx.dom.widgets.Container.prototype |
* @return {string} |
*/ |
getText: function () { |
this.text = this._target.textContent; |
return this.text; |
}, |
|
|
/** |
* @param {string} text |
* @return {jsx.dom.widgets.Container} |
*/ |
setText: function (text) { |
this.text = text; |
this.innerHTML = null; |
420,6 → 416,10 |
return this; |
}, |
|
/** |
* @param {string} html |
* @return {jsx.dom.widgets.Container} |
*/ |
setInnerHTML: function (html) { |
this.text = ""; |
this.innerHTML = html; |
427,7 → 427,6 |
}, |
|
/** |
* @memberOf jsx.dom.widgets.Container.prototype |
* @param {jsx.dom.widgets.Widget} child |
* @return {jsx.dom.widgets.Widget} |
* The appended widget. |
438,8 → 437,15 |
var target = this._target; |
var success = true; |
|
/* |
* If the child widget's element is not in the document tree, |
* or if it is not already a child of our element … |
*/ |
if (!target.parentNode || (target != childTarget.parentNode)) |
{ |
/* |
* … append it as child element |
*/ |
target.appendChild(child._target); |
success = (target.lastChild == childTarget); |
} |
446,14 → 452,13 |
|
if (success) |
{ |
/* Append the widget to our children if we not have it already */ |
var childIndex = this.children.indexOf(child); |
if (childIndex >= 0) |
if (childIndex < 0) |
{ |
this.children.splice(childIndex, 1); |
this.children.push(child); |
} |
|
this.children.push(child); |
|
result = child; |
} |
|
477,7 → 482,7 |
|
jsx.dom.widgets.Section.extend(jsx.dom.widgets.Container, { |
/** |
* @memberOf jsx.dom.widgets.Section#prototype |
* @memberOf jsx.dom.widgets.Section.prototype |
*/ |
elementType: "section" |
}); |
489,7 → 494,7 |
|
jsx.dom.widgets.Label.extend(jsx.dom.widgets.Container, { |
/** |
* @memberOf jsx.dom.widgets.Label#prototype |
* @memberOf jsx.dom.widgets.Label.prototype |
*/ |
elementType: "label" |
}); |
501,7 → 506,7 |
|
jsx.dom.widgets.TextArea.extend(jsx.dom.widgets.Container, { |
/** |
* @memberOf jsx.dom.widgets.TextArea#prototype |
* @memberOf jsx.dom.widgets.TextArea.prototype |
*/ |
elementType: "textarea" |
}); |
518,7 → 523,7 |
|
jsx.dom.widgets.CheckBox.extend(jsx.dom.widgets.Widget, { |
/** |
* @memberOf jsx.dom.widgets.CheckBox#prototype |
* @memberOf jsx.dom.widgets.CheckBox.prototype |
*/ |
elementType: "input", |
|
607,29 → 612,26 |
* Appends the widget as a child element |
* |
* @param parent |
* @return {Array} |
* @return {Array[Widget]} |
* An {@link Array} containing the checkbox widget and its |
* label widget, if specified. |
* @see jsx.dom.widgets.Widget.prototype.appendTo() |
*/ |
appendTo: function (parent) { |
if (typeof parent == "undefined") |
{ |
parent = this._parent; |
} |
jsx.dom.widgets.CheckBox._super.prototype.appendTo.call(this, parent); |
|
var checkboxTarget = jsx.dom.widgets.CheckBox._super.prototype.appendTo.call(this, parent); |
|
var label = this.label; |
if (label) |
{ |
if (this.labelPosition === jsx.dom.widgets.position.BEFORE) |
{ |
var labelTarget = parent._target.insertBefore(label._target, this._target); |
parent._target.insertBefore(label._target, this._target); |
} |
else |
{ |
if (this.labelPosition === jsx.dom.widgets.position.AFTER) |
{ |
labelTarget = parent._target.insertBefore(label._target, this._target.nextSibling); |
parent._target.insertBefore(label._target, this._target.nextSibling); |
} |
} |
|
636,7 → 638,7 |
label.appendTo(parent); |
} |
|
return [checkboxTarget, labelTarget]; |
return [this, label]; |
}, |
|
/** |
670,7 → 672,7 |
*/ |
jsx.dom.widgets.Input = |
function jsx_dom_widgets_Input (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Input._super.apply(this, arguments); |
jsx_dom_widgets_Input._super.apply(this, arguments); |
|
var me = this; |
jsx.dom.addEventListener(this._target, "keypress", jsx.dom.createEventListener( |
696,7 → 698,7 |
* this widget. CAUTION: Too restrictive an expression could render |
* the widget unusable. |
* |
* @memberOf jsx.dom.widgets.Input#prototype |
* @memberOf jsx.dom.widgets.Input.prototype |
* @type RegExp |
*/ |
allowedChars: /./, |
735,7 → 737,7 |
|
jsx.dom.widgets.Button.extend(jsx.dom.widgets.Container, { |
/** |
* @memberOf jsx.dom.widgets.Button#prototype |
* @memberOf jsx.dom.widgets.Button.prototype |
*/ |
elementType: "button", |
|
778,7 → 780,7 |
*/ |
jsx.dom.widgets.NumberInput = |
function jsx_dom_widgets_NumberInput (oTarget, oParent, oProperties) { |
jsx_dom_widgets_NumberInput._super.apply(this, arguments); |
jsx_dom_widgets_NumberInput._super.apply(this, arguments); |
|
var me = this; |
|
802,7 → 804,7 |
|
jsx.dom.widgets.NumberInput.extend(jsx.dom.widgets.Input, { |
/** |
* @memberOf jsx.dom.widgets.NumberInput#prototype |
* @memberOf jsx.dom.widgets.NumberInput.prototype |
* @type RegExp |
*/ |
allowedChars: /[\d.]/, |
1095,7 → 1097,7 |
/** |
* Increases the value of the input by 1 |
* |
* @memberOf jsx.dom.widgets.SpinnerInput#prototype |
* @memberOf jsx.dom.widgets.SpinnerInput.prototype |
*/ |
inc: function () { |
var v, t = this._target; |
1143,23 → 1145,24 |
}()) |
}); |
|
jsx.dom.widgets.ListItem = |
function jsx_dom_widgets_ListItem () { |
jsx_dom_widgets_ListItem._super.apply(this, arguments); |
}; |
jsx.dom.widgets.ListItem = function jsx_dom_widgets_ListItem () { |
jsx_dom_widgets_ListItem._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.ListItem.extend(jsx.dom.widgets.Container, { |
/** |
* @memberOf jsx.dom.widgets.ListItem.prototype |
*/ |
elementType: "li" |
}); |
|
jsx.dom.widgets.List = |
function jsx_dom_widgets_List () { |
jsx_dom_widgets_List._super.apply(this, arguments); |
}; |
jsx.dom.widgets.List = function jsx_dom_widgets_List () { |
jsx_dom_widgets_List._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.List.extend(jsx.dom.widgets.Widget, { |
/** |
* @memberOf jsx.dom.widgets.List#prototype |
* @memberOf jsx.dom.widgets.List.prototype |
* @param {jsx.dom.widgets.ListItem} listItem |
*/ |
addItem: function (listItem) { |
1252,26 → 1255,24 |
}()) |
}); |
|
jsx.dom.widgets.OrderedList = |
function jsx_dom_widgets_OrderedList () { |
jsx_dom_widgets_OrderedList._super.apply(this, arguments); |
}; |
jsx.dom.widgets.OrderedList = function jsx_dom_widgets_OrderedList () { |
jsx_dom_widgets_OrderedList._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.OrderedList.extend(jsx.dom.widgets.List, { |
/** |
* @memberOf jsx.dom.widgets.OrderedList#prototype |
* @memberOf jsx.dom.widgets.OrderedList.prototype |
*/ |
elementType: "ol" |
}); |
|
jsx.dom.widgets.UnorderedList = |
function jsx_dom_widgets_UnorderedList () { |
jsx_dom_widgets_UnorderedList._super.apply(this, arguments); |
}; |
jsx.dom.widgets.UnorderedList = function jsx_dom_widgets_UnorderedList () { |
jsx_dom_widgets_UnorderedList._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.UnorderedList.extend(jsx.dom.widgets.List, { |
/** |
* @memberOf jsx.dom.widgets.UnorderedList#prototype |
* @memberOf jsx.dom.widgets.UnorderedList.prototype |
*/ |
elementType: "ul" |
}); |
1278,12 → 1279,12 |
|
jsx.dom.widgets.Tree = |
function jsx_dom_widgets_Tree (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Tree._super.apply(this, arguments); |
jsx_dom_widgets_Tree._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.Tree.extend(jsx.dom.widgets.Widget, { |
/** |
* @memberOf jsx.dom.widgets.Tree#prototype |
* @memberOf jsx.dom.widgets.Tree.prototype |
*/ |
_list: null, |
|
1328,7 → 1329,7 |
|
/** |
* (non-JSdoc) |
* @memberOf jsx.dom.widgets.Table#prototype |
* @memberOf jsx.dom.widgets.Table.prototype |
* @see jsx.dom.widgets.Widget.prototype.init() |
*/ |
init: function () { |
1481,14 → 1482,13 |
|
jsx.dom.widgets.Timer.extend(jsx.dom.widgets.Widget); |
|
jsx.dom.widgets.InitError = |
function jsx_dom_widgets_InitError (widgetType) { |
jsx_dom_widgets_InitError._super.call(this, widgetType); |
}; |
jsx.dom.widgets.InitError = function jsx_dom_widgets_InitError (widgetType) { |
jsx_dom_widgets_InitError._super.call(this, widgetType); |
}; |
|
jsx.dom.widgets.InitError.extend(jsx.Error, { |
/** |
* @memberOf jsx.dom.widgets.InitError#prototype |
* @memberOf jsx.dom.widgets.InitError.prototype |
*/ |
name: "jsx.dom.widgets.InitError" |
}); |