|
598
|
1 |
/* this widget displays a small tooltip */ |
|
694
|
2 |
IriSP.Widgets.Tooltip = function(player, config) { |
|
|
3 |
IriSP.Widgets.Widget.call(this, player, config); |
|
598
|
4 |
}; |
|
|
5 |
|
|
|
6 |
IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget(); |
|
|
7 |
|
|
755
|
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>'; |
|
598
|
20 |
|
|
|
21 |
IriSP.Widgets.Tooltip.prototype.draw = function() { |
|
|
22 |
_this = this; |
|
755
|
23 |
this.renderTemplate(); |
|
598
|
24 |
this.$.parent().css({ |
|
|
25 |
"position" : "relative" |
|
|
26 |
}); |
|
755
|
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; |
|
598
|
35 |
this.$.mouseover(function() { |
|
755
|
36 |
_this.$tooltip.hide(); |
|
598
|
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 |
|
|
755
|
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 |
}); |
|
598
|
67 |
this.$tip.css({ |
|
755
|
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" |
|
598
|
75 |
}); |
|
|
76 |
}; |
|
|
77 |
|
|
|
78 |
IriSP.Widgets.Tooltip.prototype.hide = function() { |
|
755
|
79 |
this.$tooltip.hide(); |
|
598
|
80 |
}; |