Skip to content

Commit 5ba267e

Browse files
scottgonzalezscottgonzalez
committed
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.
1 parent c6a755d commit 5ba267e

File tree

3 files changed

+132
-71
lines changed

3 files changed

+132
-71
lines changed

‎tests/unit/resizable/resizable.html

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,19 @@
3131
<script src="../swarminject.js"></script>
3232

3333
<style>
34-
#resizable1 {
35-
background: green;
36-
height: 100px;
37-
width: 100px;
38-
}
39-
#resizable2 {
40-
height: 100px;
41-
width: 100px;
42-
}
34+
#container {
35+
width: 300px;
36+
height: 200px;
37+
}
38+
#resizable1 {
39+
background: green;
40+
height: 100px;
41+
width: 100px;
42+
}
43+
#resizable2 {
44+
height: 100px;
45+
width: 100px;
46+
}
4347
</style>
4448
</head>
4549
<body>
@@ -51,7 +55,9 @@ <h2 id="qunit-userAgent"></h2>
5155
<ol id="qunit-tests"></ol>
5256
<div id="qunit-fixture">
5357

54-
<div id="resizable1">I'm a resizable.</div>
58+
<div id="container">
59+
<div id="resizable1">I'm a resizable.</div>
60+
</div>
5561
<img src="images/test.jpg" id="resizable2" alt="solid gray">
5662

5763
</div>

‎tests/unit/resizable/resizable_options.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,26 @@
55

66
module("resizable: options");
77

8+
test( "alsoResize", function() {
9+
expect( 2 );
10+
11+
var other = $( "<div>" )
12+
.css({
13+
width: 50,
14+
height: 50
15+
})
16+
.appendTo( "body" ),
17+
element = $( "#resizable1" ).resizable({
18+
alsoResize: other
19+
}),
20+
handle = ".ui-resizable-e";
21+
22+
TestHelpers.resizable.drag( handle, 80 );
23+
equal( element.width(), 180, "resizable width" );
24+
equal( other.width(), 130, "alsoResize width" );
25+
});
26+
27+
828
test("aspectRatio: 'preserve' (e)", function() {
929
expect(4);
1030

@@ -103,6 +123,21 @@ test("aspectRatio: 'preserve' (ne)", function() {
103123
equal( target.height(), 70, "compare minHeight");
104124
});
105125

126+
test( "containment", function() {
127+
expect( 4 );
128+
var element = $( "#resizable1" ).resizable({
129+
containment: "#container"
130+
});
131+
132+
TestHelpers.resizable.drag( ".ui-resizable-se", 20, 30 );
133+
equal( element.width(), 120, "unconstrained width within container" );
134+
equal( element.height(), 130, "unconstrained height within container" );
135+
136+
TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 );
137+
equal( element.width(), 300, "constrained width at containment edge" );
138+
equal( element.height(), 200, "constrained height at containment edge" );
139+
});
140+
106141
test("grid", function() {
107142
expect(4);
108143

@@ -210,4 +245,24 @@ test("zIndex, applied to all handles", function() {
210245
});
211246
});
212247

248+
test( "alsoResize + containment", function() {
249+
expect( 4 );
250+
var other = $( "<div>" )
251+
.css({
252+
width: 50,
253+
height: 50
254+
})
255+
.appendTo( "body" ),
256+
element = $( "#resizable1" ).resizable({
257+
alsoResize: other,
258+
containment: "#container"
259+
});
260+
261+
TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 );
262+
equal( element.width(), 300, "resizable constrained width at containment edge" );
263+
equal( element.height(), 200, "resizable constrained height at containment edge" );
264+
equal( other.width(), 250, "alsoResize constrained width at containment edge" );
265+
equal( other.height(), 150, "alsoResize constrained height at containment edge" );
266+
});
267+
213268
})(jQuery);

