Skip to content

Commit 65a89e4

Browse files
arschmitzarschmitz
committed
Droppable: Deprecate activeClass and hoverClass options use classes
1 parent 735d8f9 commit 65a89e4

File tree

5 files changed

+140
-22
lines changed

5 files changed

+140
-22
lines changed

‎tests/unit/droppable/droppable.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<title>jQuery UI Droppable Test Suite</title>
66

77
<script src="../../jquery.js"></script>
8+
<script>
9+
$.uiBackCompat = false;
10+
</script>
811
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
912
<script src="../../../external/qunit/qunit.js"></script>
1013
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>

‎tests/unit/droppable/droppable_common.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
TestHelpers.commonWidgetTests( "droppable", {
22
defaults: {
33
accept: "*",
4-
activeClass: false,
54
addClasses: true,
65
classes: {},
76
disabled: false,
87
greedy: false,
9-
hoverClass: false,
108
scope: "default",
119
tolerance: "intersect",
1210

‎tests/unit/droppable/droppable_common_deprecated.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
TestHelpers.commonWidgetTests( "droppable", {
2+
defaults: {
3+
accept: "*",
4+
activeClass: false,
5+
addClasses: true,
6+
classes: {},
7+
disabled: false,
8+
greedy: false,
9+
hoverClass: false,
10+
scope: "default",
11+
tolerance: "intersect",
12+
13+
// callbacks
14+
activate: null,
15+
create: null,
16+
deactivate: null,
17+
drop: null,
18+
out: null,
19+
over: null
20+
}
21+
});

‎tests/unit/droppable/droppable_deprecated.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Droppable Test Suite</title>
6+
7+
<script src="../../jquery.js"></script>
8+
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
9+
<script src="../../../external/qunit/qunit.js"></script>
10+
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
11+
<script src="../testsuite.js"></script>
12+
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
13+
<script>
14+
TestHelpers.loadResources({
15+
css: [ "core" ],
16+
js: [
17+
"ui/core.js",
18+
"ui/widget.js",
19+
"ui/mouse.js",
20+
"ui/draggable.js",
21+
"ui/droppable.js"
22+
]
23+
});
24+
</script>
25+
26+
<script src="droppable_common_deprecated.js"></script>
27+
<script src="droppable_core.js"></script>
28+
<script src="droppable_events.js"></script>
29+
<script src="droppable_methods.js"></script>
30+
<script src="droppable_options.js"></script>
31+
<script src="droppable_test_helpers.js"></script>
32+
33+
<script src="../swarminject.js"></script>
34+
</head>
35+
<body>
36+
37+
<div id="qunit"></div>
38+
<div id="qunit-fixture">
39+
40+
<div id="draggable1" style="width: 25px; height: 25px;">Draggable</div>
41+
<div id="droppable1" style="width: 100px; height: 100px;">Droppable</div>
42+
<div id="droppable2" style="width: 100px; height: 100px;">Droppable</div>
43+
<div style='width:1000px;height:1000px;'>&nbsp;</div>
44+
45+
</div>
46+
</body>
47+
</html>

‎ui/droppable.js

Lines changed: 69 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,9 @@ $.widget( "ui.droppable", {
3636
widgetEventPrefix: "drop",
3737
options: {
3838
accept: "*",
39-
activeClass: false,
4039
addClasses: true,
4140
classes: {},
4241
greedy: false,
43-
hoverClass: false,
4442
scope: "default",
4543
tolerance: "intersect",
4644

@@ -124,19 +122,15 @@ $.widget( "ui.droppable", {
124122

125123
_activate: function( event ) {
126124
var draggable = $.ui.ddmanager.current;
127-
if ( this.options.activeClass ) {
128-
this.element.addClass( this.options.activeClass );
129-
}
125+
this._addClass( "ui-droppable-active" );
130126
if ( draggable ){
131127
this._trigger( "activate", event, this.ui( draggable ) );
132128
}
133129
},
134130

135131
_deactivate: function( event ) {
136132
var draggable = $.ui.ddmanager.current;
137-
if ( this.options.activeClass ) {
138-
this.element.removeClass( this.options.activeClass );
139-
}
133+
this._removeClass( "ui-droppable-active" );
140134
if ( draggable ){
141135
this._trigger( "deactivate", event, this.ui( draggable ) );
142136
}
@@ -152,9 +146,7 @@ $.widget( "ui.droppable", {
152146
}
153147

154148
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
155-
if ( this.options.hoverClass ) {
156-
this.element.addClass( this.options.hoverClass );
157-
}
149+
this._addClass( "ui-droppable-hover" );
158150
this._trigger( "over", event, this.ui( draggable ) );
159151
}
160152

@@ -170,14 +162,16 @@ $.widget( "ui.droppable", {
170162
}
171163

172164
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
173-
if ( this.options.hoverClass ) {
174-
this.element.removeClass( this.options.hoverClass );
175-
}
165+
this._removeClass( "ui-droppable-hover" );
176166
this._trigger( "out", event, this.ui( draggable ) );
177167
}
178168

179169
},
180170

171+
// Extension point just to make backcompat sane and avoid duplicating all the logic in _drop
172+
// TODO: Remove in 1.13 along with call to it below
173+
_classesCompat: $.noop,
174+
181175
_drop: function( event, custom ) {
182176

183177
var draggable = custom || $.ui.ddmanager.current,
@@ -203,12 +197,11 @@ $.widget( "ui.droppable", {
203197
}
204198

205199
if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
206-
if ( this.options.activeClass ) {
207-
this.element.removeClass( this.options.activeClass );
208-
}
209-
if ( this.options.hoverClass ) {
210-
this.element.removeClass( this.options.hoverClass );
211-
}
200+
this._removeClass( "ui-droppable-active" );
201+
this._removeClass( "ui-droppable-hover" );
202+
203+
// See above TODO and remove this too
204+
this._classesCompat();
212205
this._trigger( "drop", event, this.ui( draggable ) );
213206
return this.element;
214207
}
@@ -412,6 +405,62 @@ $.ui.ddmanager = {
412405
}
413406
};
414407

408+
// DEPRECATED TODO: switch return back to widget declaration at top of file when this is removed
409+
if ( $.uiBackCompat !== false ) {
410+
411+
// DialogClass option
412+
$.widget( "ui.droppable", $.ui.droppable, {
413+
options: {
414+
hoverClass: false,
415+
activeClass: false
416+
},
417+
_classesCompat: function() {
418+
if ( this.options.activeClass ) {
419+
this.element.removeClass( this.options.activeClass );
420+
}
421+
if ( this.options.hoverClass ) {
422+
this.element.removeClass( this.options.hoverClass );
423+
}
424+
},
425+
_activate: function( event ) {
426+
if ( this.options.activeClass ) {
427+
this.element.addClass( this.options.activeClass );
428+
}
429+
this._super( event );
430+
},
431+
_deactivate: function( event ) {
432+
if ( this.options.activeClass ) {
433+
this.element.removeClass( this.options.activeClass );
434+
}
435+
this._super( event );
436+
},
437+
_toggleDroppableClasses: function( stateVal ) {
438+
439+
var draggable = $.ui.ddmanager.current;
440+
441+
// Bail if draggable and droppable are same element
442+
if ( !draggable || ( draggable.currentItem ||
443+
draggable.element )[ 0 ] === this.element[ 0 ] ) {
444+
return;
445+
}
446+
447+
if ( this.options.hoverClass && this.accept.call( this.element[ 0 ], ( draggable.currentItem ||
448+
draggable.element ) ) ) {
449+
this.element[ ( stateVal ? "add" : "remove" ) + "Class" ]( this.options.hoverClass );
450+
}
451+
452+
},
453+
_out: function( event ) {
454+
this._super( event );
455+
this._toggleDroppableClasses( false );
456+
},
457+
_over: function( event ) {
458+
this._super( event );
459+
this._toggleDroppableClasses( true );
460+
}
461+
});
462+
}
463+
415464
return $.ui.droppable;
416465

417466
}));

0 commit comments

Comments
 (0)