Skip to content

Commit 3974b55

Browse files
erombamikesherov
eromba
authored and
mikesherov
committed
Resizable: Update CSS dimensions selectively. Fixes #7605 - Setting width 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
1 parent 902df84 commit 3974b55

File tree

4 files changed

+225
-22
lines changed

4 files changed

+225
-22
lines changed

‎tests/unit/resizable/resizable.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,18 @@
2929
<script src="resizable_test_helpers.js"></script>
3030

3131
<script src="../swarminject.js"></script>
32+
33+
<style>
34+
#resizable1 {
35+
background: green;
36+
height: 100px;
37+
width: 100px;
38+
}
39+
#resizable2 {
40+
height: 100px;
41+
width: 100px;
42+
}
43+
</style>
3244
</head>
3345
<body>
3446

@@ -39,8 +51,8 @@ <h2 id="qunit-userAgent"></h2>
3951
<ol id="qunit-tests"></ol>
4052
<div id="qunit-fixture">
4153

42-
<div id="resizable1" style="background: green; width: 100px; height: 100px;">I'm a resizable.</div>
43-
<img src="images/test.jpg" id="resizable2" style="width: 100px; height: 100px;" alt="solid gray">
54+
<div id="resizable1">I'm a resizable.</div>
55+
<img src="images/test.jpg" id="resizable2" alt="solid gray">
4456

4557
</div>
4658
</body>

‎tests/unit/resizable/resizable_core.js

