1 /* this widget displays a small tooltip */ |
1 /* this widget displays a small tooltip */ |
2 IriSP.Widgets.Tooltip = function(player, config) { |
2 IriSP.Widgets.Tooltip = function(Popcorn, config, Serializer) { |
3 IriSP.Widgets.Widget.call(this, player, config); |
3 IriSP.Widgets.Widget.call(this, Popcorn, config, Serializer); |
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.defaults = { |
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>'; |
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 |
9 |
21 IriSP.Widgets.Tooltip.prototype.draw = function() { |
10 IriSP.Widgets.Tooltip.prototype.draw = function() { |
22 _this = this; |
11 _this = this; |
23 this.renderTemplate(); |
12 this.$.html(this.template); |
24 this.$.parent().css({ |
13 this.$.parent().css({ |
25 "position" : "relative" |
14 "position" : "relative" |
26 }); |
15 }); |
27 this.$tooltip = this.$.find(".Ldt-Tooltip"); |
16 this.$tip = 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() { |
17 this.$.mouseover(function() { |
36 _this.$tooltip.hide(); |
18 _this.$tip.hide(); |
37 }); |
19 }); |
38 this.hide(); |
20 this.hide(); |
39 }; |
21 }; |
40 |
22 |
41 IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) { |
23 IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) { |
42 |
24 |
43 if (typeof color !== "undefined") { |
25 if (typeof color !== "undefined") { |
44 // one color or array of colors |
26 this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color); |
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 { |
27 } else { |
60 this.$.find(".Ldt-Tooltip-Color").hide(); |
28 this.$.find(".Ldt-Tooltip-Color").hide(); |
61 } |
29 } |
62 |
30 |
63 this.$.find(".Ldt-Tooltip-Text").html(text); |
31 this.$.find(".Ldt-Tooltip-Text").html(text); |
64 |
32 |
65 this.$tooltip.show(); |
33 this.$tip.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({ |
34 this.$tip.css({ |
82 "left": (this.__tipDelta + shift) + "px" |
35 "left" : Math.floor(x - this.$tip.outerWidth() / 2) + "px", |
83 }); |
36 "top" : Math.floor(y - this.$tip.outerHeight()) + "px" |
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 }); |
37 }); |
90 }; |
38 }; |
91 |
39 |
92 IriSP.Widgets.Tooltip.prototype.hide = function() { |
40 IriSP.Widgets.Tooltip.prototype.hide = function() { |
93 this.$tooltip.hide(); |
41 this.$tip.hide(); |
94 }; |
42 }; |