Add option 'panOnlyWhenZoomed'

Fixes gh-211

README.md

@@ -100,6 +100,10 @@ Panzoom.defaults = {
   // adds/subtracts to the scale each time zoomIn/Out is called
   increment: 0.3,
 
+  // Pan only when the scale is greater than minScale
+  panOnlyWhenZoomed: false,
+
+  // min and max zoom scales
   minScale: 0.4,
   maxScale: 5,
 

demo/index.html

@@ -41,6 +41,34 @@ <h1>Panning and zooming with CSS3</h1>
       </script>
     </section>
     <hr>
+    <section id="pan-when-zoomed">
+      <h1>Pan only when zoomed</h1>
+      <div class="parent">
+        <div class="panzoom">
+          <img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" width="900" height="900">
+        </div>
+      </div>
+      <div class="buttons">
+        <button class="zoom-in">Zoom In</button>
+        <button class="zoom-out">Zoom Out</button>
+        <input type="range" class="zoom-range">
+        <button class="reset">Reset</button>
+      </div>
+      <script>
+        (function() {
+          var $section = $('#pan-when-zoomed');
+          $section.find('.panzoom').panzoom({
+            $zoomIn: $section.find(".zoom-in"),
+            $zoomOut: $section.find(".zoom-out"),
+            $zoomRange: $section.find(".zoom-range"),
+            $reset: $section.find(".reset"),
+            panOnlyWhenZoomed: true,
+            minScale: 1
+          });
+        })();
+      </script>
+    </section>
+    <hr>
     <section id="contain">
       <h1>Containment within the parent element</h1>
       <div class="panzoom-parent">

dist/jquery.panzoom.js

@@ -257,6 +257,8 @@
 
 		this.enable();
 
+		this._checkPanWhenZoomed();
+
 		// Save the instance
 		$.data(elem, datakey, this);
 	}
@@ -292,6 +294,10 @@
 		// adds/subtracts to the scale each time zoomIn/Out is called
 		increment: 0.3,
 
+		// Pan only when the scale is greater than minScale
+		panOnlyWhenZoomed: false,
+
+		// min and max zoom scales
 		minScale: 0.4,
 		maxScale: 5,
 
@@ -561,6 +567,9 @@
 			}
 			this.setTransform('matrix(' + matrix.join(',') + ')');
 
+			// Disable/enable panning if zooming is at minimum and panOnlyWhenZoomed is true
+			this._checkPanWhenZoomed(scale);
+
 			if (!options.silent) {
 				this._trigger('change', matrix);
 			}
@@ -804,6 +813,9 @@
 					case 'transition':
 						this.transition();
 						break;
+					case 'panOnlyWhenZoomed':
+						this._checkPanWhenZoomed();
+						break;
 					case '$set':
 						if (value instanceof $ && value.length) {
 							this.$set = value;
@@ -815,6 +827,25 @@
 			}, this));
 		},
 
+		/**
+		 * Disable/enable panning depending on whether the current scale
+		 * matches the minimum
+		 * @param {Number} [scale]
+		 * @private
+		 */
+		_checkPanWhenZoomed: function(scale) {
+			if (!scale) {
+				scale = this.getMatrix()[0];
+			}
+			var options = this.options;
+			if (options.panOnlyWhenZoomed) {
+				var toDisable = scale === options.minScale;
+				if (options.disablePan !== toDisable) {
+					this.option('disablePan', toDisable);
+				}
+			}
+		},
+
 		/**
 		 * Initialize base styles for the element and its parent
 		 */

dist/jquery.panzoom.min.js

@@ -65,7 +65,7 @@ this._buildTransition(),
 // Build containment dimensions
 this.resetDimensions();
 // Add zoom and reset buttons to `this`
