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 |