From 2e04af953463643791f6362bd8ef4c6ba190abfa Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 18 Apr 2012 13:48:51 -0700 Subject: Squashed commit of the following: commit 2054551bfb01a0f4ca2e138b9d724835462d45cd Merge: 765c2da 616a853 Author: Valerio Virgillito Date: Wed Apr 18 13:48:21 2012 -0700 Merge branch 'refs/heads/master' into integration commit 765c2da8e1aa03550caf42b2bd5f367555ad2843 Author: Valerio Virgillito Date: Tue Apr 17 15:29:41 2012 -0700 updating the picasa carousel Signed-off-by: Valerio Virgillito commit 9484f1c82b81e27edf2dc0a1bcc1fa3b12077406 Merge: d27f2df cacb4a2 Author: Valerio Virgillito Date: Tue Apr 17 15:03:50 2012 -0700 Merge branch 'refs/heads/master' into integration commit d27f2df4d846064444263d7832d213535962abe7 Author: Valerio Virgillito Date: Wed Apr 11 10:39:36 2012 -0700 integrating new picasa carousel component Signed-off-by: Valerio Virgillito commit 6f98384c9ecbc8abe55ccfe1fc25a0c7ce22c493 Author: Valerio Virgillito Date: Tue Apr 10 14:33:00 2012 -0700 fixed the text area case issue Text area was renamed from TextArea to Textarea Signed-off-by: Valerio Virgillito commit 1e83e26652266136802bc7af930379c1ecd631a6 Author: Valerio Virgillito Date: Mon Apr 9 22:10:45 2012 -0700 integrating montage v0.8 into ninja. Signed-off-by: Valerio Virgillito Signed-off-by: Valerio Virgillito --- node_modules/montage/ui/button.reel/button.js | 95 ++++++++++++++++++++++++--- 1 file changed, 85 insertions(+), 10 deletions(-) (limited to 'node_modules/montage/ui/button.reel/button.js') 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, */ var Button = exports.Button = Montage.create(NativeControl, { + /** + @event + @name action + @param {Event} event + + Dispatched when the button is activated through a mouse click, finger tap, + or when focused and the spacebar is pressed. + */ + + /** + @event + @name hold + @param {Event} event + + Dispatched when the button is pressed for a period of time, set by + {@link holdTimeout}. + */ + /** Description TODO @private @@ -104,6 +122,23 @@ var Button = exports.Button = Montage.create(NativeControl, { } }, + /** + How long a press has to last for a hold event to be dispatched + */ + holdTimeout: { + get: function() { + return this._pressComposer.longPressTimeout; + }, + set: function(value) { + this._pressComposer.longPressTimeout = value; + } + }, + + _pressComposer: { + enumberable: false, + value: null + }, + /** True when the button is being interacted with, either through mouse click or touch event. @@ -129,13 +164,28 @@ var Button = exports.Button = Montage.create(NativeControl, { } }, + didCreate: { + value: function() { + this._pressComposer = PressComposer.create(); + this.addComposer(this._pressComposer); + } + }, + prepareForActivationEvents: { value: function() { - var pressComposer = PressComposer.create(); - this.addComposer(pressComposer); - pressComposer.addEventListener("pressstart", this, false); - pressComposer.addEventListener("press", this, false); - pressComposer.addEventListener("presscancel", this, false); + this._pressComposer.addEventListener("pressStart", this, false); + this._pressComposer.addEventListener("press", this, false); + this._pressComposer.addEventListener("pressCancel", this, false); + } + }, + + // Optimisation + addEventListener: { + value: function(type, listener, useCapture) { + NativeControl.addEventListener.call(this, type, listener, useCapture); + if (type === "hold") { + this._pressComposer.addEventListener("longPress", this, false); + } } }, @@ -144,7 +194,7 @@ var Button = exports.Button = Montage.create(NativeControl, { /** Called when the user starts interacting with the component. */ - handlePressstart: { + handlePressStart: { value: function(event) { this.active = true; @@ -166,10 +216,33 @@ var Button = exports.Button = Montage.create(NativeControl, { } }, + handleKeyup: { + value: function(event) { + console.log(event.keyCode); + // action event on spacebar + if (event.keyCode === 32) { + this.active = false; + this._dispatchActionEvent(); + } + } + }, + + handleLongPress: { + value: function(event) { + // When we fire the "hold" event we don't want to fire the + // "action" event as well. + this._pressComposer.cancelPress(); + + var holdEvent = document.createEvent("CustomEvent"); + holdEvent.initCustomEvent("hold", true, true, null); + this.dispatchEvent(holdEvent); + } + }, + /** Called when all interaction is over. */ - handlePresscancel: { + handlePressCancel: { value: function(event) { this.active = false; } @@ -186,10 +259,10 @@ var Button = exports.Button = Montage.create(NativeControl, { didSetElement: { value: function() { - var o = NativeControl.didSetElement.call(this); + NativeControl.didSetElement.call(this); this._element.classList.add("montage-button"); - this._element.setAttribute("aria-role", "button"); + this._element.setAttribute("role", "button"); this._isInputElement = (this._element.tagName === "INPUT"); // Only take the value from the element if it hasn't been set @@ -219,6 +292,8 @@ var Button = exports.Button = Montage.create(NativeControl, { } } + this._element.addEventListener("keyup", this, false); + this.needsDraw = true; } }, @@ -262,7 +337,7 @@ Button.addAttributes({ formaction: null, formenctype: null, formmethod: null, - formnovalidate: null, + formnovalidate: {dataType: 'boolean'}, formtarget: null, type: {value: 'button'}, name: null, -- cgit v1.2.3