Add dValue option to zoom(). Trigger zoom and pan events on resetZoom…

…/resetPan.

README.md

@@ -6,8 +6,8 @@ And although IE<=8 is not supported, this plugin is future-proof.
 
 jquery.panzoom.min.js (8.7kb/3.3kb gzip), included in this repo, is compressed with [uglifyjs](https://github.com/mishoo/UglifyJS).
 
-[Download version 1.3.8](https://raw.github.com/timmywil/jquery.panzoom/v1.3.8/dist/jquery.panzoom.min.js)  
-[Development version](https://raw.github.com/timmywil/jquery.panzoom/v1.3.8/dist/jquery.panzoom.js)
+[Download version 1.4.0](https://raw.github.com/timmywil/jquery.panzoom/v1.4.0/dist/jquery.panzoom.min.js)  
+[Development version](https://raw.github.com/timmywil/jquery.panzoom/v1.4.0/dist/jquery.panzoom.js)
 
 ## Mobile support
 
@@ -148,40 +148,54 @@ $elem.panzoom("option", {
 
 Any option can be changed. See the defaults above for a list.
 
-### `reset( [animate] )`
+### `reset( [options] )`
 
 __Arguments__
 
-  1. `animate` _{Boolean}_: Whether to animate the reset (default: true)
+  1. `options` _{Object|Boolean}_: If a boolean is passed, animate the reset (default: true). If an options object is passed, simply pass that along to setMatrix.
+  2. `options.silent` _{Boolean}_: Silence the reset event (as well as the change event as the same options are passed to setMatrix)
 
 ```js
 $elem.panzoom("reset");
+$elem.panzoom("reset", false);
+$elem.panzoom("reset", {
+  animate: false,
+  contain: false
+});
 ```
 
 Reset the transform matrix to its original value. All panning and zooming is reset.
 
-### `resetZoom( [animate] )`
+### `resetZoom( [options] )`
 
 __Arguments__
 
-  1. `animate` _{Boolean}_: Whether to animate the reset (default: true)
+  1. `options` _{Object|Boolean}_: If a boolean is passed, animate the reset (default: true). If an options object is passed, simply pass that along to zoom.
 
 ```js
 $elem.panzoom("resetZoom");
 $elem.panzoom("resetZoom", false);
+$elem.panzoom("resetZoom", {
+  animate: false,
+  silent: true
+});
 ```
 
-Reset the scale to its original value.
+Reset the scale to its original value (resets both scale values in the matrix to their original values).
 
-### `resetPan( [animate] )`
+### `resetPan( [options] )`
 
 __Arguments__
 
-  1. `animate` _{Boolean}_: Whether to animate the reset (default: true)
+  1. `options` _{Object|Boolean}_: If a boolean is passed, animate the reset (default: true). If an options object is passed, simply pass that along to pan.
 
 ```js
 $elem.panzoom("resetPan");
 $elem.panzoom("resetPan", false);
+$elem.panzoom("resetPan", {
+  animate: false,
+  silent: true
+});
 ```
 
 Reset the pan to its original value.
@@ -310,7 +324,7 @@ __Arguments__
 $elem.panzoom("setMatrix", [ 1, 0, 0, -1, 0, 0 ]);
 ```
 
-Sets the transform matrix of the panzoom element. It accepts the matrix as an array. The return value is `undefined`.
+Sets the transform matrix of the panzoom element. It accepts the matrix as an array. Returns the newly-set matrix as an _Array_.
 
 ### `transition( [off] )`
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.panzoom",
-  "version": "1.3.8",
+  "version": "1.4.0",
   "main": "dist/jquery.panzoom.js",
   "ignore": [
     "**/.*",

dist/jquery.panzoom.js

@@ -1,6 +1,6 @@
 /**
- * @license jquery.panzoom.js v1.3.8
- * Updated: Thu Jul 18 2013
+ * @license jquery.panzoom.js v1.4.0
+ * Updated: Thu Jul 25 2013
  * Add pan and zoom functionality to any element
  * Copyright (c) 2013 timmy willison
  * Released under the MIT license
@@ -56,6 +56,21 @@
 		floating + '\\)$'
 	);
 
+	/**
+	 * Creates the options object for reset functions
+	 * @param {Boolean|Object} opts See reset methods
+	 * @returns {Object} Returns the newly-created options object
+	 */
+	function createResetOptions( opts ) {
+		var options = { range: true, animate: true };
+		if ( typeof opts === 'boolean' ) {
+			options.animate = opts;
+		} else {
+			$.extend( options, opts );
+		}
+		return options;
+	}
+
 	/**
 	 * Create a Panzoom object for a given element
 	 * @constructor
@@ -216,32 +231,36 @@
 
 		/**
 		 * Return the element to it's original transform matrix
-		 * @param {Boolean} [animate] Whether to animate the reset (default: true)
+		 * @param {Boolean} [options] If a boolean is passed, animate the reset (default: true). If an options object is passed, simply pass that along to setMatrix.
+		 * @param {Boolean} [options.silent] Silence the reset event
 		 */
-		reset: function( animate ) {
+		reset: function( options ) {
+			options = createResetOptions( options );
 			// Reset the transform to its original value
-			var matrix = this.setMatrix( this._origTransform, {
-				animate: typeof animate !== 'boolean' || animate,
-				// Set zoomRange value
-				range: true
-			});
-			this._trigger( 'reset', matrix );
+			var matrix = this.setMatrix( this._origTransform, options );
+			if ( !options.silent ) {
+				this._trigger( 'reset', matrix );
+			}
 		},
 
 		/**
 		 * Only resets zoom level
-		 * @param {Boolean} [animate] Whether to animate the reset (default: true)
+		 * @param {Boolean|Object} [options] Whether to animate the reset (default: true) or an object of options to pass to zoom()
 		 */
-		resetZoom: function( animate ) {
-			this._resetParts( [ 0, 3 ], animate );
+		resetZoom: function( options ) {
+			options = createResetOptions( options );
+			var origMatrix = this.getMatrix( this._origTransform );
+			options.dValue = origMatrix[ 3 ];
+			this.zoom( origMatrix[0], options );
 		},
 
 		/**
 		 * Only reset panning
-		 * @param {Boolean} [animate] Whether to animate the reset (default: true)
+		 * @param {Boolean|Object} [options] Whether to animate the reset (default: true) or an object of options to pass to pan()
 		 */
-		resetPan: function( animate ) {
-			this._resetParts( [ 4, 5 ], animate );
+		resetPan: function( options ) {
+			var origMatrix = this.getMatrix( this._origTransform );
+			this.pan( origMatrix[4], origMatrix[5], createResetOptions(options) );
 		},
 
 		/**
@@ -288,7 +307,7 @@
 		 * @param {Boolean} [options.contain] Override the global contain option
 		 * @param {Boolean} [options.range] If true, $zoomRange's value will be updated.
 		 * @param {Boolean} [options.silent] If true, the change event will not be triggered
-		 * @returns {Array} Returns the matrix that was set
+		 * @returns {Array} Returns the newly-set matrix
 		 */
 		setMatrix: function( matrix, options ) {
 			if ( this.disabled ) { return; }
@@ -328,6 +347,7 @@
 			if ( !options.silent ) {
 				this._trigger( 'change', matrix );
 			}
+
 			return matrix;
 		},
 
@@ -385,6 +405,10 @@
 		 * @param {Object} [opts.middle] Specify a middle point towards which to gravitate when zooming
 		 * @param {Boolean} [opts.animate] Whether to animate the zoom (defaults to true if scale is not a number, false otherwise)
 		 * @param {Boolean} [opts.silent] Silence the zoom event
+		 * @param {Number} [opts.dValue] Think of a transform matrix as four values a, b, c, d (where a/d are the horizontal/vertical scale values and b/c are the skew values) (5 and 6 of matrix array are the tx/ty transform values).
+		 *  Normally, the scale is set to both the a and d values of the matrix.
+		 *  This option allows you to specify a different d value for the zoom. For instance, to flip vertically, you could set -1 as the dValue.
+		 * @returns {Array} Returns the newly-set matrix
 		 */
 		zoom: function( scale, opts ) {
 			var animate = false;
@@ -420,7 +444,8 @@
 			}
 
 			// Set the scale
-			matrix[0] = matrix[3] = scale;
+			matrix[0] = scale;
+			matrix[3] = typeof opts.dValue === 'number' ? opts.dValue : scale;
 			this.setMatrix( matrix, {
 				animate: typeof opts.animate === 'boolean' ? opts.animate : animate,
 				// Set the zoomRange value
@@ -705,23 +730,6 @@
 			}
 		},
 
-		/**
-		 * Reset certain parts of the transform
-		 */
-		_resetParts: function( indices, animate ) {
-			var origMatrix = this.getMatrix( this._origTransform );
-			var cur = this.getMatrix();
-			var i = indices.length;
-			while( i-- ) {
-				cur[ indices[i] ] = origMatrix[ indices[i] ];
-			}
-			this.setMatrix(cur, {
-				animate: typeof animate !== 'boolean' || animate,
-				// Set zoomRange value
-				range: true
-			});
-		},
-
 		/**
 		 * Calculates the distance between two touch points
 		 * Remember pythagorean?

jquery.panzoom.js

@@ -56,6 +56,21 @@
 		floating + '\\)$'
 	);
 
+	/**
+	 * Creates the options object for reset functions
+	 * @param {Boolean|Object} opts See reset methods
+	 * @returns {Object} Returns the newly-created options object
+	 */
+	function createResetOptions( opts ) {
+		var options = { range: true, animate: true };
+		if ( typeof opts === 'boolean' ) {
+			options.animate = opts;
+		} else {
+			$.extend( options, opts );
+		}
+		return options;
+	}
+
 	/**
 	 * Create a Panzoom object for a given element
 	 * @constructor
@@ -216,32 +231,36 @@
 
 		/**
 		 * Return the element to it's original transform matrix
-		 * @param {Boolean} [animate] Whether to animate the reset (default: true)
+		 * @param {Boolean} [options] If a boolean is passed, animate the reset (default: true). If an options object is passed, simply pass that along to setMatrix.
+		 * @param {Boolean} [options.silent] Silence the reset event
 		 */
-		reset: function( animate ) {
+		reset: function( options ) {
+			options = createResetOptions( options );
 			// Reset the transform to its original value
-			var matrix = this.setMatrix( this._origTransform, {
-				animate: typeof animate !== 'boolean' || animate,
-				// Set zoomRange value
-				range: true
-			});
-			this._trigger( 'reset', matrix );
+			var matrix = this.setMatrix( this._origTransform, options );
+			if ( !options.silent ) {
+				this._trigger( 'reset', matrix );
+			}
 		},
 
 		/**
 		 * Only resets zoom level
-		 * @param {Boolean} [animate] Whether to animate the reset (default: true)
+		 * @param {Boolean|Object} [options] Whether to animate the reset (default: true) or an object of options to pass to zoom()
 		 */
-		resetZoom: function( animate ) {
-			this._resetParts( [ 0, 3 ], animate );
+		resetZoom: function( options ) {
+			options = createResetOptions( options );
+			var origMatrix = this.getMatrix( this._origTransform );
+			options.dValue = origMatrix[ 3 ];
+			this.zoom( origMatrix[0], options );
 		},
 
 		/**
 		 * Only reset panning
-		 * @param {Boolean} [animate] Whether to animate the reset (default: true)
+		 * @param {Boolean|Object} [options] Whether to animate the reset (default: true) or an object of options to pass to pan()
 		 */
-		resetPan: function( animate ) {
-			this._resetParts( [ 4, 5 ], animate );
+		resetPan: function( options ) {
+			var origMatrix = this.getMatrix( this._origTransform );
+			this.pan( origMatrix[4], origMatrix[5], createResetOptions(options) );
 		},
 
 		/**
@@ -288,7 +307,7 @@
 		 * @param {Boolean} [options.contain] Override the global contain option
 		 * @param {Boolean} [options.range] If true, $zoomRange's value will be updated.
 		 * @param {Boolean} [options.silent] If true, the change event will not be triggered
-		 * @returns {Array} Returns the matrix that was set
+		 * @returns {Array} Returns the newly-set matrix
 		 */
 		setMatrix: function( matrix, options ) {
 			if ( this.disabled ) { return; }
@@ -328,6 +347,7 @@
 			if ( !options.silent ) {
 				this._trigger( 'change', matrix );
 			}
+
 			return matrix;
 		},
 
@@ -385,6 +405,10 @@
 		 * @param {Object} [opts.middle] Specify a middle point towards which to gravitate when zooming
 		 * @param {Boolean} [opts.animate] Whether to animate the zoom (defaults to true if scale is not a number, false otherwise)
 		 * @param {Boolean} [opts.silent] Silence the zoom event
+		 * @param {Number} [opts.dValue] Think of a transform matrix as four values a, b, c, d (where a/d are the horizontal/vertical scale values and b/c are the skew values) (5 and 6 of matrix array are the tx/ty transform values).
+		 *  Normally, the scale is set to both the a and d values of the matrix.
+		 *  This option allows you to specify a different d value for the zoom. For instance, to flip vertically, you could set -1 as the dValue.
+		 * @returns {Array} Returns the newly-set matrix
 		 */
 		zoom: function( scale, opts ) {
 			var animate = false;
@@ -420,7 +444,8 @@
 			}
 
 			// Set the scale
-			matrix[0] = matrix[3] = scale;
+			matrix[0] = scale;
+			matrix[3] = typeof opts.dValue === 'number' ? opts.dValue : scale;
 			this.setMatrix( matrix, {
 				animate: typeof opts.animate === 'boolean' ? opts.animate : animate,
 				// Set the zoomRange value
@@ -705,23 +730,6 @@
 			}
 		},
 
-		/**
-		 * Reset certain parts of the transform
-		 */
-		_resetParts: function( indices, animate ) {
-			var origMatrix = this.getMatrix( this._origTransform );
-			var cur = this.getMatrix();
-			var i = indices.length;
-			while( i-- ) {
-				cur[ indices[i] ] = origMatrix[ indices[i] ];
-			}
-			this.setMatrix(cur, {
-				animate: typeof animate !== 'boolean' || animate,
-				// Set zoomRange value
-				range: true
-			});
-		},
-
 		/**
 		 * Calculates the distance between two touch points
 		 * Remember pythagorean?

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.panzoom",
-  "version": "1.3.8",
+  "version": "1.4.0",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-jshint": "~0.3.0",

panzoom.jquery.json

@@ -9,7 +9,7 @@
     "zoom",
     "panzoom"
   ],
-  "version": "1.3.8",
+  "version": "1.4.0",
   "author": {
     "name": "Timmy Willison",
     "email": "[email protected]",