From 3974b55ba5078799df818c78d9273e11d9796ff3 Mon Sep 17 00:00:00 2001 From: Ethan Romba Date: Tue, 10 Jul 2012 01:02:25 -0700 Subject: [PATCH] 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 --- tests/unit/resizable/resizable.html | 16 ++- tests/unit/resizable/resizable_core.js | 35 ++++- tests/unit/resizable/resizable_events.js | 163 ++++++++++++++++++++++- ui/jquery.ui.resizable.js | 33 +++-- 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 @@ + + @@ -39,8 +51,8 @@
    -
    I'm a resizable.
    -solid gray +
    I'm a resizable.
    +solid gray
    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("
    ").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; }, -- 2.39.5