Fixup f046289

Fixes Javascript error if there are multiple charts on the same page
chartjs · Nov 21, 2016 · faf26eb · faf26eb
1 parent 0fc2608
commit faf26eb
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 57 deletions.
diff --git a/chartjs-plugin-zoom.js b/chartjs-plugin-zoom.js
@@ -1,7 +1,7 @@
 /*!
  * chartjs-plugin-zoom
  * http://chartjs.org/
- * Version: 0.4.1
+ * Version: 0.4.3
  *
  * Copyright 2016 Evert Timberg
  * Released under the MIT license
@@ -300,7 +300,7 @@ var zoomPlugin = {
 	beforeInit: function(chartInstance) {
 		chartInstance.zoom = {};
 
-		this.node = chartInstance.chart.ctx.canvas;
+		var node = chartInstance.zoom.node = chartInstance.chart.ctx.canvas;
 
 		var options = chartInstance.options;
 		var panThreshold = helpers.getValueOrDefault(options.pan ? options.pan.threshold : undefined, zoomNS.defaults.pan.threshold);
@@ -312,7 +312,7 @@ var zoomPlugin = {
 			chartInstance.zoom._mouseDownHandler = function(event) {
 				chartInstance.zoom._dragZoomStart = event;
 			};
-			this.node.addEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
+			node.addEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
 
 			chartInstance.zoom._mouseMoveHandler = function(event){
 				if (chartInstance.zoom._dragZoomStart) {
@@ -322,7 +322,7 @@ var zoomPlugin = {
 
 				chartInstance.update(0);
 			};
-			this.node.addEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
+			node.addEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
 
 			chartInstance.zoom._mouseUpHandler = function(event){
 				if (chartInstance.zoom._dragZoomStart) {
@@ -347,7 +347,7 @@ var zoomPlugin = {
 					chartInstance.zoom._dragZoomEnd = null;
 				}
 			};
-			this.node.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
+			node.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
 		} else {
 			chartInstance.zoom._wheelHandler = function(event) {
 				var rect = event.target.getBoundingClientRect();
@@ -368,11 +368,11 @@ var zoomPlugin = {
 				event.preventDefault();
 			};
 
-			this.node.addEventListener('wheel', chartInstance.zoom._wheelHandler);
+			node.addEventListener('wheel', chartInstance.zoom._wheelHandler);
 		}
 
 		if (Hammer) {
-			var mc = new Hammer.Manager(this.node);
+			var mc = new Hammer.Manager(node);
 			mc.add(new Hammer.Pinch());
 			mc.add(new Hammer.Pan({
 				threshold: panThreshold
@@ -454,28 +454,29 @@ var zoomPlugin = {
 	},
 
 	destroy: function(chartInstance) {
+		if (chartInstance.zoom) {
+			var options = chartInstance.options;
+			var node = chartInstance.zoom.node;
+
+			if (options.zoom && options.zoom.drag) {
+				node.removeEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
+				node.removeEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
+				node.removeEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
+			} else {
+				node.removeEventListener('wheel', chartInstance.zoom._wheelHandler);
+			}
 
-		var options = chartInstance.options;
+			delete chartInstance.zoom;
 
-		if (options.zoom && options.zoom.drag) {
-			this.node.removeEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
-			this.node.removeEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
-			this.node.removeEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
-		} else {
-			this.node.removeEventListener('wheel', chartInstance.zoom._wheelHandler);
-		}
-
-		this.node = null;
-		this.zoom = null;
-
-		var mc = chartInstance._mc;
-		if (mc) {
-			mc.remove('pinchstart');
-			mc.remove('pinch');
-			mc.remove('pinchend');
-			mc.remove('panstart');
-			mc.remove('pan');
-			mc.remove('panend');
+			var mc = chartInstance._mc;
+			if (mc) {
+				mc.remove('pinchstart');
+				mc.remove('pinch');
+				mc.remove('pinchend');
+				mc.remove('panstart');
+				mc.remove('pan');
+				mc.remove('panend');
+			}
 		}
 	}
 };

diff --git a/chartjs-plugin-zoom.min.js b/chartjs-plugin-zoom.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "chartjs-plugin-zoom",
   "description": "Simple HTML5 charts using the canvas element.",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "license": "MIT",
   "main": "src/chart.zoom.js",
   "repository": {

diff --git a/samples/zoom.html b/samples/zoom.html
@@ -144,7 +144,7 @@
 		};
 	</script>
 	<button onclick="window.myScatter.destroy()">Destroy</button>
-	<button onclick="window.onload()">Reload</button>
+	<button onclick="window.myScatter.destroy(); window.onload()">Reload</button>
 </body>
 
 </html>