diff options
Diffstat (limited to 'node_modules/montage/ui/button.reel')
-rw-r--r-- | node_modules/montage/ui/button.reel/button.js | 214 |
1 files changed, 164 insertions, 50 deletions
diff --git a/node_modules/montage/ui/button.reel/button.js b/node_modules/montage/ui/button.reel/button.js index 315cf505..eead3124 100644 --- a/node_modules/montage/ui/button.reel/button.js +++ b/node_modules/montage/ui/button.reel/button.js | |||
@@ -4,46 +4,63 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | /*global require, exports*/ | 6 | /*global require, exports*/ |
7 | |||
8 | /** | ||
9 | @module "montage/ui/button.reel" | ||
10 | @requires montage/core/core | ||
11 | @requires montage/ui/component | ||
12 | @requires montage/ui/native-control | ||
13 | @requires montage/ui/composer/press-composer | ||
14 | */ | ||
7 | var Montage = require("montage").Montage, | 15 | var Montage = require("montage").Montage, |
8 | Component = require("ui/component").Component, | 16 | Component = require("ui/component").Component, |
9 | NativeControl = require("ui/native-control").NativeControl, | 17 | NativeControl = require("ui/native-control").NativeControl, |
10 | PressComposer = require("ui/composer/press-composer").PressComposer; | 18 | PressComposer = require("ui/composer/press-composer").PressComposer; |
11 | /** | ||
12 | * The Button input | ||
13 | */ | ||
14 | var Button = exports.Button = Montage.create(NativeControl, { | ||
15 | |||
16 | /** | ||
17 | @event | ||
18 | @name action | ||
19 | @param {Event} event | ||
20 | |||
21 | Dispatched when the button is activated through a mouse click, finger tap, | ||
22 | or when focused and the spacebar is pressed. | ||
23 | */ | ||
24 | |||
25 | /** | ||
26 | @event | ||
27 | @name hold | ||
28 | @param {Event} event | ||
29 | |||
30 | Dispatched when the button is pressed for a period of time, set by | ||
31 | {@link holdTimeout}. | ||
32 | */ | ||
33 | 19 | ||
34 | /** | 20 | /** |
35 | Description TODO | 21 | Wraps a native <code><button></code> or <code><input[type="button"]></code> HTML element. The element's standard attributes are exposed as bindable properties. |
36 | @private | 22 | @class module:"montage/ui/button.reel".Button |
23 | @extends module:montage/native-control.NativeControl | ||
24 | @example | ||
25 | <caption>JavaScript example</caption> | ||
26 | var b1 = Button.create(); | ||
27 | b1.element = document.querySelector("btnElement"); | ||
28 | b1.addEventListener("action", function(event) { | ||
29 | console.log("Got event 'action' event"); | ||
30 | }); | ||
31 | @example | ||
32 | <caption>Serialized example</caption> | ||
33 | { | ||
34 | "aButton": { | ||
35 | "prototype": "montage/ui/button.reel", | ||
36 | "properties": { | ||
37 | "element": {"#": "btnElement"} | ||
38 | }, | ||
39 | "listeners": [ | ||
40 | { | ||
41 | "type": "action", | ||
42 | "listener": {"@": "appListener"} | ||
43 | } | ||
44 | ] | ||
45 | }, | ||
46 | "listener": { | ||
47 | "prototype": "appListener" | ||
48 | } | ||
49 | } | ||
50 | <button data-montage-id="btnElement"></button> | ||
37 | */ | 51 | */ |
52 | var Button = exports.Button = Montage.create(NativeControl, /** @lends module:"montage/ui/button.reel".Button# */ { | ||
53 | |||
38 | _preventFocus: { | 54 | _preventFocus: { |
39 | enumerable: false, | 55 | enumerable: false, |
40 | value: false | 56 | value: false |
41 | }, | 57 | }, |
42 | 58 | ||
43 | /** | 59 | /** |
44 | Description TODO | 60 | Specifies whether the button should receive focus or not. |
45 | @type {Function} | 61 | @type {boolean} |
46 | @default {Boolean} false | 62 | @default false |
63 | @event longpress | ||
47 | */ | 64 | */ |
48 | preventFocus: { | 65 | preventFocus: { |
49 | get: function () { | 66 | get: function () { |
@@ -58,6 +75,10 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
58 | } | 75 | } |
59 | }, | 76 | }, |
60 | 77 | ||
78 | |||
79 | /** | ||
80 | Enables or disables the Button from user input. When this property is set to <code>false</code>, the "disabled" CSS style is applied to the button's DOM element during the next draw cycle. When set to <code>true</code> the "disabled" CSS class is removed from the element's class list. | ||
81 | */ | ||
61 | //TODO we should prefer positive properties like enabled vs disabled, get rid of disabled | 82 | //TODO we should prefer positive properties like enabled vs disabled, get rid of disabled |
62 | enabled: { | 83 | enabled: { |
63 | dependencies: ["disabled"], | 84 | dependencies: ["disabled"], |
@@ -70,7 +91,7 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
70 | }, | 91 | }, |
71 | 92 | ||
72 | /** | 93 | /** |
73 | The Montage converted used to convert or format values displayed by this Button instance. | 94 | A Montage converter object used to convert or format the label displayed by the Button instance. When a new value is assigned to <code>label</code>, the converter object's <code>convert()</code> method is invoked, passing it the newly assigned label value. |
74 | @type {Property} | 95 | @type {Property} |
75 | @default null | 96 | @default null |
76 | */ | 97 | */ |
@@ -86,15 +107,14 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
86 | _labelNode: {value:undefined, enumerable: false}, | 107 | _labelNode: {value:undefined, enumerable: false}, |
87 | 108 | ||
88 | _label: { value: undefined, enumerable: false }, | 109 | _label: { value: undefined, enumerable: false }, |
110 | |||
89 | /** | 111 | /** |
90 | The label for the button. | 112 | The label for the button. In an <input> element this is taken from the element's <code>value</code> 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. |
91 | 113 | ||
92 | In an `<input>` element this is the value property. On any other element | 114 | If the button has a non-null <code>converter</code> property, the converter object's <code>convert()</code> method is called on the value before being assigned to the button instance. |
93 | (including `<button>`) this is the first child node which is a text node. | ||
94 | If one isn't found it will be created. | ||
95 | 115 | ||
96 | @type {Property} | 116 | @type {string} |
97 | @default {String} element value | 117 | @default undefined |
98 | */ | 118 | */ |
99 | label: { | 119 | label: { |
100 | get: function() { | 120 | get: function() { |
@@ -123,14 +143,16 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
123 | }, | 143 | }, |
124 | 144 | ||
125 | /** | 145 | /** |
126 | How long a press has to last for a hold event to be dispatched | 146 | The amount of time in milliseconds the user must press and hold the button a <code>hold</code> event is dispatched. The default is 1 second. |
147 | @type {number} | ||
148 | @default 1000 | ||
127 | */ | 149 | */ |
128 | holdTimeout: { | 150 | holdThreshold: { |
129 | get: function() { | 151 | get: function() { |
130 | return this._pressComposer.longPressTimeout; | 152 | return this._pressComposer.longPressThreshold; |
131 | }, | 153 | }, |
132 | set: function(value) { | 154 | set: function(value) { |
133 | this._pressComposer.longPressTimeout = value; | 155 | this._pressComposer.longPressThreshold = value; |
134 | } | 156 | } |
135 | }, | 157 | }, |
136 | 158 | ||
@@ -139,20 +161,15 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
139 | value: null | 161 | value: null |
140 | }, | 162 | }, |
141 | 163 | ||
142 | /** | ||
143 | True when the button is being interacted with, either through mouse click or | ||
144 | touch event. | ||
145 | @private | ||
146 | */ | ||
147 | _active: { | 164 | _active: { |
148 | enumerable: false, | 165 | enumerable: false, |
149 | value: false | 166 | value: false |
150 | }, | 167 | }, |
151 | 168 | ||
152 | /** | 169 | /** |
153 | Description TODO | 170 | This property is true when the button is being interacted with, either through mouse click or touch event, otherwise false. |
154 | @type {Function} | 171 | @type {boolean} |
155 | @default {Boolean} false | 172 | @default false |
156 | */ | 173 | */ |
157 | active: { | 174 | active: { |
158 | get: function() { | 175 | get: function() { |
@@ -164,6 +181,12 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
164 | } | 181 | } |
165 | }, | 182 | }, |
166 | 183 | ||
184 | // HTMLInputElement/HTMLButtonElement methods | ||
185 | |||
186 | blur: { value: function() { this._element.blur(); } }, | ||
187 | focus: { value: function() { this._element.focus(); } }, | ||
188 | // click() deliberately omitted (it isn't available on <button> anyways) | ||
189 | |||
167 | didCreate: { | 190 | didCreate: { |
168 | value: function() { | 191 | value: function() { |
169 | this._pressComposer = PressComposer.create(); | 192 | this._pressComposer = PressComposer.create(); |
@@ -202,6 +225,7 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
202 | 225 | ||
203 | if (!this._preventFocus) { | 226 | if (!this._preventFocus) { |
204 | this._element.focus(); | 227 | this._element.focus(); |
228 | |||