segmentsWidget now uses the TooltipWidget instead of the jQuerytools tooltip. popcorn-port
authorhamidouk
Fri, 25 Nov 2011 15:14:19 +0100
branchpopcorn-port
changeset 336 8da13562cfea
parent 335 54c0686efd85
child 337 ee1d1e4fcf45
segmentsWidget now uses the TooltipWidget instead of the jQuerytools tooltip.
src/js/widgets/segmentsWidget.js
src/js/widgets/tooltipWidget.js
test/integration/polemic.htm
--- a/src/js/widgets/segmentsWidget.js	Fri Nov 25 14:11:49 2011 +0100
+++ b/src/js/widgets/segmentsWidget.js	Fri Nov 25 15:14:19 2011 +0100
@@ -82,20 +82,32 @@
         "seekPlace" : Math.round(begin/1000)});
 
 
-    var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template,
-          {"title" : divTitle, "begin" : begin, "end" : end,
-          "description": annotation.content.description});
-
     this.selector.append(annotationTemplate);
 
-    IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
+//    IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
 
     IriSP.jQuery("#" + id).fadeTo(0, 0.3);
 
-    IriSP.jQuery("#" + id).mouseover(function() {
-      IriSP.jQuery(this).animate({opacity: 0.6}, 5);
-    }).mouseout(function(){
+    IriSP.jQuery("#" + id).mouseover(
+    /* we wrap the handler in another function because js's scoping
+       rules are function-based - otherwise, the internal vars like
+       divTitle are preserved but they are looked-up from the draw
+       method scope, so after that the loop is run, so they're not
+       preserved */
+    (function(divTitle) { 
+     return function(event) {
+          IriSP.jQuery(this).animate({opacity: 0.6}, 5);
+          var offset = IriSP.jQuery(this).offset();
+          var correction = IriSP.jQuery(this).outerWidth() / 2;
+
+          var offset_x = offset.left + correction - 106;
+          if (offset_x < 0)
+            offset_x = 0;
+
+          self.TooltipWidget.show(divTitle, color, offset_x, event.pageY - 160);
+    } })(divTitle)).mouseout(function(){
       IriSP.jQuery(this).animate({opacity: 0.3}, 5);
+      self.TooltipWidget.hide();
     });
 
     IriSP.jQuery("#" + id).click(function(_this, annotation) {
--- a/src/js/widgets/tooltipWidget.js	Fri Nov 25 14:11:49 2011 +0100
+++ b/src/js/widgets/tooltipWidget.js	Fri Nov 25 15:14:19 2011 +0100
@@ -14,6 +14,10 @@
 
 };
 
+IriSP.TooltipWidget.prototype.clear = function() {
+	this.selector.find(".tiptext").text("");
+};
+
 IriSP.TooltipWidget.prototype.show = function(text, color, x, y) {
   if (this.selector.find(".tiptext").text() == text)
     return;
@@ -24,5 +28,6 @@
 };
 
 IriSP.TooltipWidget.prototype.hide = function() {
+  this.clear();
   this.selector.find(".tip").css("left", -10000).css("top", -100000);
-};
\ No newline at end of file
+};
--- a/test/integration/polemic.htm	Fri Nov 25 14:11:49 2011 +0100
+++ b/test/integration/polemic.htm	Fri Nov 25 15:14:19 2011 +0100
@@ -70,7 +70,15 @@
              metadata:{
               format:'cinelab',
               src:'polemic_fr.json',
-              type:'json'}
+              type:'json'},
+             requires: [{
+              type: "TooltipWidget",
+              width: 180,
+              heigh: 160,
+              metadata : {
+                type:'empty'
+              }
+             }],
             },
             {type: "ArrowWidget",
              metadata:{