Merge pull request #106 from Rob-ot/master

Add .off method that unbinds all event handlers

signature_pad.js

@@ -14,23 +14,23 @@
   }
 }(this, function () {
 
-/*!
- * Signature Pad v1.3.6
- * https://github.com/szimek/signature_pad
- *
- * Copyright 2015 Szymon Nowak
- * Released under the MIT license
- *
- * The main idea and some parts of the code (e.g. drawing variable width Bézier curve) are taken from:
- * http://corner.squareup.com/2012/07/smoother-signatures.html
- *
- * Implementation of interpolation using cubic Bézier curves is taken from:
- * http://benknowscode.wordpress.com/2012/09/14/path-interpolation-using-cubic-bezier-and-control-point-estimation-in-javascript
- *
- * Algorithm for approximated length of a Bézier curve is taken from:
- * http://www.lemoda.net/maths/bezier-length/index.html
- *
- */
+/*!
+ * Signature Pad v1.3.6
+ * https://github.com/szimek/signature_pad
+ *
+ * Copyright 2015 Szymon Nowak
+ * Released under the MIT license
+ *
+ * The main idea and some parts of the code (e.g. drawing variable width Bézier curve) are taken from:
+ * http://corner.squareup.com/2012/07/smoother-signatures.html
+ *
+ * Implementation of interpolation using cubic Bézier curves is taken from:
+ * http://benknowscode.wordpress.com/2012/09/14/path-interpolation-using-cubic-bezier-and-control-point-estimation-in-javascript
+ *
+ * Algorithm for approximated length of a Bézier curve is taken from:
+ * http://www.lemoda.net/maths/bezier-length/index.html
+ *
+ */
 var SignaturePad = (function (document) {
     "use strict";
 
@@ -53,6 +53,48 @@ var SignaturePad = (function (document) {
         this._ctx = canvas.getContext("2d");
         this.clear();
 
+        // we need add these inline so they are available to unbind while still having
+        //  access to 'self' we could use _.bind but it's not worth adding a dependency
+        this._handleMouseDown = function (event) {
+            if (event.which === 1) {
+                self._mouseButtonDown = true;
+                self._strokeBegin(event);
+            }
+        };
+
+        this._handleMouseMove = function (event) {
+            if (self._mouseButtonDown) {
+                self._strokeUpdate(event);
+            }
+        };
+
+        this._handleMouseUp = function (event) {
+            if (event.which === 1 && self._mouseButtonDown) {
+                self._mouseButtonDown = false;
+                self._strokeEnd(event);
+            }
+        };
+
+        this._handleTouchStart = function (event) {
+            var touch = event.changedTouches[0];
+            self._strokeBegin(touch);
+        };
+
+        this._handleTouchMove = function (event) {
+            // Prevent scrolling.
+            event.preventDefault();
+
+            var touch = event.changedTouches[0];
+            self._strokeUpdate(touch);
+        };
+
+        this._handleTouchEnd = function (event) {
+            var wasCanvasTouched = event.target === self._canvas;
+            if (wasCanvasTouched) {
+                self._strokeEnd(event);
+            }
+        };
+
         this._handleMouseEvents();
         this._handleTouchEvents();
     };
@@ -126,25 +168,9 @@ var SignaturePad = (function (document) {
         var self = this;
         this._mouseButtonDown = false;
 
-        this._canvas.addEventListener("mousedown", function (event) {
-            if (event.which === 1) {
-                self._mouseButtonDown = true;
-                self._strokeBegin(event);
-            }
-        });
-
-        this._canvas.addEventListener("mousemove", function (event) {
-            if (self._mouseButtonDown) {
-                self._strokeUpdate(event);
-            }
-        });
-
-        document.addEventListener("mouseup", function (event) {
-            if (event.which === 1 && self._mouseButtonDown) {
-                self._mouseButtonDown = false;
-                self._strokeEnd(event);
-            }
-        });
+        this._canvas.addEventListener("mousedown", this._handleMouseDown);
+        this._canvas.addEventListener("mousemove", this._handleMouseMove);
+        document.addEventListener("mouseup", this._handleMouseUp);
     };
 
     SignaturePad.prototype._handleTouchEvents = function () {
@@ -153,25 +179,19 @@ var SignaturePad = (function (document) {
         // Pass touch events to canvas element on mobile IE.
         this._canvas.style.msTouchAction = 'none';
 
-        this._canvas.addEventListener("touchstart", function (event) {
-            var touch = event.changedTouches[0];
-            self._strokeBegin(touch);
-        });
-
-        this._canvas.addEventListener("touchmove", function (event) {
-            // Prevent scrolling.
-            event.preventDefault();
+        this._canvas.addEventListener("touchstart", this._handleTouchStart);
+        this._canvas.addEventListener("touchmove", this._handleTouchMove);
+        document.addEventListener("touchend", this._handleTouchEnd);
+    };
 
-            var touch = event.changedTouches[0];
-            self._strokeUpdate(touch);
-        });
+    SignaturePad.prototype.off = function () {
+        this._canvas.removeEventListener("mousedown", this._handleMouseDown);
+        this._canvas.removeEventListener("mousemove", this._handleMouseMove);
+        document.removeEventListener("mouseup", this._handleMouseUp);
 
-        document.addEventListener("touchend", function (event) {
-            var wasCanvasTouched = event.target === self._canvas;
-            if (wasCanvasTouched) {
-                self._strokeEnd(event);
-            }
-        });
+        this._canvas.removeEventListener("touchstart", this._handleTouchStart);
+        this._canvas.removeEventListener("touchmove", this._handleTouchMove);
+        document.removeEventListener("touchend", this._handleTouchEnd);
     };
 
     SignaturePad.prototype.isEmpty = function () {