Skip to content

Commit 7a6dd71

Browse files
committed
Accordion: Allow canceling the beforeActivate event. Fixes #6896 - Accordion: Allow canceling the beforeActivate event.
1 parent 088ef05 commit 7a6dd71

File tree

3 files changed

+79
-22
lines changed

3 files changed

+79
-22
lines changed

tests/unit/accordion/accordion_deprecated.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ test( "{ navigation: true, navigationFilter: content }", function() {
228228
module( "accordion (deprecated) - changestart/change events", accordionSetupTeardown() );
229229

230230
test( "changestart", function() {
231-
expect( 20 );
231+
expect( 26 );
232232
var ac = $( "#list1" ).accordion({
233233
active: false,
234234
collapsible: true
@@ -243,8 +243,10 @@ test( "changestart", function() {
243243
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
244244
equals( ui.newContent.size(), 1 );
245245
strictEqual( ui.newContent[ 0 ], content[ 0 ] );
246+
state( ac, 0, 0, 0 );
246247
});
247248
ac.accordion( "option", "active", 0 );
249+
state( ac, 1, 0, 0 );
248250

249251
ac.one( "accordionchangestart", function( event, ui ) {
250252
equals( ui.oldHeader.size(), 1 );
@@ -255,8 +257,10 @@ test( "changestart", function() {
255257
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
256258
equals( ui.newContent.size(), 1 );
257259
strictEqual( ui.newContent[ 0 ], content[ 1 ] );
260+
state( ac, 1, 0, 0 );
258261
});
259262
headers.eq( 1 ).click();
263+
state( ac, 0, 1, 0 );
260264

261265
ac.one( "accordionchangestart", function( event, ui ) {
262266
equals( ui.oldHeader.size(), 1 );
@@ -265,8 +269,10 @@ test( "changestart", function() {
265269
strictEqual( ui.oldContent[ 0 ], content[ 1 ] );
266270
equals( ui.newHeader.size(), 0 );
267271
equals( ui.newContent.size(), 0 );
272+
state( ac, 0, 1, 0 );
268273
});
269274
ac.accordion( "option", "active", false );
275+
state( ac, 0, 0, 0 );
270276
});
271277

272278
test( "change", function() {

tests/unit/accordion/accordion_events.js

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
module( "accordion: events", accordionSetupTeardown() );
44

55
test( "beforeActivate", function() {
6-
expect( 20 );
6+
expect( 42 );
77
var ac = $( "#list1" ).accordion({
88
active: false,
99
collapsible: true
@@ -18,8 +18,10 @@ test( "beforeActivate", function() {
1818
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
1919
equals( ui.newContent.size(), 1 );
2020
strictEqual( ui.newContent[ 0 ], content[ 0 ] );
21+
state( ac, 0, 0, 0 );
2122
});
2223
ac.accordion( "option", "active", 0 );
24+
state( ac, 1, 0, 0 );
2325

2426
ac.one( "accordionbeforeactivate", function( event, ui ) {
2527
equals( ui.oldHeader.size(), 1 );
@@ -30,8 +32,10 @@ test( "beforeActivate", function() {
3032
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
3133
equals( ui.newContent.size(), 1 );
3234
strictEqual( ui.newContent[ 0 ], content[ 1 ] );
35+
state( ac, 1, 0, 0 );
3336
});
3437
headers.eq( 1 ).click();
38+
state( ac, 0, 1, 0 );
3539

3640
ac.one( "accordionbeforeactivate", function( event, ui ) {
3741
equals( ui.oldHeader.size(), 1 );
@@ -40,8 +44,36 @@ test( "beforeActivate", function() {
4044
strictEqual( ui.oldContent[ 0 ], content[ 1 ] );
4145
equals( ui.newHeader.size(), 0 );
4246
equals( ui.newContent.size(), 0 );
47+
state( ac, 0, 1, 0 );
4348
});
4449
ac.accordion( "option", "active", false );
50+
state( ac, 0, 0, 0 );
51+
52+
ac.one( "accordionbeforeactivate", function( event, ui ) {
53+
equals( ui.oldHeader.size(), 0 );
54+
equals( ui.oldContent.size(), 0 );
55+
equals( ui.newHeader.size(), 1 );
56+
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
57+
equals( ui.newContent.size(), 1 );
58+
strictEqual( ui.newContent[ 0 ], content[ 1 ] );
59+
event.preventDefault();
60+
state( ac, 0, 0, 0 );
61+
});
62+
ac.accordion( "option", "active", 1 );
63+
state( ac, 0, 0, 0 );
64+
65+
ac.one( "accordionbeforeactivate", function( event, ui ) {
66+
equals( ui.oldHeader.size(), 0 );
67+
equals( ui.oldContent.size(), 0 );
68+
equals( ui.newHeader.size(), 1 );
69+
strictEqual( ui.newHeader[ 0 ], headers[ 2 ] );
70+
equals( ui.newContent.size(), 1 );
71+
strictEqual( ui.newContent[ 0 ], content[ 2 ] );
72+
event.preventDefault();
73+
state( ac, 0, 0, 0 );
74+
});
75+
headers.eq( 2 ).click();
76+
state( ac, 0, 0, 0 );
4577
});
4678

4779
test( "activate", function() {

ui/jquery.ui.accordion.js

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,17 @@ $.widget( "ui.accordion", {
284284
return;
285285
}
286286

287+
// allow the activation to be canceled
288+
var eventData = {
289+
oldHeader: this.active,
290+
oldContent: this.active.next(),
291+
newHeader: $(),
292+
newContent: $()
293+
};
294+
if ( this._trigger( "beforeActivate", null, eventData ) === false ) {
295+
return;
296+
}
297+
287298
this.active
288299
.removeClass( "ui-state-active ui-corner-top" )
289300
.addClass( "ui-state-default ui-corner-all" )
@@ -294,24 +305,34 @@ $.widget( "ui.accordion", {
294305
var toHide = this.active.next(),
295306
data = {
296307
options: this.options,
297-
newHeader: $( [] ),
308+
newHeader: $(),
298309
oldHeader: this.active,
299-
newContent: $( [] ),
310+
newContent: $(),
300311
oldContent: toHide
301312
},
302-
toShow = ( this.active = $( [] ) );
313+
toShow = ( this.active = $() );
303314
this._toggle( toShow, toHide, data );
304315
},
305316

306317
// TODO: add tests/docs for negative values in 2.0 (#6854)
307318
_findActive: function( selector ) {
308-
return typeof selector === "number" ? this.headers.eq( selector ) : $( [] );
319+
return typeof selector === "number" ? this.headers.eq( selector ) : $();
309320
},
310321

311322
_eventHandler: function( event ) {
312323
var options = this.options,
324+
active = this.active,
313325
clicked = $( event.currentTarget ),
314-
clickedIsActive = clicked[0] === this.active[0];
326+
clickedIsActive = clicked[ 0 ] === active[ 0 ],
327+
collapsing = clickedIsActive && options.collapsible,
328+
toShow = clicked.next(),
329+
toHide = active.next(),
330+
eventData = {
331+
oldHeader: active,
332+
oldContent: toHide,
333+
newHeader: collapsing ? $() : clicked,
334+
newContent: collapsing ? $() : toShow
335+
};
315336

316337
event.preventDefault();
317338

@@ -324,26 +345,26 @@ $.widget( "ui.accordion", {
324345
return;
325346
}
326347

327-
options.active = options.collapsible && clickedIsActive ?
328-
false :
329-
this.headers.index( clicked );
348+
// allow the activation to be canceled
349+
if ( this._trigger( "beforeActivate", null, eventData ) === false ) {
350+
return;
351+
}
352+
353+
options.active = collapsing ? false : this.headers.index( clicked );
330354

331355
// find elements to show and hide
332-
var active = this.active,
333-
toShow = clicked.next(),
334-
toHide = this.active.next(),
335-
data = {
356+
var data = {
336357
options: options,
337-
newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
338-
oldHeader: this.active,
339-
newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
358+
newHeader: collapsing ? $() : clicked,
359+
oldHeader: active,
360+
newContent: collapsing ? $() : toShow,
340361
oldContent: toHide
341362
},
342-
down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
363+
down = this.headers.index( active[0] ) > this.headers.index( clicked[0] );
343364

344365
// when the call to ._toggle() comes after the class changes
345366
// it causes a very odd bug in IE 8 (see #6720)
346-
this.active = clickedIsActive ? $([]) : clicked;
367+
this.active = clickedIsActive ? $() : clicked;
347368
this._toggle( toShow, toHide, data, clickedIsActive, down );
348369

349370
// switch classes
@@ -381,8 +402,6 @@ $.widget( "ui.accordion", {
381402
return self._completed.apply( self, arguments );
382403
};
383404

384-
self._trigger( "beforeActivate", null, self.data );
385-
386405
// count elements to animate
387406
self.running = toHide.size() === 0 ? toShow.size() : toHide.size();
388407

@@ -391,7 +410,7 @@ $.widget( "ui.accordion", {
391410

392411
if ( options.collapsible && clickedIsActive ) {
393412
animOptions = {
394-
toShow: $( [] ),
413+
toShow: $(),
395414
toHide: toHide,
396415
complete: complete,
397416
down: down,

0 commit comments

Comments
 (0)