Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(442)

Side by Side Diff: elements/viewer-page-indicator/viewer-page-indicator.html

Issue 152913003: Add page indicator and progress bar polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/html-office-public.git@master
Patch Set: Created 6 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <polymer-element name="viewer-page-indicator" attributes="text">
2 <template>
3 <link rel="stylesheet" href="viewer-page-indicator.css">
4 <div id="text">{{text}}</div>
5 <div id="triangle-right"></div>
6 </template>
7 <script>
8 Polymer('viewer-page-indicator', {
9 text: '1',
10 timerId: undefined,
11 ready: function() {
12 var scrollCallback = function() {
13 this.style.visibility = document.documentElement.clientWidth ==
14 window.innerWidth ? 'hidden' : 'visible';
15 var percent = window.scrollY /
16 (document.body.scrollHeight -
17 document.documentElement.clientHeight);
18 this.style.top = percent *
19 (document.documentElement.clientHeight - this.offsetHeight) + 'px';
20 this.style.opacity = 1;
21 clearTimeout(this.timerId);
22
23 this.timerId = setTimeout(function() {
24 this.style.opacity = 0;
25 this.timerId = undefined;
26 }.bind(this), 2000);
27 }.bind(this);
28 window.addEventListener('scroll', function() {
29 requestAnimationFrame(scrollCallback);
30 });
31
32 scrollCallback();
33 },
34 });
35 </script>
36 </polymer-element>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698