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..ae402f4557a584b17e908cec514b66d6e945448a
--- /dev/null
+++ b/elements/viewer-progress-bar/viewer-progress-bar.html
@@ -0,0 +1,37 @@
+<polymer-element name="viewer-progress-bar" attributes="progress text">
+<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',
+    segments: [],
+    ready: function() {
+      var NUM_SEGMENTS = 8;

[ganetsky1, 2014/02/05 16:55:20]

You could make this component more resuable and configurable by making this a
public attribute.

[raymes, 2014/02/07 00:33:41]

I had a try at doing this but the math to do the segmenting properly becomes
more complicated and there isn't really a need to expose the number of segments
at the moment. I think we could extend this in the future if need-be

[raymes, 2014/02/10 01:47:45]

I ended up changing this to be generic. Done!

+      for (var i = 0; i < NUM_SEGMENTS; ++i) {
+        var segment = document.createElement('li');
+        segment.classList.add('segment');
+        this.$.segments.appendChild(segment);

[ganetsky1, 2014/02/05 16:55:20]

It would be better if you just cloned a DOM nome instead of constructed it in
javascript. How it looks with templates:

Anywhere in the HTML:

<template id="segmentTemplate">
  <li class='segment'></li>
</template>

In the Javascript:

var template = this.$.segmentTemplate;
for (var i = 0; i < this.numSegments; ++i) {
  var segment = document.importNode(template, true);
  this.$.segments.appendChild(segment);
  this.segments.push(segment);
}

Incidentally, if you expose numSegments as an attribute... you can change this
method from ready to numSegmentsChanged... and make segments modifiable during
execution of the application! All you would have to do is clear the segments
array and this.$.segments.innerHTML = '' in this function.

That's the magic of components!

[raymes, 2014/02/07 00:33:41]

I tried to do the templating but it didn't work for some reason. The shadow dom
that got constructed with document.importNode was empty. I haven't dug into it
but I think it's just as simple in this case (more simple even?) to construct
the dom node from scratch. I did this programmatically here. I also shifted the
style here to clean up the CSS.

+        this.segments.push(segment);
+      }
+      this.progressChanged();
+    },
+    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;
+    },
+  });
+</script>
+</polymer-element>