28,6 → 28,7 |
{ |
/** |
* @namespace |
* (must be provided by object.js, here for JSDT only) |
*/ |
var jsx = {}; |
} |
36,20 → 37,25 |
{ |
/** |
* @namespace |
* (must be provided by dom.js, here for JSDT only) |
*/ |
jsx.dom = {}; |
} |
|
/** |
* @type jsx.dom.widgets |
* @memberOf __jsx.dom.widgets |
* @namespace |
*/ |
jsx.dom.widgets = { |
/** |
* @version |
*/ |
version: "$Id$" |
}; |
jsx.dom.widgets = (/** @constructor */ function () { |
/* Imports */ |
var _jsx_dom = jsx.dom; |
var _gEBTN = _jsx_dom.getElemByTagName; |
|
/* Constant-like private variables */ |
var _AFTER = 1; |
|
/* Other private variables */ |
/** |
* Constructor of the abstract prototype for widgets. It provides |
* shallow copying of the passed properties, stores the reference to the |
58,6 → 64,11 |
* and this constructor should be called only from the constructors of |
* prototypes of specialized widgets. |
* |
* @function |
*/ |
var _Widget = ( |
/** |
* @constructor |
* @param {Element} oTarget |
* Reference to the DOM object that represents the |
* element that provides the client area for the widget. Pass a |
69,12 → 80,13 |
* {@link #appendTo()} method later to append it. |
* @param {Object} oProperties |
*/ |
jsx.dom.widgets.Widget = function (oTarget, oParent, oProperties) { |
function (oTarget, oParent, oProperties) { |
this._target = oTarget || document.createElement(this.elementType); |
|
if (oParent && !(oParent instanceof jsx.dom.widgets.Container)) |
if (oParent && !(oParent instanceof _Container)) |
{ |
return jsx.throwThis(jsx.InvalidArgumentError, [null, "jsx.dom.widgets.Container", oParent]); |
return jsx.throwThis(jsx.InvalidArgumentError, |
[null, jsx.object.getFunctionName(oParent.constructor), "jsx.dom.widgets.Container"]); |
} |
|
this._parent = oParent || null; |
106,11 → 118,10 |
this.init(); |
this.update(); |
} |
}; |
|
jsx.dom.widgets.Widget.extend(null, (function () { |
} |
).extend(null, (function () { |
var _getKeys = jsx.object.getKeys; |
var _css = jsx.dom.css; |
var _css = _jsx_dom.css; |
|
return { |
/** |
138,8 → 149,7 |
* Automagically append widget to parent |
* (without necessarily rendering it) |
*/ |
/* FIXME */ |
// this.appendTo(); |
this.appendTo(); |
} |
}, |
|
247,17 → 257,10 |
}, |
|
/** |
* 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. |
* Causes the widget to be rendered. |
*/ |
render: function (parent) { |
this.update(); |
this.appendTo(parent); |
this._target.style.display = ""; |
return this; |
}, |
330,18 → 333,36 |
}())); |
|
/** |
* <code>Container</code>s are widgets that may have content, such |
* as other widgets and text. |
* @function |
*/ |
jsx.dom.widgets.Container = |
var _Container = ( |
/** |
* <code>Container</code>s are collapsible widgets |
* that may have content, such as other widgets and text. |
* |
* @constructor |
*/ |
function jsx_dom_widgets_Container (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Container._super.apply(this, arguments); |
}; |
} |
).extend(_Widget, { |
/** |
* Defines whether the widget should be collapsed |
* |
* @private |
*/ |
_collapsed: false, |
|
jsx.dom.widgets.Container.extend(jsx.dom.widgets.Widget, { |
innerHTML: null, |
_defaultInnerHTML: null, |
text: null, |
|
init: function () { |
_Container._super.prototype.init.call(this); |
|
this._defaultContent = this.innerHTML || this._target.innerHTML || ""; |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widget.Widget.prototype.update |
348,12 → 369,11 |
*/ |
update: (function () { |
var _isArray = jsx.object.isArray; |
var _createNodesFromObj = jsx.dom.createNodesFromObj; |
var _setTextContent = jsx.dom.setTextContent; |
var update = jsx.dom.widgets.Widget.prototype.update; |
var _createNodesFromObj = _jsx_dom.createNodesFromObj; |
var _setTextContent = _jsx_dom.setTextContent; |
|
return function () { |
update.call(this); |
_Container._super.prototype.update.call(this); |
|
var target = this._target; |
|
366,7 → 386,7 |
} |
else |
{ |
jsx.dom.removeChildren(target, target.childNodes); |
_jsx_dom.removeChildren(target, target.childNodes); |
|
if (_isArray(html)) |
{ |
375,7 → 395,7 |
|
if (_isArray(html)) |
{ |
jsx.dom.appendChildren(target, html); |
_jsx_dom.appendChildren(target, html); |
} |
else |
{ |
397,6 → 417,61 |
}()), |
|
/** |
* Returns the collapsed state of the <code>Container</code> |
* |
* @return {boolean} |
* <code>true</code> if the widget is collapsed, |
* <code>false</code> otherwise. |
*/ |
isCollapsed: function () { |
return !!this._collapsed; |
}, |
|
/** |
* Sets the collapsed state of the <code>Container</code> |
* |
* @param {boolean} value |
* @return {jsx.dom.widgets.Container} |
*/ |
setCollapsed: function (value) { |
var oldValue = this.isCollapsed(); |
var newValue = this._collapsed = !!value; |
|
if (newValue != oldValue) |
{ |
if (newValue && typeof this.oncollapse == "function") |
{ |
this.oncollapse(); |
} |
else if (!newValue && typeof this.onexpand == "function") |
{ |
this.onexpand(); |
} |
|
if (typeof this.oncollapsedchange == "function") |
{ |
this.oncollapsedchange(newValue); |
} |
} |
|
return this; |
}, |
|
/** |
* Collapses the <code>Container</code> |
*/ |
collapse: function () { |
this.setCollapsed(true); |
}, |
|
/** |
* Expands the <code>Container</code> |
*/ |
expand: function () { |
this.setCollapsed(false); |
}, |
|
/** |
* @memberOf jsx.dom.widgets.Container.prototype |
* @return {string} |
*/ |
405,7 → 480,6 |
return this.text; |
}, |
|
|
/** |
* @param {string} text |
* @return {jsx.dom.widgets.Container} |
426,6 → 500,17 |
return this; |
}, |
|
resetContent: function () { |
this.setInnerHTML(this._defaultContent); |
}, |
|
setChildren: function (children) { |
for (var i = 0, len = children.length; i < len; ++i) |
{ |
children[i].appendTo(this); |
} |
}, |
|
/** |
* @param {jsx.dom.widgets.Widget} child |
* @return {jsx.dom.widgets.Widget} |
439,9 → 524,9 |
|
/* |
* If the child widget's element is not in the document tree, |
* or if it is not already a child of our element … |
* or if it is not already a child of this widget's element … |
*/ |
if (!target.parentNode || (target != childTarget.parentNode)) |
if (childTarget.parentNode != target) |
{ |
/* |
* … append it as child element |
452,13 → 537,18 |
|
if (success) |
{ |
/* Append the widget to our children if we not have it already */ |
/* |
* If we already have the widget as a child, |
* move it to the end of the list |
*/ |
var childIndex = this.children.indexOf(child); |
if (childIndex < 0) |
if (childIndex >= 0) |
{ |
this.children.push(child); |
this.children.splice(childIndex, 1); |
} |
|
this.children.push(child); |
|
result = child; |
} |
|
475,12 → 565,14 |
} |
}); |
|
jsx.dom.widgets.Section = |
var _Section = ( |
/** |
* @constructor |
*/ |
function jsx_dom_widgets_Section (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Section._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.Section.extend(jsx.dom.widgets.Container, { |
_Section._super.apply(this, arguments); |
} |
).extend(_Container, { |
/** |
* @memberOf jsx.dom.widgets.Section.prototype |
*/ |
487,12 → 579,22 |
elementType: "section" |
}); |
|
jsx.dom.widgets.Label = |
var _Anchor = ( |
function jsx_dom_widgets_Anchor () { |
jsx_dom_widgets_Anchor._super.apply(this, arguments); |
} |
).extend(_Container, { |
elementType: "a", |
}); |
|
var _Label = ( |
/** |
* @constructor |
*/ |
function jsx_dom_widgets_Label (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Label._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.Label.extend(jsx.dom.widgets.Container, { |
} |
).extend(_Container, { |
/** |
* @memberOf jsx.dom.widgets.Label.prototype |
*/ |
499,12 → 601,14 |
elementType: "label" |
}); |
|
jsx.dom.widgets.TextArea = |
var _TextArea = ( |
/** |
* @constructor |
*/ |
function jsx_dom_widgets_TextArea (oTarget, oParent, oProperties) { |
jsx_dom_widgets_TextArea._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.TextArea.extend(jsx.dom.widgets.Container, { |
} |
).extend(_Container, { |
/** |
* @memberOf jsx.dom.widgets.TextArea.prototype |
*/ |
511,152 → 615,16 |
elementType: "textarea" |
}); |
|
jsx.dom.widgets.CheckBox = |
function jsx_dom_widgets_CheckBox (oTarget, oParent, oProperties) { |
jsx_dom_widgets_CheckBox._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.position = { |
BEFORE: -1, |
AFTER: 1 |
}; |
|
jsx.dom.widgets.CheckBox.extend(jsx.dom.widgets.Widget, { |
/** |
* @memberOf jsx.dom.widgets.CheckBox.prototype |
* @function |
*/ |
elementType: "input", |
|
labelPosition: jsx.dom.widgets.position.AFTER, |
|
var _Input = ( |
/** |
* Unique ID of this control |
*/ |
_uid: -1, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.init() |
*/ |
init: function () { |
this._target.type = "checkbox"; |
this._target.id = "checkbox" + (++this._uid); |
|
var label = this.label; |
if (label) |
{ |
if (typeof label.valueOf() == "string") |
{ |
this.label = new jsx.dom.widgets.Label(null, this._parent, { |
innerHTML: [label] |
}); |
} |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.render() |
*/ |
render: function () { |
jsx.dom.widgets.CheckBox._super.prototype.render.call(this); |
|
var label = this.label; |
if (label) |
{ |
label._target.htmlFor = this._target.id; |
label.render(); |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.unrender() |
*/ |
unrender: function () { |
jsx.dom.widgets.CheckBox._super.prototype.unrender.call(this); |
|
if (this.label) |
{ |
this.label.unrender(); |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.show() |
*/ |
show: function () { |
jsx.dom.widgets.CheckBox._super.protoype.show.call(this); |
|
if (this.label) |
{ |
this.label.show(); |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.hide() |
*/ |
hide: function () { |
jsx.dom.widgets.CheckBox._super.prototype.hide.call(this); |
|
if (this.label) |
{ |
this.label.hide(); |
} |
}, |
|
/** |
* Appends the widget as a child element |
* |
* @param parent |
* @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) { |
jsx.dom.widgets.CheckBox._super.prototype.appendTo.call(this, parent); |
|
var label = this.label; |
if (label) |
{ |
if (this.labelPosition === jsx.dom.widgets.position.BEFORE) |
{ |
parent._target.insertBefore(label._target, this._target); |
} |
else |
{ |
if (this.labelPosition === jsx.dom.widgets.position.AFTER) |
{ |
parent._target.insertBefore(label._target, this._target.nextSibling); |
} |
} |
|
label.appendTo(parent); |
} |
|
return [this, label]; |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.remove() |
*/ |
remove: function () { |
var checkboxTarget = jsx.dom.widgets.CheckBox._super.prototype.remove.call(this); |
var labelTarget = this.label.remove(); |
return [checkboxTarget, labelTarget]; |
} |
}); |
|
/** |
* An <code>Input</code> widget enhances the default |
* <code>INPUT</code> element text box with a restriction to the |
* characters that may be typed into it. |
* |
* @constructor |
* @param {Element} oTarget |
* Reference to the DOM object that represents the |
* element that provides the client area for the widget. Pass a |
670,12 → 638,11 |
* @param {Object} oProperties |
* @see Widget |
*/ |
jsx.dom.widgets.Input = |
function jsx_dom_widgets_Input (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Input._super.apply(this, arguments); |
|
var me = this; |
jsx.dom.addEventListener(this._target, "keypress", jsx.dom.createEventListener( |
_jsx_dom.addEventListener(this._target, "keypress", _jsx_dom.createEventListener( |
function (e) { |
var charCode = |
(typeof e.charCode != "undefined") |
690,9 → 657,8 |
} |
} |
)); |
}; |
|
jsx.dom.widgets.Input.extend(jsx.dom.widgets.Widget, { |
} |
).extend(_Widget, { |
/** |
* Regular Expression specifying the format allowed to be input into |
* this widget. CAUTION: Too restrictive an expression could render |
709,12 → 675,9 |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.update() |
*/ |
update: (function () { |
var update = jsx.dom.widgets.Widget.prototype.update; |
update: function () { |
_Input._super.prototype.update.call(this); |
|
return function () { |
update.call(this); |
|
if (typeof this.value != "undefined") |
{ |
this._target.value = this.value; |
726,46 → 689,18 |
} |
|
return this; |
}; |
}()) |
} |
}); |
|
jsx.dom.widgets.Button = |
function jsx_dom_widgets_Button (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Button._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.Button.extend(jsx.dom.widgets.Container, { |
/** |
* @memberOf jsx.dom.widgets.Button.prototype |
* @function |
*/ |
elementType: "button", |
|
var _NumberInput = ( |
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.init() |
*/ |
init: function jsx_dom_widgets_Button_prototype_init () { |
var me = this; |
|
jsx.tryThis( |
function () { |
me._target.type = "button"; |
}, |
|
function () { |
/* IE 7 and other borken UAs that don't support inline-block properly */ |
jsx.throwThis("jsx.dom.widgets.InitError", "jsx.dom.widgets.Button", |
jsx_dom_widgets_Button_prototype_init); |
} |
); |
} |
}); |
|
/** |
* A <code>NumberInput</code> widget restricts the characters to be |
* typed into it to decimal digits and the decimal point (".") by default. |
* |
* @constructor |
* @param {Element} oTarget |
* Reference to the DOM object that represents the element that |
* provides the client area for the widget. Pass a false-value |
778,7 → 713,6 |
* @param {Object} oProperties |
* @see jsx.dom.widgets#Input |
*/ |
jsx.dom.widgets.NumberInput = |
function jsx_dom_widgets_NumberInput (oTarget, oParent, oProperties) { |
jsx_dom_widgets_NumberInput._super.apply(this, arguments); |
|
785,11 → 719,11 |
var me = this; |
|
var target = this._target; |
jsx.dom.addEventListener(target, "blur", function () { |
_jsx_dom.addEventListener(target, "blur", function () { |
me.update(); |
}); |
|
jsx.dom.addEventListener(target, "focus", function () { |
_jsx_dom.addEventListener(target, "focus", function () { |
if (me.leadingZero) |
{ |
this.value = parseInt(this.value, 10); |
798,11 → 732,10 |
|
if (typeof this.oninput == "function") |
{ |
jsx.dom.addEventListener(target, "input", this.oninput); |
_jsx_dom.addEventListener(target, "input", this.oninput); |
} |
}; |
|
jsx.dom.widgets.NumberInput.extend(jsx.dom.widgets.Input, { |
} |
).extend(_Input, { |
/** |
* @memberOf jsx.dom.widgets.NumberInput.prototype |
* @type RegExp |
826,6 → 759,8 |
* @see jsx.dom.widgets.Widget.prototype.init() |
*/ |
init: function () { |
_NumberInput._super.prototype.init.call(this); |
|
var target = this._target; |
|
if (target.type != "number") |
852,12 → 787,9 |
* (non-JSdoc) |
* @see jsx.dom.widgets.Input.prototype.update() |
*/ |
update: (function () { |
var update = jsx.dom.widgets.Input.prototype.update; |
update: function () { |
_NumberInput._super.prototype.update.call(this); |
|
return function () { |
update.call(this); |
|
var target = this._target; |
|
var v = parseFloat(target.value); |
889,8 → 821,7 |
} |
|
return this; |
}; |
}()), |
}, |
|
/** |
* @protected |
928,21 → 859,348 |
} |
}); |
|
var _ListItem = ( |
/** |
* Input widget that allows the user to increase or decrease its |
* current value |
* @constructor |
*/ |
function jsx_dom_widgets_ListItem () { |
jsx_dom_widgets_ListItem._super.apply(this, arguments); |
} |
).extend(_Container, { |
/** |
* @memberOf jsx.dom.widgets.ListItem.prototype |
*/ |
elementType: "li" |
}); |
|
/** |
* @function |
*/ |
var _List = ( |
/** |
* @constructor |
*/ |
function jsx_dom_widgets_List () { |
jsx_dom_widgets_List._super.apply(this, arguments); |
} |
).extend(_Container, { |
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.init() |
*/ |
init: function () { |
_List._super.prototype.init.call(this); |
|
if (!this.items) |
{ |
var target = this._target; |
if (target) |
{ |
var childNodes = target.children || target.childNodes; |
for (var i = 0, len = childNodes.length; i < len; ++i) |
{ |
var node = childNodes[i]; |
if (node.nodeType == 1) |
{ |
var item = new _ListItem(node); |
item.appendTo(this); |
this.addItem(item); |
} |
} |
} |
} |
}, |
|
/** |
* @memberOf jsx.dom.widgets.List.prototype |
* @param {any} listItem |
*/ |
addItem: function (listItem) { |
if (!this.items) |
{ |
this.items = []; |
} |
|
this.items.push(listItem); |
}, |
|
/** |
* @param {any} listItem |
*/ |
removeItem: function (item) { |
var items = this.items; |
if (items) |
{ |
var i = items.indexOf(item); |
if (i > -1) |
{ |
items.splice(i, 1); |
} |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.List.prototype.update() |
*/ |
update: function () { |
_List._super.prototype.update.call(this); |
|
var items = this._items; |
var i; |
var len = items && items.length || 0; |
|
for (i = len; i--;) |
{ |
var item = items[i]; |
if (item._target.tagName.toUpperCase() != "LI") |
{ |
items[i] = new _ListItem(null, null, { |
children: [item] |
}); |
} |
|
items[i].update(); |
} |
|
var target = this._target; |
var listItems = _gEBTN("li", -1, target); |
var len2 = listItems.length; |
for (i = 0; i < len && i < len2; ++i) |
{ |
var listItem = listItems[i]; |
item = items[i]; |
|
if (listItem != item._target) |
{ |
target.replaceChild(item._target, listItem); |
} |
} |
|
for (var j = listItems.length; j-- > i;) |
{ |
target.removeChild(listItems[j]); |
} |
|
for (++j; j < len; ++j) |
{ |
items[j].appendTo(this); |
} |
|
return this; |
} |
}); |
|
var _OrderedList = ( |
/** |
* @constructor |
*/ |
function jsx_dom_widgets_OrderedList () { |
jsx_dom_widgets_OrderedList._super.apply(this, arguments); |
} |
).extend(_List, { |
/** |
* @memberOf jsx.dom.widgets.OrderedList.prototype |
*/ |
elementType: "ol" |
}); |
|
/** |
* @function |
*/ |
var _UnorderedList = ( |
/** |
* @constructor |
*/ |
function jsx_dom_widgets_UnorderedList () { |
jsx_dom_widgets_UnorderedList._super.apply(this, arguments); |
} |
).extend(_List, { |
/** |
* @memberOf jsx.dom.widgets.UnorderedList.prototype |
*/ |
elementType: "ul" |
}); |
|
var _Checkbox = ( |
/** |
* @constructor |
*/ |
function jsx_dom_widgets_Checkbox (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Checkbox._super.apply(this, arguments); |
} |
).extend(_Widget, { |
/** |
* @memberOf jsx.dom.widgets.Checkbox.prototype |
*/ |
elementType: "input", |
|
labelPosition: _AFTER, |
|
/** |
* Unique ID of this control |
*/ |
_uid: -1, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.init() |
*/ |
init: function () { |
_Checkbox._super.prototype.init.call(this); |
|
this._target.type = "checkbox"; |
this._target.id = "checkbox" + (++this._uid); |
|
var label = this.label; |
if (label) |
{ |
if (typeof label.valueOf() == "string") |
{ |
this.label = new _jsx_dom.widgets.Label(null, this._parent, { |
innerHTML: [label] |
}); |
} |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.render() |
*/ |
render: function () { |
_Checkbox._super.prototype.render.call(this); |
|
var label = this.label; |
if (label) |
{ |
label._target.htmlFor = this._target.id; |
label.render(); |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.unrender() |
*/ |
unrender: function () { |
_Checkbox._super.prototype.unrender.call(this); |
|
if (this.label) |
{ |
this.label.unrender(); |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.show() |
*/ |
show: function () { |
_Checkbox._super.protoype.show.call(this); |
|
if (this.label) |
{ |
this.label.show(); |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.hide() |
*/ |
hide: function () { |
_Checkbox._super.prototype.hide.call(this); |
|
if (this.label) |
{ |
this.label.hide(); |
} |
}, |
|
/** |
* Appends the widget as a child element |
* |
* <p>A <code>SpinnerInput</code> is a |
* {@link jsx.dom.widgets#NumberInput NumberInput} |
* that allows the user to increase or decrease its current value |
* with the arrow keys or the attached arrow buttons ("to spin" it). |
* It is possible to define a minimum or maximum value.</p> |
* |
* <p>If buttons are generated by JSX, they are accessible as |
* {@link jsx.dom.widgets#Button Button} instances via the |
* <code>buttonUp</code> and <code>buttonDown</code> properties |
* of the widget, respectively.</p> |
* |
* @param parent |
* @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) { |
_Checkbox._super.prototype.appendTo.call(this, parent); |
|
var label = this.label; |
if (label) |
{ |
if (this.labelPosition === _jsx_dom.widgets.position.BEFORE) |
{ |
parent._target.insertBefore(label._target, this._target); |
} |
else |
{ |
if (this.labelPosition === _jsx_dom.widgets.position.AFTER) |
{ |
parent._target.insertBefore(label._target, this._target.nextSibling); |
} |
} |
|
label.appendTo(parent); |
} |
|
return [this, label]; |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.remove() |
*/ |
remove: function () { |
var CheckboxTarget = _Checkbox._super.prototype.remove.call(this); |
var labelTarget = this.label.remove(); |
return [CheckboxTarget, labelTarget]; |
} |
}); |
|
var _Button = ( |
/** |
* @constructor |
*/ |
function jsx_dom_widgets_Button (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Button._super.apply(this, arguments); |
} |
).extend(_Container, { |
/** |
* @memberOf jsx.dom.widgets.Button.prototype |
*/ |
elementType: "button", |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.init() |
*/ |
init: function jsx_dom_widgets_Button_prototype_init () { |
_Button._super.prototype.init.call(this); |
|
var me = this; |
|
jsx.tryThis( |
function () { |
me._target.type = "button"; |
}, |
|
function () { |
/* IE 7 and other borken UAs that don't support inline-block properly */ |
jsx.throwThis("jsx.dom.widgets.InitError", "jsx.dom.widgets.Button", |
jsx_dom_widgets_Button_prototype_init); |
} |
); |
} |
}); |
|
var _SpinnerInput = ( |
/** |
* @constructor |
* @param {Element} oTarget |
* Reference to the DOM object that represents the element that |
* provides the client area for the widget. Pass a false-value |
953,9 → 1211,7 |
* will not be automatically attached to the document tree. |
* You can call its {@link #appendTo()} method later to attach it. |
* @param {Object} oProperties |
* @see jsx.dom.widgets#NumberInput |
*/ |
jsx.dom.widgets.SpinnerInput = |
function jsx_dom_widgets_SpinnerInput (oTarget, oParent, oProperties) { |
var me = this; |
|
967,7 → 1223,7 |
/* If no HTML5 support, try adding arrow controls */ |
jsx.tryThis( |
function () { |
me.buttonUp = new jsx.dom.widgets.Button(null, null, { |
me.buttonUp = new _jsx_dom.widgets.Button(null, null, { |
text: "\u25B4", |
tabIndex: target.tabIndex, |
style: { |
988,7 → 1244,7 |
} |
}); |
|
me.buttonDown = new jsx.dom.widgets.Button(null, null, { |
me.buttonDown = new _jsx_dom.widgets.Button(null, null, { |
text: "\u25BE", |
tabIndex: target.tabIndex, |
style: { |
1029,7 → 1285,7 |
); |
|
/* Add event listeners */ |
jsx.dom.addEventListener(target, "keydown", jsx.dom.createEventListener( |
_jsx_dom.addEventListener(target, "keydown", _jsx_dom.createEventListener( |
function (e) { |
/** |
* Increases the value of the <code>value</code> property. |
1089,11 → 1345,10 |
} |
)); |
|
jsx.dom.addEventListener(target, "keyup", function () { me.update(); }); |
_jsx_dom.addEventListener(target, "keyup", function () { me.update(); }); |
} |
}; |
|
jsx.dom.widgets.SpinnerInput.extend(jsx.dom.widgets.NumberInput, { |
} |
).extend(_NumberInput, { |
/** |
* Increases the value of the input by 1 |
* |
1128,12 → 1383,9 |
* (non-JSdoc) |
* @see jsx.dom.widgets.NumberInput.prototype.update() |
*/ |
update: (function () { |
var update = jsx.dom.widgets.NumberInput.prototype.update; |
update: function () { |
_NumberInput.prototype.update.call(this); |
|
return function () { |
update.call(this); |
|
var target = this._target; |
if (typeof target.onchange == "function") |
{ |
1141,148 → 1393,69 |
} |
|
return this; |
}; |
}()) |
} |
}); |
|
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, { |
var _CheckboxList = ( |
/** |
* @memberOf jsx.dom.widgets.ListItem.prototype |
* @constructor |
*/ |
elementType: "li" |
}); |
|
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 |
* @param {jsx.dom.widgets.ListItem} listItem |
*/ |
addItem: function (listItem) { |
if (!this.items) |
{ |
this.items = []; |
function jsx_dom_widgets_CheckboxList () { |
jsx_dom_widgets_CheckboxList._super.apply(this, arguments); |
} |
|
this.items.push(listItem); |
).extend(_UnorderedList, { |
update: function () { |
/* FIXME: Disabled update for now */ |
}, |
|
/** |
* @param {jsx.dom.widgets.ListItem} listItem |
* Adds a checkbox to this list as child of a {@link ListItem} |
* |
* @memberOf jsx.dom.widgets.CheckboxList.prototype |
* @param {jsx.dom.widget.Checkbox} checkbox |
* @return {jsx.dom.widget.ListItem} |
* The added list item |
*/ |
removeItem: function (listItem) { |
var items = this.items; |
if (items) |
addItem: function (item) { |
if (!(item instanceof _Checkbox)) |
{ |
var i = items.indexOf(listItem); |
if (i > -1) |
if (!(item instanceof _ListItem)) |
{ |
items.splice(i, 1); |
return jsx.throwThis(jsx.InvalidArgumentError, |
[null, jsx.object.getFunctionName(item.constructor), |
"jsx.dom.widgets.Checkbox or jsx.dom.widgets.ListItem"]); |
} |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.init() |
*/ |
init: function () { |
var items = this.items; |
if (items && items.length === 0) |
/* Add the contained checkbox as item */ |
var checkbox = _gEBTN("input", 0, item._target); |
if (!checkbox|| checkbox.type.toLowerCase() != "checkbox") |
{ |
var listItems = jsx.dom.getElemByTagName("li", -1, this._target); |
var ListItem = jsx.dom.widgets.ListItem; |
for (var i = 0, len = listItems.length; i < len; ++i) |
{ |
this.addItem(new ListItem(listItems[i], this)); |
return jsx.throwThis(jsx.InvalidArgumentError, |
[null, jsx.object.getFunctionName(checkbox.constructor), |
"jsx.dom.widgets.ListItem containing a checkbox"]); |
} |
} |
}, |
|
/** |
* (non-JSdoc) |
* @see jsx.dom.widgets.Widget.prototype.update() |
*/ |
update: (function () { |
var jsx_dom = jsx.dom; |
var _gEBTN = jsx_dom.getElemByTagName; |
var update = jsx_dom.widgets.Widget.prototype.update; |
|
return function () { |
update.call(this); |
|
var items = this.items; |
var i; |
var len = items && items.length || 0; |
|
for (i = len; i--;) |
{ |
items[i].update(); |
checkbox = new _Checkbox(checkbox); |
} |
|
var target = this._target; |
var listItems = _gEBTN("li", -1, target); |
var len2 = listItems.length; |
for (i = 0; i < len && i < len2; ++i) |
else |
{ |
var listItem = listItems[i]; |
var item = items[i]; |
if (listItem != item._target) |
{ |
target.replaceChild(item._target, listItem); |
checkbox = item; |
} |
} |
|
for (var j = listItems.length; j-- > i;) |
{ |
target.removeChild(listItems[j]); |
} |
_CheckboxList._super.prototype.addItem.call(this, checkbox); |
|
for (++j; j < len; ++j) |
{ |
items[j].appendTo(target); |
return item; |
} |
|
return this; |
}; |
}()) |
}); |
|
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, { |
var _Tree = ( |
/** |
* @memberOf jsx.dom.widgets.OrderedList.prototype |
* @constructor |
*/ |
elementType: "ol" |
}); |
|
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 |
*/ |
elementType: "ul" |
}); |
|
jsx.dom.widgets.Tree = |
function jsx_dom_widgets_Tree (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Tree._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.Tree.extend(jsx.dom.widgets.Widget, { |
} |
).extend(_Widget, { |
/** |
* @memberOf jsx.dom.widgets.Tree.prototype |
*/ |
1293,10 → 1466,12 |
* @see jsx.dom.widgets.Widget.prototype.init() |
*/ |
init: function () { |
_Tree._super.prototype.init.call(this); |
|
if (!this._list) |
{ |
this._list = new jsx.dom.widget.UnorderedList(); |
this._list.addItem(new jsx.dom.widget.ListItem()); |
this._list = new _UnorderedList(); |
this._list.addItem(new _ListItem()); |
} |
}, |
|
1305,7 → 1480,7 |
* @see jsx.dom.widgets.Widget.prototype.update() |
*/ |
update: (function () { |
var update = jsx.dom.widgets.Tree._super.prototype.update; |
var update = _Tree._super.prototype.update; |
|
return function () { |
update.call(this); |
1315,16 → 1490,14 |
}) |
}); |
|
var _Table = ( |
/** |
* A <code>Table</code> widget provides a default <code>TABLE</code> |
* element object with additional features, such as filtering rows. |
* @constructor |
*/ |
jsx.dom.widgets.Table = |
function jsx_dom_widgets_Table (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Table._super.apply(this, arguments); |
}; |
|
jsx.dom.widgets.Table.extend(jsx.dom.widgets.Widget, { |
} |
).extend(_Widget, { |
filterColumns: [], |
|
/** |
1333,6 → 1506,8 |
* @see jsx.dom.widgets.Widget.prototype.init() |
*/ |
init: function () { |
_jsx_dom.widgets.Table._super.prototype.init.call(this); |
|
if (this.addTitles) |
{ |
var id2title = {}; |
1389,7 → 1564,7 |
* @function |
*/ |
applyFilter: (function () { |
var _getContent = jsx.dom.getContent; |
var _getContent = _jsx_dom.getContent; |
|
/** |
* @param {String} filterString |
1460,7 → 1635,10 |
/** |
* A <code>Timer</code> widget uses several <code>NumberInput</code> |
* widgets to implement a digital timer. |
* |
*/ |
var _Timer=( |
/** |
* @constructor |
* @param {Element} oTarget |
* Reference to the DOM object that represents the |
* element that provides the client area for the widget. Pass a |
1475,18 → 1653,19 |
* @base jsx.dom.Widget |
* @see NumberWidget |
*/ |
jsx.dom.widgets.Timer = |
function jsx_dom_widgets_Timer (oTarget, oParent, oProperties) { |
jsx_dom_widgets_Timer._super.apply(this, arguments); |
}; |
} |
).extend(_Container); |
|
jsx.dom.widgets.Timer.extend(jsx.dom.widgets.Widget); |
|
jsx.dom.widgets.InitError = function jsx_dom_widgets_InitError (widgetType) { |
var _InitError = ( |
/** |
* @constructor |
*/ |
function jsx_dom_widgets_InitError (widgetType) { |
jsx_dom_widgets_InitError._super.call(this, widgetType); |
}; |
|
jsx.dom.widgets.InitError.extend(jsx.Error, { |
} |
).extend(jsx.Error, { |
/** |
* @memberOf jsx.dom.widgets.InitError.prototype |
*/ |
1493,6 → 1672,128 |
name: "jsx.dom.widgets.InitError" |
}); |
|
return { |
/** |
* @memberOf jsx.dom.widgets |
* @version |
*/ |
version: "$Id$", |
|
/** |
* @namespace |
*/ |
position: { |
BEFORE: -1, |
AFTER: _AFTER |
}, |
|
Widget: _Widget, |
Container: _Container, |
|
/** |
* @function |
*/ |
Section: _Section, |
|
/** |
* @function |
*/ |
Anchor: _Anchor, |
|
/** |
* @function |
*/ |
Label: _Label, |
|
/** |
* @function |
*/ |
TextArea: _TextArea, |
|
/** |
* @function |
*/ |
Checkbox: _Checkbox, |
|
/** |
* @function |
*/ |
Input: _Input, |
|
/** |
* @function |
*/ |
Button: _Button, |
|
/** |
* @function |
*/ |
NumberInput: _NumberInput, |
|
/** |
* Input widget that allows the user to increase or decrease its |
* current value |
* |
* <p>A <code>SpinnerInput</code> is a |
* {@link jsx.dom.widgets#NumberInput NumberInput} |
* that allows the user to increase or decrease its current value |
* with the arrow keys or the attached arrow buttons ("to spin" it). |
* It is possible to define a minimum or maximum value.</p> |
* |
* <p>If buttons are generated by JSX, they are accessible as |
* {@link jsx.dom.widgets#Button Button} instances via the |
* <code>buttonUp</code> and <code>buttonDown</code> properties |
* of the widget, respectively.</p> |
* |
* @see jsx.dom.widgets#NumberInput |
*/ |
SpinnerInput: _SpinnerInput, |
|
/** |
* @function |
*/ |
ListItem: _ListItem, |
|
/** |
* @function |
*/ |
List: _List, |
|
/** |
* @function |
*/ |
OrderedList: _OrderedList, |
|
/** |
* @function |
*/ |
UnorderedList: _UnorderedList, |
|
CheckboxList: _CheckboxList, |
|
/** |
* @type function |
*/ |
Tree: _Tree, |
|
/** |
* A <code>Table</code> widget provides a default <code>TABLE</code> |
* element object with additional features, such as filtering rows. |
*/ |
Table: _Table, |
|
/** |
* @function |
*/ |
Timer: _Timer, |
|
/** |
* @function |
*/ |
InitError: _InitError |
}; |
}()); |
|
function handleKeypress(e) |
{ |
console.log("e = ", e); |