Add page indicator and progress bar polymer elements

elements/viewer-progress-bar/viewer-progress-bar.html

Index: elements/viewer-progress-bar/viewer-progress-bar.html
diff --git a/elements/viewer-progress-bar/viewer-progress-bar.html b/elements/viewer-progress-bar/viewer-progress-bar.html
new file mode 100644
index 0000000000000000000000000000000000000000..84274ffa6e124f5fc5b80af41fe55e2bc0f9241e
--- /dev/null
+++ b/elements/viewer-progress-bar/viewer-progress-bar.html
@@ -0,0 +1,53 @@
+<polymer-element name="viewer-progress-bar"
+    attributes="progress text numSegments">
+<template>
+  <link rel="stylesheet" href="viewer-progress-bar.css">
+  <div class="scaler">
+    <ul id="segments"></ul>
+    <div class="center-circle"></div>
+  </div>
+  <div id="text">{{text}}</div>
+</template>
+<script>
+  Polymer('viewer-progress-bar', {
+    progress: 0,
+    text: 'Loading',
+    numSegments: 8,
+    segments: [],
+    ready: function() {
+      this.numSegmentsChanged();
+    },
+    progressChanged: function() {
+      var numVisible = this.progress * this.segments.length / 100.0;
+      for (var i = 0; i < this.segments.length; i++) {
+        this.segments[i].style.visibility =
+            i < numVisible ? 'visible' : 'hidden';
+      }
+
+      if (this.progress == 100)
+        this.style.opacity = 0;
+    },
+    numSegmentsChanged: function() {
+      // Clear the existing segments.
+      this.segments = [];
+      var segmentsElement = this.$.segments;
+      while (segmentsElement.hasChildNodes())
+        segmentsElement.removeChild(segmentsElement.lastChild);

[ganetsky1, 2014/02/10 20:10:04]

You can just segmentsElement.innerHTML = ''

[raymes, 2014/02/11 02:10:17]

Done.

+
+      // Create the new segments.
+      var segment = document.createElement('li');
+      segment.classList.add('segment');
+      var angle = 360 / this.numSegments;
+      for (var i = 0; i < this.numSegments; ++i) {
+        var segmentCopy = segment.cloneNode(true);
+        segmentCopy.style.webkitTransform =
+            'rotate(' + (i * angle) + 'deg) skewY(' +
+            -1 * (90 - angle) + 'deg)';

[ganetsky1, 2014/02/10 20:10:04]

This seems like it would be easier to read in HTML with data binding

[raymes, 2014/02/11 02:10:17]

I think basically to make it nicer this boils down to creating a new polymer
element for a segment. But I don't think it's worth adding that level of
abstraction for something this simple. If this element were to become more
complicated, I would agree.

+        segmentsElement.appendChild(segmentCopy);
+        this.segments.push(segmentCopy);
+      }
+      this.progressChanged();
+    }
+  });
+</script>
+</polymer-element>