Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Resizable: Update CSS dimensions selectively. Fixes #7605 - Setting w… 
…idth and height when only one is changing

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
  • Loading branch information
@eromba @mikesherov
eromba authored and mikesherov committed Nov 13, 2012
1 parent 902df84 commit 3974b55
Show file tree
Hide file tree
Showing 4 changed files with 225 additions and 22 deletions.
16 changes: 14 additions & 2 deletions tests/unit/resizable/resizable.html
View file
Expand Up @@ -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>

Expand All @@ -39,8 +51,8 @@ <h2 id="qunit-userAgent"></h2>
<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>
Expand Down
35 changes: 28 additions & 7 deletions tests/unit/resizable/resizable_core.js
View file
Expand Up @@ -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' });

Expand 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' });

Expand 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' });

Expand 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' });

Expand 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' });

Expand 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' });

Expand 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' });

Expand 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() {
Expand Down
163 changes: 160 additions & 3 deletions tests/unit/resizable/resizable_events.js
View file
Expand Up @@ -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 changes: 23 additions & 10 deletions ui/jquery.ui.resizable.js
View file
Expand Up @@ -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];
Expand All @@ -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;
},
Expand Down

0 comments on commit 3974b55

Please sign in to comment.