3 IriSP.Widgets.Widget.call(this, player, config); |
3 IriSP.Widgets.Widget.call(this, player, config); |
4 }; |
4 }; |
5 |
5 |
6 IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget(); |
6 IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget(); |
7 |
7 |
8 IriSP.Widgets.Tooltip.prototype.template = '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Inner"><div class="Ldt-Tooltip-Color"></div><div class="Ldt-Tooltip-Text"></div></div></div>'; |
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>'; |
9 |
20 |
10 IriSP.Widgets.Tooltip.prototype.draw = function() { |
21 IriSP.Widgets.Tooltip.prototype.draw = function() { |
11 _this = this; |
22 _this = this; |
12 this.$.html(this.template); |
23 this.renderTemplate(); |
13 this.$.parent().css({ |
24 this.$.parent().css({ |
14 "position" : "relative" |
25 "position" : "relative" |
15 }); |
26 }); |
16 this.$tip = this.$.find(".Ldt-Tooltip"); |
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; |
17 this.$.mouseover(function() { |
35 this.$.mouseover(function() { |
18 _this.$tip.hide(); |
36 _this.$tooltip.hide(); |
19 }); |
37 }); |
20 this.hide(); |
38 this.hide(); |
21 }; |
39 }; |
22 |
40 |
23 IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) { |
41 IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) { |
28 this.$.find(".Ldt-Tooltip-Color").hide(); |
46 this.$.find(".Ldt-Tooltip-Color").hide(); |
29 } |
47 } |
30 |
48 |
31 this.$.find(".Ldt-Tooltip-Text").html(text); |
49 this.$.find(".Ldt-Tooltip-Text").html(text); |
32 |
50 |
33 this.$tip.show(); |
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 }); |
34 this.$tip.css({ |
67 this.$tip.css({ |
35 "left" : Math.floor(x - this.$tip.outerWidth() / 2) + "px", |
68 "left": (this.__tipDelta + shift) + "px" |
36 "top" : Math.floor(y - this.$tip.outerHeight()) + "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" |
37 }); |
75 }); |
38 }; |
76 }; |
39 |
77 |
40 IriSP.Widgets.Tooltip.prototype.hide = function() { |
78 IriSP.Widgets.Tooltip.prototype.hide = function() { |
41 this.$tip.hide(); |
79 this.$tooltip.hide(); |
42 }; |
80 }; |