mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
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.
This commit is contained in:
Scott González
parent
c6a755dd8c
commit
5ba267e7c7
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
122
ui/jquery.ui.resizable.js
vendored
122
ui/jquery.ui.resizable.js
vendored
@ -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() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user