Skip to content

Commit

Permalink
Account for auto marginRight when text-align is not center on the pan…
Browse files Browse the repository at this point in the history 
…zoom element's parent. Fixes gh-25
  • Loading branch information
@timmywil
timmywil committed Sep 5, 2013
1 parent 7fe6df5 commit 0d119b6
Show file tree
Hide file tree
Showing 7 changed files with 72 additions and 34 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Expand Up @@ -6,8 +6,8 @@ And although IE<=8 is not supported, this plugin is future-proof.

jquery.panzoom.min.js (10.5kb/4.0kb gzip), included in this repo, is compressed with [uglifyjs](https://github.com/mishoo/UglifyJS).

[Download v1.6.6](https://raw.github.com/timmywil/jquery.panzoom/v1.6.6/dist/jquery.panzoom.min.js)
[Development version](https://raw.github.com/timmywil/jquery.panzoom/v1.6.6/dist/jquery.panzoom.js)
[Download v1.6.7](https://raw.github.com/timmywil/jquery.panzoom/v1.6.7/dist/jquery.panzoom.min.js)
[Development version](https://raw.github.com/timmywil/jquery.panzoom/v1.6.7/dist/jquery.panzoom.js)

For common support questions, see [the FAQ](https://github.com/timmywil/jquery.panzoom#faq) at the bottom.

Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
@@ -1,6 +1,6 @@
{
"name": "jquery.panzoom",
"version": "1.6.6",
"version": "1.6.7",
"main": "dist/jquery.panzoom.js",
"ignore": [
"**/.*",
Expand Down
47 changes: 33 additions & 14 deletions dist/jquery.panzoom.js
View file
@@ -1,6 +1,6 @@
/**
* @license jquery.panzoom.js v1.6.6
* Updated: Wed Aug 28 2013
* @license jquery.panzoom.js v1.6.7
* Updated: Thu Sep 05 2013
* Add pan and zoom functionality to any element
* Copyright (c) 2013 timmy willison
* Released under the MIT license
Expand Down Expand Up @@ -43,6 +43,7 @@
var slice = Array.prototype.slice;
var rupper = /([A-Z])/g;
var rsvg = /^http:[\w\.\/]+svg$/;
var rinline = /^inline/;

var floating = '(\\-?[\\d\\.e]+)';
var commaSpace = '\\,?\\s*';
Expand Down Expand Up @@ -434,6 +435,8 @@
}
var dims, container, marginW, marginH, diffW, diffH;
var scale = +matrix[0];
var $parent = this.$parent;
var elem = this.elem;
var contain = typeof options.contain !== 'undefined' ? options.contain : this.options.contain;

// Apply containment
Expand All @@ -442,16 +445,30 @@
container = this.container;
marginW = ((dims.width * scale) - container.width) / 2;
marginH = ((dims.height * scale) - container.height) / 2;
diffW = dims.width > container.width ? dims.width - container.width : 0;
diffH = dims.height > container.height ? dims.height - container.height : 0;
if ( contain === 'invert' ) {
diffW = dims.width > container.width ? dims.width - container.width : 0;
diffH = dims.height > container.height ? dims.height - container.height : 0;
marginW += (container.width - dims.width) / 2;
marginH += (container.height - dims.height) / 2;
matrix[4] = Math.max( Math.min( matrix[4], marginW - dims.left ), -marginW - dims.left - diffW );
matrix[5] = Math.max( Math.min( matrix[5], marginH - dims.top ), -marginH - dims.top - diffH );
matrix[5] = Math.max( Math.min( matrix[5], marginH - dims.top ), -marginH - dims.top - diffH + dims.heightBorder );
} else {
matrix[4] = Math.min( Math.max( matrix[4], marginW - dims.left - diffW / 2 ), -marginW - dims.left - diffW / 2 );
matrix[5] = Math.min( Math.max( matrix[5], marginH - dims.top - diffH / 2 ), -marginH - dims.top - diffH / 2 );
diffH = container.height > dims.height ? container.height - dims.height : 0;
// If the element is not naturally centered, assume full margin right
if ( $parent.css('textAlign') !== 'center' || !rinline.test($.css(elem, 'display')) ) {
diffW = container.width > dims.width ? container.width - dims.width : 0;
marginW = marginH = 0;
} else {
diffW = 0;
}
matrix[4] = Math.min(
Math.max( matrix[4], marginW - dims.left ),
-marginW - dims.left + diffW
);
matrix[5] = Math.min(
Math.max( matrix[5], marginH - dims.top ),
-marginH - dims.top + diffH
);
}
}
if ( options.animate !== 'skip' ) {
Expand All @@ -462,7 +479,7 @@
if ( options.range ) {
this.$zoomRange.val( scale );
}
$[ this.isSVG ? 'attr' : 'style' ]( this.elem, 'transform', 'matrix(' + matrix.join(',') + ')' );
$[ this.isSVG ? 'attr' : 'style' ]( elem, 'transform', 'matrix(' + matrix.join(',') + ')' );
if ( !options.silent ) {
this._trigger( 'change', matrix );
}
Expand Down Expand Up @@ -859,17 +876,19 @@
};
var elem = this.elem;
var $elem = this.$elem;
this.dimensions = this.isSVG ? {
var dims = this.dimensions = this.isSVG ? {
left: elem.getAttribute('x') || 0,
top: elem.getAttribute('y') || 0,
width: elem.getAttribute('width') || $elem.width(),
height: elem.getAttribute('height') || $elem.height()
width: elem.getAttribute('width') || $elem.outerWidth(),
height: elem.getAttribute('height') || $elem.outerHeight()
} : {
left: $.css( elem, 'left', true ) || 0,
top: $.css( elem, 'top', true ) || 0,
width: $elem.width(),
height: $elem.height()
width: $elem.outerWidth(),
height: $elem.outerHeight()
};
dims.widthBorder = ($.css( elem, 'borderLeftWidth', true ) + $.css( elem, 'borderRightWidth', true )) || 0;
dims.heightBorder = ($.css( elem, 'borderTopWidth', true ) + $.css( elem, 'borderBottomWidth', true )) || 0;
},

/**
Expand All @@ -878,7 +897,7 @@
_checkDims: function() {
var dims = this.dimensions;
// Rebuild if width or height is still 0
if ( !dims.width || !dims.height ) {
if ( dims.width === dims.widthBorder || dims.height === dims.heightBorder ) {
this._buildContain();
}
return this.dimensions;
Expand Down
6 changes: 3 additions & 3 deletions dist/jquery.panzoom.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "jquery.panzoom",
"version": "1.6.6",
"version": "1.6.7",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.1",
Expand Down
2 changes: 1 addition & 1 deletion panzoom.jquery.json
View file
Expand Up @@ -9,7 +9,7 @@
"zoom",
"panzoom"
],
"version": "1.6.6",
"version": "1.6.7",
"author": {
"name": "Timmy Willison",
"email": "timmywillisn@gmail.com",
Expand Down
43 changes: 31 additions & 12 deletions panzoom.js
View file
Expand Up @@ -43,6 +43,7 @@
var slice = Array.prototype.slice;
var rupper = /([A-Z])/g;
var rsvg = /^http:[\w\.\/]+svg$/;
var rinline = /^inline/;

var floating = '(\\-?[\\d\\.e]+)';
var commaSpace = '\\,?\\s*';
Expand Down Expand Up @@ -434,6 +435,8 @@
}
var dims, container, marginW, marginH, diffW, diffH;
var scale = +matrix[0];
var $parent = this.$parent;
var elem = this.elem;
var contain = typeof options.contain !== 'undefined' ? options.contain : this.options.contain;

// Apply containment
Expand All @@ -442,16 +445,30 @@
container = this.container;
marginW = ((dims.width * scale) - container.width) / 2;
marginH = ((dims.height * scale) - container.height) / 2;
diffW = dims.width > container.width ? dims.width - container.width : 0;
diffH = dims.height > container.height ? dims.height - container.height : 0;
if ( contain === 'invert' ) {
diffW = dims.width > container.width ? dims.width - container.width : 0;
diffH = dims.height > container.height ? dims.height - container.height : 0;
marginW += (container.width - dims.width) / 2;
marginH += (container.height - dims.height) / 2;
matrix[4] = Math.max( Math.min( matrix[4], marginW - dims.left ), -marginW - dims.left - diffW );
matrix[5] = Math.max( Math.min( matrix[5], marginH - dims.top ), -marginH - dims.top - diffH );
matrix[5] = Math.max( Math.min( matrix[5], marginH - dims.top ), -marginH - dims.top - diffH + dims.heightBorder );
} else {
matrix[4] = Math.min( Math.max( matrix[4], marginW - dims.left - diffW / 2 ), -marginW - dims.left - diffW / 2 );
matrix[5] = Math.min( Math.max( matrix[5], marginH - dims.top - diffH / 2 ), -marginH - dims.top - diffH / 2 );
diffH = container.height > dims.height ? container.height - dims.height : 0;
// If the element is not naturally centered, assume full margin right
if ( $parent.css('textAlign') !== 'center' || !rinline.test($.css(elem, 'display')) ) {
diffW = container.width > dims.width ? container.width - dims.width : 0;
marginW = marginH = 0;
} else {
diffW = 0;
}
matrix[4] = Math.min(
Math.max( matrix[4], marginW - dims.left ),
-marginW - dims.left + diffW
);
matrix[5] = Math.min(
Math.max( matrix[5], marginH - dims.top ),
-marginH - dims.top + diffH
);
}
}
if ( options.animate !== 'skip' ) {
Expand All @@ -462,7 +479,7 @@
if ( options.range ) {
this.$zoomRange.val( scale );
}
$[ this.isSVG ? 'attr' : 'style' ]( this.elem, 'transform', 'matrix(' + matrix.join(',') + ')' );
$[ this.isSVG ? 'attr' : 'style' ]( elem, 'transform', 'matrix(' + matrix.join(',') + ')' );
if ( !options.silent ) {
this._trigger( 'change', matrix );
}
Expand Down Expand Up @@ -859,17 +876,19 @@
};
var elem = this.elem;
var $elem = this.$elem;
this.dimensions = this.isSVG ? {
var dims = this.dimensions = this.isSVG ? {
left: elem.getAttribute('x') || 0,
top: elem.getAttribute('y') || 0,
width: elem.getAttribute('width') || $elem.width(),
height: elem.getAttribute('height') || $elem.height()
width: elem.getAttribute('width') || $elem.outerWidth(),
height: elem.getAttribute('height') || $elem.outerHeight()
} : {
left: $.css( elem, 'left', true ) || 0,
top: $.css( elem, 'top', true ) || 0,
width: $elem.width(),
height: $elem.height()
width: $elem.outerWidth(),
height: $elem.outerHeight()
};
dims.widthBorder = ($.css( elem, 'borderLeftWidth', true ) + $.css( elem, 'borderRightWidth', true )) || 0;
dims.heightBorder = ($.css( elem, 'borderTopWidth', true ) + $.css( elem, 'borderBottomWidth', true )) || 0;
},

/**
Expand All @@ -878,7 +897,7 @@
_checkDims: function() {
var dims = this.dimensions;
// Rebuild if width or height is still 0
if ( !dims.width || !dims.height ) {
if ( dims.width === dims.widthBorder || dims.height === dims.heightBorder ) {
this._buildContain();
}
return this.dimensions;
Expand Down

0 comments on commit 0d119b6

Please sign in to comment.