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
(cherry picked from commit 18e301f4e2)
This commit is contained in:
Patricia Juarez 2013-11-14 13:40:57 +01:00 committed by Scott González
parent de75b40835
commit 65f31c2ead
3 changed files with 38 additions and 9 deletions

View File

@ -69,6 +69,7 @@
<div id="container"> <div id="container">
<div id="resizable1">I'm a resizable.</div> <div id="resizable1">I'm a resizable.</div>
<div id="resizer1" class="ui-resizable-handle ui-resizable-s"></div>
</div> </div>
<div id="container2"> <div id="container2">

View File

@ -375,6 +375,35 @@ test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 1
equal( target.height(), 100, "compare maxHeight" ); 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() { test("zIndex, applied to all handles", function() {
expect(8); expect(8);

View File

@ -160,7 +160,8 @@ $.widget("ui.resizable", $.ui.mouse, {
nw: ".ui-resizable-nw" nw: ".ui-resizable-nw"
} ); } );
if (this.handles.constructor === String) { this._handles = $();
if ( this.handles.constructor === String ) {
if ( this.handles === "all") { if ( this.handles === "all") {
this.handles = "n,e,s,w,se,sw,ne,nw"; this.handles = "n,e,s,w,se,sw,ne,nw";
@ -198,6 +199,9 @@ $.widget("ui.resizable", $.ui.mouse, {
if (this.handles[i].constructor === String) { if (this.handles[i].constructor === String) {
this.handles[i] = this.element.children( this.handles[ i ] ).first().show(); 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)) { if (this.elementIsWrapper && this.originalElement[0].nodeName.match(/^(textarea|input|select|button)$/i)) {
@ -214,21 +218,17 @@ $.widget("ui.resizable", $.ui.mouse, {
target.css(padPos, padWrapper); target.css(padPos, padWrapper);
this._proportionallyResize(); this._proportionallyResize();
} }
// TODO: What's that good for? There's not anything to be executed left this._handles = this._handles.add( this.handles[ i ] );
if (!$(this.handles[i]).length) {
continue;
}
} }
}; };
// TODO: make renderAxis a prototype function // TODO: make renderAxis a prototype function
this._renderAxis(this.element); this._renderAxis(this.element);
this._handles = $(".ui-resizable-handle", this.element) this._handles = this._handles.add( this.element.find( ".ui-resizable-handle" ) );
.disableSelection(); this._handles.disableSelection();
this._handles.mouseover(function() { this._handles.mouseover(function() {
if (!that.resizing) { if (!that.resizing) {
@ -262,7 +262,6 @@ $.widget("ui.resizable", $.ui.mouse, {
} }
this._mouseInit(); this._mouseInit();
}, },
_destroy: function() { _destroy: function() {