Skip to content
Permalink
Browse files

Resizable: account for padding & border in grids.

Fixes #10437
  • Loading branch information...
mikesherov committed Aug 5, 2014
1 parent 750a8fd commit 7c8790dcc881c8e82390bb5abe31fad35afdaaa0
Showing with 72 additions and 21 deletions.
  1. +20 −0 tests/unit/resizable/resizable_options.js
  2. +52 −21 ui/resizable.js
@@ -299,6 +299,26 @@ test( "grid - Resizable: can be moved when grid option is set (#9611)", function
equal( target.position().left, oldPosition.left, "compare left" );
});

test( "grid - maintains grid with padding and border when approaching no dimensions", function() {
expect( 2 );

// http://bugs.jqueryui.com/ticket/10437 - Resizable: border with grid option working wrong
var handle = ".ui-resizable-nw",
target = $( "#resizable1" ).css({
padding: 5,
borderWidth: 5,
width: 80,
height: 80
}).resizable({
handles: "all",
grid: 50
});

TestHelpers.resizable.drag( handle, 50, 50 );
equal( target.outerWidth(), 50, "compare width" );
equal( target.outerHeight(), 50, "compare height" );
});

test("ui-resizable-se { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
expect(4);

@@ -555,32 +555,56 @@ $.widget("ui.resizable", $.ui.mouse, {
return data;
},

_getPaddingPlusBorderDimensions: function( element ) {
var i = 0,
widths = [],
borders = [
element.css( "borderTopWidth" ),
element.css( "borderRightWidth" ),
element.css( "borderBottomWidth" ),
element.css( "borderLeftWidth" )
],
paddings = [
element.css( "paddingTop" ),
element.css( "paddingRight" ),
element.css( "paddingBottom" ),
element.css( "paddingLeft" )
];

for ( ; i < 4; i++ ) {
widths[ i ] = ( parseInt( borders[ i ], 10 ) || 0 );
widths[ i ] += ( parseInt( paddings[ i ], 10 ) || 0 );
}

return {
height: widths[ 0 ] + widths[ 2 ],
width: widths[ 1 ] + widths[ 3 ]
};
},

_proportionallyResize: function() {

if (!this._proportionallyResizeElements.length) {
return;
}

var i, j, borders, paddings, prel,
var prel,
i = 0,
element = this.helper || this.element;

for ( i=0; i < this._proportionallyResizeElements.length; i++) {
for ( ; i < this._proportionallyResizeElements.length; i++) {

prel = this._proportionallyResizeElements[i];

if (!this.borderDif) {
this.borderDif = [];
borders = [prel.css("borderTopWidth"), prel.css("borderRightWidth"), prel.css("borderBottomWidth"), prel.css("borderLeftWidth")];
paddings = [prel.css("paddingTop"), prel.css("paddingRight"), prel.css("paddingBottom"), prel.css("paddingLeft")];

for ( j = 0; j < borders.length; j++ ) {
this.borderDif[ j ] = ( parseInt( borders[ j ], 10 ) || 0 ) + ( parseInt( paddings[ j ], 10 ) || 0 );
}
// TODO: Seems like a bug to cache this.outerDimensions
// considering that we are in a loop.
if (!this.outerDimensions) {
this.outerDimensions = this._getPaddingPlusBorderDimensions( prel );
}

prel.css({
height: (element.height() - this.borderDif[0] - this.borderDif[2]) || 0,
width: (element.width() - this.borderDif[1] - this.borderDif[3]) || 0
height: (element.height() - this.outerDimensions.height) || 0,
width: (element.width() - this.outerDimensions.width) || 0
});

}
@@ -972,7 +996,8 @@ $.ui.plugin.add("resizable", "ghost", {
$.ui.plugin.add("resizable", "grid", {

resize: function() {
var that = $(this).resizable( "instance" ),
var outerDimensions,
that = $(this).resizable( "instance" ),
o = that.options,
cs = that.size,
os = that.originalSize,
@@ -993,16 +1018,16 @@ $.ui.plugin.add("resizable", "grid", {
o.grid = grid;

if (isMinWidth) {
newWidth = newWidth + gridX;
newWidth += gridX;
}
if (isMinHeight) {
newHeight = newHeight + gridY;
newHeight += gridY;
}
if (isMaxWidth) {
newWidth = newWidth - gridX;
newWidth -= gridX;
}
if (isMaxHeight) {
newHeight = newHeight - gridY;
newHeight -= gridY;
}

if (/^(se|s|e)$/.test(a)) {
@@ -1017,19 +1042,25 @@ $.ui.plugin.add("resizable", "grid", {
that.size.height = newHeight;
that.position.left = op.left - ox;
} else {
if ( newHeight - gridY <= 0 || newWidth - gridX <= 0) {
outerDimensions = that._getPaddingPlusBorderDimensions( this );
}

if ( newHeight - gridY > 0 ) {
that.size.height = newHeight;
that.position.top = op.top - oy;
} else {
that.size.height = gridY;
that.position.top = op.top + os.height - gridY;
newHeight = gridY - outerDimensions.height;
that.size.height = newHeight;
that.position.top = op.top + os.height - newHeight;
}
if ( newWidth - gridX > 0 ) {
that.size.width = newWidth;
that.position.left = op.left - ox;
} else {
that.size.width = gridX;
that.position.left = op.left + os.width - gridX;
newWidth = gridY - outerDimensions.height;
that.size.width = newWidth;
that.position.left = op.left + os.width - newWidth;
}
}
}

0 comments on commit 7c8790d

Please sign in to comment.
You can’t perform that action at this time.