OLD | NEW |
1 <polymer-element name="viewer-page-indicator" attributes="text"> | 1 <polymer-element name="viewer-page-indicator" attributes="text"> |
2 <template> | 2 <template> |
3 <link rel="stylesheet" href="viewer-page-indicator.css"> | 3 <link rel="stylesheet" href="viewer-page-indicator.css"> |
4 <div id="text">{{text}}</div> | 4 <div id="text">{{text}}</div> |
5 <div id="triangle-right"></div> | 5 <div id="triangle-right"></div> |
6 </template> | 6 </template> |
7 <script> | 7 <script src="viewer-page-indicator.js"></script> |
8 Polymer('viewer-page-indicator', { | |
9 text: '1', | |
10 timerId: undefined, | |
11 ready: function() { | |
12 var callback = this.fadeIn.bind(this, 2000); | |
13 window.addEventListener('scroll', function() { | |
14 requestAnimationFrame(callback); | |
15 }); | |
16 }, | |
17 initialFadeIn: function() { | |
18 this.fadeIn(6000); | |
19 }, | |
20 fadeIn: function(displayTime) { | |
21 var percent = window.scrollY / | |
22 (document.body.scrollHeight - | |
23 document.documentElement.clientHeight); | |
24 this.style.top = percent * | |
25 (document.documentElement.clientHeight - this.offsetHeight) + 'px'; | |
26 this.style.opacity = 1; | |
27 clearTimeout(this.timerId); | |
28 | |
29 this.timerId = setTimeout(function() { | |
30 this.style.opacity = 0; | |
31 this.timerId = undefined; | |
32 }.bind(this), displayTime); | |
33 } | |
34 }); | |
35 </script> | |
36 </polymer-element> | 8 </polymer-element> |
OLD | NEW |