chrome/browser/resources/net_internals/mouse_over_help.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * Class to handle display and placement of a div that appears under the cursor
   7  * when it overs over a specied element.  The div always appears below and to
   8  * the left of the cursor.
   9  */
  10 var MouseOverHelp = (function() {
  11   'use strict';
  12
  13   /**
  14    * @param {string} helpDivId Name of the div to position and display
  15    * @param {string} mouseOverElementId Name the element that displays the
  16    *     |helpDivId| div on mouse over.
  17    * @constructor
  18    */
  19   function MouseOverHelp(helpDivId, mouseOverElementId) {
  20     this.node_ = $(helpDivId);
  21
  22     $(mouseOverElementId).onmouseover = this.onMouseOver.bind(this);
  23     $(mouseOverElementId).onmouseout = this.onMouseOut.bind(this);
  24
  25     this.show(false);
  26   }
  27
  28   MouseOverHelp.prototype = {
  29     /**
  30      * Positions and displays the div, if not already visible.
  31      * @param {MouseEvent} event Mouse event that triggered the call.
  32      */
  33     onMouseOver: function(event) {
  34       if (this.isVisible_)
  35         return;
  36
  37       this.node_.style.position = 'absolute';
  38
  39       this.show(true);
  40
  41       this.node_.style.left = (event.clientX + 15).toFixed(0) + 'px';
  42       this.node_.style.top = event.clientY.toFixed(0) + 'px';
  43     },
  44
  45     /**
  46      * Hides the div when the cursor leaves the hover element.
  47      * @param {MouseEvent} event Mouse event that triggered the call.
  48      */
  49     onMouseOut: function(event) {
  50       this.show(false);
  51     },
  52
  53     /**
  54      * Sets the div's visibility.
  55      * @param {boolean} isVisible True if the help div should be shown.
  56      */
  57     show: function(isVisible) {
  58       setNodeDisplay(this.node_, isVisible);
  59       this.isVisible_ = isVisible;
  60     },
  61   };
  62
  63   return MouseOverHelp;
  64 })();