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.parentNode.addEventListener('mousemove', 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 initialFadeIn: function() { |
18 this.fadingIn = true; | 30 this.inInitialFadeIn = true; |
19 }, | 31 this.fadeIn(); |
20 fadeOut: function() { | 32 this.fadeOutAfterDelay(6000); |
21 this.fadingIn = false; | |
22 }, | 33 }, |
ganetsky1
2014/02/20 20:22:29
You can just have inInitialFadeInChanged(oldValue,
raymes
2014/02/21 03:03:42
inInitialFadeIn is just meant to be some private s
| |
23 fadingInChanged: function() { | 34 fadingInChanged: function() { |
24 if (this.fadingIn) { | 35 if (this.fadingIn) { |
25 this.style.opacity = 1; | 36 this.fadeIn(); |
26 if (this.timerId !== undefined) { | 37 } else { |
27 clearTimeout(this.timerId); | 38 if (this.timerId === undefined) |
39 this.fadeOutAfterDelay(3000); | |
40 } | |
41 }, | |
42 fadeIn: function() { | |
43 this.style.opacity = 1; | |
44 clearTimeout(this.timerId); | |
45 this.timerId = undefined; | |
46 }, | |
47 fadeOutAfterDelay: function(delay) { | |
ganetsky1
2014/02/20 20:22:29
Why have a fadeOutAfterDelay method, when you coul
raymes
2014/02/21 03:03:42
I just pulled out the common code. Both the callsi
| |
48 this.timerId = setTimeout( | |
49 function() { | |
50 this.style.opacity = 0; | |
28 this.timerId = undefined; | 51 this.timerId = undefined; |
29 } | 52 this.inInitialFadeIn = false; |
30 } else { | 53 }.bind(this), delay); |
31 if (this.timerId === undefined) { | |
32 this.timerId = setTimeout( | |
33 function() { | |
34 this.style.opacity = 0; | |
35 this.timerId = undefined; | |
36 }.bind(this), 3000); | |
37 } | |
38 } | |
39 } | 54 } |
40 }); | 55 }); |
41 </script> | 56 </script> |
42 </polymer-element> | 57 </polymer-element> |
OLD | NEW |