Permalink
Browse files

Resizable: Update CSS dimensions selectively. Fixed #7605 - Setting w…

…idth

and height when only one is changing
  • Loading branch information...
1 parent a79d09a commit fc6e96b37fdee42720d917a371552b6f2b74ed16 @eromba committed Jul 10, 2012
Showing with 61 additions and 17 deletions.
  1. +14 −2 tests/unit/resizable/resizable.html
  2. +29 −8 tests/unit/resizable/resizable_core.js
  3. +18 −7 ui/jquery.ui.resizable.js
@@ -38,6 +38,18 @@
}
</script>
<script src="../swarminject.js"></script>
+
+ <style>
+ #resizable1 {
+ background: green;
+ height: 100px;
+ width: 100px;
+ }
+ #resizable2 {
+ height: 100px;
+ width: 100px;
+ }
+ </style>
</head>
<body>
@@ -48,8 +60,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>
@@ -42,7 +42,7 @@ test("element types", function() {
*/
test("n", function() {
- expect(2);
+ expect(4);
var handle = '.ui-resizable-n', target = $('#resizable1').resizable({ handles: 'all' });
@@ -51,10 +51,13 @@ test("n", function() {
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' });
@@ -63,22 +66,30 @@ test("s", function() {
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' });
drag(handle, 50);
- equal( target.width(), 150, "compare width");
+ equal( target.width(), 150, "compare width" );
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' });
@@ -87,10 +98,13 @@ test("w", function() {
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' });
@@ -101,10 +115,12 @@ test("ne", function() {
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' });
@@ -115,10 +131,13 @@ test("se", function() {
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' });
@@ -129,6 +148,8 @@ test("sw", function() {
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() {
View
@@ -277,7 +277,9 @@ $.widget("ui.resizable", $.ui.mouse, {
//Increase performance, avoid regex
var el = this.helper, o = this.options, props = {},
- that = this, smp = this.originalMousePosition, a = this.axis;
+ that = this, 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];
@@ -293,19 +295,28 @@ $.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());

0 comments on commit fc6e96b

Please sign in to comment.