diff --git a/dist/jquery.panzoom.js b/dist/jquery.panzoom.js index 01273eec..c6376848 100644 --- a/dist/jquery.panzoom.js +++ b/dist/jquery.panzoom.js @@ -1,6 +1,6 @@ /** * @license jquery.panzoom.js v3.2.1 - * Updated: Sat Aug 13 2016 + * Updated: Sat Aug 27 2016 * Add pan and zoom functionality to any element * Copyright (c) timmy willison * Released under the MIT license @@ -1128,7 +1128,7 @@ if (this.panning) { return; } - var move, moveEvent, endEvent, + var moveEvent, endEvent, startDistance, startScale, startMiddle, startPageX, startPageY, touch; var self = this; @@ -1169,63 +1169,76 @@ // Trigger start event this._trigger('start', event, touches); - if (touches && touches.length === 2) { - startDistance = this._getDistance(touches); - startScale = +matrix[0]; - startMiddle = this._getMiddle(touches); - move = function(e) { - e.preventDefault(); - touches = e.touches || e.originalEvent.touches; - - // Calculate move on middle point - var middle = self._getMiddle(touches); - var diff = self._getDistance(touches) - startDistance; - - // Set zoom - self.zoom(diff * (options.increment / 100) + startScale, { - focal: middle, - matrix: matrix, - animate: 'skip' - }); - - // Set pan - self.pan( - +matrix[4] + middle.clientX - startMiddle.clientX, - +matrix[5] + middle.clientY - startMiddle.clientY, - panOptions - ); - startMiddle = middle; - }; - } else { - if (touches && (touch = touches[0])) { - startPageX = touch.pageX; - startPageY = touch.pageY; - } else { - startPageX = event.pageX; - startPageY = event.pageY; + var setStart = function(event, touches) { + if (touches) { + if (touches.length === 2) { + if (startDistance != null) { + return; + } + startDistance = self._getDistance(touches); + startScale = +matrix[0]; + startMiddle = self._getMiddle(touches); + return; + } + if (startPageX != null) { + return; + } + if ((touch = touches[0])) { + startPageX = touch.pageX; + startPageY = touch.pageY; + } + } + if (startPageX != null) { + return; } + startPageX = event.pageX; + startPageY = event.pageY; + }; - /** - * Mousemove/touchmove function to pan the element - * @param {Object} e Event object - */ - move = function(e) { - e.preventDefault(); - touches = e.touches || e.originalEvent.touches; - var coords; - if (touches) { - coords = touches[0] || { pageX: 0, pageY: 0 }; - } else { - coords = e; + setStart(event, touches); + + var move = function(e) { + var coords; + e.preventDefault(); + touches = e.touches || e.originalEvent.touches; + setStart(e, touches); + + if (touches) { + if (touches.length === 2) { + + // Calculate move on middle point + var middle = self._getMiddle(touches); + var diff = self._getDistance(touches) - startDistance; + + // Set zoom + self.zoom(diff * (options.increment / 100) + startScale, { + focal: middle, + matrix: matrix, + animate: 'skip' + }); + + // Set pan + self.pan( + +matrix[4] + middle.clientX - startMiddle.clientX, + +matrix[5] + middle.clientY - startMiddle.clientY, + panOptions + ); + startMiddle = middle; + return; } + coords = touches[0] || { pageX: 0, pageY: 0 }; + } - self.pan( - origPageX + coords.pageX - startPageX, - origPageY + coords.pageY - startPageY, - panOptions - ); - }; - } + if (!coords) { + coords = e; + } + + self.pan( + origPageX + coords.pageX - startPageX, + origPageY + coords.pageY - startPageY, + panOptions + ); + }; // Bind the handlers $(document) diff --git a/dist/jquery.panzoom.min.js b/dist/jquery.panzoom.min.js index 771354be..4e07512a 100644 --- a/dist/jquery.panzoom.min.js +++ b/dist/jquery.panzoom.min.js @@ -1,2 +1,2 @@ /* jquery.panzoom.min.js 3.2.1 (c) Timmy Willison - MIT License */ -!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof exports?b(a,require("jquery")):b(a,a.jQuery)}("undefined"!=typeof window?window:this,function(a,b){"use strict";function c(a,b){for(var c=a.length;--c;)if(Math.round(+a[c])!==Math.round(+b[c]))return!1;return!0}function d(a){var c={range:!0,animate:!0};return"boolean"==typeof a?c.animate=a:b.extend(c,a),c}function e(a,c,d,e,f,g,h,i,j){"array"===b.type(a)?this.elements=[+a[0],+a[2],+a[4],+a[1],+a[3],+a[5],0,0,1]:this.elements=[a,c,d,e,f,g,h||0,i||0,j||1]}function f(a,b,c){this.elements=[a,b,c]}function g(a,c){if(!(this instanceof g))return new g(a,c);1!==a.nodeType&&b.error("Panzoom called on non-Element node"),b.contains(h,a)||b.error("Panzoom element must be attached to the document");var d=b.data(a,i);if(d)return d;this.options=c=b.extend({},g.defaults,c),this.elem=a;var e=this.$elem=b(a);this.$set=c.$set&&c.$set.length?c.$set:e,this.$doc=b(a.ownerDocument||h),this.$parent=e.parent(),this.parent=this.$parent[0],this.isSVG=n.test(a.namespaceURI)&&"svg"!==a.nodeName.toLowerCase(),this.panning=!1,this._buildTransform(),this._transform=b.cssProps.transform.replace(m,"-$1").toLowerCase(),this._buildTransition(),this.resetDimensions();var f=b(),j=this;b.each(["$zoomIn","$zoomOut","$zoomRange","$reset"],function(a,b){j[b]=c[b]||f}),this.enable(),this.scale=this.getMatrix()[0],this._checkPanWhenZoomed(),b.data(a,i,this)}var h=a.document,i="__pz__",j=Array.prototype.slice,k=/trident\/7./i,l=function(){if(k.test(navigator.userAgent))return!1;var a=h.createElement("input");return a.setAttribute("oninput","return"),"function"==typeof a.oninput}(),m=/([A-Z])/g,n=/^http:[\w\.\/]+svg$/,o="(\\-?\\d[\\d\\.e-]*)",p="\\,?\\s*",q=new RegExp("^matrix\\("+o+p+o+p+o+p+o+p+o+p+o+"\\)$");return e.prototype={x:function(a){var b=a instanceof f,c=this.elements,d=a.elements;return b&&3===d.length?new f(c[0]*d[0]+c[1]*d[1]+c[2]*d[2],c[3]*d[0]+c[4]*d[1]+c[5]*d[2],c[6]*d[0]+c[7]*d[1]+c[8]*d[2]):d.length===c.length&&new e(c[0]*d[0]+c[1]*d[3]+c[2]*d[6],c[0]*d[1]+c[1]*d[4]+c[2]*d[7],c[0]*d[2]+c[1]*d[5]+c[2]*d[8],c[3]*d[0]+c[4]*d[3]+c[5]*d[6],c[3]*d[1]+c[4]*d[4]+c[5]*d[7],c[3]*d[2]+c[4]*d[5]+c[5]*d[8],c[6]*d[0]+c[7]*d[3]+c[8]*d[6],c[6]*d[1]+c[7]*d[4]+c[8]*d[7],c[6]*d[2]+c[7]*d[5]+c[8]*d[8])},inverse:function(){var a=1/this.determinant(),b=this.elements;return new e(a*(b[8]*b[4]-b[7]*b[5]),a*-(b[8]*b[1]-b[7]*b[2]),a*(b[5]*b[1]-b[4]*b[2]),a*-(b[8]*b[3]-b[6]*b[5]),a*(b[8]*b[0]-b[6]*b[2]),a*-(b[5]*b[0]-b[3]*b[2]),a*(b[7]*b[3]-b[6]*b[4]),a*-(b[7]*b[0]-b[6]*b[1]),a*(b[4]*b[0]-b[3]*b[1]))},determinant:function(){var a=this.elements;return a[0]*(a[8]*a[4]-a[7]*a[5])-a[3]*(a[8]*a[1]-a[7]*a[2])+a[6]*(a[5]*a[1]-a[4]*a[2])}},f.prototype.e=e.prototype.e=function(a){return this.elements[a]},g.rmatrix=q,g.defaults={eventNamespace:".panzoom",transition:!0,cursor:"move",disablePan:!1,disableZoom:!1,disableXAxis:!1,disableYAxis:!1,which:1,increment:.3,exponential:!0,panOnlyWhenZoomed:!1,minScale:.3,maxScale:6,rangeStep:.05,duration:200,easing:"ease-in-out",contain:!1},g.prototype={constructor:g,instance:function(){return this},enable:function(){this._initStyle(),this._bind(),this.disabled=!1},disable:function(){this.disabled=!0,this._resetStyle(),this._unbind()},isDisabled:function(){return this.disabled},destroy:function(){this.disable(),b.removeData(this.elem,i)},resetDimensions:function(){this.container=this.parent.getBoundingClientRect();var a=this.elem,c=a.getBoundingClientRect(),d=Math.abs(this.scale);this.dimensions={width:c.width,height:c.height,left:b.css(a,"left",!0)||0,top:b.css(a,"top",!0)||0,border:{top:b.css(a,"borderTopWidth",!0)*d||0,bottom:b.css(a,"borderBottomWidth",!0)*d||0,left:b.css(a,"borderLeftWidth",!0)*d||0,right:b.css(a,"borderRightWidth",!0)*d||0},margin:{top:b.css(a,"marginTop",!0)*d||0,left:b.css(a,"marginLeft",!0)*d||0}}},reset:function(a){a=d(a);var b=this.setMatrix(this._origTransform,a);a.silent||this._trigger("reset",b)},resetZoom:function(a){a=d(a);var b=this.getMatrix(this._origTransform);a.dValue=b[3],this.zoom(b[0],a)},resetPan:function(a){var b=this.getMatrix(this._origTransform);this.pan(b[4],b[5],d(a))},setTransform:function(a){for(var c=this.$set,d=c.length;d--;)b.style(c[d],"transform",a),this.isSVG&&c[d].setAttribute("transform",a)},getTransform:function(a){var c=this.$set,d=c[0];return a?this.setTransform(a):(a=b.style(d,"transform"),!this.isSVG||a&&"none"!==a||(a=b.attr(d,"transform")||"none")),"none"===a||q.test(a)||this.setTransform(a=b.css(d,"transform")),a||"none"},getMatrix:function(a){var b=q.exec(a||this.getTransform());return b&&b.shift(),b||[1,0,0,1,0,0]},setMatrix:function(a,c){if(!this.disabled){c||(c={}),"string"==typeof a&&(a=this.getMatrix(a));var d=+a[0],e="undefined"!=typeof c.contain?c.contain:this.options.contain;if(e){var f=c.dims;f||(this.resetDimensions(),f=this.dimensions);var g,h,i,j=this.container,k=f.width,l=f.height,m=j.width,n=j.height,o=m/k,p=n/l;"center"!==this.$parent.css("textAlign")||"inline"!==b.css(this.elem,"display")?(i=(k-this.elem.offsetWidth)/2,g=i-f.border.left,h=k-m-i+f.border.right):g=h=(k-m)/2;var q=(l-n)/2+f.border.top,r=(l-n)/2-f.border.top-f.border.bottom;"invert"===e||"automatic"===e&&o<1.01?a[4]=Math.max(Math.min(a[4],g-f.border.left),-h):a[4]=Math.min(Math.max(a[4],g),-h),"invert"===e||"automatic"===e&&p<1.01?a[5]=Math.max(Math.min(a[5],q-f.border.top),-r):a[5]=Math.min(Math.max(a[5],q),-r)}if("skip"!==c.animate&&this.transition(!c.animate),c.range&&this.$zoomRange.val(d),this.options.disableXAxis||this.options.disableYAxis){var s=this.getMatrix();this.options.disableXAxis&&(a[4]=s[4]),this.options.disableYAxis&&(a[5]=s[5])}return this.setTransform("matrix("+a.join(",")+")"),this.scale=d,this._checkPanWhenZoomed(d),c.silent||this._trigger("change",a),a}},isPanning:function(){return this.panning},transition:function(a){if(this._transition)for(var c=a||!this.options.transition?"none":this._transition,d=this.$set,e=d.length;e--;)b.style(d[e],"transition")!==c&&b.style(d[e],"transition",c)},pan:function(a,b,c){if(!this.options.disablePan){c||(c={});var d=c.matrix;d||(d=this.getMatrix()),c.relative&&(a+=+d[4],b+=+d[5]),d[4]=a,d[5]=b,this.setMatrix(d,c),c.silent||this._trigger("pan",d[4],d[5])}},zoom:function(a,c){"object"==typeof a?(c=a,a=null):c||(c={});var d=b.extend({},this.options,c);if(!d.disableZoom){var g=!1,h=d.matrix||this.getMatrix(),i=+h[0];"number"!=typeof a&&(a=d.exponential&&i-d.increment>=1?Math[a?"sqrt":"pow"](i,2):i+d.increment*(a?-1:1),g=!0),a>d.maxScale?a=d.maxScale:a=1?Math[a?"sqrt":"pow"](i,2):i+d.increment*(a?-1:1),g=!0),a>d.maxScale?a=d.maxScale:a