+28-7
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ test("element types", function() {
2626
*/
2727

2828
test("n", function() {
29-
expect(2);
29+
expect(4);
3030

3131
var handle = '.ui-resizable-n', target = $('#resizable1').resizable({ handles: 'all' });
3232

@@ -35,10 +35,13 @@ test("n", function() {
3535

3636
TestHelpers.resizable.drag(handle, 0, 50);
3737
equal( target.height(), 100, "compare height" );
38+
39+
equal( target[0].style.left, "", "left should not be modified" );
40+
equal( target[0].style.width, "", "width should not be modified" );
3841
});
3942

4043
test("s", function() {
41-
expect(2);
44+
expect(5);
4245

4346
var handle = '.ui-resizable-s', target = $('#resizable1').resizable({ handles: 'all' });
4447

@@ -47,10 +50,14 @@ test("s", function() {
4750

4851
TestHelpers.resizable.drag(handle, 0, -50);
4952
equal( target.height(), 100, "compare height" );
53+
54+
equal( target[0].style.top, "", "top should not be modified" );
55+
equal( target[0].style.left, "", "left should not be modified" );
56+
equal( target[0].style.width, "", "width should not be modified" );
5057
});
5158

5259
test("e", function() {
53-
expect(2);
60+
expect(5);
5461

5562
var handle = '.ui-resizable-e', target = $('#resizable1').resizable({ handles: 'all' });
5663

@@ -59,10 +66,14 @@ test("e", function() {
5966

6067
TestHelpers.resizable.drag(handle, -50);
6168
equal( target.width(), 100, "compare width" );
69+
70+
equal( target[0].style.height, "", "height should not be modified" );
71+
equal( target[0].style.top, "", "top should not be modified" );
72+
equal( target[0].style.left, "", "left should not be modified" );
6273
});
6374

6475
test("w", function() {
65-
expect(2);
76+
expect(4);
6677

6778
var handle = '.ui-resizable-w', target = $('#resizable1').resizable({ handles: 'all' });
6879

@@ -71,10 +82,13 @@ test("w", function() {
7182

7283
TestHelpers.resizable.drag(handle, 50);
7384
equal( target.width(), 100, "compare width" );
85+
86+
equal( target[0].style.height, "", "height should not be modified" );
87+
equal( target[0].style.top, "", "top should not be modified" );
7488
});
7589

7690
test("ne", function() {
77-
expect(4);
91+
expect(5);
7892

7993
var handle = '.ui-resizable-ne', target = $('#resizable1').css({ overflow: 'hidden' }).resizable({ handles: 'all' });
8094

@@ -85,10 +99,12 @@ test("ne", function() {
8599
TestHelpers.resizable.drag(handle, 50, 50);
86100
equal( target.width(), 100, "compare width" );
87101
equal( target.height(), 100, "compare height" );
102+
103+
equal( target[0].style.left, "", "left should not be modified" );
88104
});
89105

90106
test("se", function() {
91-
expect(4);
107+
expect(6);
92108

93109
var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all' });
94110

@@ -99,10 +115,13 @@ test("se", function() {
99115
TestHelpers.resizable.drag(handle, -50, -50);
100116
equal( target.width(), 100, "compare width" );
101117
equal( target.height(), 100, "compare height" );
118+
119+
equal( target[0].style.top, "", "top should not be modified" );
120+
equal( target[0].style.left, "", "left should not be modified" );
102121
});
103122

104123
test("sw", function() {
105-
expect(4);
124+
expect(5);
106125

107126
var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ handles: 'all' });
108127

@@ -113,6 +132,8 @@ test("sw", function() {
113132
TestHelpers.resizable.drag(handle, 50, 50);
114133
equal( target.width(), 100, "compare width" );
115134
equal( target.height(), 100, "compare height" );
135+
136+
equal( target[0].style.top, "", "top should not be modified" );
116137
});
117138

118139
test("nw", function() {

‎tests/unit/resizable/resizable_events.js

+160-3
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,165 @@
55

66
module("resizable: events");
77

8-
// this is here to make JSHint pass "unused", and we don't want to
9-
// remove the parameter for when we finally implement
10-
$.noop();
8+
test("start", function() {
9+
10+
expect(5);
11+
12+
var count = 0,
13+
handle = ".ui-resizable-se";
14+
15+
$("#resizable1").resizable({
16+
handles: "all",
17+
start: function(event, ui) {
18+
equal( ui.size.width, 100, "compare width" );
19+
equal( ui.size.height, 100, "compare height" );
20+
equal( ui.originalSize.width, 100, "compare original width" );
21+
equal( ui.originalSize.height, 100, "compare original height" );
22+
count++;
23+
}
24+
});
25+
26+
TestHelpers.resizable.drag(handle, 50, 50);
27+
28+
equal(count, 1, "start callback should happen exactly once");
29+
30+
});
31+
32+
test("resize", function() {
33+
34+
expect(9);
35+
36+
var count = 0,
37+
handle = ".ui-resizable-se";
38+
39+
$("#resizable1").resizable({
40+
handles: "all",
41+
resize: function(event, ui) {
42+
if (count === 0) {
43+
equal( ui.size.width, 101, "compare width" );
44+
equal( ui.size.height, 101, "compare height" );
45+
equal( ui.originalSize.width, 100, "compare original width" );
46+
equal( ui.originalSize.height, 100, "compare original height" );
47+
} else {
48+
equal( ui.size.width, 150, "compare width" );
49+
equal( ui.size.height, 150, "compare height" );
50+
equal( ui.originalSize.width, 100, "compare original width" );
51+
equal( ui.originalSize.height, 100, "compare original height" );
52+
}
53+
count++;
54+
}
55+
});
56+
57+
TestHelpers.resizable.drag(handle, 50, 50);
58+
59+
equal(count, 2, "resize callback should happen exactly once per size adjustment");
60+
61+
});
62+
63+
test("resize (min/max dimensions)", function() {
64+
65+
expect(5);
66+
67+
var count = 0,
68+
handle = ".ui-resizable-se";
69+
70+
$("#resizable1").resizable({
71+
handles: "all",
72+
minWidth: 60,
73+
minHeight: 60,
74+
maxWidth: 100,
75+
maxHeight: 100,
76+
resize: function(event, ui) {
77+
equal( ui.size.width, 60, "compare width" );
78+
equal( ui.size.height, 60, "compare height" );
79+
equal( ui.originalSize.width, 100, "compare original width" );
80+
equal( ui.originalSize.height, 100, "compare original height" );
81+
count++;
82+
}
83+
});
84+
85+
TestHelpers.resizable.drag(handle, -50, -50);
86+
87+
equal(count, 1, "resize callback should happen exactly once per size adjustment");
88+
89+
});
90+
91+
test("resize (containment)", function() {
92+
93+
expect(5);
94+
95+
var count = 0,
96+
handle = ".ui-resizable-se",
97+
container = $("#resizable1").wrap("<div>").parent().css({
98+
height: "100px",
99+
width: "100px"
100+
});
101+
102+
$("#resizable1").resizable({
103+
handles: "all",
104+
containment: container,
105+
resize: function(event, ui) {
106+
equal( ui.size.width, 50, "compare width" );
107+
equal( ui.size.height, 50, "compare height" );
108+
equal( ui.originalSize.width, 100, "compare original width" );
109+
equal( ui.originalSize.height, 100, "compare original height" );
110+
count++;
111+
}
112+
});
113+
114+
TestHelpers.resizable.drag(handle, -50, -50);
115+
116+
equal(count, 1, "resize callback should happen exactly once per size adjustment");
117+
118+
});
119+
120+
test("resize (grid)", function() {
121+
122+
expect(5);
123+
124+
var count = 0,
125+
handle = ".ui-resizable-se";
126+
127+
$("#resizable1").resizable({
128+
handles: "all",
129+
grid: 50,
130+
resize: function(event, ui) {
131+
equal( ui.size.width, 150, "compare width" );
132+
equal( ui.size.height, 150, "compare height" );
133+
equal( ui.originalSize.width, 100, "compare original width" );
134+
equal( ui.originalSize.height, 100, "compare original height" );
135+
count++;
136+
}
137+
});
138+
139+
TestHelpers.resizable.drag(handle, 50, 50);
140+
141+
equal(count, 1, "resize callback should happen exactly once per grid-unit size adjustment");
142+
143+
});
144+
145+
test("stop", function() {
146+
147+
expect(5);
148+
149+
var count = 0,
150+
handle = ".ui-resizable-se";
151+
152+
$("#resizable1").resizable({
153+
handles: "all",
154+
stop: function(event, ui) {
155+
equal( ui.size.width, 150, "compare width" );
156+
equal( ui.size.height, 150, "compare height" );
157+
equal( ui.originalSize.width, 100, "compare original width" );
158+
equal( ui.originalSize.height, 100, "compare original height" );
159+
count++;
160+
}
161+
});
162+
163+
TestHelpers.resizable.drag(handle, 50, 50);
164+
165+
equal(count, 1, "stop callback should happen exactly once");
166+
167+
});
11168

12169
})(jQuery);

‎ui/jquery.ui.resizable.js

+23-10
Original file line numberDiff line numberDiff line change
@@ -286,8 +286,10 @@ $.widget("ui.resizable", $.ui.mouse, {
286286
_mouseDrag: function(event) {
287287

288288
//Increase performance, avoid regex
289-
var el = this.helper,
290-
smp = this.originalMousePosition, a = this.axis;
289+
var el = this.helper, props = {},
290+
smp = this.originalMousePosition, a = this.axis,
291+
prevTop = this.position.top, prevLeft = this.position.left,
292+
prevWidth = this.size.width, prevHeight = this.size.height;
291293

292294
var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0;
293295
var trigger = this._change[a];
@@ -303,21 +305,32 @@ $.widget("ui.resizable", $.ui.mouse, {
303305

304306
data = this._respectSize(data, event);
305307

308+
this._updateCache(data);
309+
306310
// plugins callbacks need to be called first
307311
this._propagate("resize", event);
308312

309-
el.css({
310-
top: this.position.top + "px", left: this.position.left + "px",
311-
width: this.size.width + "px", height: this.size.height + "px"
312-
});
313+
if (this.position.top !== prevTop) {
314+
props.top = this.position.top + "px";
315+
}
316+
if (this.position.left !== prevLeft) {
317+
props.left = this.position.left + "px";
318+
}
319+
if (this.size.width !== prevWidth) {
320+
props.width = this.size.width + "px";
321+
}
322+
if (this.size.height !== prevHeight) {
323+
props.height = this.size.height + "px";
324+
}
325+
el.css(props);
313326

314327
if (!this._helper && this._proportionallyResizeElements.length)
315328
this._proportionallyResize();
316329

317-
this._updateCache(data);
318-
319-
// calling the user callback at the end
320-
this._trigger('resize', event, this.ui());
330+
// Call the user callback if the element was resized
331+
if ( ! $.isEmptyObject(props) ) {
332+
this._trigger('resize', event, this.ui());
333+
}
321334

322335
return false;
323336
},

0 commit comments

Comments
 (0)