/*
Copyright (c) 2012, Motorola Mobility LLC.
All Rights Reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice,
this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
* Neither the name of Motorola Mobility LLC nor the names of its
contributors may be used to endorse or promote products derived from this
software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
*/
/*global require, exports*/
/**
@module "montage/ui/button.reel"
@requires montage/core/core
@requires montage/ui/component
@requires montage/ui/native-control
@requires montage/ui/composer/press-composer
*/
var Montage = require("montage").Montage,
Component = require("ui/component").Component,
NativeControl = require("ui/native-control").NativeControl,
PressComposer = require("ui/composer/press-composer").PressComposer;
/**
Wraps a native <button> or <input[type="button"]> HTML element. The element's standard attributes are exposed as bindable properties.
@class module:"montage/ui/button.reel".Button
@extends module:montage/ui/native-control.NativeControl
@example
{
"aButton": {
"prototype": "montage/ui/button.reel",
"properties": {
"element": {"#": "btnElement"}
},
"listeners": [
{
"type": "action",
"listener": {"@": "appListener"}
}
]
},
"listener": {
"prototype": "appListener"
}
}
<button data-montage-id="btnElement">
*/
var Button = exports.Button = Montage.create(NativeControl, /** @lends module:"montage/ui/button.reel".Button# */ {
_preventFocus: {
enumerable: false,
value: false
},
/**
Specifies whether the button should receive focus or not.
@type {boolean}
@default false
@event longpress
*/
preventFocus: {
get: function () {
return this._preventFocus;
},
set: function (value) {
if (value === true) {
this._preventFocus = true;
} else {
this._preventFocus = false;
}
}
},
/**
Enables or disables the Button from user input. When this property is set to false, the "disabled" CSS style is applied to the button's DOM element during the next draw cycle. When set to true the "disabled" CSS class is removed from the element's class list.
*/
//TODO we should prefer positive properties like enabled vs disabled, get rid of disabled
enabled: {
dependencies: ["disabled"],
get: function () {
return !this._disabled;
},
set: function (value) {
this.disabled = !value;
}
},
/**
A Montage converter object used to convert or format the label displayed by the Button instance. When a new value is assigned to label, the converter object's convert() method is invoked, passing it the newly assigned label value.
@type {Property}
@default null
*/
converter: {
value: null
},
/**
Stores the node that contains this button's value. Only used for
non-`` elements.
@private
*/
_labelNode: {value:undefined, enumerable: false},
_label: { value: undefined, enumerable: false },
/**
The label for the button. In an <input> element this is taken from the element's value attribute. On any other element (including <button>) this is the first child node which is a text node. If one isn't found then it will be created.
If the button has a non-null converter property, the converter object's convert() method is called on the value before being assigned to the button instance.
@type {string}
@default undefined
*/
label: {
get: function() {
return this._label;
},
set: function(value) {
if (value && value.length > 0 && this.converter) {
try {
value = this.converter.convert(value);
if (this.error) {
this.error = null;
}
} catch(e) {
// unable to convert - maybe error
this.error = e;
}
}
this._label = value;
if (this._isInputElement) {
this._value = value;
}
this.needsDraw = true;
}
},
/**
The amount of time in milliseconds the user must press and hold the button a hold event is dispatched. The default is 1 second.
@type {number}
@default 1000
*/
holdThreshold: {
get: function() {
return this._pressComposer.longPressThreshold;
},
set: function(value) {
this._pressComposer.longPressThreshold = value;
}
},
_pressComposer: {
enumberable: false,
value: null
},
_active: {
enumerable: false,
value: false
},
/**
This property is true when the button is being interacted with, either through mouse click or touch event, otherwise false.
@type {boolean}
@default false
*/
active: {
get: function() {
return this._active;
},
set: function(value) {
this._active = value;
this.needsDraw = true;
}
},
// HTMLInputElement/HTMLButtonElement methods
blur: { value: function() { this._element.blur(); } },
focus: { value: function() { this._element.focus(); } },
// click() deliberately omitted (it isn't available on