Selectable: Add classes option

Author: arschmitz

tests/unit/selectable/selectable_common.js

@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests("selectable", {
 		appendTo: "body",
 		autoRefresh: true,
 		cancel: "input,textarea,button,select,option",
+		classes: {},
 		delay: 0,
 		disabled: false,
 		distance: 0,

ui/selectable.js

@@ -35,6 +35,7 @@ return $.widget("ui.selectable", $.ui.mouse, {
 	options: {
 		appendTo: "body",
 		autoRefresh: true,
+		classes: {},
 		distance: 0,
 		filter: "*",
 		tolerance: "touch",
@@ -48,18 +49,17 @@ return $.widget("ui.selectable", $.ui.mouse, {
 		unselecting: null
 	},
 	_create: function() {
-		var selectees,
-			that = this;
+		var that = this;
 
-		this.element.addClass("ui-selectable");
+		this._addClass( "ui-selectable" );
 
 		this.dragged = false;
 
 		// cache selectee children based on filter
 		this.refresh = function() {
-			selectees = $(that.options.filter, that.element[0]);
-			selectees.addClass("ui-selectee");
-			selectees.each(function() {
+			that.selectees = $(that.options.filter, that.element[0]);
+			that._addClass( that.selectees, "ui-selectee" );
+			that.selectees.each(function() {
 				var $this = $(this),
 					pos = $this.offset();
 				$.data(this, "selectable-item", {
@@ -78,19 +78,16 @@ return $.widget("ui.selectable", $.ui.mouse, {
 		};
 		this.refresh();
 
-		this.selectees = selectees.addClass("ui-selectee");
+		this._addClass( this.selectees, "ui-selectee" );
 
 		this._mouseInit();
 
-		this.helper = $("<div class='ui-selectable-helper'></div>");
+		this.helper = $("<div>");
+		this._addClass( this.helper, "ui-selectable-helper" );
 	},
 
 	_destroy: function() {
-		this.selectees
-			.removeClass("ui-selectee")
-			.removeData("selectable-item");
-		this.element
-			.removeClass("ui-selectable ui-selectable-disabled");
+		this.selectees.removeData("selectable-item");
 		this._mouseDestroy();
 	},
 
@@ -125,9 +122,9 @@ return $.widget("ui.selectable", $.ui.mouse, {
 			var selectee = $.data(this, "selectable-item");
 			selectee.startselected = true;
 			if (!event.metaKey && !event.ctrlKey) {
-				selectee.$element.removeClass("ui-selected");
+				that._removeClass( selectee.$element, "ui-selected" );
 				selectee.selected = false;
-				selectee.$element.addClass("ui-unselecting");
+				that._addClass( selectee.$element, "ui-unselecting" );
 				selectee.unselecting = true;
 				// selectable UNSELECTING callback
 				that._trigger("unselecting", event, {
@@ -141,9 +138,8 @@ return $.widget("ui.selectable", $.ui.mouse, {
 				selectee = $.data(this, "selectable-item");
 			if (selectee) {
 				doSelect = (!event.metaKey && !event.ctrlKey) || !selectee.$element.hasClass("ui-selected");
-				selectee.$element
-					.removeClass(doSelect ? "ui-unselecting" : "ui-selected")
-					.addClass(doSelect ? "ui-selecting" : "ui-unselecting");
+				that._removeClass( selectee.$element, doSelect ? "ui-unselecting" : "ui-selected")
+					._addClass( selectee.$element, doSelect ? "ui-selecting" : "ui-unselecting");
 				selectee.unselecting = !doSelect;
 				selectee.selecting = doSelect;
 				selectee.selected = doSelect;
@@ -201,15 +197,15 @@ return $.widget("ui.selectable", $.ui.mouse, {
 			if (hit) {
 				// SELECT
 				if (selectee.selected) {
-					selectee.$element.removeClass("ui-selected");
+					that._removeClass( selectee.$element, "ui-selected" );
 					selectee.selected = false;
 				}
 				if (selectee.unselecting) {
-					selectee.$element.removeClass("ui-unselecting");
+					that._removeClass( selectee.$element, "ui-unselecting" );
 					selectee.unselecting = false;
 				}
 				if (!selectee.selecting) {
-					selectee.$element.addClass("ui-selecting");
+					that._addClass( selectee.$element, "ui-selecting" );
 					selectee.selecting = true;
 					// selectable SELECTING callback
 					that._trigger("selecting", event, {
@@ -220,15 +216,15 @@ return $.widget("ui.selectable", $.ui.mouse, {
 				// UNSELECT
 				if (selectee.selecting) {
 					if ((event.metaKey || event.ctrlKey) && selectee.startselected) {
-						selectee.$element.removeClass("ui-selecting");
+						that._removeClass( selectee.$element, "ui-selecting" );
 						selectee.selecting = false;
-						selectee.$element.addClass("ui-selected");
+						that._addClass( selectee.$element, "ui-selected" );
 						selectee.selected = true;
 					} else {
-						selectee.$element.removeClass("ui-selecting");
+						that._removeClass( selectee.$element, "ui-selecting" );
 						selectee.selecting = false;
 						if (selectee.startselected) {
-							selectee.$element.addClass("ui-unselecting");
+							that._addClass( selectee.$element, "ui-unselecting" );
 							selectee.unselecting = true;
 						}
 						// selectable UNSELECTING callback
@@ -239,10 +235,10 @@ return $.widget("ui.selectable", $.ui.mouse, {
 				}
 				if (selectee.selected) {
 					if (!event.metaKey && !event.ctrlKey && !selectee.startselected) {
-						selectee.$element.removeClass("ui-selected");
+						that._removeClass( selectee.$element, "ui-selected" );
 						selectee.selected = false;
 
-						selectee.$element.addClass("ui-unselecting");
+						that._addClass( selectee.$element, "ui-unselecting" );
 						selectee.unselecting = true;
 						// selectable UNSELECTING callback
 						that._trigger("unselecting", event, {
@@ -263,7 +259,7 @@ return $.widget("ui.selectable", $.ui.mouse, {
 
 		$(".ui-unselecting", this.element[0]).each(function() {
 			var selectee = $.data(this, "selectable-item");
-			selectee.$element.removeClass("ui-unselecting");
+			that._removeClass( selectee.$element, "ui-unselecting" );
 			selectee.unselecting = false;
 			selectee.startselected = false;
 			that._trigger("unselected", event, {
@@ -272,7 +268,8 @@ return $.widget("ui.selectable", $.ui.mouse, {
 		});
 		$(".ui-selecting", this.element[0]).each(function() {
 			var selectee = $.data(this, "selectable-item");
-			selectee.$element.removeClass("ui-selecting").addClass("ui-selected");
+			that._removeClass( selectee.$element, "ui-selecting" )
+				._addClass( selectee.$element, "ui-selected" );
 			selectee.selecting = false;
 			selectee.selected = true;
 			selectee.startselected = true;