[polymer] Merge of master into polymer10-migration

netlog_viewer/mouse_over_help.js

+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * Class to handle display and placement of a div that appears under the cursor
+ * when it overs over a specied element.  The div always appears below and to
+ * the left of the cursor.
+ */
+var MouseOverHelp = (function() {
+  'use strict';
+
+  /**
+   * @param {string} helpDivId Name of the div to position and display
+   * @param {string} mouseOverElementId Name the element that displays the
+   *     |helpDivId| div on mouse over.
+   * @constructor
+   */
+  function MouseOverHelp(helpDivId, mouseOverElementId) {
+    this.node_ = $(helpDivId);
+
+    $(mouseOverElementId).onmouseover = this.onMouseOver.bind(this);
+    $(mouseOverElementId).onmouseout = this.onMouseOut.bind(this);
+
+    this.show(false);
+  }
+
+  MouseOverHelp.prototype = {
+    /**
+     * Positions and displays the div, if not already visible.
+     * @param {MouseEvent} event Mouse event that triggered the call.
+     */
+    onMouseOver: function(event) {
+      if (this.isVisible_)
+        return;
+
+      this.node_.style.position = 'absolute';
+
+      this.show(true);
+
+      this.node_.style.left = (event.clientX + 15).toFixed(0) + 'px';
+      this.node_.style.top = event.clientY.toFixed(0) + 'px';
+    },
+
+    /**
+     * Hides the div when the cursor leaves the hover element.
+     * @param {MouseEvent} event Mouse event that triggered the call.
+     */
+    onMouseOut: function(event) {
+      this.show(false);
+    },
+
+    /**
+     * Sets the div's visibility.
+     * @param {boolean} isVisible True if the help div should be shown.
+     */
+    show: function(isVisible) {
+      setNodeDisplay(this.node_, isVisible);
+      this.isVisible_ = isVisible;
+    },
+  };
+
+  return MouseOverHelp;
+})();
+