]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: c6a755d)
Resizable: Respect containment for alsoResize option. Fixes #4603 - Resizable: alsoRe...
authorScott González <scott.gonzalez@gmail.com>
Mon, 3 Dec 2012 15:36:55 +0000 (10:36 -0500)
committerScott González <scott.gonzalez@gmail.com>
Mon, 3 Dec 2012 15:36:55 +0000 (10:36 -0500)
tests/unit/resizable/resizable.html patch | blob | history
tests/unit/resizable/resizable_options.js patch | blob | history
ui/jquery.ui.resizable.js patch | blob | history

diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html
index 0a27f2a80eb89d7bba6fe799ca25a8d4079b19fd..255c988879f97fe21cba018a3533d930f000fa8b 100644 (file)
--- 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 4b47762ab8799d22029c32027401bc8659a518f1..d795231838923483f03cd8055e2dd1364ab70828 100644 (file)
--- 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 4a019336e3db1b88228bc7e7665f79070b2ae3b3..b417288d848834e2f6a881a65723eac3900830c8 100644 (file)
--- 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() {
The official jQuery user interface library: https://github.com/jquery/jquery-ui