| OLD | NEW |
| (Empty) |
| 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 | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 Polymer({ | |
| 6 is: 'viewer-progress-bar', | |
| 7 | |
| 8 properties: { | |
| 9 progress: { | |
| 10 type: Number, | |
| 11 observer: 'progressChanged' | |
| 12 }, | |
| 13 | |
| 14 text: { | |
| 15 type: String, | |
| 16 value: 'Loading' | |
| 17 }, | |
| 18 | |
| 19 numSegments: { | |
| 20 type: Number, | |
| 21 value: 8, | |
| 22 observer: 'numSegmentsChanged' | |
| 23 } | |
| 24 }, | |
| 25 | |
| 26 segments: [], | |
| 27 | |
| 28 ready: function() { | |
| 29 this.numSegmentsChanged(); | |
| 30 }, | |
| 31 | |
| 32 progressChanged: function() { | |
| 33 var numVisible = this.progress * this.segments.length / 100.0; | |
| 34 for (var i = 0; i < this.segments.length; i++) { | |
| 35 this.segments[i].style.visibility = | |
| 36 i < numVisible ? 'inherit' : 'hidden'; | |
| 37 } | |
| 38 | |
| 39 if (this.progress >= 100 || this.progress < 0) | |
| 40 this.style.opacity = 0; | |
| 41 }, | |
| 42 | |
| 43 numSegmentsChanged: function() { | |
| 44 // Clear the existing segments. | |
| 45 this.segments = []; | |
| 46 var segmentsElement = this.$.segments; | |
| 47 segmentsElement.innerHTML = ''; | |
| 48 | |
| 49 // Create the new segments. | |
| 50 var segment = document.createElement('li'); | |
| 51 segment.classList.add('segment'); | |
| 52 var angle = 360 / this.numSegments; | |
| 53 for (var i = 0; i < this.numSegments; ++i) { | |
| 54 var segmentCopy = segment.cloneNode(true); | |
| 55 segmentCopy.style.webkitTransform = | |
| 56 'rotate(' + (i * angle) + 'deg) skewY(' + | |
| 57 -1 * (90 - angle) + 'deg)'; | |
| 58 segmentsElement.appendChild(segmentCopy); | |
| 59 this.segments.push(segmentCopy); | |
| 60 } | |
| 61 this.progressChanged(); | |
| 62 } | |
| 63 }); | |
| OLD | NEW |