OLD | NEW |
1 <polymer-element name="viewer-toolbar" attributes="fadingIn" | 1 <polymer-element name="viewer-toolbar" attributes="fadingIn"> |
2 on-mouseover="{{fadeIn}}" on-mousemove="{{fadeIn}}" | |
3 on-mouseout="{{fadeOut}}"> | |
4 <template> | 2 <template> |
5 <link rel="stylesheet" href="viewer-toolbar.css"> | 3 <link rel="stylesheet" href="viewer-toolbar.css"> |
6 <div id="toolbar"> | 4 <div id="toolbar"> |
7 <content></content> | 5 <content></content> |
8 </div> | 6 </div> |
9 </template> | 7 </template> |
10 <script> | 8 <script> |
11 Polymer('viewer-toolbar', { | 9 Polymer('viewer-toolbar', { |
12 fadingIn: false, | 10 fadingIn: false, |
13 timerId: undefined, | 11 timerId_: undefined, |
| 12 inInitialFadeIn_: false, |
14 ready: function() { | 13 ready: function() { |
15 this.fadingInChanged(); | 14 this.mousemoveCallback = function(e) { |
| 15 var rect = this.getBoundingClientRect(); |
| 16 if (e.clientX >= rect.left && e.clientX <= rect.right && |
| 17 e.clientY >= rect.top && e.clientY <= rect.bottom) { |
| 18 this.fadingIn = true; |
| 19 // If we hover over the toolbar, cancel the initial fade in. |
| 20 if (this.inInitialFadeIn_) |
| 21 this.inInitialFadeIn_ = false; |
| 22 } else { |
| 23 // Initially we want to keep the toolbar up for a longer period. |
| 24 if (!this.inInitialFadeIn_) |
| 25 this.fadingIn = false; |
| 26 } |
| 27 }.bind(this); |
16 }, | 28 }, |
17 fadeIn: function() { | 29 attached: function() { |
18 this.fadingIn = true; | 30 this.parentNode.addEventListener('mousemove', this.mousemoveCallback); |
19 }, | 31 }, |
20 fadeOut: function() { | 32 detached: function() { |
21 this.fadingIn = false; | 33 this.parentNode.removeEventListener('mousemove', this.mousemoveCallback); |
| 34 }, |
| 35 initialFadeIn: function() { |
| 36 this.inInitialFadeIn_ = true; |
| 37 this.fadeIn(); |
| 38 this.fadeOutAfterDelay(6000); |
22 }, | 39 }, |
23 fadingInChanged: function() { | 40 fadingInChanged: function() { |
24 if (this.fadingIn) { | 41 if (this.fadingIn) { |
25 this.style.opacity = 1; | 42 this.fadeIn(); |
26 clearTimeout(this.timerId); | |
27 this.timerId = undefined; | |
28 } else { | 43 } else { |
29 if (this.timerId === undefined) { | 44 if (this.timerId_ === undefined) |
30 this.timerId = setTimeout( | 45 this.fadeOutAfterDelay(3000); |
31 function() { | |
32 this.style.opacity = 0; | |
33 this.timerId = undefined; | |
34 }.bind(this), 3000); | |
35 } | |
36 } | 46 } |
| 47 }, |
| 48 fadeIn: function() { |
| 49 this.style.opacity = 1; |
| 50 clearTimeout(this.timerId_); |
| 51 this.timerId_ = undefined; |
| 52 }, |
| 53 fadeOutAfterDelay: function(delay) { |
| 54 this.timerId_ = setTimeout( |
| 55 function() { |
| 56 this.style.opacity = 0; |
| 57 this.timerId_ = undefined; |
| 58 this.inInitialFadeIn_ = false; |
| 59 }.bind(this), delay); |
37 } | 60 } |
38 }); | 61 }); |
39 </script> | 62 </script> |
40 </polymer-element> | 63 </polymer-element> |
OLD | NEW |