OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 (function() { | 5 (function() { |
6 'use strict'; | 6 'use strict'; |
7 | 7 |
8 /** | 8 /** |
9 * Moves |target| element above |anchor| element, in order to match the | 9 * Moves |target| element above |anchor| element, in order to match the |
10 * bottom lines. | 10 * bottom lines. |
(...skipping 16 matching lines...) Expand all Loading... |
27 | 27 |
28 /** | 28 /** |
29 * Converts the time into human friendly string. | 29 * Converts the time into human friendly string. |
30 * @param {number} time Time to be converted. | 30 * @param {number} time Time to be converted. |
31 * @return {string} String representation of the given time | 31 * @return {string} String representation of the given time |
32 */ | 32 */ |
33 function time2string(time) { | 33 function time2string(time) { |
34 return ~~(time / 60000) + ':' + ('0' + ~~(time / 1000 % 60)).slice(-2); | 34 return ~~(time / 60000) + ':' + ('0' + ~~(time / 1000 % 60)).slice(-2); |
35 } | 35 } |
36 | 36 |
37 Polymer('control-panel', { | 37 /** |
| 38 * @constructor |
| 39 * @extends {PolymerElement} |
| 40 */ |
| 41 var ControlPanelElement = function() {}; |
| 42 |
| 43 ControlPanelElement.prototype = { |
38 /** | 44 /** |
39 * Initializes an element. This method is called automatically when the | 45 * Initializes an element. This method is called automatically when the |
40 * element is ready. | 46 * element is ready. |
41 */ | 47 */ |
42 ready: function() { | 48 ready: function() { |
43 var onFocusoutBound = this.onVolumeControllerFocusout_.bind(this); | 49 var onFocusoutBound = this.onVolumeControllerFocusout_.bind(this); |
44 this.$.volumeSlider.addEventListener('focusout', onFocusoutBound); | 50 |
45 this.$.volumeButton.addEventListener('focusout', onFocusoutBound); | 51 this.volumeSlider = this.$.volumeSlider; |
| 52 this.volumeButton = this.$.volumeButton; |
| 53 this.volumeContainer = this.$.volumeContainer; |
| 54 |
| 55 this.volumeSlider.addEventListener('focusout', onFocusoutBound); |
| 56 this.volumeButton.addEventListener('focusout', onFocusoutBound); |
46 }, | 57 }, |
47 | 58 |
48 /** | 59 /** |
49 * Model object of the Audio Player. | 60 * Model object of the Audio Player. |
50 * @type {AudioPlayerModel} | 61 * @type {AudioPlayerModel} |
51 */ | 62 */ |
52 model: null, | 63 model: null, |
53 | 64 |
54 /** | 65 /** |
55 * Invoked when the model changed. | 66 * Invoked when the model changed. |
56 * @param {AudioPlayerModel} oldValue Old Value. | 67 * @param {AudioPlayerModel} oldValue Old Value. |
57 * @param {AudioPlayerModel} newValue New Value. | 68 * @param {AudioPlayerModel} newValue New Value. |
58 */ | 69 */ |
59 modelChanged: function(oldValue, newValue) { | 70 modelChanged: function(oldValue, newValue) { |
60 this.$.volumeSlider.model = newValue; | 71 this.volumeSlider.model = newValue; |
61 }, | 72 }, |
62 | 73 |
63 /** | 74 /** |
64 * Current elapsed time in the current music in millisecond. | 75 * Current elapsed time in the current music in millisecond. |
65 * @type {number} | 76 * @type {number} |
66 */ | 77 */ |
67 time: 0, | 78 time: 0, |
68 | 79 |
69 /** | 80 /** |
70 * String representation of 'time'. | 81 * String representation of 'time'. |
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
129 | 140 |
130 /** | 141 /** |
131 * Invoked when the previous button is clicked. | 142 * Invoked when the previous button is clicked. |
132 */ | 143 */ |
133 previousClick: function() { | 144 previousClick: function() { |
134 this.fire('previous-clicked'); | 145 this.fire('previous-clicked'); |
135 }, | 146 }, |
136 | 147 |
137 /** | 148 /** |
138 * Invoked the volume button is clicked. | 149 * Invoked the volume button is clicked. |
139 * @type {Event} event The event. | 150 * @param {!Event} event The event. |
140 */ | 151 */ |
141 volumeButtonClick: function(event) { | 152 volumeButtonClick: function(event) { |
142 this.showVolumeController_(this.volumeSliderShown); | 153 this.showVolumeController_(this.volumeSliderShown); |
143 event.stopPropagation(); | 154 event.stopPropagation(); |
144 }, | 155 }, |
145 | 156 |
146 /** | 157 /** |
147 * Invoked when the focus goes out of the volume elements. | 158 * Invoked when the focus goes out of the volume elements. |
148 * @param {FocusEvent} event The focusout event. | 159 * @param {!FocusEvent} event The focusout event. |
149 * @private | 160 * @private |
150 */ | 161 */ |
151 onVolumeControllerFocusout_: function(event) { | 162 onVolumeControllerFocusout_: function(event) { |
152 if (this.volumeSliderShown) { | 163 if (this.volumeSliderShown) { |
153 // If the focus goes out of the volume, hide the volume control. | 164 // If the focus goes out of the volume, hide the volume control. |
154 if (!event.relatedTarget || | 165 if (!event.relatedTarget || |
155 (event.relatedTarget !== this.$.volumeButton && | 166 (event.relatedTarget !== this.volumeButton && |
156 event.relatedTarget !== this.$.volumeSlider)) { | 167 event.relatedTarget !== this.volumeSlider)) { |
157 this.showVolumeController_(false); | 168 this.showVolumeController_(false); |
158 this.volumeSliderShown = false; | 169 this.volumeSliderShown = false; |
159 } | 170 } |
160 } | 171 } |
161 }, | 172 }, |
162 | 173 |
163 /** | 174 /** |
164 * Shows/hides the volume controller. | 175 * Shows/hides the volume controller. |
165 * @param {boolean} show True to show the controller, false to hide. | 176 * @param {boolean} show True to show the controller, false to hide. |
166 * @private | 177 * @private |
167 */ | 178 */ |
168 showVolumeController_: function(show) { | 179 showVolumeController_: function(show) { |
169 if (show) { | 180 if (show) { |
170 matchBottomLine(this.$.volumeContainer, this.$.volumeButton); | 181 matchBottomLine(this.$.volumeContainer, this.$.volumeButton); |
171 this.$.volumeContainer.style.visibility = 'visible'; | 182 this.volumeContainer.style.visibility = 'visible'; |
172 } else { | 183 } else { |
173 this.$.volumeContainer.style.visibility = 'hidden'; | 184 this.volumeContainer.style.visibility = 'hidden'; |
174 } | 185 } |
175 }, | 186 }, |
176 }); | 187 }; |
| 188 |
| 189 Polymer('control-panel', ControlPanelElement.prototype); |
177 })(); // Anonymous closure | 190 })(); // Anonymous closure |
OLD | NEW |