Chromium Code Reviews| 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 |
| + }; |
| +}); |
| + |