Merge pull request #39 from maplemuse/unbind-events

Unbind events
krzysu · Sep 30, 2013 · 33610a0 · 33610a0
2 parents b36576d + 497dc8b
commit 33610a0
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 96 deletions.
diff --git a/examples/many_series.html b/examples/many_series.html
@@ -24,39 +24,53 @@
     <h1>flot.tooltip plugin example page</h1>
 
     <div id="placeholder" style="width: 825px; height: 150px;"></div>
-
+	<a href="javascript:void(0);" class="button" id="replot">Plot</a>
 
 	<script type="text/javascript">
-	$(function () {
-		var sin = [], cos = [];
-		for (var i = 0; i < 12; i += 0.2) {
-			sin.push([i, Math.sin(i)]);
-			cos.push([i, Math.cos(i)]);
-		}
-
-		var options = {
-			series: {
-				lines: { show: true },
-				points: { show: true }
-			},
-			grid: {
-				hoverable: true //IMPORTANT! this is needed for tooltip to work
-			},
-			yaxis: { min: -1.2, max: 1.2 },
-			tooltip: true,
-			tooltipOpts: {
-				content: "'%s' of %x.1 is %y.4",
-				shifts: {
-					x: -60,
-					y: 25
+	$(document).ready(function(){
+		console.log("document ready");
+		var offset = 0;
+		$('#replot').bind('click', function(){
+			offset = 0;
+			var intervalId = setInterval(function(){
+				plot();
+				offset = offset + 0.1;
+				if (offset > 10){
+					clearInterval(intervalId);
 				}
+			});
+		});
+		plot();
+		function plot(){
+			var sin = [], cos = [];
+			for (var i = 0; i < 12; i += 0.2) {
+				sin.push([i, Math.sin(i + offset)]);
+				cos.push([i, Math.cos(i + offset)]);
 			}
-		};
 
-		var plotObj = $.plot( $("#placeholder"),
-			[ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ],
-			options );
-
+			var options = {
+				series: {
+					lines: { show: true },
+					points: { show: true }
+				},
+				grid: {
+					hoverable: true //IMPORTANT! this is needed for tooltip to work
+				},
+				yaxis: { min: -1.2, max: 1.2 },
+				tooltip: true,
+				tooltipOpts: {
+					content: "'%s' of %x.1 is %y.4",
+					shifts: {
+						x: -60,
+						y: 25
+					}
+				}
+			};
+
+			var plotObj = $.plot( $("#placeholder"),
+				[ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ],
+				options );
+		}
 	});
 	</script>
 

diff --git a/js/jquery.flot.tooltip.js b/js/jquery.flot.tooltip.js
@@ -2,11 +2,11 @@
  * jquery.flot.tooltip
  * 
  * description: easy-to-use tooltips for Flot charts
- * version: 0.6.1
+ * version: 0.6.2
  * author: Krzysztof Urbas @krzysu [myviews.pl]
  * website: https://github.com/krzysu/flot.tooltip
  * 
- * build on 2013-07-10
+ * build on 2013-08-19
  * released under MIT License, 2012
 */ 
 (function ($) {
@@ -64,38 +64,46 @@
             var $tip = that.getDomElement();
 
             // bind event
-            $( plot.getPlaceholder() ).bind("plothover", function (event, pos, item) {
-                if (item) {
-                    var tipText;
-
-                    // convert tooltip content template to real tipText
-                    tipText = that.stringFormat(that.tooltipOptions.content, item);
-
-                    $tip.html( tipText );
-                    that.updateTooltipPosition({ x: pos.pageX, y: pos.pageY });
-                    $tip.css({
-                            left: that.tipPosition.x + that.tooltipOptions.shifts.x,
-                            top: that.tipPosition.y + that.tooltipOptions.shifts.y
-                        })
-                        .show();
-
-                    // run callback
-                    if(typeof that.tooltipOptions.onHover === 'function') {
-                        that.tooltipOptions.onHover(item, $tip);
-                    }
-                }
-                else {
-                    $tip.hide().html('');
-                }
-            });
-
-            eventHolder.mousemove( function(e) {
-                var pos = {};
-                pos.x = e.pageX;
-                pos.y = e.pageY;
-                that.updateTooltipPosition(pos);
-            });
+            $( plot.getPlaceholder() ).bind("plothover", plothover);
+
+			$(eventHolder).bind('mousemove', mouseMove);
+
         });
+		plot.hooks.shutdown.push(function (plot, eventHolder){
+			$(plot.getPlaceholder()).unbind("plothover", plothover);
+			$(eventHolder).unbind("mousemove", mouseMove);
+		});
+        function mouseMove(e){ 
+            var pos = {};
+            pos.x = e.pageX;
+            pos.y = e.pageY;
+            that.updateTooltipPosition(pos);
+        }
+		function plothover(event, pos, item) {
+			var $tip = that.getDomElement();
+            if (item) {
+                var tipText;
+
+                // convert tooltip content template to real tipText
+                tipText = that.stringFormat(that.tooltipOptions.content, item);
+
+                $tip.html( tipText );
+                that.updateTooltipPosition({ x: pos.pageX, y: pos.pageY });
+                $tip.css({
+                        left: that.tipPosition.x + that.tooltipOptions.shifts.x,
+                        top: that.tipPosition.y + that.tooltipOptions.shifts.y
+                    })
+                    .show();
+
+                // run callback
+                if(typeof that.tooltipOptions.onHover === 'function') {
+                    that.tooltipOptions.onHover(item, $tip);
+                }
+            }
+            else {
+                $tip.hide().html('');
+            }
+        }
     };
 
     /**

diff --git a/js/jquery.flot.tooltip.min.js b/js/jquery.flot.tooltip.min.js
diff --git a/js/jquery.flot.tooltip.source.js b/js/jquery.flot.tooltip.source.js
@@ -53,38 +53,46 @@
             var $tip = that.getDomElement();
 
             // bind event
-            $( plot.getPlaceholder() ).bind("plothover", function (event, pos, item) {
-                if (item) {
-                    var tipText;
-
-                    // convert tooltip content template to real tipText
-                    tipText = that.stringFormat(that.tooltipOptions.content, item);
-
-                    $tip.html( tipText );
-                    that.updateTooltipPosition({ x: pos.pageX, y: pos.pageY });
-                    $tip.css({
-                            left: that.tipPosition.x + that.tooltipOptions.shifts.x,
-                            top: that.tipPosition.y + that.tooltipOptions.shifts.y
-                        })
-                        .show();
-
-                    // run callback
-                    if(typeof that.tooltipOptions.onHover === 'function') {
-                        that.tooltipOptions.onHover(item, $tip);
-                    }
-                }
-                else {
-                    $tip.hide().html('');
-                }
-            });
-
-            eventHolder.mousemove( function(e) {
-                var pos = {};
-                pos.x = e.pageX;
-                pos.y = e.pageY;
-                that.updateTooltipPosition(pos);
-            });
+            $( plot.getPlaceholder() ).bind("plothover", plothover);
+
+			$(eventHolder).bind('mousemove', mouseMove);
+
         });
+		plot.hooks.shutdown.push(function (plot, eventHolder){
+			$(plot.getPlaceholder()).unbind("plothover", plothover);
+			$(eventHolder).unbind("mousemove", mouseMove);
+		});
+        function mouseMove(e){ 
+            var pos = {};
+            pos.x = e.pageX;
+            pos.y = e.pageY;
+            that.updateTooltipPosition(pos);
+        }
+		function plothover(event, pos, item) {
+			var $tip = that.getDomElement();
+            if (item) {
+                var tipText;
+
+                // convert tooltip content template to real tipText
+                tipText = that.stringFormat(that.tooltipOptions.content, item);
+
+                $tip.html( tipText );
+                that.updateTooltipPosition({ x: pos.pageX, y: pos.pageY });
+                $tip.css({
+                        left: that.tipPosition.x + that.tooltipOptions.shifts.x,
+                        top: that.tipPosition.y + that.tooltipOptions.shifts.y
+                    })
+                    .show();
+
+                // run callback
+                if(typeof that.tooltipOptions.onHover === 'function') {
+                    that.tooltipOptions.onHover(item, $tip);
+                }
+            }
+            else {
+                $tip.hide().html('');
+            }
+        }
     };
 
     /**

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery.flot.tooltip",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "easy-to-use tooltips for Flot charts",
   "website": "https://github.com/krzysu/flot.tooltip",
   "directories": {