‎ui/jquery.ui.resizable.js

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -643,67 +643,6 @@ $.widget("ui.resizable", $.ui.mouse, {
643643
* Resizable Extensions
644644
*/
645645

646-
$.ui.plugin.add("resizable", "alsoResize", {
647-
648-
start: function () {
649-
var that = $(this).data("ui-resizable"),
650-
o = that.options,
651-
_store = function (exp) {
652-
$(exp).each(function() {
653-
var el = $(this);
654-
el.data("ui-resizable-alsoresize", {
655-
width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
656-
left: parseInt(el.css('left'), 10), top: parseInt(el.css('top'), 10)
657-
});
658-
});
659-
};
660-
661-
if (typeof(o.alsoResize) === 'object' && !o.alsoResize.parentNode) {
662-
if (o.alsoResize.length) { o.alsoResize = o.alsoResize[0]; _store(o.alsoResize); }
663-
else { $.each(o.alsoResize, function (exp) { _store(exp); }); }
664-
}else{
665-
_store(o.alsoResize);
666-
}
667-
},
668-
669-
resize: function (event, ui) {
670-
var that = $(this).data("ui-resizable"),
671-
o = that.options,
672-
os = that.originalSize,
673-
op = that.originalPosition,
674-
delta = {
675-
height: (that.size.height - os.height) || 0, width: (that.size.width - os.width) || 0,
676-
top: (that.position.top - op.top) || 0, left: (that.position.left - op.left) || 0
677-
},
678-
679-
_alsoResize = function (exp, c) {
680-
$(exp).each(function() {
681-
var el = $(this), start = $(this).data("ui-resizable-alsoresize"), style = {},
682-
css = c && c.length ? c : el.parents(ui.originalElement[0]).length ? ['width', 'height'] : ['width', 'height', 'top', 'left'];
683-
684-
$.each(css, function (i, prop) {
685-
var sum = (start[prop]||0) + (delta[prop]||0);
686-
if (sum && sum >= 0) {
687-
style[prop] = sum || null;
688-
}
689-
});
690-
691-
el.css(style);
692-
});
693-
};
694-
695-
if (typeof(o.alsoResize) === 'object' && !o.alsoResize.nodeType) {
696-
$.each(o.alsoResize, function (exp, c) { _alsoResize(exp, c); });
697-
}else{
698-
_alsoResize(o.alsoResize);
699-
}
700-
},
701-
702-
stop: function () {
703-
$(this).removeData("resizable-alsoresize");
704-
}
705-
});
706-
707646
$.ui.plugin.add("resizable", "animate", {
708647

709648
stop: function( event ) {
@@ -871,6 +810,67 @@ $.ui.plugin.add("resizable", "containment", {
871810
}
872811
});
873812

813+
$.ui.plugin.add("resizable", "alsoResize", {
814+
815+
start: function () {
816+
var that = $(this).data("ui-resizable"),
817+
o = that.options,
818+
_store = function (exp) {
819+
$(exp).each(function() {
820+
var el = $(this);
821+
el.data("ui-resizable-alsoresize", {
822+
width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
823+
left: parseInt(el.css('left'), 10), top: parseInt(el.css('top'), 10)
824+
});
825+
});
826+
};
827+
828+
if (typeof(o.alsoResize) === 'object' && !o.alsoResize.parentNode) {
829+
if (o.alsoResize.length) { o.alsoResize = o.alsoResize[0]; _store(o.alsoResize); }
830+
else { $.each(o.alsoResize, function (exp) { _store(exp); }); }
831+
}else{
832+
_store(o.alsoResize);
833+
}
834+
},
835+
836+
resize: function (event, ui) {
837+
var that = $(this).data("ui-resizable"),
838+
o = that.options,
839+
os = that.originalSize,
840+
op = that.originalPosition,
841+
delta = {
842+
height: (that.size.height - os.height) || 0, width: (that.size.width - os.width) || 0,
843+
top: (that.position.top - op.top) || 0, left: (that.position.left - op.left) || 0
844+
},
845+
846+
_alsoResize = function (exp, c) {
847+
$(exp).each(function() {
848+
var el = $(this), start = $(this).data("ui-resizable-alsoresize"), style = {},
849+
css = c && c.length ? c : el.parents(ui.originalElement[0]).length ? ['width', 'height'] : ['width', 'height', 'top', 'left'];
850+
851+
$.each(css, function (i, prop) {
852+
var sum = (start[prop]||0) + (delta[prop]||0);
853+
if (sum && sum >= 0) {
854+
style[prop] = sum || null;
855+
}
856+
});
857+
858+
el.css(style);
859+
});
860+
};
861+
862+
if (typeof(o.alsoResize) === 'object' && !o.alsoResize.nodeType) {
863+
$.each(o.alsoResize, function (exp, c) { _alsoResize(exp, c); });
864+
}else{
865+
_alsoResize(o.alsoResize);
866+
}
867+
},
868+
869+
stop: function () {
870+
$(this).removeData("resizable-alsoresize");
871+
}
872+
});
873+
874874
$.ui.plugin.add("resizable", "ghost", {
875875

876876
start: function() {

0 commit comments

Comments
 (0)