| 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 |