Fix inverted contianment for when the panzoom element is larger than …

…its container. Supplements gh-11.

bower.json

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

dist/jquery.panzoom.js

@@ -1,6 +1,6 @@
 /**
- * @license jquery.panzoom.js v1.4.0
- * Updated: Thu Jul 25 2013
+ * @license jquery.panzoom.js v1.4.1
+ * Updated: Mon Aug 12 2013
  * Add pan and zoom functionality to any element
  * Copyright (c) 2013 timmy willison
  * Released under the MIT license
@@ -141,8 +141,6 @@
 
 		// Save the instance
 		$.data( elem, datakey, this );
-
-		return this;
 	};
 
 	// Attach regex for possible use (immutable)
@@ -324,12 +322,12 @@
 				isInvert = contain === 'invert';
 				container = this.container;
 				dims = this.dimensions;
-				margin = ((dims.width * scale) - container.width) / 2;
+				margin = ((dims.width * scale) - container.width) / 2 + ((container.width - dims.width) / 2);
 				matrix[4] = Math[ isInvert ? 'max' : 'min' ](
 					Math[ isInvert ? 'min' : 'max' ]( matrix[4], margin - dims.left ),
 					-margin - dims.left
 				);
-				margin = ((dims.height * scale) - container.height) / 2;
+				margin = ((dims.height * scale) - container.height) / 2 + ((container.height - dims.height) / 2);
 				matrix[5] = Math[ isInvert ? 'max' : 'min' ](
 					Math[ isInvert ? 'min' : 'max' ]( matrix[5], margin - dims.top ),
 					-margin - dims.top

jquery.panzoom.js

@@ -141,8 +141,6 @@
 
 		// Save the instance
 		$.data( elem, datakey, this );
-
-		return this;
 	};
 
 	// Attach regex for possible use (immutable)
@@ -324,12 +322,12 @@
 				isInvert = contain === 'invert';
 				container = this.container;
 				dims = this.dimensions;
-				margin = ((dims.width * scale) - container.width) / 2;
+				margin = ((dims.width * scale) - container.width) / 2 + ((container.width - dims.width) / 2);
 				matrix[4] = Math[ isInvert ? 'max' : 'min' ](
 					Math[ isInvert ? 'min' : 'max' ]( matrix[4], margin - dims.left ),
 					-margin - dims.left
 				);
-				margin = ((dims.height * scale) - container.height) / 2;
+				margin = ((dims.height * scale) - container.height) / 2 + ((container.height - dims.height) / 2);
 				matrix[5] = Math[ isInvert ? 'max' : 'min' ](
 					Math[ isInvert ? 'min' : 'max' ]( matrix[5], margin - dims.top ),
 					-margin - dims.top

package.json

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

panzoom.jquery.json

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

test/bdd/test.js

@@ -78,6 +78,31 @@ describe('Panzoom', function() {
 		panzoom.setMatrix( origMatrix );
 	}
 
+	/**
+	 * Test the invert containment option
+	 */
+	function testInvert() {
+		var panzoom = $elem.panzoom('instance');
+		// Zoom in for moving
+		$elem.panzoom('zoom', { animate: false });
+		// Set contain to 'invert'
+		$elem.panzoom('option', 'contain', 'invert');
+		fauxMove( -2, -2 );
+		var matrix = panzoom.getMatrix();
+		expect( +matrix[4] ).to.equal( -2 );
+		expect( +matrix[5] ).to.equal( -2 );
+		fauxMove( 2, 2 );
+		matrix = panzoom.getMatrix();
+		// Should normalize to 0
+		expect( +matrix[4] ).to.equal( 0 );
+		expect( +matrix[5] ).to.equal( 0 );
+		// Clean up
+		$elem.panzoom('option', 'contain', false).panzoom( 'reset', false );
+		matrix = panzoom.getMatrix();
+		expect( +matrix[4] ).to.equal( 0 );
+		expect( +matrix[5] ).to.equal( 0 );
+	}
+
 	/* panzoom creation and options
 	---------------------------------------------------------------------- */
 	it('should have elements available', function() {
@@ -185,25 +210,13 @@ describe('Panzoom', function() {
 		$elem.panzoom('option', 'contain', false).panzoom( 'reset', false );
 	});
 	it('should invert-contain the panzoom element outside its parent when the contain option is set to "invert"', function() {
-		var panzoom = $elem.panzoom('instance');
-		// Zoom in for moving
-		$elem.panzoom('zoom', { animate: false });
-		// Set contain to 'invert'
-		$elem.panzoom('option', 'contain', 'invert');
-		fauxMove( -2, -2 );
-		var matrix = panzoom.getMatrix();
-		expect( +matrix[4] ).to.equal( -2 );
-		expect( +matrix[5] ).to.equal( -2 );
-		fauxMove( 2, 2 );
-		matrix = panzoom.getMatrix();
-		// Should normalize to 0
-		expect( +matrix[4] ).to.equal( 0 );
-		expect( +matrix[5] ).to.equal( 0 );
-		// Clean up
-		$elem.panzoom('option', 'contain', false).panzoom( 'reset', false );
-		matrix = panzoom.getMatrix();
-		expect( +matrix[4] ).to.equal( 0 );
-		expect( +matrix[5] ).to.equal( 0 );
+		testInvert();
+	});
+	it('should invert-contain the panzoom element when the panzoom element is larger than the container', function() {
+		var width = $elem.width();
+		$elem.width( width * 2 );
+		testInvert();
+		$elem.width( width );
 	});