| OLD | NEW |
| 1 <polymer-element name="viewer-progress-bar" | 1 <polymer-element name="viewer-progress-bar" |
| 2 attributes="progress text numSegments"> | 2 attributes="progress text numSegments"> |
| 3 <template> | 3 <template> |
| 4 <link rel="stylesheet" href="viewer-progress-bar.css"> | 4 <link rel="stylesheet" href="viewer-progress-bar.css"> |
| 5 <div class="scaler"> | 5 <div class="scaler"> |
| 6 <ul id="segments"></ul> | 6 <ul id="segments"></ul> |
| 7 <div class="center-circle"></div> | 7 <div class="center-circle"></div> |
| 8 </div> | 8 </div> |
| 9 <div id="text">{{text}}</div> | 9 <div id="text">{{text}}</div> |
| 10 </template> | 10 </template> |
| 11 <script> | 11 <script src="viewer-progress-bar.js"></script> |
| 12 Polymer('viewer-progress-bar', { | |
| 13 progress: 0, | |
| 14 text: 'Loading', | |
| 15 numSegments: 8, | |
| 16 segments: [], | |
| 17 ready: function() { | |
| 18 this.numSegmentsChanged(); | |
| 19 }, | |
| 20 progressChanged: function() { | |
| 21 var numVisible = this.progress * this.segments.length / 100.0; | |
| 22 for (var i = 0; i < this.segments.length; i++) { | |
| 23 this.segments[i].style.visibility = | |
| 24 i < numVisible ? 'visible' : 'hidden'; | |
| 25 } | |
| 26 | |
| 27 if (this.progress >= 100 || this.progress < 0) | |
| 28 this.style.opacity = 0; | |
| 29 }, | |
| 30 numSegmentsChanged: function() { | |
| 31 // Clear the existing segments. | |
| 32 this.segments = []; | |
| 33 var segmentsElement = this.$.segments; | |
| 34 segmentsElement.innerHTML = ''; | |
| 35 | |
| 36 // Create the new segments. | |
| 37 var segment = document.createElement('li'); | |
| 38 segment.classList.add('segment'); | |
| 39 var angle = 360 / this.numSegments; | |
| 40 for (var i = 0; i < this.numSegments; ++i) { | |
| 41 var segmentCopy = segment.cloneNode(true); | |
| 42 segmentCopy.style.webkitTransform = | |
| 43 'rotate(' + (i * angle) + 'deg) skewY(' + | |
| 44 -1 * (90 - angle) + 'deg)'; | |
| 45 segmentsElement.appendChild(segmentCopy); | |
| 46 this.segments.push(segmentCopy); | |
| 47 } | |
| 48 this.progressChanged(); | |
| 49 } | |
| 50 }); | |
| 51 </script> | |
| 52 </polymer-element> | 12 </polymer-element> |
| OLD | NEW |