Resizable: Modified to allow jquery objects as handles

Custom handlers did not work as jquery objects (outside the resizable element)

Fixes #9658
Closes gh-1445

diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html
index 5668c909a226ec3ef1e2c6d4ef2563794ad39414..a44346e7cbaaaa15ab1947d5f89531b0545a96a6 100644 (file)
--- a/tests/unit/resizable/resizable.html
+++ b/tests/unit/resizable/resizable.html
@@ -69,6 +69,7 @@
 
 <div id="container">
        <div id="resizable1">I'm a resizable.</div>
+       <div id="resizer1" class="ui-resizable-handle ui-resizable-s"></div>
 </div>
 
 <div id="container2">

diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js
index cacebf05c8df055f7bee1a38cfb9f95b2915745a..a2c95790b58de258ff2a2d3ab59d767cad80df8b 100644 (file)
--- a/tests/unit/resizable/resizable_options.js
+++ b/tests/unit/resizable/resizable_options.js
@@ -374,6 +374,35 @@ test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 1
        equal( target.height(), 100, "compare maxHeight" );
 });
 
+
+test( "custom handles { handles: { 's': $('#resizer1'), containment: 'parent' }", function () {
+       expect( 2 );
+
+       var handle = "#resizer1",
+               target = $( "#resizable1" ).resizable({ handles: { "s": $( "#resizer1" ) }, containment: "parent" });
+
+       TestHelpers.resizable.drag( handle, 0, 70 );
+       equal( target.height(), 170, "compare height" );
+
+       TestHelpers.resizable.drag( handle, 0, -70 );
+       equal( target.height(), 100, "compare height" );
+});
+
+
+test( "custom handles { handles: { 's': $('#resizer1')[0], containment: 'parent' }", function () {
+       expect( 2 );
+
+       var handle = "#resizer1",
+               target = $( "#resizable1" ).resizable({ handles: { "s": $( "#resizer1" )[ 0 ] }, containment: "parent" });
+
+       TestHelpers.resizable.drag( handle, 0, 70 );
+       equal( target.height(), 170, "compare height" );
+
+       TestHelpers.resizable.drag( handle, 0, -70 );
+       equal( target.height(), 100, "compare height" );
+});
+
+
 test("zIndex, applied to all handles", function() {
        expect(8);
 

diff --git a/ui/resizable.js b/ui/resizable.js
index d0d500cd156081aed7826c0d151d804242115d20..c4bc36529986ebf2793dfd34a950367e5bb77038 100644 (file)
--- a/ui/resizable.js
+++ b/ui/resizable.js
@@ -168,7 +168,8 @@ $.widget("ui.resizable", $.ui.mouse, {
                                        nw: ".ui-resizable-nw"
                                } );
 
-               if (this.handles.constructor === String) {
+               this._handles = $();
+               if ( this.handles.constructor === String ) {
 
                        if ( this.handles === "all") {
                                this.handles = "n,e,s,w,se,sw,ne,nw";
@@ -206,6 +207,9 @@ $.widget("ui.resizable", $.ui.mouse, {
 
                                if (this.handles[i].constructor === String) {
                                        this.handles[i] = this.element.children( this.handles[ i ] ).first().show();
+                               } else if ( this.handles[ i ].jquery || this.handles[ i ].nodeType ) {
+                                       this.handles[ i ] = $( this.handles[ i ] );
+                                       this._on( this.handles[ i ], { "mousedown": that._mouseDown });
                                }
 
                                if (this.elementIsWrapper && this.originalElement[0].nodeName.match(/^(textarea|input|select|button)$/i)) {
@@ -222,21 +226,17 @@ $.widget("ui.resizable", $.ui.mouse, {
                                        target.css(padPos, padWrapper);
 
                                        this._proportionallyResize();
-
                                }
 
-                               // TODO: What's that good for? There's not anything to be executed left
-                               if (!$(this.handles[i]).length) {
-                                       continue;
-                               }
+                               this._handles = this._handles.add( this.handles[ i ] );
                        }
                };
 
                // TODO: make renderAxis a prototype function
                this._renderAxis(this.element);
 
-               this._handles = $(".ui-resizable-handle", this.element)
-                       .disableSelection();
+               this._handles = this._handles.add( this.element.find( ".ui-resizable-handle" ) );
+               this._handles.disableSelection();
 
                this._handles.mouseover(function() {
                        if (!that.resizing) {
@@ -270,7 +270,6 @@ $.widget("ui.resizable", $.ui.mouse, {
                }
 
                this._mouseInit();
-
        },
 
        _destroy: function() {