Resizable: Add classes option

Ref #7053
Ref gh-1411

diff --git a/tests/unit/resizable/resizable_common.js b/tests/unit/resizable/resizable_common.js
index a68103101bc2bebe88d697f6307a39a1b870e7fe..075c78ddb69bd39f8c84a1fb2bfea6bf324b0de8 100644 (file)
--- 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 09efc9a37d61e21ced18c5479c87d71163a4bae0..7aadd490cbf35ed91b4ef692a65f57ca666b7339 100644 (file)
--- 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);