Skip to content

Commit

Permalink
Accordion: Allow canceling the beforeActivate event. Fixes #6896 - Ac…
Browse files Browse the repository at this point in the history 
…cordion: Allow canceling the beforeActivate event.
  • Loading branch information
@scottgonzalez
scottgonzalez committed Jan 25, 2011
1 parent 088ef05 commit 7a6dd71
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 22 deletions.
8 changes: 7 additions & 1 deletion tests/unit/accordion/accordion_deprecated.js
View file
Expand Up @@ -228,7 +228,7 @@ test( "{ navigation: true, navigationFilter: content }", function() {
module( "accordion (deprecated) - changestart/change events", accordionSetupTeardown() );

test( "changestart", function() {
expect( 20 );
expect( 26 );
var ac = $( "#list1" ).accordion({
active: false,
collapsible: true
Expand All @@ -243,8 +243,10 @@ test( "changestart", function() {
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
equals( ui.newContent.size(), 1 );
strictEqual( ui.newContent[ 0 ], content[ 0 ] );
state( ac, 0, 0, 0 );
});
ac.accordion( "option", "active", 0 );
state( ac, 1, 0, 0 );

ac.one( "accordionchangestart", function( event, ui ) {
equals( ui.oldHeader.size(), 1 );
Expand All @@ -255,8 +257,10 @@ test( "changestart", function() {
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
equals( ui.newContent.size(), 1 );
strictEqual( ui.newContent[ 0 ], content[ 1 ] );
state( ac, 1, 0, 0 );
});
headers.eq( 1 ).click();
state( ac, 0, 1, 0 );

ac.one( "accordionchangestart", function( event, ui ) {
equals( ui.oldHeader.size(), 1 );
Expand All @@ -265,8 +269,10 @@ test( "changestart", function() {
strictEqual( ui.oldContent[ 0 ], content[ 1 ] );
equals( ui.newHeader.size(), 0 );
equals( ui.newContent.size(), 0 );
state( ac, 0, 1, 0 );
});
ac.accordion( "option", "active", false );
state( ac, 0, 0, 0 );
});

test( "change", function() {
Expand Down
34 changes: 33 additions & 1 deletion tests/unit/accordion/accordion_events.js
View file
Expand Up @@ -3,7 +3,7 @@
module( "accordion: events", accordionSetupTeardown() );

test( "beforeActivate", function() {
expect( 20 );
expect( 42 );
var ac = $( "#list1" ).accordion({
active: false,
collapsible: true
Expand All @@ -18,8 +18,10 @@ test( "beforeActivate", function() {
strictEqual( ui.newHeader[ 0 ], headers[ 0 ] );
equals( ui.newContent.size(), 1 );
strictEqual( ui.newContent[ 0 ], content[ 0 ] );
state( ac, 0, 0, 0 );
});
ac.accordion( "option", "active", 0 );
state( ac, 1, 0, 0 );

ac.one( "accordionbeforeactivate", function( event, ui ) {
equals( ui.oldHeader.size(), 1 );
Expand All @@ -30,8 +32,10 @@ test( "beforeActivate", function() {
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
equals( ui.newContent.size(), 1 );
strictEqual( ui.newContent[ 0 ], content[ 1 ] );
state( ac, 1, 0, 0 );
});
headers.eq( 1 ).click();
state( ac, 0, 1, 0 );

ac.one( "accordionbeforeactivate", function( event, ui ) {
equals( ui.oldHeader.size(), 1 );
Expand All @@ -40,8 +44,36 @@ test( "beforeActivate", function() {
strictEqual( ui.oldContent[ 0 ], content[ 1 ] );
equals( ui.newHeader.size(), 0 );
equals( ui.newContent.size(), 0 );
state( ac, 0, 1, 0 );
});
ac.accordion( "option", "active", false );
state( ac, 0, 0, 0 );

ac.one( "accordionbeforeactivate", function( event, ui ) {
equals( ui.oldHeader.size(), 0 );
equals( ui.oldContent.size(), 0 );
equals( ui.newHeader.size(), 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 1 ] );
equals( ui.newContent.size(), 1 );
strictEqual( ui.newContent[ 0 ], content[ 1 ] );
event.preventDefault();
state( ac, 0, 0, 0 );
});
ac.accordion( "option", "active", 1 );
state( ac, 0, 0, 0 );

ac.one( "accordionbeforeactivate", function( event, ui ) {
equals( ui.oldHeader.size(), 0 );
equals( ui.oldContent.size(), 0 );
equals( ui.newHeader.size(), 1 );
strictEqual( ui.newHeader[ 0 ], headers[ 2 ] );
equals( ui.newContent.size(), 1 );
strictEqual( ui.newContent[ 0 ], content[ 2 ] );
event.preventDefault();
state( ac, 0, 0, 0 );
});
headers.eq( 2 ).click();
state( ac, 0, 0, 0 );
});

test( "activate", function() {
Expand Down
59 changes: 39 additions & 20 deletions ui/jquery.ui.accordion.js
View file
Expand Up @@ -284,6 +284,17 @@ $.widget( "ui.accordion", {
return;
}

// allow the activation to be canceled
var eventData = {
oldHeader: this.active,
oldContent: this.active.next(),
newHeader: $(),
newContent: $()
};
if ( this._trigger( "beforeActivate", null, eventData ) === false ) {
return;
}

this.active
.removeClass( "ui-state-active ui-corner-top" )
.addClass( "ui-state-default ui-corner-all" )
Expand All @@ -294,24 +305,34 @@ $.widget( "ui.accordion", {
var toHide = this.active.next(),
data = {
options: this.options,
newHeader: $( [] ),
newHeader: $(),
oldHeader: this.active,
newContent: $( [] ),
newContent: $(),
oldContent: toHide
},
toShow = ( this.active = $( [] ) );
toShow = ( this.active = $() );
this._toggle( toShow, toHide, data );
},

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

_eventHandler: function( event ) {
var options = this.options,
active = this.active,
clicked = $( event.currentTarget ),
clickedIsActive = clicked[0] === this.active[0];
clickedIsActive = clicked[ 0 ] === active[ 0 ],
collapsing = clickedIsActive && options.collapsible,
toShow = clicked.next(),
toHide = active.next(),
eventData = {
oldHeader: active,
oldContent: toHide,
newHeader: collapsing ? $() : clicked,
newContent: collapsing ? $() : toShow
};

event.preventDefault();

Expand All @@ -324,26 +345,26 @@ $.widget( "ui.accordion", {
return;
}

options.active = options.collapsible && clickedIsActive ?
false :
this.headers.index( clicked );
// allow the activation to be canceled
if ( this._trigger( "beforeActivate", null, eventData ) === false ) {
return;
}

options.active = collapsing ? false : this.headers.index( clicked );

// find elements to show and hide
var active = this.active,
toShow = clicked.next(),
toHide = this.active.next(),
data = {
var data = {
options: options,
newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
oldHeader: this.active,
newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
newHeader: collapsing ? $() : clicked,
oldHeader: active,
newContent: collapsing ? $() : toShow,
oldContent: toHide
},
down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
down = this.headers.index( active[0] ) > this.headers.index( clicked[0] );

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

// switch classes
Expand Down Expand Up @@ -381,8 +402,6 @@ $.widget( "ui.accordion", {
return self._completed.apply( self, arguments );
};

self._trigger( "beforeActivate", null, self.data );

// count elements to animate
self.running = toHide.size() === 0 ? toShow.size() : toHide.size();

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

if ( options.collapsible && clickedIsActive ) {
animOptions = {
toShow: $( [] ),
toShow: $(),
toHide: toHide,
complete: complete,
down: down,
Expand Down

0 comments on commit 7a6dd71

Please sign in to comment.