Use new start and stop plugin hooks (#411)

Author: stockiNail

samples/zoom.html

@@ -22,6 +22,9 @@
 			<canvas id="canvas"></canvas>
 		</div>
 	</div>
+	<button onclick="window.myScatter.destroy()">Destroy</button>
+	<button onclick="window.myScatter.destroy(); window.onload(); setButtonText();">Reload</button>
+	<button id="enablePlugin" onclick="managePlugin(); setButtonText()">Enable</button>
 	<script>
 		var randomScalingFactor = function() {
 			return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
@@ -132,16 +135,7 @@
 						}
 					},
 					plugins: {
-						zoom: {
-							pan: {
-								enabled: true,
-								mode: 'xy'
-							},
-							zoom: {
-								enabled: true,
-								mode: 'xy'
-							}
-						}
+						zoom: false
 					},
 					onClick: function(e) {
 						// eslint-disable-next-line no-alert
@@ -150,9 +144,29 @@
 				}
 			});
 		};
+
+		window.managePlugin = function() {
+			if (typeof window.myScatter.options.plugins.zoom === 'boolean') {
+				window.myScatter.options.plugins.zoom = {
+					pan: {
+						enabled: true,
+						mode: 'xy'
+					},
+					zoom: {
+						enabled: true,
+						mode: 'xy'
+					}
+				};
+			} else {
+				window.myScatter.options.plugins.zoom = false;
+			}
+			window.myScatter.update();
+		};
+
+		window.setButtonText = function() {
+			document.getElementById('enablePlugin').innerText = window.myScatter.options.plugins.zoom ? 'Disable' : 'Enable';
+		};
 	</script>
-	<button onclick="window.myScatter.destroy()">Destroy</button>
-	<button onclick="window.myScatter.destroy(); window.onload()">Reload</button>
 </body>
 
 </html>

src/plugin.js

@@ -363,32 +363,7 @@ var zoomPlugin = {
 		}
 	},
 
-	afterInit: function(chartInstance) {
-
-		chartInstance.resetZoom = function() {
-			storeOriginalOptions(chartInstance);
-			var originalOptions = chartInstance.$zoom._originalOptions;
-			helpers.each(chartInstance.scales, function(scale) {
-
-				var options = scale.options;
-				if (originalOptions[scale.id]) {
-					options.min = originalOptions[scale.id].min;
-					options.max = originalOptions[scale.id].max;
-				} else {
-					delete options.min;
-					delete options.max;
-				}
-			});
-			chartInstance.update();
-		};
-
-	},
-
-	beforeUpdate: function(chart, args, options) {
-		resolveOptions(chart, options);
-	},
-
-	beforeInit: function(chartInstance, args, pluginOptions) {
+	start: function(chartInstance, args, pluginOptions) {
 		chartInstance.$zoom = {
 			_originalOptions: {}
 		};
@@ -601,6 +576,27 @@ var zoomPlugin = {
 
 			chartInstance._mc = mc;
 		}
+
+		chartInstance.resetZoom = function() {
+			storeOriginalOptions(chartInstance);
+			var originalOptions = chartInstance.$zoom._originalOptions;
+			helpers.each(chartInstance.scales, function(scale) {
+
+				var scaleOptions = scale.options;
+				if (originalOptions[scale.id]) {
+					scaleOptions.min = originalOptions[scale.id].min;
+					scaleOptions.max = originalOptions[scale.id].max;
+				} else {
+					delete scaleOptions.min;
+					delete scaleOptions.max;
+				}
+			});
+			chartInstance.update();
+		};
+	},
+
+	beforeUpdate: function(chart, args, options) {
+		resolveOptions(chart, options);
 	},
 
 	beforeDatasetsDraw: function(chartInstance) {
@@ -647,7 +643,7 @@ var zoomPlugin = {
 		}
 	},
 
-	destroy: function(chartInstance) {
+	stop: function(chartInstance) {
 		if (!chartInstance.$zoom) {
 			return;
 		}