Resizable: Respect containment for alsoResize option. Fixes #4603 - Resizable: alsoResize option doesn't work with containment. Fixes #5559 - Dialog: Content grows bigger than widget on resize at document edge.

author: Scott González <scott.gonzalez@gmail.com> 2012-12-03 10:36:55 -0500
committer: Scott González <scott.gonzalez@gmail.com> 2012-12-03 10:36:55 -0500
commit: 5ba267e7c78f0bc257383c822d241c5369e8e49d (patch)
tree: 042ccabe0ad97a6f1bb276ff7587b448e145fdbc
parent: c6a755dd8c330de78f407dd037eb600a240f23ee (diff)
download: jquery-ui-5ba267e7c78f0bc257383c822d241c5369e8e49d.tar.gz
jquery-ui-5ba267e7c78f0bc257383c822d241c5369e8e49d.zip
3 files changed, 132 insertions, 71 deletions
diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html
index 0a27f2a80..255c98887 100644
--- a/tests/unit/resizable/resizable.html
+++ b/tests/unit/resizable/resizable.html
@@ -31,15 +31,19 @@
 	<script src="../swarminject.js"></script>
 
 	<style>
-		#resizable1 {
-			background: green;
-			height: 100px;
-			width: 100px;
-		}
-		#resizable2 {
-			height: 100px;
-			width: 100px;
-		}
+	#container {
+		width: 300px;
+		height: 200px;
+	}
+	#resizable1 {
+		background: green;
+		height: 100px;
+		width: 100px;
+	}
+	#resizable2 {
+		height: 100px;
+		width: 100px;
+	}
 	</style>
 </head>
 <body>
@@ -51,7 +55,9 @@
 <ol id="qunit-tests"></ol>
 <div id="qunit-fixture">
 
-<div id="resizable1">I'm a resizable.</div>
+<div id="container">
+	<div id="resizable1">I'm a resizable.</div>
+</div>
 <img src="images/test.jpg" id="resizable2" alt="solid gray">
 
 </div>
diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js
index 4b47762ab..d79523183 100644
--- a/tests/unit/resizable/resizable_options.js
+++ b/tests/unit/resizable/resizable_options.js
@@ -5,6 +5,26 @@
 
 module("resizable: options");
 
+test( "alsoResize", function() {
+	expect( 2 );
+
+	var other = $( "<div>" )
+			.css({
+				width: 50,
+				height: 50
+			})
+			.appendTo( "body" ),
+		element = $( "#resizable1" ).resizable({
+			alsoResize: other
+		}),
+		handle = ".ui-resizable-e";
+
+	TestHelpers.resizable.drag( handle, 80 );
+	equal( element.width(), 180, "resizable width" );
+	equal( other.width(), 130, "alsoResize width" );
+});
+
+
 test("aspectRatio: 'preserve' (e)", function() {
 	expect(4);
 
@@ -103,6 +123,21 @@ test("aspectRatio: 'preserve' (ne)", function() {
 	equal( target.height(), 70, "compare minHeight");
 });
 
+test( "containment", function() {
+	expect( 4 );
+	var element = $( "#resizable1" ).resizable({
+		containment: "#container"
+	});
+
+	TestHelpers.resizable.drag( ".ui-resizable-se", 20, 30 );
+	equal( element.width(), 120, "unconstrained width within container" );
+	equal( element.height(), 130, "unconstrained height within container" );
+
+	TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 );
+	equal( element.width(), 300, "constrained width at containment edge" );
+	equal( element.height(), 200, "constrained height at containment edge" );
+});
+
 test("grid", function() {
 	expect(4);
 
@@ -210,4 +245,24 @@ test("zIndex, applied to all handles", function() {
 	});
 });
 
+test( "alsoResize + containment", function() {
+	expect( 4 );
+	var other = $( "<div>" )
+			.css({
+				width: 50,
+				height: 50
+			})
+			.appendTo( "body" ),
+		element = $( "#resizable1" ).resizable({
+			alsoResize: other,
+			containment: "#container"
+		});
+
+	TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 );
+	equal( element.width(), 300, "resizable constrained width at containment edge" );
+	equal( element.height(), 200, "resizable constrained height at containment edge" );
+	equal( other.width(), 250, "alsoResize constrained width at containment edge" );
+	equal( other.height(), 150, "alsoResize constrained height at containment edge" );
+});
+
 })(jQuery);
diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js
index 4a019336e..b417288d8 100644
--- a/ui/jquery.ui.resizable.js
+++ b/ui/jquery.ui.resizable.js
@@ -643,67 +643,6 @@ $.widget("ui.resizable", $.ui.mouse, {
  * Resizable Extensions
  */
 
-$.ui.plugin.add("resizable", "alsoResize", {
-
-	start: function () {
-		var that = $(this).data("ui-resizable"),
-			o = that.options,
-			_store = function (exp) {
-				$(exp).each(function() {
-					var el = $(this);
-					el.data("ui-resizable-alsoresize", {
-						width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
-						left: parseInt(el.css('left'), 10), top: parseInt(el.css('top'), 10)
-					});
-				});
-			};
-
-		if (typeof(o.alsoResize) === 'object' && !o.alsoResize.parentNode) {
-			if (o.alsoResize.length) { o.alsoResize = o.alsoResize[0]; _store(o.alsoResize); }
-			else { $.each(o.alsoResize, function (exp) { _store(exp); }); }
-		}else{
-			_store(o.alsoResize);
-		}
-	},
-
-	resize: function (event, ui) {
-		var that = $(this).data("ui-resizable"),
-			o = that.options,
-			os = that.originalSize,
-			op = that.originalPosition,
-			delta = {
-				height: (that.size.height - os.height) || 0, width: (that.size.width - os.width) || 0,
-				top: (that.position.top - op.top) || 0, left: (that.position.left - op.left) || 0
-			},
-
-			_alsoResize = function (exp, c) {
-				$(exp).each(function() {
-					var el = $(this), start = $(this).data("ui-resizable-alsoresize"), style = {},
-						css = c && c.length ? c : el.parents(ui.originalElement[0]).length ? ['width', 'height'] : ['width', 'height', 'top', 'left'];
-
-					$.each(css, function (i, prop) {
-						var sum = (start[prop]||0) + (delta[prop]||0);
-						if (sum && sum >= 0) {
-							style[prop] = sum || null;
-						}
-					});
-
-					el.css(style);
-				});
-			};
-
-		if (typeof(o.alsoResize) === 'object' && !o.alsoResize.nodeType) {
-			$.each(o.alsoResize, function (exp, c) { _alsoResize(exp, c); });
-		}else{
-			_alsoResize(o.alsoResize);
-		}
-	},
-
-	stop: function () {
-		$(this).removeData("resizable-alsoresize");
-	}
-});
-
 $.ui.plugin.add("resizable", "animate", {
 
 	stop: function( event ) {
@@ -871,6 +810,67 @@ $.ui.plugin.add("resizable", "containment", {
 	}
 });
 
+$.ui.plugin.add("resizable", "alsoResize", {
+
+	start: function () {
+		var that = $(this).data("ui-resizable"),
+			o = that.options,
+			_store = function (exp) {
+				$(exp).each(function() {
+					var el = $(this);
+					el.data("ui-resizable-alsoresize", {
+						width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
+						left: parseInt(el.css('left'), 10), top: parseInt(el.css('top'), 10)
+					});
+				});
+			};
+
+		if (typeof(o.alsoResize) === 'object' && !o.alsoResize.parentNode) {
+			if (o.alsoResize.length) { o.alsoResize = o.alsoResize[0]; _store(o.alsoResize); }
+			else { $.each(o.alsoResize, function (exp) { _store(exp); }); }
+		}else{
+			_store(o.alsoResize);
+		}
+	},
+
+	resize: function (event, ui) {
+		var that = $(this).data("ui-resizable"),
+			o = that.options,
+			os = that.originalSize,
+			op = that.originalPosition,
+			delta = {
+				height: (that.size.height - os.height) || 0, width: (that.size.width - os.width) || 0,
+				top: (that.position.top - op.top) || 0, left: (that.position.left - op.left) || 0
+			},
+
+			_alsoResize = function (exp, c) {
+				$(exp).each(function() {
+					var el = $(this), start = $(this).data("ui-resizable-alsoresize"), style = {},
+						css = c && c.length ? c : el.parents(ui.originalElement[0]).length ? ['width', 'height'] : ['width', 'height', 'top', 'left'];
+
+					$.each(css, function (i, prop) {
+						var sum = (start[prop]||0) + (delta[prop]||0);
+						if (sum && sum >= 0) {
+							style[prop] = sum || null;
+						}
+					});
+
+					el.css(style);
+				});
+			};
+
+		if (typeof(o.alsoResize) === 'object' && !o.alsoResize.nodeType) {
+			$.each(o.alsoResize, function (exp, c) { _alsoResize(exp, c); });
+		}else{
+			_alsoResize(o.alsoResize);
+		}
+	},
+
+	stop: function () {
+		$(this).removeData("resizable-alsoresize");
+	}
+});
+
 $.ui.plugin.add("resizable", "ghost", {
 
 	start: function() {
author	Scott González <scott.gonzalez@gmail.com>	2012-12-03 10:36:55 -0500
committer	Scott González <scott.gonzalez@gmail.com>	2012-12-03 10:36:55 -0500
commit	5ba267e7c78f0bc257383c822d241c5369e8e49d (patch)
tree	042ccabe0ad97a6f1bb276ff7587b448e145fdbc
parent	c6a755dd8c330de78f407dd037eb600a240f23ee (diff)
download	jquery-ui-5ba267e7c78f0bc257383c822d241c5369e8e49d.tar.gz jquery-ui-5ba267e7c78f0bc257383c822d241c5369e8e49d.zip