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 /** | |
7 * Creates a new button element. The repeating button behaves like a | |
8 * keyboard button, which auto-repeats if held. This button is designed | |
9 * for use with controls such as brightness and volume adjustment buttons. | |
10 * @constructor | |
11 * @extends {HTMLButtonElement} | |
12 */ | |
13 var RepeatingButton = cr.ui.define('button'); | |
14 | |
15 RepeatingButton.prototype = { | |
16 __proto__: HTMLButtonElement.prototype, | |
17 | |
18 /** | |
19 * Delay in milliseconds before the first repeat trigger of the button | |
20 * held action. | |
21 * @type {number} | |
22 * @private | |
23 */ | |
24 holdDelayTime_: 500, | |
25 | |
26 /** | |
27 * Delay in milliseconds between triggers of the button held action. | |
28 * @type {number} | |
29 * @private | |
30 */ | |
31 holdRepeatIntervalTime_: 50, | |
32 | |
33 /** | |
34 * Callback function when repeated intervals trigger. Initialized when the | |
35 * button is held for an initial delay period and cleared when the button | |
36 * is released. | |
37 * @type {function} | |
38 * @private | |
39 */ | |
40 intervalCallback_: undefined, | |
41 | |
42 /** | |
43 * Callback function to arm the repeat timer. Initialized when the button | |
44 * is pressed and cleared when the interval timer is set or the button is | |
45 * released. | |
46 * @type {function} | |
47 * @private | |
48 */ | |
49 armRepeaterCallback_: undefined, | |
50 | |
51 /** | |
52 * Initializes the button. | |
53 */ | |
54 decorate: function() { | |
55 this.onmousedown = this.buttonDown_.bind(this); | |
56 this.onmouseup = this.buttonUp_.bind(this); | |
57 this.onmouseout = this.buttonUp_.bind(this); | |
58 this.ontouchstart = this.touchStart_.bind(this); | |
59 this.ontouchend = this.buttonUp_.bind(this); | |
60 this.ontouchcancel = this.buttonUp_.bind(this); | |
61 }, | |
62 | |
63 /** | |
64 * Called when the user initiates a touch gesture. | |
65 * @param {!Event} e The triggered event. | |
66 * @private | |
67 */ | |
68 touchStart_: function(e) { | |
69 // Block system level gestures to prevent double tap to zoom. Also, | |
70 // block following mouse event to prevent double firing of the button | |
71 // held action in the case of a tap. Otherwise, a single tap action in | |
72 // webkit generates the following event sequence: touchstart, touchend, | |
73 // mouseover, mousemove, mousedown, mouseup and click. | |
74 e.preventDefault(); | |
75 this.buttonDown_(e); | |
76 }, | |
77 | |
78 /** | |
79 * Called when the user presses this button. | |
80 * @param {!Event} e The triggered event. | |
81 * @private | |
82 */ | |
83 buttonDown_: function(e) { | |
84 this.clearTimeout_(); | |
85 // Trigger the button held action immediately, after an initial delay and | |
86 // then repeated based on a fixed time increment. The time intervals are | |
87 // in agreement with the defaults for the ChromeOS keyboard and virtual | |
88 // keyboard. | |
89 // TODO(kevers): Consider adding a common location for picking up the | |
90 // initial delay and repeat interval. | |
91 this.buttonHeld_(); | |
92 var self = this; | |
93 this.armRepeaterCallback_ = function() { | |
94 // In the event of a click/tap operation, this button has already been | |
95 // released by the time this timeout triggers. Test to ensure that the | |
96 // button is still being held (i.e. clearTimeout has not been called). | |
97 if (self.armRepeaterCallback_) { | |
98 self.armRepeaterCallback_ = undefined; | |
99 self.intervalCallback_ = setInterval(self.buttonHeld_.bind(self), | |
James Hawkins
2011/10/29 22:07:45
nit: Start of params need to line up on the same c
kevers
2011/10/31 19:07:28
Done.
| |
100 self.holdRepeatIntervalTime_); | |
101 } | |
102 }; | |
103 setTimeout(this.armRepeaterCallback_, Math.max(0, this.holdDelayTime_ - | |
104 this.holdRepeatIntervalTime_)); | |
105 }, | |
106 | |
107 /** | |
108 * Called when the user releases this button. | |
109 * @param {!Event} e The triggered event. | |
110 * @private | |
111 */ | |
112 buttonUp_: function(e) { | |
113 this.clearTimeout_(); | |
114 }, | |
115 | |
116 /** | |
117 * Resets the interval callback. | |
118 * @private | |
119 */ | |
120 clearTimeout_: function() { | |
121 if (this.armRepeaterCallback_) { | |
122 clearTimeout(this.armRepeaterCallback_); | |
123 this.armRepeaterCallback_ = undefined; | |
124 } | |
125 if (this.intervalCallback_) { | |
126 clearInterval(this.intervalCallback_); | |
127 this.intervalCallback_ = undefined; | |
128 } | |
129 }, | |
130 | |
131 /** | |
132 * Dispatches the action associated with keeping this button pressed. | |
133 * @private | |
134 */ | |
135 buttonHeld_: function() { | |
136 if (this.onButtonHeldAction) | |
137 this.onButtonHeldAction(); | |
138 } | |
139 }; | |
140 | |
141 return { | |
142 RepeatingButton: RepeatingButton | |
143 }; | |
144 }); | |
145 | |
OLD | NEW |