diff --git a/.gitignore b/.gitignore
index a8b8bc7ce37..be8085de342 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
dist
node_modules
-.sizecache.json
\ No newline at end of file
+.sizecache.json
diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js
index 2d44eb8ee8a..9c338dfa807 100644
--- a/tests/unit/resizable/options.js
+++ b/tests/unit/resizable/options.js
@@ -410,6 +410,46 @@ test( "zIndex, applied to all handles", function() {
} );
} );
+test( "setOption handles", function() {
+ expect( 8 );
+
+ var target = $( "
" ).resizable(),
+ handles = { "ui-resizable-e": false, "ui-resizable-s": false, "ui-resizable-se": false };
+
+ function checkHandles( handle, handles ) {
+ var found = false,
+ key,
+ $handle = $( handle );
+ for ( key in handles ) {
+ if ( handles.hasOwnProperty( key ) ) {
+ if ( $handle.hasClass( key ) ) {
+ found = true;
+ break;
+ }
+ }
+ }
+ ok ( found && !handles[ key ], "Checking whether " + key + " handle was rendered and was not rendered twice" );
+ handles[ key ] = found;
+ found = false;
+ }
+
+ target.children( ".ui-resizable-handle" ).each( function( index, handle ) {
+ checkHandles( handle, handles );
+ } );
+
+ target.resizable( "option", "handles", "n, w, nw" );
+ handles = { "ui-resizable-n": false, "ui-resizable-w": false, "ui-resizable-nw": false };
+ target.children( ".ui-resizable-handle" ).each( function( index, handle ) {
+ checkHandles( handle, handles );
+ } );
+
+ target.resizable( "option", "handles", "s, w" );
+ handles = { "ui-resizable-s": false, "ui-resizable-w": false };
+ target.children( ".ui-resizable-handle" ).each( function( index, handle ) {
+ checkHandles( handle, handles );
+ } );
+} );
+
test( "alsoResize + containment", function() {
expect( 4 );
var other = $( "" )
diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js
index 88ad4118064..664c6bfa3a6 100644
--- a/ui/widgets/resizable.js
+++ b/ui/widgets/resizable.js
@@ -99,9 +99,9 @@ $.widget( "ui.resizable", $.ui.mouse, {
_create: function() {
- var n, i, handle, axis, hname, margins,
- that = this,
- o = this.options;
+ var margins,
+ o = this.options,
+ that = this;
this._addClass( "ui-resizable" );
$.extend( this, {
@@ -159,6 +159,80 @@ $.widget( "ui.resizable", $.ui.mouse, {
this._proportionallyResize();
}
+ this._setupHandles();
+
+ if ( o.autoHide ) {
+ $( this.element )
+ .on( "mouseenter", function() {
+ if ( o.disabled ) {
+ return;
+ }
+ that._removeClass( "ui-resizable-autohide" );
+ that._handles.show();
+ } )
+ .on( "mouseleave", function() {
+ if ( o.disabled ) {
+ return;
+ }
+ if ( !that.resizing ) {
+ that._addClass( "ui-resizable-autohide" );
+ that._handles.hide();
+ }
+ } );
+ }
+
+ this._mouseInit();
+ },
+
+ _destroy: function() {
+
+ this._mouseDestroy();
+
+ var wrapper,
+ _destroy = function( exp ) {
+ $( exp )
+ .removeData( "resizable" )
+ .removeData( "ui-resizable" )
+ .off( ".resizable" )
+ .find( ".ui-resizable-handle" )
+ .remove();
+ };
+
+ // TODO: Unwrap at same DOM position
+ if ( this.elementIsWrapper ) {
+ _destroy( this.element );
+ wrapper = this.element;
+ this.originalElement.css( {
+ position: wrapper.css( "position" ),
+ width: wrapper.outerWidth(),
+ height: wrapper.outerHeight(),
+ top: wrapper.css( "top" ),
+ left: wrapper.css( "left" )
+ } ).insertAfter( wrapper );
+ wrapper.remove();
+ }
+
+ this.originalElement.css( "resize", this.originalResizeStyle );
+ _destroy( this.originalElement );
+
+ return this;
+ },
+
+ _setOption: function( key, value ) {
+ this._super( key, value );
+
+ switch ( key ) {
+ case "handles":
+ this._removeHandles();
+ this._setupHandles();
+ break;
+ default:
+ break;
+ }
+ },
+
+ _setupHandles: function() {
+ var o = this.options, handle, i, n, hname, axis, that = this;
this.handles = o.handles ||
( !$( ".ui-resizable-handle", this.element ).length ?
"e,s,se" : {
@@ -250,60 +324,11 @@ $.widget( "ui.resizable", $.ui.mouse, {
if ( o.autoHide ) {
this._handles.hide();
this._addClass( "ui-resizable-autohide" );
- $( this.element )
- .on( "mouseenter", function() {
- if ( o.disabled ) {
- return;
- }
- that._removeClass( "ui-resizable-autohide" );
- that._handles.show();
- } )
- .on( "mouseleave", function() {
- if ( o.disabled ) {
- return;
- }
- if ( !that.resizing ) {
- that._addClass( "ui-resizable-autohide" );
- that._handles.hide();
- }
- } );
}
-
- this._mouseInit();
},
- _destroy: function() {
-
- this._mouseDestroy();
-
- var wrapper,
- _destroy = function( exp ) {
- $( exp )
- .removeData( "resizable" )
- .removeData( "ui-resizable" )
- .off( ".resizable" )
- .find( ".ui-resizable-handle" )
- .remove();
- };
-
- // TODO: Unwrap at same DOM position
- if ( this.elementIsWrapper ) {
- _destroy( this.element );
- wrapper = this.element;
- this.originalElement.css( {
- position: wrapper.css( "position" ),
- width: wrapper.outerWidth(),
- height: wrapper.outerHeight(),
- top: wrapper.css( "top" ),
- left: wrapper.css( "left" )
- } ).insertAfter( wrapper );
- wrapper.remove();
- }
-
- this.originalElement.css( "resize", this.originalResizeStyle );
- _destroy( this.originalElement );
-
- return this;
+ _removeHandles: function() {
+ this._handles.remove();
},
_mouseCapture: function( event ) {