1 /* this widget displays a small tooltip */ |
1 /* this widget displays a small tooltip */ |
2 IriSP.TooltipWidget = function(Popcorn, config, Serializer) { |
2 IriSP.TooltipWidget = function(Popcorn, config, Serializer) { |
3 IriSP.Widget.call(this, Popcorn, config, Serializer); |
3 IriSP.Widget.call(this, Popcorn, config, Serializer); |
4 this._shown = false; |
|
5 this._displayedText = ""; |
|
6 this._hideTimeout = -1; |
|
7 }; |
4 }; |
8 |
|
9 |
5 |
10 IriSP.TooltipWidget.prototype = new IriSP.Widget(); |
6 IriSP.TooltipWidget.prototype = new IriSP.Widget(); |
11 |
7 |
12 IriSP.TooltipWidget.prototype.draw = function() { |
8 IriSP.TooltipWidget.prototype.draw = function() { |
13 var templ = Mustache.to_html(IriSP.tooltipWidget_template); |
9 var _html = Mustache.to_html(IriSP.tooltipWidget_template), |
14 // position the widget absolutely relative to document. --- NOOOO !!!! |
10 _this = this; |
15 this.selector.css({ |
11 this.$.parent().css({ |
16 "position": "absolute", |
12 "position" : "relative" |
17 "top": 0, |
13 }); |
18 "left": 0 |
14 this.$.append(_html); |
19 }); |
15 this.$tip = this.$.find(".Ldt-Tooltip"); |
20 this.selector.parent().css({ |
16 this.$.mouseover(function() { |
21 "position": "relative" |
17 _this.$tip.hide(); |
22 }); |
18 }); |
23 this.selector.append(templ); |
19 this.hide(); |
24 var _this = this; |
|
25 this.selector.mouseover(function() { |
|
26 _this.hide(); |
|
27 }); |
|
28 this.hide(); |
|
29 |
|
30 }; |
20 }; |
31 |
21 |
32 IriSP.TooltipWidget.prototype.clear = function() { |
22 IriSP.TooltipWidget.prototype.show = function(x, y, text, color) { |
33 this.selector.find(".tiptext").html(""); |
23 |
|
24 if (typeof color !== "undefined") { |
|
25 this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color); |
|
26 } else { |
|
27 this.$.find(".Ldt-Tooltip-Color").hide(); |
|
28 } |
|
29 |
|
30 this.$.find(".Ldt-Tooltip-Text").html(text); |
|
31 |
|
32 this.$tip.show(); |
|
33 this.$tip.css({ |
|
34 "left" : Math.floor(x - this.$tip.outerWidth() / 2) + "px", |
|
35 "top" : Math.floor(y - this.$tip.outerHeight() - 5) + "px" |
|
36 }); |
34 }; |
37 }; |
35 |
38 |
36 IriSP.TooltipWidget.prototype.show = function(text, color, x, y) { |
39 IriSP.TooltipWidget.prototype.hide = function() { |
37 |
40 this.$tip.hide(); |
38 if (this._displayedText == text && this._shown) |
|
39 return; |
|
40 |
|
41 this.selector.find(".tipcolor").css("background-color", color); |
|
42 this._displayedText = text; |
|
43 this.selector.find(".tiptext").html(text); |
|
44 |
|
45 var _tip = this.selector.find(".tip"); |
|
46 _tip.show(); |
|
47 _tip.css({ |
|
48 "left": Math.floor(x - _tip.outerWidth() / 2)+"px", |
|
49 "top": Math.floor(y - _tip.outerHeight())+"px" |
|
50 }); |
|
51 this._shown = true; |
|
52 }; |
41 }; |
53 |
|
54 IriSP.TooltipWidget.prototype.hide = function() { |
|
55 this.selector.find(".tip").hide(); |
|
56 this._shown = false; |
|
57 }; |
|