OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 Polymer({ | 5 Polymer({ |
6 is: 'viewer-page-indicator', | 6 is: 'viewer-page-indicator', |
7 | 7 |
8 properties: { | 8 properties: { |
9 label: { | 9 label: {type: String, value: '1'}, |
10 type: String, | |
11 value: '1' | |
12 }, | |
13 | 10 |
14 index: { | 11 index: {type: Number, observer: 'indexChanged'}, |
15 type: Number, | |
16 observer: 'indexChanged' | |
17 }, | |
18 | 12 |
19 pageLabels: { | 13 pageLabels: {type: Array, value: null, observer: 'pageLabelsChanged'} |
20 type: Array, | |
21 value: null, | |
22 observer: 'pageLabelsChanged' | |
23 } | |
24 }, | 14 }, |
25 | 15 |
26 /** @type {number|undefined} */ | 16 /** @type {number|undefined} */ |
27 timerId: undefined, | 17 timerId: undefined, |
28 | 18 |
29 /** @override */ | 19 /** @override */ |
30 ready: function() { | 20 ready: function() { |
31 var callback = this.fadeIn.bind(this, 2000); | 21 var callback = this.fadeIn.bind(this, 2000); |
32 window.addEventListener('scroll', function() { | 22 window.addEventListener('scroll', function() { |
33 requestAnimationFrame(callback); | 23 requestAnimationFrame(callback); |
34 }); | 24 }); |
35 }, | 25 }, |
36 | 26 |
37 initialFadeIn: function() { | 27 initialFadeIn: function() { |
38 this.fadeIn(6000); | 28 this.fadeIn(6000); |
39 }, | 29 }, |
40 | 30 |
41 /** @param {number} displayTime */ | 31 /** @param {number} displayTime */ |
42 fadeIn: function(displayTime) { | 32 fadeIn: function(displayTime) { |
43 var percent = window.scrollY / | 33 var percent = window.scrollY / |
44 (document.body.scrollHeight - | 34 (document.body.scrollHeight - document.documentElement.clientHeight); |
45 document.documentElement.clientHeight); | 35 this.style.top = |
46 this.style.top = percent * | 36 percent * (document.documentElement.clientHeight - this.offsetHeight) + |
47 (document.documentElement.clientHeight - this.offsetHeight) + 'px'; | 37 'px'; |
48 // <if expr="is_macosx"> | 38 // <if expr="is_macosx"> |
49 // On the Mac, if overlay scrollbars are enabled, prevent them from | 39 // On the Mac, if overlay scrollbars are enabled, prevent them from |
50 // overlapping the triangle. | 40 // overlapping the triangle. |
51 if (window.innerWidth == document.body.scrollWidth) | 41 if (window.innerWidth == document.body.scrollWidth) |
52 this.style.right = '16px'; | 42 this.style.right = '16px'; |
53 else | 43 else |
54 this.style.right = '0px'; | 44 this.style.right = '0px'; |
55 // </if> | 45 // </if> |
56 this.style.opacity = 1; | 46 this.style.opacity = 1; |
57 clearTimeout(this.timerId); | 47 clearTimeout(this.timerId); |
58 | 48 |
59 this.timerId = setTimeout(function() { | 49 this.timerId = setTimeout(function() { |
60 this.style.opacity = 0; | 50 this.style.opacity = 0; |
61 this.timerId = undefined; | 51 this.timerId = undefined; |
62 }.bind(this), displayTime); | 52 }.bind(this), displayTime); |
63 }, | 53 }, |
64 | 54 |
65 pageLabelsChanged: function() { | 55 pageLabelsChanged: function() { |
66 this.indexChanged(); | 56 this.indexChanged(); |
67 }, | 57 }, |
68 | 58 |
69 indexChanged: function() { | 59 indexChanged: function() { |
70 if (this.pageLabels) | 60 if (this.pageLabels) |
71 this.label = this.pageLabels[this.index]; | 61 this.label = this.pageLabels[this.index]; |
72 else | 62 else |
73 this.label = String(this.index + 1); | 63 this.label = String(this.index + 1); |
74 } | 64 } |
75 }); | 65 }); |
OLD | NEW |