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..8a4339e7a012a477a4045b5426737ac5da43962d
--- /dev/null
+++ b/elements/viewer-progress-bar/viewer-progress-bar.html
@@ -0,0 +1,50 @@
+<polymer-element name="viewer-progress-bar" attributes="progress text">
+<template>
+  <link rel="stylesheet" href="viewer-progress-bar.css">
+  <div class="scaler">
+    <ul id="segments">
+      <li class="segment"></li>
+      <li class="segment"></li>
+      <li class="segment"></li>
+      <li class="segment"></li>
+      <li class="segment"></li>
+      <li class="segment"></li>
+      <li class="segment"></li>
+      <li class="segment"></li>

[ganetsky1, 2014/02/04 17:27:29]

I would try to avoid this repitition and just have a 'segments' constant.

Then have a segment template and stamp it out as many times as you need to.

http://www.html5rocks.com/en/tutorials/webcomponents/template/

[raymes, 2014/02/05 05:04:37]

Because it's so simple, I don't know if it's worth converting to a template. But
it seems fair to add the nodes on construction which simplifies the constructor
logic as well.

+    </ul>
+    <div class="center-circle"></div>
+  </div>
+  <div id="text">Loading</div>
+</template>
+<script>
+  Polymer('viewer-progress-bar', {
+    progress: 0,
+    text: 'Loading',
+    segments: [],
+    ready: function() {
+      var children = this.$.segments.childNodes;
+      for (var i = 0; i < children.length; i++) {
+        if (children[i].classList &&
+          children[i].classList.contains('segment')) {
+          this.segments.push(children[i]);
+      }
+    }
+    this.progressChanged();
+  },
+  progressChanged: function() {
+    var numVisible = this.progress * this.segments.length / 100.0;
+    for (var i = 0; i < this.segments.length; i++) {
+      if (i < numVisible)
+        this.segments[i].style.visibility = 'visible';
+      else
+        this.segments[i].style.visibility = 'hidden';

[ganetsky1, 2014/02/04 17:27:29]

Ternary operator?

this.segments[i].style.visibility = (i < numVisible) ? 'visible' : 'hidden';

[raymes, 2014/02/05 05:04:37]

Done.

+    }
+    if (this.progress == 100)
+      this.style.opacity = 0;
+  },
+  textChanged: function() {
+    this.$.text.innerHTML = this.text;
+  },
+});
+</script>
+</polymer-element>