Allow click events to pass through the toolbar padding.

elements/viewer-toolbar/viewer-toolbar.html

Index: elements/viewer-toolbar/viewer-toolbar.html
diff --git a/elements/viewer-toolbar/viewer-toolbar.html b/elements/viewer-toolbar/viewer-toolbar.html
index 89fc69a08f61682e7bdb374c4aa95b6c9699c32e..8e7206e2092d1e8484c3bd70517158ae25798b82 100644
--- a/elements/viewer-toolbar/viewer-toolbar.html
+++ b/elements/viewer-toolbar/viewer-toolbar.html
@@ -1,6 +1,4 @@
-<polymer-element name="viewer-toolbar" attributes="fadingIn"
-    on-mouseover="{{fadeIn}}" on-mousemove="{{fadeIn}}"
-    on-mouseout="{{fadeOut}}">
+<polymer-element name="viewer-toolbar" attributes="fadingIn">
 <template>
   <link rel="stylesheet" href="viewer-toolbar.css">
   <div id="toolbar">
@@ -11,31 +9,48 @@
   Polymer('viewer-toolbar', {
     fadingIn: false,
     timerId: undefined,
+    inInitialFadeIn: false,
     ready: function() {
-      this.fadingInChanged();
-    },
-    fadeIn: function() {
-      this.fadingIn = true;
+      this.parentNode.addEventListener('mousemove', function(e) {
+        var rect = this.getBoundingClientRect();
+        if (e.clientX >= rect.left && e.clientX <= rect.right &&
+            e.clientY >= rect.top && e.clientY <= rect.bottom) {
+          this.fadingIn = true;
+          // If we hover over the toolbar, cancel the initial fade in.
+          if (this.inInitialFadeIn)
+            this.inInitialFadeIn = false;
+        } else {
+          // Initially we want to keep the toolbar up for a longer period.
+          if (!this.inInitialFadeIn)
+            this.fadingIn = false;
+        }
+      }.bind(this));
     },
-    fadeOut: function() {
-      this.fadingIn = false;
+    initialFadeIn: function() {
+      this.inInitialFadeIn = true;
+      this.fadeIn();
+      this.fadeOutAfterDelay(6000);
     },

[ganetsky1, 2014/02/20 20:22:29]

You can just have inInitialFadeInChanged(oldValue, newValue), and trigger a
transition or a cancellation based on that

[raymes, 2014/02/21 03:03:42]

inInitialFadeIn is just meant to be some private state which avoids the element
being faded out prematurely if the mouse is hovered over it. The owner element
shouldn't touch it, only call initialFadeIn(). I guess I should be adding an '_'
suffix to the private variables?

     fadingInChanged: function() {
       if (this.fadingIn) {
-        this.style.opacity = 1;
-        if (this.timerId !== undefined) {
-          clearTimeout(this.timerId);
-          this.timerId = undefined;
-        }
+        this.fadeIn();
       } else {
-        if (this.timerId === undefined) {
-          this.timerId = setTimeout(
-            function() {
-              this.style.opacity = 0;
-              this.timerId = undefined;
-            }.bind(this), 3000);
-        }
+        if (this.timerId === undefined)
+          this.fadeOutAfterDelay(3000);
       }
+    },
+    fadeIn: function() {
+      this.style.opacity = 1;
+      clearTimeout(this.timerId);
+      this.timerId = undefined;
+    },
+    fadeOutAfterDelay: function(delay) {

[ganetsky1, 2014/02/20 20:22:29]

Why have a fadeOutAfterDelay method, when you could just have a fadeOut method,
and call it with setTimeout.

[raymes, 2014/02/21 03:03:42]

I just pulled out the common code. Both the callsites would call setTimeout so
we might as well have it in this function.

+      this.timerId = setTimeout(
+        function() {
+          this.style.opacity = 0;
+          this.timerId = undefined;
+          this.inInitialFadeIn = false;
+        }.bind(this), delay);
     }
   });
 </script>