Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Resizable: Grid now respects min/max dimensions. Fixed #8435. #695

Closed
wants to merge 1 commit into from

2 participants

Ethan Romba Mike Sherov
Ethan Romba

This pull request includes a fix and test case for #8435.

Mike Sherov
Collaborator

Hi @eromba, thanks again for contributing this patch. We recently rewrote the test suite for resizable. Can you rebase your changes here?

Ethan Romba

I'm closing this pull request since I'll be moving the rebased commit to a new branch.

Ethan Romba eromba closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 10, 2012
  1. Ethan Romba

    Resizable: Grid now respects min/max dimensions. Fixed #8435 - grid does

    Ethan Romba authored eromba committed
    not respect min/max dimensions
This page is out of date. Refresh to see the latest.
Showing with 33 additions and 10 deletions.
  1. +14 −0 tests/unit/resizable/resizable_options.js
  2. +19 −10 ui/jquery.ui.resizable.js
14 tests/unit/resizable/resizable_options.js
View
@@ -117,6 +117,20 @@ test("grid", function() {
equal( target.height(), 120, "compare height");
});
+test("grid (min/max dimensions)", function() {
+ expect(4);
+
+ var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all', grid: 20, minWidth: 65, minHeight: 65, maxWidth: 135, maxHeight: 135 });
+
+ drag(handle, 50, 50);
+ equal( target.width(), 120, "grid should respect maxWidth");
+ equal( target.height(), 120, "grid should respect maxHeight");
+
+ drag(handle, -100, -100);
+ equal( target.width(), 80, "grid should respect minWidth");
+ equal( target.height(), 80, "grid should respect minHeight");
+});
+
test("grid (wrapped)", function() {
expect(4);
29 ui/jquery.ui.resizable.js
View
@@ -17,7 +17,7 @@
$.widget("ui.resizable", $.ui.mouse, {
version: "@VERSION",
- widgetEventPrefix: "resize",
+ widgetEventPrefix: "resize" ,
options: {
alsoResize: false,
animate: false,
@@ -765,25 +765,34 @@ $.ui.plugin.add("resizable", "grid", {
resize: function(event, ui) {
var that = $(this).data("resizable"), o = that.options, cs = that.size, os = that.originalSize, op = that.originalPosition, a = that.axis, ratio = o._aspectRatio || event.shiftKey;
o.grid = typeof o.grid == "number" ? [o.grid, o.grid] : o.grid;
- var ox = Math.round((cs.width - os.width) / (o.grid[0]||1)) * (o.grid[0]||1), oy = Math.round((cs.height - os.height) / (o.grid[1]||1)) * (o.grid[1]||1);
+ var gridX = (o.grid[0]||1), gridY = (o.grid[1]||1),
+ ox = Math.round((cs.width - os.width) / gridX) * gridX, oy = Math.round((cs.height - os.height) / gridY) * gridY,
+ newWidth = os.width + ox, newHeight = os.height + oy,
+ isMaxWidth = o.maxWidth && (o.maxWidth < newWidth), isMaxHeight = o.maxHeight && (o.maxHeight < newHeight),
+ isMinWidth = o.minWidth && (o.minWidth > newWidth), isMinHeight = o.minHeight && (o.minHeight > newHeight);
+
+ if (isMinWidth) newWidth = newWidth + gridX;
+ if (isMinHeight) newHeight = newHeight + gridY;
+ if (isMaxWidth) newWidth = newWidth - gridX;
+ if (isMaxHeight) newHeight = newHeight - gridY;
if (/^(se|s|e)$/.test(a)) {
- that.size.width = os.width + ox;
- that.size.height = os.height + oy;
+ that.size.width = newWidth;
+ that.size.height = newHeight;
}
else if (/^(ne)$/.test(a)) {
- that.size.width = os.width + ox;
- that.size.height = os.height + oy;
+ that.size.width = newWidth;
+ that.size.height = newHeight;
that.position.top = op.top - oy;
}
else if (/^(sw)$/.test(a)) {
- that.size.width = os.width + ox;
- that.size.height = os.height + oy;
+ that.size.width = newWidth;
+ that.size.height = newHeight;
that.position.left = op.left - ox;
}
else {
- that.size.width = os.width + ox;
- that.size.height = os.height + oy;
+ that.size.width = newWidth;
+ that.size.height = newHeight;
that.position.top = op.top - oy;
that.position.left = op.left - ox;
}
Something went wrong with that request. Please try again.