Chromium Code Reviews| OLD | NEW |
|---|---|
| (Empty) | |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 cr.define('cr.ui', function() { | |
| 6 | |
|
James Hawkins
2011/10/26 21:49:46
nit: Remove blank line.
kevers
2011/10/27 15:06:34
Done.
| |
| 7 /** | |
| 8 * Creates a new button element. The repeating button behaves like a | |
|
James Hawkins
2011/10/26 21:49:46
nit: Single space between comments.
kevers
2011/10/27 15:06:34
Updated all comments in this file to use single sp
| |
| 9 * keyboard button, which auto-repeats if held. This button is designed | |
| 10 * for use with controls such as brightness and volume adjustment buttons. | |
| 11 * @constructor | |
| 12 * @extends {HTMLButtonElement} | |
| 13 */ | |
| 14 var RepeatingButton = cr.ui.define('button'); | |
| 15 | |
| 16 RepeatingButton.prototype = { | |
| 17 __proto__: HTMLButtonElement.prototype, | |
| 18 | |
| 19 /** | |
| 20 * Delay in milliseconds before the first repeat trigger of the button | |
| 21 * held action. | |
| 22 * @type {number} | |
| 23 */ | |
| 24 holdDelayTime: 500, | |
|
James Hawkins
2011/10/26 21:49:46
These vars are private, right?
kevers
2011/10/27 15:06:34
Initially, I thought that it would be useful to ke
| |
| 25 | |
| 26 /** | |
| 27 * Delay in milliseconds between triggers of the button held action. | |
| 28 * @type {number} | |
| 29 */ | |
| 30 holdRepeatIntervalTime: 50, | |
| 31 | |
| 32 /** | |
| 33 * Callback function when repeated intervals trigger. Initialized when the | |
| 34 * button is held for an initial delay period and cleared when the button | |
| 35 * is released. | |
| 36 * @type {function} | |
| 37 */ | |
| 38 intervalCallback: undefined, | |
| 39 | |
| 40 /** | |
| 41 * Callback function to arm the repeat timer. Initialized when the button | |
| 42 * is pressed and cleared when the interval timer is set or the button is | |
| 43 * released. | |
| 44 * @type {function} | |
| 45 */ | |
| 46 armRepeaterCallback: undefined, | |
| 47 | |
| 48 /** | |
| 49 * Initializes the button. | |
| 50 */ | |
| 51 decorate: function() { | |
| 52 this.onmousedown = this.buttonDown.bind(this); | |
| 53 this.onmouseup = this.buttonUp.bind(this); | |
| 54 this.onmouseout = this.buttonUp.bind(this); | |
| 55 this.ontouchstart = this.touchStart.bind(this); | |
| 56 this.ontouchend = this.buttonUp.bind(this); | |
| 57 this.ontouchcancel = this.buttonUp.bind(this); | |
| 58 }, | |
| 59 | |
| 60 /** | |
| 61 * Called when the user initiates a touch gesture. | |
| 62 * @param {!Event} e The triggered event. | |
| 63 */ | |
| 64 touchStart: function(e) { | |
| 65 // Block system level gestures to prevent double tap to zoom. Also, | |
| 66 // block following mouse event to prevent double firing of the button | |
| 67 // held action in the case of a tap. Otherwise, a single tap action in | |
| 68 // webkit generates the following event sequence: touchstart, touchend, | |
| 69 // mouseover, mousemove, mousedown, mouseup and click. | |
| 70 e.preventDefault(); | |
| 71 }, | |
| 72 | |
| 73 /** | |
| 74 * Called when the user presses the button. | |
|
James Hawkins
2011/10/26 21:49:46
To remove ambiguity when referring to "this" butto
kevers
2011/10/27 15:06:34
Updated docs for buttonDown_, buttonUp_ and button
| |
| 75 * @param {!Event} e The triggered event. | |
| 76 */ | |
| 77 buttonDown: function(e) { | |
|
James Hawkins
2011/10/26 21:49:46
It seems a lot of these methods should be private.
kevers
2011/10/27 15:06:34
Fixed.
| |
| 78 this.clearTimeout(); | |
| 79 // Trigger the button held action immediately, after an initial delay and | |
| 80 // then repeated based on a fixed time increment. The time intervals are | |
| 81 // in agreement with the defaults for the ChromeOS keyboard and virtual | |
|
James Hawkins
2011/10/26 21:49:46
re: in agreement
Should we pull/set these values
kevers
2011/10/27 15:06:34
Added a TODO comment.
| |
| 82 // keyboard. | |
| 83 this.buttonHeld(); | |
| 84 var self = this; | |
| 85 this.armRepeaterCallback = function() { | |
| 86 // In the event of a click/tap operation, the button has already been | |
| 87 // released by the time this timeout triggers. Test to ensure that the | |
| 88 // button is still being held (i.e. clearTimeout has not been called). | |
| 89 if (self.armRepeaterCallback) { | |
| 90 self.armRepeaterCallback = undefined; | |
| 91 self.intervalCallback = setInterval(self.buttonHeld.bind(self), | |
| 92 self.holdRepeatIntervalTime); | |
| 93 } | |
| 94 }; | |
| 95 setTimeout(this.armRepeaterCallback, Math.max(0, this.holdDelayTime - | |
| 96 this.holdRepeatIntervalTime)); | |
| 97 }, | |
| 98 | |
| 99 /** | |
| 100 * Called when the user releases the button. | |
| 101 * @param {!Event} e The triggered event. | |
| 102 */ | |
| 103 buttonUp: function(e) { | |
| 104 this.clearTimeout(); | |
| 105 }, | |
| 106 | |
| 107 /** | |
| 108 * Resets the interval callback. | |
| 109 */ | |
| 110 clearTimeout: function() { | |
| 111 if (this.armRepeaterCallback) { | |
| 112 clearTimeout(this.armRepeaterCallback); | |
| 113 this.armRepeaterCallback = undefined; | |
| 114 } | |
| 115 if (this.intervalCallback) { | |
| 116 clearInterval(this.intervalCallback); | |
| 117 this.intervalCallback = undefined; | |
| 118 } | |
| 119 }, | |
| 120 | |
| 121 /** | |
| 122 * Dispatches the action associated with keeping the button pressed. | |
| 123 */ | |
| 124 buttonHeld: function() { | |
| 125 if (this.onButtonHeldAction) | |
| 126 this.onButtonHeldAction(); | |
| 127 } | |
| 128 }; | |
| 129 | |
| 130 return { | |
| 131 RepeatingButton: RepeatingButton | |
| 132 }; | |
| 133 }); | |
| 134 | |
| OLD | NEW |