Index: chrome/browser/resources/shared/js/cr/ui/repeating_button.js |
diff --git a/chrome/browser/resources/shared/js/cr/ui/repeating_button.js b/chrome/browser/resources/shared/js/cr/ui/repeating_button.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..388d69a21ab8b50cfed01765ec7f10490a187259 |
--- /dev/null |
+++ b/chrome/browser/resources/shared/js/cr/ui/repeating_button.js |
@@ -0,0 +1,134 @@ |
+// Copyright (c) 2011 The Chromium Authors. All rights reserved. |
+// Use of this source code is governed by a BSD-style license that can be |
+// found in the LICENSE file. |
+ |
+cr.define('cr.ui', function() { |
+ |
+ /** |
+ * Creates a new button element. The repeating button behaves like a |
+ * keyboard button, which auto-repeats if held. This button is designed |
+ * for use with controls such as brightness and volume adjustment buttons. |
+ * @constructor |
+ * @extends {HTMLButtonElement} |
+ */ |
+ var RepeatingButton = cr.ui.define('button'); |
+ |
+ RepeatingButton.prototype = { |
+ __proto__: HTMLButtonElement.prototype, |
+ |
+ /** |
+ * Delay in milliseconds before the first repeat trigger of the button |
+ * held action. |
+ * @type {number} |
+ */ |
+ holdDelayTime: 500, |
+ |
+ /** |
+ * Delay in milliseconds between triggers of the button held action. |
+ * @type {number} |
+ */ |
+ holdRepeatIntervalTime: 50, |
+ |
+ /** |
+ * Callback function when repeated intervals trigger. Initialized when the |
+ * button is held for an initial delay period and cleared when the button |
+ * is released. |
+ * @type {function} |
+ */ |
+ intervalCallback: undefined, |
+ |
+ /** |
+ * Callback function to arm the repeat timer. Initialized when the button |
+ * is pressed and cleared when the interval timer is set or the button is |
+ * released. |
+ * @type {function} |
+ */ |
+ armRepeaterCallback: undefined, |
+ |
+ /** |
+ * Initializes the button. |
+ */ |
+ decorate: function() { |
+ this.onmousedown = this.buttonDown.bind(this); |
+ this.onmouseup = this.buttonUp.bind(this); |
+ this.onmouseout = this.buttonUp.bind(this); |
+ this.ontouchstart = this.touchStart.bind(this); |
+ this.ontouchend = this.buttonUp.bind(this); |
+ this.ontouchcancel = this.buttonUp.bind(this); |
+ }, |
+ |
+ /** |
+ * Called when the user initiates a touch gesture. |
+ * @param {!Event} e The triggered event. |
+ */ |
+ touchStart: function(e) { |
+ // Block system level gestures to prevent double tap to zoom. Also, |
+ // block following mouse event to prevent double firing of the button |
+ // held action in the case of a tap. Otherwise, a single tap action in |
+ // webkit generates the following event sequence: touchstart, touchend, |
+ // mouseover, mousemove, mousedown, mouseup and click. |
+ e.preventDefault(); |
+ }, |
+ |
+ /** |
+ * Called when the user presses the button. |
+ * @param {!Event} e The triggered event. |
+ */ |
+ buttonDown: function(e) { |
+ this.clearTimeout(); |
+ // Trigger the button held action immediately, after an initial delay and |
+ // then repeated based on a fixed time increment. The time intervals are |
+ // in agreement with the defaults for the ChromeOS keyboard and virtual |
+ // keyboard. |
+ this.buttonHeld(); |
+ var self = this; |
+ this.armRepeaterCallback = function() { |
+ // In the event of a click/tap operation, the button has already been |
+ // released by the time this timeout triggers. Test to ensure that the |
+ // button is still being held (i.e. clearTimeout has not been called). |
+ if (self.armRepeaterCallback) { |
+ self.armRepeaterCallback = undefined; |
+ self.intervalCallback = setInterval(self.buttonHeld.bind(self), |
+ self.holdRepeatIntervalTime); |
+ } |
+ }; |
+ setTimeout(this.armRepeaterCallback, Math.max(0, this.holdDelayTime - |
+ this.holdRepeatIntervalTime)); |
+ }, |
+ |
+ /** |
+ * Called when the user releases the button. |
+ * @param {!Event} e The triggeed event. |
cwolfe
2011/10/26 21:03:55
nit typo
kevers
2011/10/26 21:28:33
Fixed.
|
+ */ |
+ buttonUp: function(e) { |
+ this.clearTimeout(); |
+ }, |
+ |
+ /** |
+ * Resets the interval callback. |
+ */ |
+ clearTimeout: function() { |
+ if (this.armRepeaterCallback) { |
+ clearTimeout(this.armRepeaterCallback); |
+ this.armRepeaterCallback = undefined; |
+ } |
+ if (this.intervalCallback) { |
+ clearInterval(this.intervalCallback); |
+ this.intervalCallback = undefined; |
+ } |
+ }, |
+ |
+ /** |
+ * Dispatches the action associated with keeping the button pressed. |
+ */ |
+ buttonHeld: function() { |
+ if (this.onButtonHeldAction) |
+ this.onButtonHeldAction(); |
+ } |
+ }; |
+ |
+ return { |
+ RepeatingButton: RepeatingButton |
+ }; |
+}); |
+ |