From 31e7099709a3bccaae8f83d397951096835269a2 Mon Sep 17 00:00:00 2001 From: Ben Mosher Date: Mon, 25 Aug 2014 14:07:25 -0400 Subject: [PATCH] Resizable: alsoResize more than one element of a jQuery selection Fixes #4666 Closes gh-1324 Closes gh-1461 (cherry picked from commit 19783fd3e6a6e6e02a2030028e8820076c3b1295) --- tests/unit/resizable/resizable_options.js | 30 ++++++++++ ui/resizable.js | 68 +++++++---------------- 2 files changed, 51 insertions(+), 47 deletions(-) diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js index d68294845..7fd409cec 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/resizable_options.js @@ -433,4 +433,34 @@ test( "alsoResize + containment", function() { equal( other.height(), 150, "alsoResize constrained height at containment edge" ); }); +test( "alsoResize + multiple selection", function() { + expect( 6 ); + var other1 = $( "
" ) + .addClass( "other" ) + .css({ + width: 50, + height: 50 + }) + .appendTo( "body" ), + other2 = $( "
" ) + .addClass( "other" ) + .css({ + width: 50, + height: 50 + }) + .appendTo( "body"), + element = $( "#resizable1" ).resizable({ + alsoResize: other1.add( other2 ), + 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( other1.width(), 250, "alsoResize o1 constrained width at containment edge" ); + equal( other1.height(), 150, "alsoResize o1 constrained height at containment edge" ); + equal( other2.width(), 250, "alsoResize o2 constrained width at containment edge" ); + equal( other2.height(), 150, "alsoResize o2 constrained height at containment edge" ); +}); + })(jQuery); diff --git a/ui/resizable.js b/ui/resizable.js index 2df2413c7..6c010783a 100644 --- a/ui/resizable.js +++ b/ui/resizable.js @@ -983,29 +983,15 @@ $.ui.plugin.add("resizable", "alsoResize", { start: function() { var that = $(this).resizable( "instance" ), - 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) - }); - }); - }; + o = that.options; - 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); - } + $(o.alsoResize).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) + }); + }); }, resize: function(event, ui) { @@ -1018,35 +1004,23 @@ $.ui.plugin.add("resizable", "alsoResize", { width: (that.size.width - os.width) || 0, top: (that.position.top - op.top) || 0, left: (that.position.left - op.left) || 0 - }, + }; + + $(o.alsoResize).each(function() { + var el = $(this), start = $(this).data("ui-resizable-alsoresize"), style = {}, + css = el.parents(ui.originalElement[0]).length ? + [ "width", "height" ] : + [ "width", "height", "top", "left" ]; - _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); + $.each(css, function(i, prop) { + var sum = (start[prop] || 0) + (delta[prop] || 0); + if (sum && sum >= 0) { + style[prop] = sum || null; + } }); - }; - if (typeof(o.alsoResize) === "object" && !o.alsoResize.nodeType) { - $.each(o.alsoResize, function(exp, c) { - _alsoResize(exp, c); + el.css(style); }); - } else { - _alsoResize(o.alsoResize); - } }, stop: function() { -- 2.39.5