diff options
Diffstat (limited to 'node_modules/montage/ui/button.reel/button.js')
-rw-r--r-- | node_modules/montage/ui/button.reel/button.js | 95 |
1 files changed, 85 insertions, 10 deletions
diff --git a/node_modules/montage/ui/button.reel/button.js b/node_modules/montage/ui/button.reel/button.js index 5da92482..315cf505 100644 --- a/node_modules/montage/ui/button.reel/button.js +++ b/node_modules/montage/ui/button.reel/button.js | |||
@@ -13,6 +13,24 @@ var Montage = require("montage").Montage, | |||
13 | */ | 13 | */ |
14 | var Button = exports.Button = Montage.create(NativeControl, { | 14 | var Button = exports.Button = Montage.create(NativeControl, { |
15 | 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 | |||
16 | /** | 34 | /** |
17 | Description TODO | 35 | Description TODO |
18 | @private | 36 | @private |
@@ -105,6 +123,23 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
105 | }, | 123 | }, |
106 | 124 | ||
107 | /** | 125 | /** |
126 | How long a press has to last for a hold event to be dispatched | ||
127 | */ | ||
128 | holdTimeout: { | ||
129 | get: function() { | ||
130 | return this._pressComposer.longPressTimeout; | ||
131 | }, | ||
132 | set: function(value) { | ||
133 | this._pressComposer.longPressTimeout = value; | ||
134 | } | ||
135 | }, | ||
136 | |||
137 | _pressComposer: { | ||
138 | enumberable: false, | ||
139 | value: null | ||
140 | }, | ||
141 | |||
142 | /** | ||
108 | True when the button is being interacted with, either through mouse click or | 143 | True when the button is being interacted with, either through mouse click or |
109 | touch event. | 144 | touch event. |
110 | @private | 145 | @private |
@@ -129,13 +164,28 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
129 | } | 164 | } |
130 | }, | 165 | }, |
131 | 166 | ||
167 | didCreate: { | ||
168 | value: function() { | ||
169 | this._pressComposer = PressComposer.create(); | ||
170 | this.addComposer(this._pressComposer); | ||
171 | } | ||
172 | }, | ||
173 | |||
132 | prepareForActivationEvents: { | 174 | prepareForActivationEvents: { |
133 | value: function() { | 175 | value: function() { |
134 | var pressComposer = PressComposer.create(); | 176 | this._pressComposer.addEventListener("pressStart", this, false); |
135 | this.addComposer(pressComposer); | 177 | this._pressComposer.addEventListener("press", this, false); |
136 | pressComposer.addEventListener("pressstart", this, false); | 178 | this._pressComposer.addEventListener("pressCancel", this, false); |
137 | pressComposer.addEventListener("press", this, false); | 179 | } |
138 | pressComposer.addEventListener("presscancel", this, false); | 180 | }, |
181 | |||
182 | // Optimisation | ||
183 | addEventListener: { | ||
184 | value: function(type, listener, useCapture) { | ||
185 | NativeControl.addEventListener.call(this, type, listener, useCapture); | ||
186 | if (type === "hold") { | ||
187 | this._pressComposer.addEventListener("longPress", this, false); | ||
188 | } | ||
139 | } | 189 | } |
140 | }, | 190 | }, |
141 | 191 | ||
@@ -144,7 +194,7 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
144 | /** | 194 | /** |
145 | Called when the user starts interacting with the component. | 195 | Called when the user starts interacting with the component. |
146 | */ | 196 | */ |
147 | handlePressstart: { | 197 | handlePressStart: { |
148 | value: function(event) { | 198 | value: function(event) { |
149 | this.active = true; | 199 | this.active = true; |
150 | 200 | ||
@@ -166,10 +216,33 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
166 | } | 216 | } |
167 | }, | 217 | }, |
168 | 218 | ||
219 | handleKeyup: { | ||
220 | value: function(event) { | ||
221 | console.log(event.keyCode); | ||
222 | // action event on spacebar | ||
223 | if (event.keyCode === 32) { | ||
224 | this.active = false; | ||
225 | this._dispatchActionEvent(); | ||
226 | } | ||
227 | } | ||
228 | }, | ||
229 | |||
230 | handleLongPress: { | ||
231 | value: function(event) { | ||
232 | // When we fire the "hold" event we don't want to fire the | ||
233 | // "action" event as well. | ||
234 | this._pressComposer.cancelPress(); | ||
235 | |||
236 | var holdEvent = document.createEvent("CustomEvent"); | ||
237 | holdEvent.initCustomEvent("hold", true, true, null); | ||
238 | this.dispatchEvent(holdEvent); | ||
239 | } | ||
240 | }, | ||
241 | |||
169 | /** | 242 | /** |
170 | Called when all interaction is over. | 243 | Called when all interaction is over. |
171 | */ | 244 | */ |
172 | handlePresscancel: { | 245 | handlePressCancel: { |
173 | value: function(event) { | 246 | value: function(event) { |
174 | this.active = false; | 247 | this.active = false; |
175 | } | 248 | } |
@@ -186,10 +259,10 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
186 | 259 | ||
187 | didSetElement: { | 260 | didSetElement: { |
188 | value: function() { | 261 | value: function() { |
189 | var o = NativeControl.didSetElement.call(this); | 262 | NativeControl.didSetElement.call(this); |
190 | 263 | ||
191 | this._element.classList.add("montage-button"); | 264 | this._element.classList.add("montage-button"); |
192 | this._element.setAttribute("aria-role", "button"); | 265 | this._element.setAttribute("role", "button"); |
193 | 266 | ||
194 | this._isInputElement = (this._element.tagName === "INPUT"); | 267 | this._isInputElement = (this._element.tagName === "INPUT"); |
195 | // Only take the value from the element if it hasn't been set | 268 | // Only take the value from the element if it hasn't been set |
@@ -219,6 +292,8 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
219 | } | 292 | } |
220 | } | 293 | } |
221 | 294 | ||
295 | this._element.addEventListener("keyup", this, false); | ||
296 | |||
222 | this.needsDraw = true; | 297 | this.needsDraw = true; |
223 | } | 298 | } |
224 | }, | 299 | }, |
@@ -262,7 +337,7 @@ Button.addAttributes({ | |||
262 | formaction: null, | 337 | formaction: null, |
263 | formenctype: null, | 338 | formenctype: null, |
264 | formmethod: null, | 339 | formmethod: null, |
265 | formnovalidate: null, | 340 | formnovalidate: {dataType: 'boolean'}, |
266 | formtarget: null, | 341 | formtarget: null, |
267 | type: {value: 'button'}, | 342 | type: {value: 'button'}, |
268 | name: null, | 343 | name: null, |