1 /* this widget displays a small tooltip */

     2 IriSP.Widgets.Tooltip = function(player, config) {

     3     IriSP.Widgets.Widget.call(this, player, config);

     4 };

     5 

     6 IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget();

     7 

     8 IriSP.Widgets.Tooltip.prototype.defaults = {

     9     

    10 };

    11 

    12 IriSP.Widgets.Tooltip.prototype.template =

    13     '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Main"><div class="Ldt-Tooltip-Corner-NW"></div>'

    14     + '<div class="Ldt-Tooltip-Border-Top"></div><div class="Ldt-Tooltip-Corner-NE"></div>'

    15     + '<div class="Ldt-Tooltip-Border-Left"></div><div class="Ldt-Tooltip-Border-Right"></div>'

    16     + '<div class="Ldt-Tooltip-Corner-SW"></div><div class="Ldt-Tooltip-Border-SW"></div>'

    17     + '<div class="Ldt-Tooltip-Tip"></div><div class="Ldt-Tooltip-Border-SE"></div>'

    18     + '<div class="Ldt-Tooltip-Corner-SE"></div><div class="Ldt-Tooltip-Inner">'

    19     + '<div class="Ldt-Tooltip-Color"></div><p class="Ldt-Tooltip-Text"></p></div></div></div>';

    20 

    21 IriSP.Widgets.Tooltip.prototype.draw = function() {

    22     _this = this;

    23     this.renderTemplate();

    24     this.$.parent().css({

    25         "position" : "relative"

    26     });

    27     this.$tooltip = this.$.find(".Ldt-Tooltip");

    28     this.$tip = this.$.find(".Ldt-Tooltip-Tip");

    29     this.$sw = this.$.find(".Ldt-Tooltip-Border-SW");

    30     this.$se = this.$.find(".Ldt-Tooltip-Border-SE");

    31     this.__halfWidth = Math.floor(this.$.find(".Ldt-Tooltip-Main").width()/2);

    32     this.__borderWidth = this.$.find(".Ldt-Tooltip-Border-Left").width();

    33     this.__tipDelta = this.__halfWidth - Math.floor(this.$tip.width()/2);

    34     this.__maxShift = this.__tipDelta - this.__borderWidth;

    35     this.$.mouseover(function() {

    36         _this.$tooltip.hide();

    37     });

    38     this.hide();

    39 };

    40 

    41 IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) {

    42     

    43     if (typeof color !== "undefined") {

    44         this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color);

    45     } else {

    46         this.$.find(".Ldt-Tooltip-Color").hide();

    47     }

    48 

    49     this.$.find(".Ldt-Tooltip-Text").html(text);

    50 

    51     this.$tooltip.show();

    52     

    53     var shift = 0;

    54     

    55     if (typeof this.min_x !== "undefined" && (x - this.__halfWidth < this.min_x)) {

    56         shift = Math.max(x - this.__halfWidth - this.min_x, - this.__maxShift);

    57     }

    58     

    59     if (typeof this.max_x !== "undefined" && (+x + this.__halfWidth > this.max_x)) {

    60         shift = Math.min(+ x + this.__halfWidth - this.max_x, this.__maxShift);

    61     }

    62     

    63     this.$tooltip.css({

    64         "left" : (x - shift) + "px",

    65         "top" : y + "px"

    66     });

    67     this.$tip.css({

    68         "left": (this.__tipDelta + shift) + "px"

    69     });

    70     this.$sw.css({

    71         "width": (this.__tipDelta + shift - this.__borderWidth) + "px"

    72     });

    73     this.$se.css({

    74         "width": (this.__tipDelta - shift - this.__borderWidth) + "px"

    75     });

    76 };

    77 

    78 IriSP.Widgets.Tooltip.prototype.hide = function() {

    79     this.$tooltip.hide();

    80 };