-var f=b(),j=this;b.each(["$zoomIn","$zoomOut","$zoomRange","$reset"],function(a,b){j[b]=c[b]||f}),this.enable(),
+var f=b(),j=this;b.each(["$zoomIn","$zoomOut","$zoomRange","$reset"],function(a,b){j[b]=c[b]||f}),this.enable(),this._checkPanWhenZoomed(),
 // Save the instance
 b.data(a,i,this)}var h=a.document,i="__pz__",j=Array.prototype.slice,k=function(){var a=h.createElement("input");return a.setAttribute("oninput","return"),"function"==typeof a.oninput}(),l=/([A-Z])/g,m=/^http:[\w\.\/]+svg$/,n=/^inline/,o="(\\-?\\d[\\d\\.e-]*)",p="\\,?\\s*",q=new RegExp("^matrix\\("+o+p+o+p+o+p+o+p+o+p+o+"\\)$");/**
 	 * Get the element at zero-indexed index i
@@ -110,7 +110,11 @@ disableXAxis:!1,disableYAxis:!1,
 which:1,
 // The increment at which to zoom
 // adds/subtracts to the scale each time zoomIn/Out is called
-increment:.3,minScale:.4,maxScale:5,
+increment:.3,
+// Pan only when the scale is greater than minScale
+panOnlyWhenZoomed:!1,
+// min and max zoom scales
+minScale:.4,maxScale:5,
 // The default step for the range input
 // Precendence: default < HTML attribute < option setting
 rangeStep:.05,
@@ -204,7 +208,9 @@ q&&(d=this._checkDims(),e=this.container,l=d.width+d.widthBorder,m=d.height+d.he
 // Set transition
 this.transition(!c.animate),
 // Update range
-c.range&&this.$zoomRange.val(o),this.options.disableXAxis||this.options.disableYAxis){var r=this.getMatrix();this.options.disableXAxis&&(a[4]=r[4]),this.options.disableYAxis&&(a[5]=r[5])}return this.setTransform("matrix("+a.join(",")+")"),c.silent||this._trigger("change",a),a}},/**
+c.range&&this.$zoomRange.val(o),this.options.disableXAxis||this.options.disableYAxis){var r=this.getMatrix();this.options.disableXAxis&&(a[4]=r[4]),this.options.disableYAxis&&(a[5]=r[5])}
+// Disable/enable panning if zooming is at minimum and panOnlyWhenZoomed is true
+return this.setTransform("matrix("+a.join(",")+")"),this._checkPanWhenZoomed(o),c.silent||this._trigger("change",a),a}},/**
 		 * @returns {Boolean} Returns whether the panzoom element is currently being dragged
 		 */
 isPanning:function(){return this.panning},/**
@@ -280,9 +286,15 @@ case"$zoomIn":case"$zoomOut":case"$zoomRange":case"$reset":
 // Set these on the instance
 this[a]=c;/* falls through */
 case"disableZoom":case"onStart":case"onChange":case"onZoom":case"onPan":case"onEnd":case"onReset":case"eventNamespace":this._bind();break;case"cursor":b.style(this.elem,"cursor",c);break;case"minScale":this.$zoomRange.attr("min",c);break;case"maxScale":this.$zoomRange.attr("max",c);break;case"rangeStep":this.$zoomRange.attr("step",c);break;case"startTransform":this._buildTransform();break;case"duration":case"easing":this._buildTransition();/* falls through */
-case"transition":this.transition();break;case"$set":c instanceof b&&c.length&&(this.$set=c,
+case"transition":this.transition();break;case"panOnlyWhenZoomed":this._checkPanWhenZoomed();break;case"$set":c instanceof b&&c.length&&(this.$set=c,
 // Reset styles
 this._initStyle(),this._buildTransform())}},this))},/**
+		 * Disable/enable panning depending on whether the current scale
+		 * matches the minimum
+		 * @param {Number} [scale]
+		 * @private
+		 */
+_checkPanWhenZoomed:function(a){a||(a=this.getMatrix()[0]);var b=this.options;if(b.panOnlyWhenZoomed){var c=a===b.minScale;b.disablePan!==c&&this.option("disablePan",c)}},/**
 		 * Initialize base styles for the element and its parent
 		 */
 _initStyle:function(){var a={

src/panzoom.js

@@ -257,6 +257,8 @@
 
 		this.enable();
 
+		this._checkPanWhenZoomed();
+
 		// Save the instance
 		$.data(elem, datakey, this);
 	}
@@ -292,6 +294,10 @@
 		// adds/subtracts to the scale each time zoomIn/Out is called
 		increment: 0.3,
 
+		// Pan only when the scale is greater than minScale
+		panOnlyWhenZoomed: false,
+
+		// min and max zoom scales
 		minScale: 0.4,
 		maxScale: 5,
 
@@ -561,6 +567,9 @@
 			}
 			this.setTransform('matrix(' + matrix.join(',') + ')');
 
+			// Disable/enable panning if zooming is at minimum and panOnlyWhenZoomed is true
+			this._checkPanWhenZoomed(scale);
+
 			if (!options.silent) {
 				this._trigger('change', matrix);
 			}
@@ -804,6 +813,9 @@
 					case 'transition':
 						this.transition();
 						break;
+					case 'panOnlyWhenZoomed':
+						this._checkPanWhenZoomed();
+						break;
 					case '$set':
 						if (value instanceof $ && value.length) {
 							this.$set = value;
@@ -815,6 +827,25 @@
 			}, this));
 		},
 
+		/**
+		 * Disable/enable panning depending on whether the current scale
+		 * matches the minimum
+		 * @param {Number} [scale]
+		 * @private
+		 */
+		_checkPanWhenZoomed: function(scale) {
+			if (!scale) {
+				scale = this.getMatrix()[0];
+			}
+			var options = this.options;
+			if (options.panOnlyWhenZoomed) {
+				var toDisable = scale === options.minScale;
+				if (options.disablePan !== toDisable) {
+					this.option('disablePan', toDisable);
+				}
+			}
+		},
+
 		/**
 		 * Initialize base styles for the element and its parent
 		 */