1 /* this widget displays a small tooltip */ |
1 /* this widget displays a small tooltip */ |
2 IriSP.Widgets.Tooltip = function(Popcorn, config, Serializer) { |
2 IriSP.Widgets.Tooltip = function(player, config) { |
3 IriSP.Widgets.Widget.call(this, Popcorn, config, Serializer); |
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() || 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; |
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) { |
24 |
42 |
25 if (typeof color !== "undefined") { |
43 if (typeof color !== "undefined") { |
26 this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color); |
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 } |
27 } else { |
59 } else { |
28 this.$.find(".Ldt-Tooltip-Color").hide(); |
60 this.$.find(".Ldt-Tooltip-Color").hide(); |
29 } |
61 } |
30 |
62 |
31 this.$.find(".Ldt-Tooltip-Text").html(text); |
63 this.$.find(".Ldt-Tooltip-Text").html(text); |
32 |
64 |
33 this.$tip.show(); |
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 }); |
34 this.$tip.css({ |
81 this.$tip.css({ |
35 "left" : Math.floor(x - this.$tip.outerWidth() / 2) + "px", |
82 "left": (this.__tipDelta + shift) + "px" |
36 "top" : Math.floor(y - this.$tip.outerHeight()) + "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" |
37 }); |
89 }); |
38 }; |
90 }; |
39 |
91 |
40 IriSP.Widgets.Tooltip.prototype.hide = function() { |
92 IriSP.Widgets.Tooltip.prototype.hide = function() { |
41 this.$tip.hide(); |
93 this.$tooltip.hide(); |
42 }; |
94 }; |