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 Polymer({ | 8 Polymer({ |
9 is: 'control-panel', | 9 is: 'control-panel', |
10 | 10 |
11 properties: { | 11 properties: { |
12 /** | 12 /** |
13 * Flag whether the audio is playing or paused. True if playing, or false | 13 * Flag whether the audio is playing or paused. True if playing, or false |
14 * paused. | 14 * paused. |
15 */ | 15 */ |
16 playing: { | 16 playing: { |
17 type: Boolean, | 17 type: Boolean, |
18 value: false, | 18 value: false, |
19 notify: true | 19 notify: true, |
| 20 reflectToAttribute: true, |
| 21 observer: 'playingChanged_' |
20 }, | 22 }, |
21 | 23 |
22 /** | 24 /** |
23 * Current elapsed time in the current music in millisecond. | 25 * Current elapsed time in the current music in millisecond. |
24 */ | 26 */ |
25 time: { | 27 time: { |
26 type: Number, | 28 type: Number, |
27 value: 0, | 29 value: 0, |
28 notify: true | 30 notify: true |
29 }, | 31 }, |
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
81 reflectToAttribute: true | 83 reflectToAttribute: true |
82 }, | 84 }, |
83 | 85 |
84 /** | 86 /** |
85 * Whether the knob of time slider is being dragged. | 87 * Whether the knob of time slider is being dragged. |
86 */ | 88 */ |
87 dragging: { | 89 dragging: { |
88 type: Boolean, | 90 type: Boolean, |
89 value: false, | 91 value: false, |
90 notify: true | 92 notify: true |
| 93 }, |
| 94 |
| 95 /** |
| 96 * Dictionary which contains aria-labels for each controls. |
| 97 */ |
| 98 ariaLabels: { |
| 99 type: Object, |
| 100 observer: 'ariaLabelsChanged_' |
91 } | 101 } |
92 }, | 102 }, |
93 | 103 |
94 /** | 104 /** |
95 * Initializes an element. This method is called automatically when the | 105 * Initializes an element. This method is called automatically when the |
96 * element is ready. | 106 * element is ready. |
97 */ | 107 */ |
98 ready: function() { | 108 ready: function() { |
99 this.$.timeSlider.addEventListener('value-change', function() { | 109 this.$.timeSlider.addEventListener('value-change', function() { |
100 if (this.dragging) | 110 if (this.dragging) |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
140 * Converts the time and duration into human friendly string. | 150 * Converts the time and duration into human friendly string. |
141 * @param {number} time Time to be converted. | 151 * @param {number} time Time to be converted. |
142 * @param {number} duration Duration to be converted. | 152 * @param {number} duration Duration to be converted. |
143 * @return {string} String representation of the given time | 153 * @return {string} String representation of the given time |
144 */ | 154 */ |
145 computeTimeString_: function(time, duration) { | 155 computeTimeString_: function(time, duration) { |
146 return this.time2string_(time) + ' / ' + this.time2string_(duration); | 156 return this.time2string_(time) + ' / ' + this.time2string_(duration); |
147 }, | 157 }, |
148 | 158 |
149 /** | 159 /** |
150 * Computes state for play button based on 'playing' property. | 160 * Invoked when the playing property is changed. |
151 * @return {string} | 161 * @param {boolean} playing |
| 162 * @private |
152 */ | 163 */ |
153 computePlayState_: function(playing) { | 164 playingChanged_: function(playing) { |
154 return playing ? "playing" : "ended"; | 165 if (this.ariaLabels) { |
| 166 this.$.play.setAttribute('aria-label', |
| 167 playing ? this.ariaLabels.pause : this.ariaLabels.play); |
| 168 } |
155 }, | 169 }, |
156 | 170 |
157 /** | 171 /** |
158 * Computes style for '.filled' element of progress bar. | 172 * Invoked when the ariaLabels property is changed. |
159 * @return {string} | 173 * @param {Object} ariaLabels |
| 174 * @private |
160 */ | 175 */ |
161 computeProgressBarStyle_: function(time, duration) { | 176 ariaLabelsChanged_: function(ariaLabels) { |
162 return 'width: ' + (time / duration * 100) + '%;'; | 177 assert(ariaLabels); |
| 178 // TODO(fukino): Use data bindings. |
| 179 this.$.volumeSlider.setAttribute('aria-label', ariaLabels.volumeSlider); |
| 180 this.$.shuffle.setAttribute('aria-label', ariaLabels.shuffle); |
| 181 this.$.repeat.setAttribute('aria-label', ariaLabels.repeat); |
| 182 this.$.previous.setAttribute('aria-label', ariaLabels.previous); |
| 183 this.$.play.setAttribute('aria-label', |
| 184 this.playing ? ariaLabels.pause : ariaLabels.play); |
| 185 this.$.next.setAttribute('aria-label', ariaLabels.next); |
| 186 this.$.volume.setAttribute('aria-label', ariaLabels.volume); |
| 187 this.$.playList.setAttribute('aria-label', ariaLabels.playList); |
| 188 this.$.timeSlider.setAttribute('aria-label', ariaLabels.seekSlider); |
163 } | 189 } |
164 }); | 190 }); |
165 })(); // Anonymous closure | 191 })(); // Anonymous closure |
OLD | NEW |