Droppable: Add classes option

Ref #7053
Ref gh-1411

demos/droppable/accepted-elements.html

@@ -20,8 +20,10 @@
 		$( "#draggable, #draggable-nonvalid" ).draggable();
 		$( "#droppable" ).droppable({
 			accept: "#draggable",
-			activeClass: "ui-state-hover",
+			classes: {
-			hoverClass: "ui-state-active",
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )

demos/droppable/photo-manager.html

@@ -47,7 +47,9 @@
 		// let the trash be droppable, accepting the gallery items
 		$trash.droppable({
 			accept: "#gallery > li",
-			activeClass: "ui-state-highlight",
+			classes: {
+				"ui-droppable-active": "ui-state-highlight"
+			},
 			drop: function( event, ui ) {
 				deleteImage( ui.draggable );
 			}
@@ -56,7 +58,9 @@
 		// let the gallery be droppable as well, accepting items from the trash
 		$gallery.droppable({
 			accept: "#trash li",
-			activeClass: "custom-state-active",
+			classes: {
+				"ui-droppable-active": "custom-state-active"
+			},
 			drop: function( event, ui ) {
 				recycleImage( ui.draggable );
 			}

demos/droppable/propagation.html

@@ -21,8 +21,10 @@
 		$( "#draggable" ).draggable();
 
 		$( "#droppable, #droppable-inner" ).droppable({
-			activeClass: "ui-state-hover",
+			classes: {
-			hoverClass: "ui-state-active",
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
@@ -34,8 +36,10 @@
 
 		$( "#droppable2, #droppable2-inner" ).droppable({
 			greedy: true,
-			activeClass: "ui-state-hover",
+			classes: {
-			hoverClass: "ui-state-active",
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )

demos/droppable/revert.html

@@ -21,8 +21,10 @@
 		$( "#draggable2" ).draggable({ revert: "invalid" });
 
 		$( "#droppable" ).droppable({
-			activeClass: "ui-state-default",
+			classes: {
-			hoverClass: "ui-state-hover",
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )

demos/droppable/shopping-cart.html

@@ -28,8 +28,10 @@
 			helper: "clone"
 		});
 		$( "#cart ol" ).droppable({
-			activeClass: "ui-state-default",
+			classes: {
-			hoverClass: "ui-state-hover",
+				"ui-droppable-active": "ui-state-active",
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			accept: ":not(.ui-sortable-helper)",
 			drop: function( event, ui ) {
 				$( this ).find( ".placeholder" ).remove();

demos/droppable/visual-feedback.html

@@ -20,7 +20,9 @@
 	$(function() {
 		$( "#draggable" ).draggable();
 		$( "#droppable" ).droppable({
-			hoverClass: "ui-state-hover",
+			classes: {
+				"ui-droppable-hover": "ui-state-hover"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
@@ -32,7 +34,9 @@
 		$( "#draggable2" ).draggable();
 		$( "#droppable2" ).droppable({
 			accept: "#draggable2",
-			activeClass: "ui-state-default",
+			classes: {
+				"ui-droppable-active": "ui-state-default"
+			},
 			drop: function( event, ui ) {
 				$( this )
 					.addClass( "ui-state-highlight" )
@@ -66,7 +70,7 @@
 </div>
 
 <div class="demo-description">
-<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
+<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it).  Set the values of the <code>ui-droppable-hover</code> or <code>ui-droppable-active</code> properties on the <code>classes</code> option to specify the respective classes.</p>
 </div>
 </body>
 </html>

tests/unit/droppable/droppable.html

@@ -5,6 +5,9 @@
 	<title>jQuery UI Droppable Test Suite</title>
 
 	<script src="../../jquery.js"></script>
+	<script>
+	$.uiBackCompat = false;
+	</script>
 	<link rel="stylesheet" href="../../../external/qunit/qunit.css">
 	<script src="../../../external/qunit/qunit.js"></script>
 	<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>

tests/unit/droppable/droppable_common.js

@@ -1,12 +1,10 @@
 TestHelpers.commonWidgetTests( "droppable", {
 	defaults: {
 		accept: "*",
-		activeClass: false,
 		addClasses: true,
 		classes: {},
 		disabled: false,
 		greedy: false,
-		hoverClass: false,
 		scope: "default",
 		tolerance: "intersect",
 

tests/unit/droppable/droppable_common_deprecated.js

@@ -0,0 +1,21 @@
+TestHelpers.commonWidgetTests( "droppable", {
+	defaults: {
+		accept: "*",
+		activeClass: false,
+		addClasses: true,
+		classes: {},
+		disabled: false,
+		greedy: false,
+		hoverClass: false,
+		scope: "default",
+		tolerance: "intersect",
+
+		// callbacks
+		activate: null,
+		create: null,
+		deactivate: null,
+		drop: null,
+		out: null,
+		over: null
+	}
+});

tests/unit/droppable/droppable_deprecated.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Droppable Test Suite</title>
+
+	<script src="../../jquery.js"></script>
+	<link rel="stylesheet" href="../../../external/qunit/qunit.css">
+	<script src="../../../external/qunit/qunit.js"></script>
+	<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
+	<script src="../testsuite.js"></script>
+	<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
+	<script>
+	TestHelpers.loadResources({
+		css: [ "core" ],
+		js: [
+			"ui/core.js",
+			"ui/widget.js",
+			"ui/mouse.js",
+			"ui/draggable.js",
+			"ui/droppable.js"
+		]
+	});
+	</script>
+
+	<script src="droppable_common_deprecated.js"></script>
+	<script src="droppable_core.js"></script>
+	<script src="droppable_events.js"></script>
+	<script src="droppable_methods.js"></script>
+	<script src="droppable_options.js"></script>
+	<script src="droppable_test_helpers.js"></script>
+
+	<script src="../swarminject.js"></script>
+</head>
+<body>
+
+<div id="qunit"></div>
+<div id="qunit-fixture">
+
+<div id="draggable1" style="width: 25px; height: 25px;">Draggable</div>
+<div id="droppable1" style="width: 100px; height: 100px;">Droppable</div>
+<div id="droppable2" style="width: 100px; height: 100px;">Droppable</div>
+<div style='width:1000px;height:1000px;'>&nbsp;</div>
+
+</div>
+</body>
+</html>

ui/droppable.js

@@ -36,10 +36,8 @@ $.widget( "ui.droppable", {
 	widgetEventPrefix: "drop",
 	options: {
 		accept: "*",
-		activeClass: false,
 		addClasses: true,
 		greedy: false,
-		hoverClass: false,
 		scope: "default",
 		tolerance: "intersect",
 
@@ -80,7 +78,7 @@ $.widget( "ui.droppable", {
 
 		this._addToManager( o.scope );
 
-		o.addClasses && this.element.addClass( "ui-droppable" );
+		o.addClasses && this._addClass( "ui-droppable" );
 
 	},
 
@@ -103,8 +101,6 @@ $.widget( "ui.droppable", {
 		var drop = $.ui.ddmanager.droppables[ this.options.scope ];
 
 		this._splice( drop );
-
-		this.element.removeClass( "ui-droppable ui-droppable-disabled" );
 	},
 
 	_setOption: function( key, value ) {
@@ -125,9 +121,8 @@ $.widget( "ui.droppable", {
 
 	_activate: function( event ) {
 		var draggable = $.ui.ddmanager.current;
-		if ( this.options.activeClass ) {
+
-			this.element.addClass( this.options.activeClass );
+		this._addActiveClass();
-		}
 		if ( draggable ){
 			this._trigger( "activate", event, this.ui( draggable ) );
 		}
@@ -135,9 +130,8 @@ $.widget( "ui.droppable", {
 
 	_deactivate: function( event ) {
 		var draggable = $.ui.ddmanager.current;
-		if ( this.options.activeClass ) {
+
-			this.element.removeClass( this.options.activeClass );
+		this._removeActiveClass();
-		}
 		if ( draggable ){
 			this._trigger( "deactivate", event, this.ui( draggable ) );
 		}
@@ -153,9 +147,7 @@ $.widget( "ui.droppable", {
 		}
 
 		if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
-			if ( this.options.hoverClass ) {
+			this._addHoverClass();
-				this.element.addClass( this.options.hoverClass );
-			}
 			this._trigger( "over", event, this.ui( draggable ) );
 		}
 
@@ -171,9 +163,7 @@ $.widget( "ui.droppable", {
 		}
 
 		if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
-			if ( this.options.hoverClass ) {
+			this._removeHoverClass();
-				this.element.removeClass( this.options.hoverClass );
-			}
 			this._trigger( "out", event, this.ui( draggable ) );
 		}
 
@@ -204,12 +194,9 @@ $.widget( "ui.droppable", {
 		}
 
 		if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
-			if ( this.options.activeClass ) {
+			this._removeActiveClass();
-				this.element.removeClass( this.options.activeClass );
+			this._removeHoverClass();
-			}
+
-			if ( this.options.hoverClass ) {
-				this.element.removeClass( this.options.hoverClass );
-			}
 			this._trigger( "drop", event, this.ui( draggable ) );
 			return this.element;
 		}
@@ -225,8 +212,25 @@ $.widget( "ui.droppable", {
 			position: c.position,
 			offset: c.positionAbs
 		};
-	}
+	},
 
+	// Extension points just to make backcompat sane and avoid duplicating logic
+	// TODO: Remove in 1.13 along with call to it below
+	_addHoverClass: function() {
+		this._addClass( "ui-droppable-hover" );
+	},
+
+	_removeHoverClass: function() {
+		this._removeClass( "ui-droppable-hover" );
+	},
+
+	_addActiveClass: function() {
+		this._addClass( "ui-droppable-active" );
+	},
+
+	_removeActiveClass: function() {
+		this._removeClass( "ui-droppable-active" );
+	}
 });
 
 var intersect = (function() {
@@ -413,6 +417,43 @@ $.ui.ddmanager = {
 	}
 };
 
+// DEPRECATED
+// TODO: switch return back to widget declaration at top of file when this is removed
+if ( $.uiBackCompat !== false ) {
+
+	// Backcompat for activeClass and hoverClass options
+	$.widget( "ui.droppable", $.ui.droppable, {
+		options: {
+			hoverClass: false,
+			activeClass: false
+		},
+		_addActiveClass: function() {
+			this._super();
+			if ( this.options.activeClass ) {
+				this.element.addClass( this.options.activeClass );
+			}
+		},
+		_removeActiveClass: function() {
+			this._super();
+			if ( this.options.activeClass ) {
+				this.element.removeClass( this.options.activeClass );
+			}
+		},
+		_addHoverClass: function() {
+			this._super();
+			if ( this.options.hoverClass ) {
+				this.element.addClass( this.options.hoverClass );
+			}
+		},
+		_removeHoverClass: function() {
+			this._super();
+			if ( this.options.hoverClass ) {
+				this.element.removeClass( this.options.hoverClass );
+			}
+		}
+	});
+}
+
 return $.ui.droppable;
 
 }));