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