15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// found in the LICENSE file. 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Class to handle display and placement of a div that appears under the cursor 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * when it overs over a specied element. The div always appears below and to 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * the left of the cursor. 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)var MouseOverHelp = (function() { 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'use strict'; 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} helpDivId Name of the div to position and display 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} mouseOverElementId Name the element that displays the 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * |helpDivId| div on mouse over. 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @constructor 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) function MouseOverHelp(helpDivId, mouseOverElementId) { 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.node_ = $(helpDivId); 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) $(mouseOverElementId).onmouseover = this.onMouseOver.bind(this); 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) $(mouseOverElementId).onmouseout = this.onMouseOut.bind(this); 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.show(false); 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) MouseOverHelp.prototype = { 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Positions and displays the div, if not already visible. 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {MouseEvent} event Mouse event that triggered the call. 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) onMouseOver: function(event) { 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (this.isVisible_) 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return; 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.node_.style.position = 'absolute'; 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.show(true); 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.node_.style.left = (event.clientX + 15).toFixed(0) + 'px'; 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.node_.style.top = event.clientY.toFixed(0) + 'px'; 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Hides the div when the cursor leaves the hover element. 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {MouseEvent} event Mouse event that triggered the call. 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) onMouseOut: function(event) { 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.show(false); 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Sets the div's visibility. 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {boolean} isVisible True if the help div should be shown. 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) show: function(isVisible) { 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) setNodeDisplay(this.node_, isVisible); 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.isVisible_ = isVisible; 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return MouseOverHelp; 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)})(); 65