Add page indicator and progress bar polymer elements

elements/viewer-page-indicator/viewer-page-indicator.html

Index: elements/viewer-page-indicator/viewer-page-indicator.html
diff --git a/elements/viewer-page-indicator/viewer-page-indicator.html b/elements/viewer-page-indicator/viewer-page-indicator.html
new file mode 100644
index 0000000000000000000000000000000000000000..36b9c3e82f24437f9d12656d7f2ad8459b906e15
--- /dev/null
+++ b/elements/viewer-page-indicator/viewer-page-indicator.html
@@ -0,0 +1,42 @@
+<polymer-element name="viewer-page-indicator" attributes="text">
+<template>
+  <link rel="stylesheet" href="viewer-page-indicator.css">
+  <div id="text">1</div>

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

You can use data binding

http://www.polymer-project.org/polymer.html#data-binding-and-custom-attributes

<div id="text">{{text}}</div>

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

Oops. Done.

+  <div id="triangle-right"></div>
+</template>
+<script>
+  Polymer('viewer-page-indicator', {
+    text: '1',
+    timerId: undefined,
+    ready: function() {
+      var scrollCallback = function() {
+        if (document.documentElement.clientWidth == window.innerWidth)
+          this.style.visibility = 'hidden';
+        else
+          this.style.visibility = 'visible';

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

Ternary operator?

this.style.visibility = (document.documentElement.clientWidth ==
window.innerWidth) ? 'hidden' : 'visible';

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

Done.

+
+        var percent = window.scrollY /
+        (document.body.scrollHeight -
+         document.documentElement.clientHeight);

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

Fix indentation

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

Done.

+        this.style.top = percent * (document.documentElement.clientHeight -
+          this.offsetHeight) + 'px';

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

I'd rather the entire parenthesized subexpression be on one line

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

Done.

+        this.style.opacity = 1;
+        if (this.timerId !== undefined)
+          clearTimeout(this.timerId);

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

nitpick: you drop the if statement and just say clearTimeout(this.timerId)

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

Done.

+
+        this.timerId = setTimeout(function() {
+          this.style.opacity = 0;
+        }.bind(this), 2000);
+      }.bind(this);
+      window.addEventListener('scroll', function() {

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

Can you use declarative event mapping?
http://www.polymer-project.org/polymer.html#declarative-event-mapping

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

It doesn't seem so. I guess because the scroll event is never received by this
element, just the window.

+        webkitRequestAnimationFrame(scrollCallback);

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

I don't know what the status of "webkit" prefixed features are, but this feels
fishy.

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

Done. - the prefix isn't needed anymore.

+      });
+
+      scrollCallback();
+    },
+    textChanged: function() {
+      this.$.text.innerHTML = this.text;

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

Use data binding instead

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

Done.

+    },
+  });
+</script>
+</polymer-element>