From f58277a521ae41b1d3e054a419ef5fda85e7db21 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Thu, 1 Jan 2015 12:11:06 -0500 Subject: [PATCH] Droppable: Add classes option Ref #7053 Ref gh-1411 --- demos/droppable/accepted-elements.html | 6 +- demos/droppable/photo-manager.html | 8 +- demos/droppable/propagation.html | 12 ++- demos/droppable/revert.html | 6 +- demos/droppable/shopping-cart.html | 6 +- demos/droppable/visual-feedback.html | 10 ++- tests/unit/droppable/droppable.html | 3 + tests/unit/droppable/droppable_common.js | 2 - .../droppable/droppable_common_deprecated.js | 21 +++++ .../unit/droppable/droppable_deprecated.html | 47 ++++++++++ ui/droppable.js | 89 ++++++++++++++----- 11 files changed, 169 insertions(+), 41 deletions(-) create mode 100644 tests/unit/droppable/droppable_common_deprecated.js create mode 100644 tests/unit/droppable/droppable_deprecated.html diff --git a/demos/droppable/accepted-elements.html b/demos/droppable/accepted-elements.html index 19db54650..2a5029526 100644 --- a/demos/droppable/accepted-elements.html +++ b/demos/droppable/accepted-elements.html @@ -20,8 +20,10 @@ $( "#draggable, #draggable-nonvalid" ).draggable(); $( "#droppable" ).droppable({ accept: "#draggable", - activeClass: "ui-state-hover", - hoverClass: "ui-state-active", + classes: { + "ui-droppable-active": "ui-state-active", + "ui-droppable-hover": "ui-state-hover" + }, drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) diff --git a/demos/droppable/photo-manager.html b/demos/droppable/photo-manager.html index 6323e5d7b..6a8cf33d1 100644 --- a/demos/droppable/photo-manager.html +++ b/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 ); } diff --git a/demos/droppable/propagation.html b/demos/droppable/propagation.html index 60cf7cb37..99fb21711 100644 --- a/demos/droppable/propagation.html +++ b/demos/droppable/propagation.html @@ -21,8 +21,10 @@ $( "#draggable" ).draggable(); $( "#droppable, #droppable-inner" ).droppable({ - activeClass: "ui-state-hover", - hoverClass: "ui-state-active", + classes: { + "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", - hoverClass: "ui-state-active", + classes: { + "ui-droppable-active": "ui-state-active", + "ui-droppable-hover": "ui-state-hover" + }, drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) diff --git a/demos/droppable/revert.html b/demos/droppable/revert.html index 74ccb6fc5..f34801e90 100644 --- a/demos/droppable/revert.html +++ b/demos/droppable/revert.html @@ -21,8 +21,10 @@ $( "#draggable2" ).draggable({ revert: "invalid" }); $( "#droppable" ).droppable({ - activeClass: "ui-state-default", - hoverClass: "ui-state-hover", + classes: { + "ui-droppable-active": "ui-state-active", + "ui-droppable-hover": "ui-state-hover" + }, drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) diff --git a/demos/droppable/shopping-cart.html b/demos/droppable/shopping-cart.html index 0304004ed..747c23a83 100644 --- a/demos/droppable/shopping-cart.html +++ b/demos/droppable/shopping-cart.html @@ -28,8 +28,10 @@ helper: "clone" }); $( "#cart ol" ).droppable({ - activeClass: "ui-state-default", - hoverClass: "ui-state-hover", + classes: { + "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(); diff --git a/demos/droppable/visual-feedback.html b/demos/droppable/visual-feedback.html index 9b197c56e..9852f371b 100644 --- a/demos/droppable/visual-feedback.html +++ b/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 @@
-

Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the hoverClass or activeClass options to specify respective classes.

+

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 ui-droppable-hover or ui-droppable-active properties on the classes option to specify the respective classes.

diff --git a/tests/unit/droppable/droppable.html b/tests/unit/droppable/droppable.html index 03ff888e8..52dc3d543 100644 --- a/tests/unit/droppable/droppable.html +++ b/tests/unit/droppable/droppable.html @@ -5,6 +5,9 @@ jQuery UI Droppable Test Suite + diff --git a/tests/unit/droppable/droppable_common.js b/tests/unit/droppable/droppable_common.js index bd56aa35f..87d3ca1db 100644 --- a/tests/unit/droppable/droppable_common.js +++ b/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", diff --git a/tests/unit/droppable/droppable_common_deprecated.js b/tests/unit/droppable/droppable_common_deprecated.js new file mode 100644 index 000000000..bd56aa35f --- /dev/null +++ b/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 + } +}); diff --git a/tests/unit/droppable/droppable_deprecated.html b/tests/unit/droppable/droppable_deprecated.html new file mode 100644 index 000000000..5af53a2f7 --- /dev/null +++ b/tests/unit/droppable/droppable_deprecated.html @@ -0,0 +1,47 @@ + + + + + jQuery UI Droppable Test Suite + + + + + + + + + + + + + + + + + + + + +
+
+ +
Draggable
+
Droppable
+
Droppable
+
 
+ +
+ + diff --git a/ui/droppable.js b/ui/droppable.js index a164f5522..98be34bab 100644 --- a/ui/droppable.js +++ b/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.element.addClass( this.options.hoverClass ); - } + this._addHoverClass(); 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.element.removeClass( this.options.hoverClass ); - } + this._removeHoverClass(); 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.element.removeClass( this.options.activeClass ); - } - if ( this.options.hoverClass ) { - this.element.removeClass( this.options.hoverClass ); - } + this._removeActiveClass(); + this._removeHoverClass(); + 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; })); -- 2.39.5