--- a/src/widgets/Tooltip.js Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Tooltip.js Thu Jan 02 16:49:20 2014 +0100
@@ -1,39 +1,21 @@
/* this widget displays a small tooltip */
-IriSP.Widgets.Tooltip = function(player, config) {
- IriSP.Widgets.Widget.call(this, player, config);
+IriSP.Widgets.Tooltip = function(Popcorn, config, Serializer) {
+ IriSP.Widgets.Widget.call(this, Popcorn, config, Serializer);
};
IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget();
-IriSP.Widgets.Tooltip.prototype.defaults = {
-
-};
-
-IriSP.Widgets.Tooltip.prototype.template =
- '<div class="Ldt-Tooltip"><div class="Ldt-Tooltip-Main"><div class="Ldt-Tooltip-Corner-NW"></div>'
- + '<div class="Ldt-Tooltip-Border-Top"></div><div class="Ldt-Tooltip-Corner-NE"></div>'
- + '<div class="Ldt-Tooltip-Border-Left"></div><div class="Ldt-Tooltip-Border-Right"></div>'
- + '<div class="Ldt-Tooltip-Corner-SW"></div><div class="Ldt-Tooltip-Border-SW"></div>'
- + '<div class="Ldt-Tooltip-Tip"></div><div class="Ldt-Tooltip-Border-SE"></div>'
- + '<div class="Ldt-Tooltip-Corner-SE"></div><div class="Ldt-Tooltip-Inner">'
- + '<div class="Ldt-Tooltip-Color"></div><p class="Ldt-Tooltip-Text"></p></div></div></div>';
+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>';
IriSP.Widgets.Tooltip.prototype.draw = function() {
_this = this;
- this.renderTemplate();
+ this.$.html(this.template);
this.$.parent().css({
"position" : "relative"
});
- this.$tooltip = this.$.find(".Ldt-Tooltip");
- this.$tip = this.$.find(".Ldt-Tooltip-Tip");
- this.$sw = this.$.find(".Ldt-Tooltip-Border-SW");
- this.$se = this.$.find(".Ldt-Tooltip-Border-SE");
- this.__halfWidth = Math.floor(( this.$.find(".Ldt-Tooltip-Main").width() || 192)/2);
- this.__borderWidth = this.$.find(".Ldt-Tooltip-Border-Left").width();
- this.__tipDelta = this.__halfWidth - Math.floor(this.$tip.width()/2);
- this.__maxShift = this.__tipDelta - this.__borderWidth;
+ this.$tip = this.$.find(".Ldt-Tooltip");
this.$.mouseover(function() {
- _this.$tooltip.hide();
+ _this.$tip.hide();
});
this.hide();
};
@@ -41,54 +23,20 @@
IriSP.Widgets.Tooltip.prototype.show = function(x, y, text, color) {
if (typeof color !== "undefined") {
- // one color or array of colors
- if (typeof color === "string") {
- this.$.find(".Ldt-Tooltip-Color").html("");
- this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color);
- this.$.find(".Ldt-Tooltip-Color").show().css("height", "");
- }
- else{
- var d = this.$.find(".Ldt-Tooltip-Color");
- d.html("");
- d.show();
- for(var i=0; i<color.length; i++){
- d.append('<div style="float: left; height: 10px; width: 10px; background-color: ' + color[i] + '">')
- }
- this.$.find(".Ldt-Tooltip-Color").css("height", (color.length * 10) + "px");
- }
+ this.$.find(".Ldt-Tooltip-Color").show().css("background-color", color);
} else {
this.$.find(".Ldt-Tooltip-Color").hide();
}
this.$.find(".Ldt-Tooltip-Text").html(text);
- this.$tooltip.show();
-
- var shift = 0;
-
- if (typeof this.min_x !== "undefined" && (x - this.__halfWidth < this.min_x)) {
- shift = Math.max(x - this.__halfWidth - this.min_x, - this.__maxShift);
- }
-
- if (typeof this.max_x !== "undefined" && (+x + this.__halfWidth > this.max_x)) {
- shift = Math.min(+ x + this.__halfWidth - this.max_x, this.__maxShift);
- }
-
- this.$tooltip.css({
- "left" : (x - shift) + "px",
- "top" : y + "px"
- });
+ this.$tip.show();
this.$tip.css({
- "left": (this.__tipDelta + shift) + "px"
- });
- this.$sw.css({
- "width": (this.__tipDelta + shift - this.__borderWidth) + "px"
- });
- this.$se.css({
- "width": (this.__tipDelta - shift - this.__borderWidth) + "px"
+ "left" : Math.floor(x - this.$tip.outerWidth() / 2) + "px",
+ "top" : Math.floor(y - this.$tip.outerHeight()) + "px"
});
};
IriSP.Widgets.Tooltip.prototype.hide = function() {
- this.$tooltip.hide();
+ this.$tip.hide();
};