Resizable: Implement setOption for handles

Fixes #3423 Closes gh-1666
jquery · Mar 30, 2016 · 623b64eefc36ac841fde1e33db15903066cef94c · 623b64e
1 parent a1905e2
commit 623b64eefc36ac841fde1e33db15903066cef94c
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 54 deletions.
diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js
@@ -410,6 +410,33 @@ test( "zIndex, applied to all handles", function() {
 	} );
 } );
 
+test( "setOption handles", function() {
+	expect( 11 );
+
+	var target = $( "<div></div>" ).resizable();
+
+	function checkHandles( expectedHandles ) {
+		expectedHandles = expectedHandles.map( function( value ) {
+			return ".ui-resizable-" + value;
+		} );
+
+		var handles = target.find( ".ui-resizable-handle" );
+
+		equal( handles.length, expectedHandles.length, "Correct number of handles found" );
+		$.each( expectedHandles, function( index, handleClass ) {
+			equal( handles.filter( handleClass ).length, 1, "Found " + handleClass );
+		} );
+	}
+
+	checkHandles( [ "e", "s", "se" ] );
+
+	target.resizable( "option", "handles", "n, w, nw" );
+	checkHandles( [ "n", "w", "nw" ] );
+
+	target.resizable( "option", "handles", "s, w" );
+	checkHandles( [ "s", "w" ] );
+} );
+
 test( "alsoResize + containment", function() {
 	expect( 4 );
 	var other = $( "<div>" )

diff --git 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 ) {