aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--tests/unit/resizable/resizable.html16
-rw-r--r--tests/unit/resizable/resizable_core.js35
-rw-r--r--tests/unit/resizable/resizable_events.js163
-rw-r--r--ui/jquery.ui.resizable.js33
4 files changed, 225 insertions, 22 deletions
diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html
index eca465ae9..0a27f2a80 100644
--- a/tests/unit/resizable/resizable.html
+++ b/tests/unit/resizable/resizable.html
@@ -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>
diff --git a/tests/unit/resizable/resizable_core.js b/tests/unit/resizable/resizable_core.js
index a1ac22272..447499f05 100644
--- a/tests/unit/resizable/resizable_core.js
+++ b/tests/unit/resizable/resizable_core.js
@@ -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() {
diff --git a/tests/unit/resizable/resizable_events.js b/tests/unit/resizable/resizable_events.js
index d7793ff2f..14de76da6 100644
--- a/tests/unit/resizable/resizable_events.js
+++ b/tests/unit/resizable/resizable_events.js
@@ -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);
diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js
index fba9216e1..a27a140b2 100644
--- a/ui/jquery.ui.resizable.js
+++ b/ui/jquery.ui.resizable.js
@@ -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;
},
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-28 16:30:49 +0000