Skip to content

Commit 599e143

Browse files
scottgonzalezscottgonzalez
committed
Merge branch 'accordion-activate'
2 parents 497ec85 + 468c358 commit 599e143

File tree

5 files changed

+76
-65
lines changed

5 files changed

+76
-65
lines changed

‎tests/unit/accordion/accordion_core.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ test("ui-accordion-heading class added to headers anchor", function() {
2222

2323
test("accessibility", function () {
2424
expect(9);
25-
var ac = $('#list1').accordion().accordion("activate", 1);
25+
var ac = $('#list1').accordion().accordion("option", "active", 1);
2626
var headers = $(".ui-accordion-header");
2727

2828
equals( headers.eq(1).attr("tabindex"), "0", "active header should have tabindex=0");
@@ -32,7 +32,7 @@ test("accessibility", function () {
3232
equals( headers.next().attr("role"), "tabpanel", "tabpanel roles");
3333
equals( headers.eq(1).attr("aria-expanded"), "true", "active tab has aria-expanded");
3434
equals( headers.eq(0).attr("aria-expanded"), "false", "inactive tab has aria-expanded");
35-
ac.accordion("activate", 0);
35+
ac.accordion("option", "active", 0);
3636
equals( headers.eq(0).attr("aria-expanded"), "true", "newly active tab has aria-expanded");
3737
equals( headers.eq(1).attr("aria-expanded"), "false", "newly inactive tab has aria-expanded");
3838
});

‎tests/unit/accordion/accordion_events.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ test("accordionchange event, open closed and close again", function() {
1717
equals( ui.newHeader.size(), 1 );
1818
equals( ui.newContent.size(), 1 );
1919
})
20-
.accordion("activate", 0)
20+
.accordion("option", "active", 0)
2121
.one("accordionchange", function(event, ui) {
2222
equals( ui.oldHeader.size(), 1 );
2323
equals( ui.oldContent.size(), 1 );
2424
equals( ui.newHeader.size(), 0 );
2525
equals( ui.newContent.size(), 0 );
2626
})
27-
.accordion("activate", 0);
27+
.accordion("option", "active", false);
2828
});
2929

3030
})(jQuery);

‎tests/unit/accordion/accordion_methods.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,10 @@ test("disable", function() {
5050
equals(actual, expected, 'disable is chainable');
5151

5252
state(expected, 1, 0, 0)
53-
expected.accordion("activate", 1);
53+
expected.accordion("option", "active", 1);
5454
state(expected, 1, 0, 0)
5555
expected.accordion("enable");
56-
expected.accordion("activate", 1);
56+
expected.accordion("option", "active", 1);
5757
state(expected, 0, 1, 0)
5858
});
5959

‎tests/unit/accordion/accordion_options.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ test("{ active: Number }", function() {
6161
$('.ui-accordion-header:eq(2)', '#list1').click();
6262
equals( $("#list1").accordion('option', 'active'), 2);
6363

64-
$("#list1").accordion('activate', 0);
64+
$("#list1").accordion('option', 'active', 0);
6565
equals( $("#list1").accordion('option', 'active'), 0);
6666
});
6767

@@ -96,7 +96,7 @@ test("{ heightStyle: 'content' }", function() {
9696
});
9797
test("{ collapsible: false }, default", function() {
9898
var ac = $("#list1").accordion();
99-
ac.accordion("activate", false);
99+
ac.accordion("option", "active", false);
100100
state(ac, 1, 0, 0);
101101
});
102102

‎ui/jquery.ui.accordion.js

