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 Polymer('viewer-progress-bar', { | 5 Polymer('viewer-progress-bar', { |
6 progress: 0, | 6 progress: 0, |
7 text: 'Loading', | 7 text: 'Loading', |
8 numSegments: 8, | 8 numSegments: 8, |
9 segments: [], | 9 segments: [], |
10 ready: function() { | 10 ready: function() { |
11 this.numSegmentsChanged(); | 11 this.numSegmentsChanged(); |
12 }, | 12 }, |
13 progressChanged: function() { | 13 progressChanged: function() { |
14 var numVisible = this.progress * this.segments.length / 100.0; | 14 var numVisible = this.progress * this.segments.length / 100.0; |
15 for (var i = 0; i < this.segments.length; i++) { | 15 for (var i = 0; i < this.segments.length; i++) { |
16 this.segments[i].style.visibility = | 16 this.segments[i].style.visibility = |
17 i < numVisible ? 'auto' : 'hidden'; | 17 i < numVisible ? 'inherit' : 'hidden'; |
18 } | 18 } |
19 | 19 |
20 if (this.progress >= 100 || this.progress < 0) | 20 if (this.progress >= 100 || this.progress < 0) |
21 this.style.opacity = 0; | 21 this.style.opacity = 0; |
22 }, | 22 }, |
23 numSegmentsChanged: function() { | 23 numSegmentsChanged: function() { |
24 // Clear the existing segments. | 24 // Clear the existing segments. |
25 this.segments = []; | 25 this.segments = []; |
26 var segmentsElement = this.$.segments; | 26 var segmentsElement = this.$.segments; |
27 segmentsElement.innerHTML = ''; | 27 segmentsElement.innerHTML = ''; |
28 | 28 |
29 // Create the new segments. | 29 // Create the new segments. |
30 var segment = document.createElement('li'); | 30 var segment = document.createElement('li'); |
31 segment.classList.add('segment'); | 31 segment.classList.add('segment'); |
32 var angle = 360 / this.numSegments; | 32 var angle = 360 / this.numSegments; |
33 for (var i = 0; i < this.numSegments; ++i) { | 33 for (var i = 0; i < this.numSegments; ++i) { |
34 var segmentCopy = segment.cloneNode(true); | 34 var segmentCopy = segment.cloneNode(true); |
35 segmentCopy.style.webkitTransform = | 35 segmentCopy.style.webkitTransform = |
36 'rotate(' + (i * angle) + 'deg) skewY(' + | 36 'rotate(' + (i * angle) + 'deg) skewY(' + |
37 -1 * (90 - angle) + 'deg)'; | 37 -1 * (90 - angle) + 'deg)'; |
38 segmentsElement.appendChild(segmentCopy); | 38 segmentsElement.appendChild(segmentCopy); |
39 this.segments.push(segmentCopy); | 39 this.segments.push(segmentCopy); |
40 } | 40 } |
41 this.progressChanged(); | 41 this.progressChanged(); |
42 } | 42 } |
43 }); | 43 }); |
OLD | NEW |