@qooxdoo/framework
Version:
The JS Framework for Coders
258 lines (209 loc) • 7.16 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2008 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Fabian Jakobs (fjakobs)
************************************************************************ */
/**
* A Input wrap any valid HTML input element and make it accessible
* through the normalized qooxdoo element interface.
*/
qx.Class.define("qx.html.Input",
{
extend : qx.html.Element,
/*
*****************************************************************************
CONSTRUCTOR
*****************************************************************************
*/
/**
* @param type {String} The type of the input field. Valid values are
* <code>text</code>, <code>textarea</code>, <code>select</code>,
* <code>checkbox</code>, <code>radio</code>, <code>password</code>,
* <code>hidden</code>, <code>submit</code>, <code>image</code>,
* <code>file</code>, <code>search</code>, <code>reset</code>,
* <code>select</code> and <code>textarea</code>.
* @param styles {Map?null} optional map of CSS styles, where the key is the name
* of the style and the value is the value to use.
* @param attributes {Map?null} optional map of element attributes, where the
* key is the name of the attribute and the value is the value to use.
*/
construct : function(type, styles, attributes)
{
// Update node name correctly
if (type === "select" || type === "textarea") {
var nodeName = type;
} else {
nodeName = "input";
}
this.base(arguments, nodeName, styles, attributes);
this.__type = type;
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members :
{
__type : null,
// used for webkit only
__selectable : null,
__enabled : null,
/*
---------------------------------------------------------------------------
ELEMENT API
---------------------------------------------------------------------------
*/
//overridden
_createDomElement : function() {
return qx.bom.Input.create(this.__type);
},
// overridden
_applyProperty : function(name, value)
{
this.base(arguments, name, value);
var element = this.getDomElement();
if (name === "value") {
qx.bom.Input.setValue(element, value);
} else if (name === "wrap") {
qx.bom.Input.setWrap(element, value);
// qx.bom.Input#setWrap has the side-effect that the CSS property
// overflow is set via DOM methods, causing queue and DOM to get
// out of sync. Mirror all overflow properties to handle the case
// when group and x/y property differ.
this.setStyle("overflow", element.style.overflow, true);
this.setStyle("overflowX", element.style.overflowX, true);
this.setStyle("overflowY", element.style.overflowY, true);
}
},
/**
* Set the input element enabled / disabled.
* Webkit needs a special treatment because the set color of the input
* field changes automatically. Therefore, we use
* <code>-webkit-user-modify: read-only</code> and
* <code>-webkit-user-select: none</code>
* for disabling the fields in webkit. All other browsers use the disabled
* attribute.
*
* @param value {Boolean} true, if the input element should be enabled.
*/
setEnabled : function(value)
{
this.__enabled = value;
this.setAttribute("disabled", value===false);
if (qx.core.Environment.get("engine.name") == "webkit") {
if (!value) {
this.setStyles({
"userModify": "read-only",
"userSelect": "none"
});
} else {
this.setStyles({
"userModify": null,
"userSelect": this.__selectable ? null : "none"
});
}
}
},
/**
* Set whether the element is selectable. It uses the qooxdoo attribute
* qxSelectable with the values 'on' or 'off'.
* In webkit, a special css property will be used and checks for the
* enabled state.
*
* @param value {Boolean} True, if the element should be selectable.
*/
setSelectable : qx.core.Environment.select("engine.name",
{
"webkit" : function(value)
{
this.__selectable = value;
// Only apply the value when it is enabled
this.base(arguments, this.__enabled && value);
},
"default" : function(value)
{
this.base(arguments, value);
}
}),
/*
---------------------------------------------------------------------------
INPUT API
---------------------------------------------------------------------------
*/
/**
* Sets the value of the input element.
*
* @param value {var} the new value
* @return {qx.html.Input} This instance for for chaining support.
*/
setValue : function(value)
{
var element = this.getDomElement();
if (element)
{
// Do not overwrite when already correct (on input events)
// This is needed to keep caret position while typing.
if (element.value != value) {
qx.bom.Input.setValue(element, value);
}
} else {
this._setProperty("value", value);
}
return this;
},
/**
* Get the current value.
*
* @return {String} The element's current value.
*/
getValue : function()
{
var element = this.getDomElement();
if (element) {
return qx.bom.Input.getValue(element);
}
return this._getProperty("value") || "";
},
/**
* Sets the text wrap behavior of a text area element.
*
* This property uses the style property "wrap" (IE) respectively "whiteSpace"
*
* @param wrap {Boolean} Whether to turn text wrap on or off.
* @param direct {Boolean?false} Whether the execution should be made
* directly when possible
* @return {qx.html.Input} This instance for for chaining support.
*/
setWrap : function(wrap, direct)
{
if (this.__type === "textarea") {
this._setProperty("wrap", wrap, direct);
} else {
throw new Error("Text wrapping is only support by textareas!");
}
return this;
},
/**
* Gets the text wrap behavior of a text area element.
*
* This property uses the style property "wrap" (IE) respectively "whiteSpace"
*
* @return {Boolean} Whether wrapping is enabled or disabled.
*/
getWrap : function()
{
if (this.__type === "textarea") {
return this._getProperty("wrap");
} else {
throw new Error("Text wrapping is only support by textareas!");
}
}
}
});