+68-57
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ $.widget( "ui.accordion", {
7373
.addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" );
7474
self.headers.find( ":first-child" ).addClass( "ui-accordion-heading" );
7575

76-
self.active = self._findActive( self.active || options.active )
76+
self.active = self._findActive( options.active )
7777
.addClass( "ui-state-default ui-state-active" )
7878
.toggleClass( "ui-corner-all" )
7979
.toggleClass( "ui-corner-top" );
@@ -120,7 +120,7 @@ $.widget( "ui.accordion", {
120120

121121
if ( options.event ) {
122122
self.headers.bind( options.event.split(" ").join(".accordion ") + ".accordion", function(event) {
123-
self._clickHandler.call( self, event, this );
123+
self._eventHandler( event );
124124
event.preventDefault();
125125
});
126126
}
@@ -173,11 +173,14 @@ $.widget( "ui.accordion", {
173173
},
174174

175175
_setOption: function( key, value ) {
176-
$.Widget.prototype._setOption.apply( this, arguments );
177-
178176
if ( key == "active" ) {
179-
this.activate( value );
177+
// _activate() will handle invalid values and update this.options
178+
this._activate( value );
179+
return;
180180
}
181+
182+
$.Widget.prototype._setOption.apply( this, arguments );
183+
181184
if ( key == "icons" ) {
182185
this._destroyIcons();
183186
if ( value ) {
@@ -213,7 +216,7 @@ $.widget( "ui.accordion", {
213216
break;
214217
case keyCode.SPACE:
215218
case keyCode.ENTER:
216-
this._clickHandler( { target: event.target }, event.target );
219+
this._eventHandler( event );
217220
event.preventDefault();
218221
}
219222

@@ -272,73 +275,64 @@ $.widget( "ui.accordion", {
272275
return this;
273276
},
274277

275-
activate: function( index ) {
276-
// TODO this gets called on init, changing the option without an explicit call for that
277-
this.options.active = index;
278-
// call clickHandler with custom event
278+
_activate: function( index ) {
279279
var active = this._findActive( index )[ 0 ];
280-
this._clickHandler( { target: active }, active );
281280

282-
return this;
281+
// we found a header to activate, just delegate to the event handler
282+
if ( active ) {
283+
if ( active !== this.active[ 0 ] ) {
284+
this._eventHandler( { target: active, currentTarget: active } );
285+
}
286+
return;
287+
}
288+
289+
// no header to activate, check if we can collapse
290+
if ( !this.options.collapsible ) {
291+
return;
292+
}
293+
294+
this.active
295+
.removeClass( "ui-state-active ui-corner-top" )
296+
.addClass( "ui-state-default ui-corner-all" )
297+
.children( ".ui-icon" )
298+
.removeClass( this.options.icons.activeHeader )
299+
.addClass( this.options.icons.header );
300+
this.active.next().addClass( "ui-accordion-content-active" );
301+
var toHide = this.active.next(),
302+
data = {
303+
options: this.options,
304+
newHeader: $( [] ),
305+
oldHeader: this.active,
306+
newContent: $( [] ),
307+
oldContent: toHide
308+
},
309+
toShow = ( this.active = $( [] ) );
310+
this._toggle( toShow, toHide, data );
283311
},
284312

313+
// TODO: add tests/docs for negative values in 2.0 (#6854)
285314
_findActive: function( selector ) {
286-
return selector
287-
? typeof selector === "number"
288-
? this.headers.filter( ":eq(" + selector + ")" )
289-
: this.headers.not( this.headers.not( selector ) )
290-
: selector === false
291-
? $( [] )
292-
: this.headers.filter( ":eq(0)" );
315+
return typeof selector === "number" ? this.headers.eq( selector ) : $( [] );
293316
},
294317

295-
// TODO isn't event.target enough? why the separate target argument?
296-
_clickHandler: function( event, target ) {
297-
var options = this.options;
318+
_eventHandler: function( event ) {
319+
var options = this.options,
320+
clicked = $( event.currentTarget ),
321+
clickedIsActive = clicked[0] === this.active[0];
322+
298323
if ( options.disabled ) {
299324
return;
300325
}
301326

302-
// called only when using activate(false) to close all parts programmatically
303-
if ( !event.target ) {
304-
if ( !options.collapsible ) {
305-
return;
306-
}
307-
this.active
308-
.removeClass( "ui-state-active ui-corner-top" )
309-
.addClass( "ui-state-default ui-corner-all" )
310-
.children( ".ui-icon" )
311-
.removeClass( options.icons.activeHeader )
312-
.addClass( options.icons.header );
313-
this.active.next().addClass( "ui-accordion-content-active" );
314-
var toHide = this.active.next(),
315-
data = {
316-
options: options,
317-
newHeader: $( [] ),
318-
oldHeader: options.active,
319-
newContent: $( [] ),
320-
oldContent: toHide
321-
},
322-
toShow = ( this.active = $( [] ) );
323-
this._toggle( toShow, toHide, data );
327+
// if animations are still active, or the active header is the target, ignore click
328+
if ( this.running || ( !options.collapsible && clickedIsActive ) ) {
324329
return;
325330
}
326331

327-
// get the click target
328-
var clicked = $( event.currentTarget || target ),
329-
clickedIsActive = clicked[0] === this.active[0];
330-
331-
// TODO the option is changed, is that correct?
332-
// TODO if it is correct, shouldn't that happen after determining that the click is valid?
333332
options.active = options.collapsible && clickedIsActive ?
334333
false :
335334
this.headers.index( clicked );
336335

337-
// if animations are still active, or the active header is the target, ignore click
338-
if ( this.running || ( !options.collapsible && clickedIsActive ) ) {
339-
return;
340-
}
341-
342336
// find elements to show and hide
343337
var active = this.active,
344338
toShow = clicked.next(),
@@ -375,8 +369,6 @@ $.widget( "ui.accordion", {
375369
.next()
376370
.addClass( "ui-accordion-content-active" );
377371
}
378-
379-
return;
380372
},
381373

382374
_toggle: function( toShow, toHide, data, clickedIsActive, down ) {
@@ -685,4 +677,23 @@ $.extend( $.ui.accordion, {
685677
};
686678
}( jQuery, jQuery.ui.accordion.prototype ) );
687679

680+
// expanded active option, activate method
681+
(function( $, prototype ) {
682+
prototype.activate = prototype._activate;
683+
684+
var _findActive = prototype._findActive;
685+
prototype._findActive = function( index ) {
686+
if ( index === -1 ) {
687+
index = false;
688+
}
689+
if ( index && typeof index !== "number" ) {
690+
index = this.headers.index( this.headers.filter( index ) );
691+
if ( index === -1 ) {
692+
index = false;
693+
}
694+
}
695+
return _findActive.call( this, index );
696+
};
697+
}( jQuery, jQuery.ui.accordion.prototype ) );
698+
688699
})( jQuery );

0 commit comments

Comments
 (0)