Resizable: Add classes option

arschmitz · arschmitz · commit f0ae0410a6b2 · 2015-01-01T16:39:34.000-05:00
diff --git a/tests/unit/resizable/resizable_common.js b/tests/unit/resizable/resizable_common.js
@@ -7,6 +7,7 @@ TestHelpers.commonWidgetTests( "resizable", {
 		aspectRatio: false,
 		autoHide: false,
 		cancel: "input,textarea,button,select,option",
+		classes: {},
 		containment: false,
 		delay: 0,
 		disabled: false,
diff --git a/ui/resizable.js b/ui/resizable.js
@@ -35,6 +35,7 @@ $.widget("ui.resizable", $.ui.mouse, {
 		animateEasing: "swing",
 		aspectRatio: false,
 		autoHide: false,
+		classes: {},
 		containment: false,
 		ghost: false,
 		grid: false,
@@ -88,7 +89,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),
@@ -173,13 +174,14 @@ $.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._addClass( axis, null, "ui-icon ui-icon-gripsmall-diagonal-se" );
 				}
 
 				this.handles[handle] = ".ui-resizable-" + handle;
@@ -241,21 +243,21 @@ $.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( $( this ), "ui-resizable-autohide" );
 					that._handles.show();
 				})
 				.mouseleave(function() {
 					if (o.disabled) {
 						return;
 					}
 					if (!that.resizing) {
-						$(this).addClass("ui-resizable-autohide");
+						that._addClass( $( this ), "ui-resizable-autohide" );
 						that._handles.hide();
 					}
 				});
@@ -272,7 +274,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")
@@ -366,7 +367,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;
 	},
@@ -450,7 +451,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);
 
@@ -679,7 +680,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",
@@ -1072,9 +1074,9 @@ $.ui.plugin.add("resizable", "ghost", {
 				margin: 0,
 				left: 0,
 				top: 0
-			})
-			.addClass("ui-resizable-ghost")
-			.addClass(typeof o.ghost === "string" ? o.ghost : "");
+			});
+		this._addClass( that.ghost, "ui-resizable-ghost",
+			typeof o.ghost === "string" ? o.ghost : "" );
 
 		that.ghost.appendTo(that.helper);
 
