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() || 192)/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 // one color or array of colors |
|
45 if (typeof color === "string") { |
|
46 this.$.find(".Ldt-Tooltip-Color").html(""); |
|
47 this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color); |
|
48 this.$.find(".Ldt-Tooltip-Color").show().css("height", ""); |
|
49 } |
|
50 else{ |
|
51 var d = this.$.find(".Ldt-Tooltip-Color"); |
|
52 d.html(""); |
|
53 d.show(); |
|
54 for(var i=0; i<color.length; i++){ |
|
55 d.append('<div style="float: left; height: 10px; width: 10px; background-color: ' + color[i] + '">') |
|
56 } |
|
57 this.$.find(".Ldt-Tooltip-Color").css("height", (color.length * 10) + "px"); |
|
58 } |
|
59 } else { |
|
60 this.$.find(".Ldt-Tooltip-Color").hide(); |
|
61 } |
|
62 |
|
63 this.$.find(".Ldt-Tooltip-Text").html(text); |
|
64 |
|
65 this.$tooltip.show(); |
|
66 |
|
67 var shift = 0; |
|
68 |
|
69 if (typeof this.min_x !== "undefined" && (x - this.__halfWidth < this.min_x)) { |
|
70 shift = Math.max(x - this.__halfWidth - this.min_x, - this.__maxShift); |
|
71 } |
|
72 |
|
73 if (typeof this.max_x !== "undefined" && (+x + this.__halfWidth > this.max_x)) { |
|
74 shift = Math.min(+ x + this.__halfWidth - this.max_x, this.__maxShift); |
|
75 } |
|
76 |
|
77 this.$tooltip.css({ |
|
78 "left" : (x - shift) + "px", |
|
79 "top" : y + "px" |
|
80 }); |
|
81 this.$tip.css({ |
|
82 "left": (this.__tipDelta + shift) + "px" |
|
83 }); |
|
84 this.$sw.css({ |
|
85 "width": (this.__tipDelta + shift - this.__borderWidth) + "px" |
|
86 }); |
|
87 this.$se.css({ |
|
88 "width": (this.__tipDelta - shift - this.__borderWidth) + "px" |
|
89 }); |
|
90 }; |
|
91 |
|
92 IriSP.Widgets.Tooltip.prototype.hide = function() { |
|
93 this.$tooltip.hide(); |
|
94 }; |
|