library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Resizable: Update CSS dimensions selectively. Fixes #7605 - Setting width and height when only one is changing

Browse Source 
Resizable: Trigger resize event only when element is resized. Fixes #5545 - Callbacks ignore the grid.

Resizable: Added event tests. Fixes #5817 - resize event reports unconstrained ui.size
This commit is contained in:
Ethan Romba 2012-07-10 01:02:25 -07:00 committed by Mike Sherov
parent 902df84fce
commit 3974b55ba5
4 changed files with 225 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
tests/unit/resizable/resizable.html
View File

@ -29,6 +29,18 @@
<script src="resizable_test_helpers.js"></script>
<script src="../swarminject.js"></script>
<style>
#resizable1 {
background: green;
height: 100px;
width: 100px;
}
#resizable2 {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
@ -39,8 +51,8 @@
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<div id="resizable1" style="background: green; width: 100px; height: 100px;">I'm a resizable.</div>
<img src="images/test.jpg" id="resizable2" style="width: 100px; height: 100px;" alt="solid gray">
<div id="resizable1">I'm a resizable.</div>
<img src="images/test.jpg" id="resizable2" alt="solid gray">
</div>
</body>

35
tests/unit/resizable/resizable_core.js
View File

@ -26,7 +26,7 @@ test("element types", function() {
*/
test("n", function() {
expect(2);
expect(4);
var handle = '.ui-resizable-n', target = $('#resizable1').resizable({ handles: 'all' });
@ -35,10 +35,13 @@ test("n", function() {
TestHelpers.resizable.drag(handle, 0, 50);
equal( target.height(), 100, "compare height" );
equal( target[0].style.left, "", "left should not be modified" );
equal( target[0].style.width, "", "width should not be modified" );
});
test("s", function() {
expect(2);
expect(5);
var handle = '.ui-resizable-s', target = $('#resizable1').resizable({ handles: 'all' });
@ -47,10 +50,14 @@ test("s", function() {
TestHelpers.resizable.drag(handle, 0, -50);
equal( target.height(), 100, "compare height" );
equal( target[0].style.top, "", "top should not be modified" );
equal( target[0].style.left, "", "left should not be modified" );
equal( target[0].style.width, "", "width should not be modified" );
});
test("e", function() {
expect(2);
expect(5);
var handle = '.ui-resizable-e', target = $('#resizable1').resizable({ handles: 'all' });
@ -59,10 +66,14 @@ test("e", function() {
TestHelpers.resizable.drag(handle, -50);
equal( target.width(), 100, "compare width" );
equal( target[0].style.height, "", "height should not be modified" );
equal( target[0].style.top, "", "top should not be modified" );
equal( target[0].style.left, "", "left should not be modified" );
});
test("w", function() {
expect(2);
expect(4);
var handle = '.ui-resizable-w', target = $('#resizable1').resizable({ handles: 'all' });
@ -71,10 +82,13 @@ test("w", function() {
TestHelpers.resizable.drag(handle, 50);
equal( target.width(), 100, "compare width" );
equal( target[0].style.height, "", "height should not be modified" );
equal( target[0].style.top, "", "top should not be modified" );
});
test("ne", function() {
expect(4);
expect(5);
var handle = '.ui-resizable-ne', target = $('#resizable1').css({ overflow: 'hidden' }).resizable({ handles: 'all' });
@ -85,10 +99,12 @@ test("ne", function() {
TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
equal( target[0].style.left, "", "left should not be modified" );
});
test("se", function() {
expect(4);
expect(6);
var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all' });
@ -99,10 +115,13 @@ test("se", function() {
TestHelpers.resizable.drag(handle, -50, -50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
equal( target[0].style.top, "", "top should not be modified" );
equal( target[0].style.left, "", "left should not be modified" );
});
test("sw", function() {
expect(4);
expect(5);
var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ handles: 'all' });
@ -113,6 +132,8 @@ test("sw", function() {
TestHelpers.resizable.drag(handle, 50, 50);
equal( target.width(), 100, "compare width" );
equal( target.height(), 100, "compare height" );
equal( target[0].style.top, "", "top should not be modified" );
});
test("nw", function() {

163
tests/unit/resizable/resizable_events.js
View File

@ -5,8 +5,165 @@
module("resizable: events");
// this is here to make JSHint pass "unused", and we don't want to
// remove the parameter for when we finally implement
$.noop();
test("start", function() {
expect(5);
var count = 0,
handle = ".ui-resizable-se";
$("#resizable1").resizable({
handles: "all",
start: function(event, ui) {
equal( ui.size.width, 100, "compare width" );
equal( ui.size.height, 100, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
count++;
}
});
TestHelpers.resizable.drag(handle, 50, 50);
equal(count, 1, "start callback should happen exactly once");
});
test("resize", function() {
expect(9);
var count = 0,
handle = ".ui-resizable-se";
$("#resizable1").resizable({
handles: "all",
resize: function(event, ui) {
if (count === 0) {
equal( ui.size.width, 101, "compare width" );
equal( ui.size.height, 101, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
} else {
equal( ui.size.width, 150, "compare width" );
equal( ui.size.height, 150, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
}
count++;
}
});
TestHelpers.resizable.drag(handle, 50, 50);
equal(count, 2, "resize callback should happen exactly once per size adjustment");
});
test("resize (min/max dimensions)", function() {
expect(5);
var count = 0,
handle = ".ui-resizable-se";
$("#resizable1").resizable({
handles: "all",
minWidth: 60,
minHeight: 60,
maxWidth: 100,
maxHeight: 100,
resize: function(event, ui) {
equal( ui.size.width, 60, "compare width" );
equal( ui.size.height, 60, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
count++;
}
});
TestHelpers.resizable.drag(handle, -50, -50);
equal(count, 1, "resize callback should happen exactly once per size adjustment");
});
test("resize (containment)", function() {
expect(5);
var count = 0,
handle = ".ui-resizable-se",
container = $("#resizable1").wrap("<div>").parent().css({
height: "100px",
width: "100px"
});
$("#resizable1").resizable({
handles: "all",
containment: container,
resize: function(event, ui) {
equal( ui.size.width, 50, "compare width" );
equal( ui.size.height, 50, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
count++;
}
});
TestHelpers.resizable.drag(handle, -50, -50);
equal(count, 1, "resize callback should happen exactly once per size adjustment");
});
test("resize (grid)", function() {
expect(5);
var count = 0,
handle = ".ui-resizable-se";
$("#resizable1").resizable({
handles: "all",
grid: 50,
resize: function(event, ui) {
equal( ui.size.width, 150, "compare width" );
equal( ui.size.height, 150, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
count++;
}
});
TestHelpers.resizable.drag(handle, 50, 50);
equal(count, 1, "resize callback should happen exactly once per grid-unit size adjustment");
});
test("stop", function() {
expect(5);
var count = 0,
handle = ".ui-resizable-se";
$("#resizable1").resizable({
handles: "all",
stop: function(event, ui) {
equal( ui.size.width, 150, "compare width" );
equal( ui.size.height, 150, "compare height" );
equal( ui.originalSize.width, 100, "compare original width" );
equal( ui.originalSize.height, 100, "compare original height" );
count++;
}
});
TestHelpers.resizable.drag(handle, 50, 50);
equal(count, 1, "stop callback should happen exactly once");
});
})(jQuery);

33
ui/jquery.ui.resizable.js vendored
View File

@ -286,8 +286,10 @@ $.widget("ui.resizable", $.ui.mouse, {
_mouseDrag: function(event) {
//Increase performance, avoid regex
var el = this.helper,
smp = this.originalMousePosition, a = this.axis;
var el = this.helper, props = {},
smp = this.originalMousePosition, a = this.axis,
prevTop = this.position.top, prevLeft = this.position.left,
prevWidth = this.size.width, prevHeight = this.size.height;
var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0;
var trigger = this._change[a];
@ -303,21 +305,32 @@ $.widget("ui.resizable", $.ui.mouse, {
data = this._respectSize(data, event);
this._updateCache(data);
// plugins callbacks need to be called first
this._propagate("resize", event);
el.css({
top: this.position.top + "px", left: this.position.left + "px",
width: this.size.width + "px", height: this.size.height + "px"
});
if (this.position.top !== prevTop) {
props.top = this.position.top + "px";
}
if (this.position.left !== prevLeft) {
props.left = this.position.left + "px";
}
if (this.size.width !== prevWidth) {
props.width = this.size.width + "px";
}
if (this.size.height !== prevHeight) {
props.height = this.size.height + "px";
}
el.css(props);
if (!this._helper && this._proportionallyResizeElements.length)
this._proportionallyResize();
this._updateCache(data);
// calling the user callback at the end
this._trigger('resize', event, this.ui());
// Call the user callback if the element was resized
if ( ! $.isEmptyObject(props) ) {
this._trigger('resize', event, this.ui());
}
return false;
},