Resizable: Add classes option

Ref #7053
Ref gh-1411

2 files changed, 37 insertions, 29 deletions

diff --git a/tests/unit/resizable/resizable_common.js b/tests/unit/resizable/resizable_common.js
index a68103101..075c78ddb 100644
--- a/tests/unit/resizable/resizable_common.js
+++ b/tests/unit/resizable/resizable_common.js
@@ -7,7 +7,9 @@ TestHelpers.commonWidgetTests( "resizable", {
 		aspectRatio: false,
 		autoHide: false,
 		cancel: "input,textarea,button,select,option",
-		classes: {},
+		classes: {
+			"ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se"
+		},
 		containment: false,
 		delay: 0,
 		disabled: false,
diff --git a/ui/resizable.js b/ui/resizable.js
index 09efc9a37..7aadd490c 100644
--- a/ui/resizable.js
+++ b/ui/resizable.js
@@ -43,6 +43,9 @@ $.widget("ui.resizable", $.ui.mouse, {
 		animateEasing: "swing",
 		aspectRatio: false,
 		autoHide: false,
+		classes: {
+			"ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se"
+		},
 		containment: false,
 		ghost: false,
 		grid: false,
@@ -96,7 +99,7 @@ $.widget("ui.resizable", $.ui.mouse, {
 		var n, i, handle, axis, hname,
 			that = this,
 			o = this.options;
-		this.element.addClass("ui-resizable");
+		this._addClass( "ui-resizable" );
 
 		$.extend(this, {
 			_aspectRatio: !!(o.aspectRatio),
@@ -182,15 +185,11 @@ $.widget("ui.resizable", $.ui.mouse, {
 
 				handle = $.trim(n[i]);
 				hname = "ui-resizable-" + handle;
-				axis = $("<div class='ui-resizable-handle " + hname + "'></div>");
+				axis = $("<div>");
+				this._addClass( axis, "ui-resizable-handle " + hname );
 
 				axis.css({ zIndex: o.zIndex });
 
-				// TODO : What's going on here?
-				if ("se" === handle) {
-					axis.addClass("ui-icon ui-icon-gripsmall-diagonal-se");
-				}
-
 				this.handles[handle] = ".ui-resizable-" + handle;
 				this.element.append(axis);
 			}
@@ -249,13 +248,13 @@ $.widget("ui.resizable", $.ui.mouse, {
 
 		if (o.autoHide) {
 			this._handles.hide();
+			this._addClass( "ui-resizable-autohide" );
 			$(this.element)
-				.addClass("ui-resizable-autohide")
 				.mouseenter(function() {
 					if (o.disabled) {
 						return;
 					}
-					$(this).removeClass("ui-resizable-autohide");
+					that._removeClass( "ui-resizable-autohide" );
 					that._handles.show();
 				})
 				.mouseleave(function() {
@@ -263,7 +262,7 @@ $.widget("ui.resizable", $.ui.mouse, {
 						return;
 					}
 					if (!that.resizing) {
-						$(this).addClass("ui-resizable-autohide");
+						that._addClass( "ui-resizable-autohide" );
 						that._handles.hide();
 					}
 				});
@@ -279,7 +278,6 @@ $.widget("ui.resizable", $.ui.mouse, {
 		var wrapper,
 			_destroy = function(exp) {
 				$(exp)
-					.removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing")
 					.removeData("resizable")
 					.removeData("ui-resizable")
 					.unbind(".resizable")
@@ -373,7 +371,7 @@ $.widget("ui.resizable", $.ui.mouse, {
 		cursor = $(".ui-resizable-" + this.axis).css("cursor");
 		$("body").css("cursor", cursor === "auto" ? this.axis + "-resize" : cursor);
 
-		el.addClass("ui-resizable-resizing");
+		this._addClass( "ui-resizable-resizing" );
 		this._propagate("start", event);
 		return true;
 	},
@@ -457,7 +455,7 @@ $.widget("ui.resizable", $.ui.mouse, {
 
 		$("body").css("cursor", "auto");
 
-		this.element.removeClass("ui-resizable-resizing");
+		this._removeClass( "ui-resizable-resizing" );
 
 		this._propagate("stop", event);
 
@@ -686,7 +684,8 @@ $.widget("ui.resizable", $.ui.mouse, {
 
 			this.helper = this.helper || $("<div style='overflow:hidden;'></div>");
 
-			this.helper.addClass(this._helper).css({
+			this._addClass( this.helper, this._helper );
+			this.helper.css({
 				width: this.element.outerWidth() - 1,
 				height: this.element.outerHeight() - 1,
 				position: "absolute",
@@ -1040,22 +1039,29 @@ $.ui.plugin.add("resizable", "ghost", {
 
 	start: function() {
 
-		var that = $(this).resizable( "instance" ), o = that.options, cs = that.size;
+		var that = $(this).resizable( "instance" ), cs = that.size;
 
 		that.ghost = that.originalElement.clone();
-		that.ghost
-			.css({
-				opacity: 0.25,
-				display: "block",
-				position: "relative",
-				height: cs.height,
-				width: cs.width,
-				margin: 0,
-				left: 0,
-				top: 0
-			})
-			.addClass("ui-resizable-ghost")
-			.addClass(typeof o.ghost === "string" ? o.ghost : "");
+		that.ghost.css({
+			opacity: 0.25,
+			display: "block",
+			position: "relative",
+			height: cs.height,
+			width: cs.width,
+			margin: 0,
+			left: 0,
+			top: 0
+		});
+
+		that._addClass( that.ghost, "ui-resizable-ghost" );
+
+		// DEPRECATED
+		// TODO: remove after 1.12
+		if ( $.uiBackCompat !== false && typeof that.options.ghost === "string" ) {
+
+			// Ghost option
+			that.ghost.addClass( this.options.ghost );
+		}
 
 		that.ghost.appendTo(that.helper);