Project

General

Profile

1
/*
2
 * jQuery UI Accordion 1.8.6
3
 *
4
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
5
 * Dual licensed under the MIT or GPL Version 2 licenses.
6
 * http://jquery.org/license
7
 *
8
 * http://docs.jquery.com/UI/Accordion
9
 *
10
 * Depends:
11
 *	jquery.ui.core.js
12
 *	jquery.ui.widget.js
13
 */
14
(function( $, undefined ) {
15

    
16
$.widget( "ui.accordion", {
17
	options: {
18
		active: 0,
19
		animated: "slide",
20
		autoHeight: true,
21
		clearStyle: false,
22
		collapsible: false,
23
		event: "click",
24
		fillSpace: false,
25
		header: "> li > :first-child,> :not(li):even",
26
		icons: {
27
			header: "ui-icon-triangle-1-e",
28
			headerSelected: "ui-icon-triangle-1-s"
29
		},
30
		navigation: false,
31
		navigationFilter: function() {
32
			return this.href.toLowerCase() === location.href.toLowerCase();
33
		}
34
	},
35

    
36
	_create: function() {
37
		var self = this,
38
			options = self.options;
39

    
40
		self.running = 0;
41

    
42
		self.element
43
			.addClass( "ui-accordion ui-widget ui-helper-reset" )
44
			// in lack of child-selectors in CSS
45
			// we need to mark top-LIs in a UL-accordion for some IE-fix
46
			.children( "li" )
47
				.addClass( "ui-accordion-li-fix" );
48

    
49
		self.headers = self.element.find( options.header )
50
			.addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" )
51
			.bind( "mouseenter.accordion", function() {
52
				if ( options.disabled ) {
53
					return;
54
				}
55
				$( this ).addClass( "ui-state-hover" );
56
			})
57
			.bind( "mouseleave.accordion", function() {
58
				if ( options.disabled ) {
59
					return;
60
				}
61
				$( this ).removeClass( "ui-state-hover" );
62
			})
63
			.bind( "focus.accordion", function() {
64
				if ( options.disabled ) {
65
					return;
66
				}
67
				$( this ).addClass( "ui-state-focus" );
68
			})
69
			.bind( "blur.accordion", function() {
70
				if ( options.disabled ) {
71
					return;
72
				}
73
				$( this ).removeClass( "ui-state-focus" );
74
			});
75

    
76
		self.headers.next()
77
			.addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" );
78

    
79
		if ( options.navigation ) {
80
			var current = self.element.find( "a" ).filter( options.navigationFilter ).eq( 0 );
81
			if ( current.length ) {
82
				var header = current.closest( ".ui-accordion-header" );
83
				if ( header.length ) {
84
					// anchor within header
85
					self.active = header;
86
				} else {
87
					// anchor within content
88
					self.active = current.closest( ".ui-accordion-content" ).prev();
89
				}
90
			}
91
		}
92

    
93
		self.active = self._findActive( self.active || options.active )
94
			.addClass( "ui-state-default ui-state-active" )
95
			.toggleClass( "ui-corner-all" )
96
			.toggleClass( "ui-corner-top" );
97
		self.active.next().addClass( "ui-accordion-content-active" );
98

    
99
		self._createIcons();
100
		self.resize();
101
		
102
		// ARIA
103
		self.element.attr( "role", "tablist" );
104

    
105
		self.headers
106
			.attr( "role", "tab" )
107
			.bind( "keydown.accordion", function( event ) {
108
				return self._keydown( event );
109
			})
110
			.next()
111
				.attr( "role", "tabpanel" );
112

    
113
		self.headers
114
			.not( self.active || "" )
115
			.attr({
116
				"aria-expanded": "false",
117
				tabIndex: -1
118
			})
119
			.next()
120
				.hide();
121

    
122
		// make sure at least one header is in the tab order
123
		if ( !self.active.length ) {
124
			self.headers.eq( 0 ).attr( "tabIndex", 0 );
125
		} else {
126
			self.active
127
				.attr({
128
					"aria-expanded": "true",
129
					tabIndex: 0
130
				});
131
		}
132

    
133
		// only need links in tab order for Safari
134
		if ( !$.browser.safari ) {
135
			self.headers.find( "a" ).attr( "tabIndex", -1 );
136
		}
137

    
138
		if ( options.event ) {
139
			self.headers.bind( options.event.split(" ").join(".accordion ") + ".accordion", function(event) {
140
				self._clickHandler.call( self, event, this );
141
				event.preventDefault();
142
			});
143
		}
144
	},
145

    
146
	_createIcons: function() {
147
		var options = this.options;
148
		if ( options.icons ) {
149
			$( "<span></span>" )
150
				.addClass( "ui-icon " + options.icons.header )
151
				.prependTo( this.headers );
152
			this.active.children( ".ui-icon" )
153
				.toggleClass(options.icons.header)
154
				.toggleClass(options.icons.headerSelected);
155
			this.element.addClass( "ui-accordion-icons" );
156
		}
157
	},
158

    
159
	_destroyIcons: function() {
160
		this.headers.children( ".ui-icon" ).remove();
161
		this.element.removeClass( "ui-accordion-icons" );
162
	},
163

    
164
	destroy: function() {
165
		var options = this.options;
166

    
167
		this.element
168
			.removeClass( "ui-accordion ui-widget ui-helper-reset" )
169
			.removeAttr( "role" );
170

    
171
		this.headers
172
			.unbind( ".accordion" )
173
			.removeClass( "ui-accordion-header ui-accordion-disabled ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
174
			.removeAttr( "role" )
175
			.removeAttr( "aria-expanded" )
176
			.removeAttr( "tabIndex" );
177

    
178
		this.headers.find( "a" ).removeAttr( "tabIndex" );
179
		this._destroyIcons();
180
		var contents = this.headers.next()
181
			.css( "display", "" )
182
			.removeAttr( "role" )
183
			.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-accordion-disabled ui-state-disabled" );
184
		if ( options.autoHeight || options.fillHeight ) {
185
			contents.css( "height", "" );
186
		}
187

    
188
		return $.Widget.prototype.destroy.call( this );
189
	},
190

    
191
	_setOption: function( key, value ) {
192
		$.Widget.prototype._setOption.apply( this, arguments );
193
			
194
		if ( key == "active" ) {
195
			this.activate( value );
196
		}
197
		if ( key == "icons" ) {
198
			this._destroyIcons();
199
			if ( value ) {
200
				this._createIcons();
201
			}
202
		}
203
		// #5332 - opacity doesn't cascade to positioned elements in IE
204
		// so we need to add the disabled class to the headers and panels
205
		if ( key == "disabled" ) {
206
			this.headers.add(this.headers.next())
207
				[ value ? "addClass" : "removeClass" ](
208
					"ui-accordion-disabled ui-state-disabled" );
209
		}
210
	},
211

    
212
	_keydown: function( event ) {
213
		if ( this.options.disabled || event.altKey || event.ctrlKey ) {
214
			return;
215
		}
216

    
217
		var keyCode = $.ui.keyCode,
218
			length = this.headers.length,
219
			currentIndex = this.headers.index( event.target ),
220
			toFocus = false;
221

    
222
		switch ( event.keyCode ) {
223
			case keyCode.RIGHT:
224
			case keyCode.DOWN:
225
				toFocus = this.headers[ ( currentIndex + 1 ) % length ];
226
				break;
227
			case keyCode.LEFT:
228
			case keyCode.UP:
229
				toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
230
				break;
231
			case keyCode.SPACE:
232
			case keyCode.ENTER:
233
				this._clickHandler( { target: event.target }, event.target );
234
				event.preventDefault();
235
		}
236

    
237
		if ( toFocus ) {
238
			$( event.target ).attr( "tabIndex", -1 );
239
			$( toFocus ).attr( "tabIndex", 0 );
240
			toFocus.focus();
241
			return false;
242
		}
243

    
244
		return true;
245
	},
246

    
247
	resize: function() {
248
		var options = this.options,
249
			maxHeight;
250

    
251
		if ( options.fillSpace ) {
252
			if ( $.browser.msie ) {
253
				var defOverflow = this.element.parent().css( "overflow" );
254
				this.element.parent().css( "overflow", "hidden");
255
			}
256
			maxHeight = this.element.parent().height();
257
			if ($.browser.msie) {
258
				this.element.parent().css( "overflow", defOverflow );
259
			}
260

    
261
			this.headers.each(function() {
262
				maxHeight -= $( this ).outerHeight( true );
263
			});
264

    
265
			this.headers.next()
266
				.each(function() {
267
					$( this ).height( Math.max( 0, maxHeight -
268
						$( this ).innerHeight() + $( this ).height() ) );
269
				})
270
				.css( "overflow", "auto" );
271
		} else if ( options.autoHeight ) {
272
			maxHeight = 0;
273
			this.headers.next()
274
				.each(function() {
275
					maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() );
276
				})
277
				.height( maxHeight );
278
		}
279

    
280
		return this;
281
	},
282

    
283
	activate: function( index ) {
284
		// TODO this gets called on init, changing the option without an explicit call for that
285
		this.options.active = index;
286
		// call clickHandler with custom event
287
		var active = this._findActive( index )[ 0 ];
288
		this._clickHandler( { target: active }, active );
289

    
290
		return this;
291
	},
292

    
293
	_findActive: function( selector ) {
294
		return selector
295
			? typeof selector === "number"
296
				? this.headers.filter( ":eq(" + selector + ")" )
297
				: this.headers.not( this.headers.not( selector ) )
298
			: selector === false
299
				? $( [] )
300
				: this.headers.filter( ":eq(0)" );
301
	},
302

    
303
	// TODO isn't event.target enough? why the separate target argument?
304
	_clickHandler: function( event, target ) {
305
		var options = this.options;
306
		if ( options.disabled ) {
307
			return;
308
		}
309

    
310
		// called only when using activate(false) to close all parts programmatically
311
		if ( !event.target ) {
312
			if ( !options.collapsible ) {
313
				return;
314
			}
315
			this.active
316
				.removeClass( "ui-state-active ui-corner-top" )
317
				.addClass( "ui-state-default ui-corner-all" )
318
				.children( ".ui-icon" )
319
					.removeClass( options.icons.headerSelected )
320
					.addClass( options.icons.header );
321
			this.active.next().addClass( "ui-accordion-content-active" );
322
			var toHide = this.active.next(),
323
				data = {
324
					options: options,
325
					newHeader: $( [] ),
326
					oldHeader: options.active,
327
					newContent: $( [] ),
328
					oldContent: toHide
329
				},
330
				toShow = ( this.active = $( [] ) );
331
			this._toggle( toShow, toHide, data );
332
			return;
333
		}
334

    
335
		// get the click target
336
		var clicked = $( event.currentTarget || target ),
337
			clickedIsActive = clicked[0] === this.active[0];
338

    
339
		// TODO the option is changed, is that correct?
340
		// TODO if it is correct, shouldn't that happen after determining that the click is valid?
341
		options.active = options.collapsible && clickedIsActive ?
342
			false :
343
			this.headers.index( clicked );
344

    
345
		// if animations are still active, or the active header is the target, ignore click
346
		if ( this.running || ( !options.collapsible && clickedIsActive ) ) {
347
			return;
348
		}
349

    
350
		// switch classes
351
		this.active
352
			.removeClass( "ui-state-active ui-corner-top" )
353
			.addClass( "ui-state-default ui-corner-all" )
354
			.children( ".ui-icon" )
355
				.removeClass( options.icons.headerSelected )
356
				.addClass( options.icons.header );
357
		if ( !clickedIsActive ) {
358
			clicked
359
				.removeClass( "ui-state-default ui-corner-all" )
360
				.addClass( "ui-state-active ui-corner-top" )
361
				.children( ".ui-icon" )
362
					.removeClass( options.icons.header )
363
					.addClass( options.icons.headerSelected );
364
			clicked
365
				.next()
366
				.addClass( "ui-accordion-content-active" );
367
		}
368

    
369
		// find elements to show and hide
370
		var toShow = clicked.next(),
371
			toHide = this.active.next(),
372
			data = {
373
				options: options,
374
				newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
375
				oldHeader: this.active,
376
				newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
377
				oldContent: toHide
378
			},
379
			down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
380

    
381
		this.active = clickedIsActive ? $([]) : clicked;
382
		this._toggle( toShow, toHide, data, clickedIsActive, down );
383

    
384
		return;
385
	},
386

    
387
	_toggle: function( toShow, toHide, data, clickedIsActive, down ) {
388
		var self = this,
389
			options = self.options;
390

    
391
		self.toShow = toShow;
392
		self.toHide = toHide;
393
		self.data = data;
394

    
395
		var complete = function() {
396
			if ( !self ) {
397
				return;
398
			}
399
			return self._completed.apply( self, arguments );
400
		};
401

    
402
		// trigger changestart event
403
		self._trigger( "changestart", null, self.data );
404

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

    
408
		if ( options.animated ) {
409
			var animOptions = {};
410

    
411
			if ( options.collapsible && clickedIsActive ) {
412
				animOptions = {
413
					toShow: $( [] ),
414
					toHide: toHide,
415
					complete: complete,
416
					down: down,
417
					autoHeight: options.autoHeight || options.fillSpace
418
				};
419
			} else {
420
				animOptions = {
421
					toShow: toShow,
422
					toHide: toHide,
423
					complete: complete,
424
					down: down,
425
					autoHeight: options.autoHeight || options.fillSpace
426
				};
427
			}
428

    
429
			if ( !options.proxied ) {
430
				options.proxied = options.animated;
431
			}
432

    
433
			if ( !options.proxiedDuration ) {
434
				options.proxiedDuration = options.duration;
435
			}
436

    
437
			options.animated = $.isFunction( options.proxied ) ?
438
				options.proxied( animOptions ) :
439
				options.proxied;
440

    
441
			options.duration = $.isFunction( options.proxiedDuration ) ?
442
				options.proxiedDuration( animOptions ) :
443
				options.proxiedDuration;
444

    
445
			var animations = $.ui.accordion.animations,
446
				duration = options.duration,
447
				easing = options.animated;
448

    
449
			if ( easing && !animations[ easing ] && !$.easing[ easing ] ) {
450
				easing = "slide";
451
			}
452
			if ( !animations[ easing ] ) {
453
				animations[ easing ] = function( options ) {
454
					this.slide( options, {
455
						easing: easing,
456
						duration: duration || 700
457
					});
458
				};
459
			}
460

    
461
			animations[ easing ]( animOptions );
462
		} else {
463
			if ( options.collapsible && clickedIsActive ) {
464
				toShow.toggle();
465
			} else {
466
				toHide.hide();
467
				toShow.show();
468
			}
469

    
470
			complete( true );
471
		}
472

    
473
		// TODO assert that the blur and focus triggers are really necessary, remove otherwise
474
		toHide.prev()
475
			.attr({
476
				"aria-expanded": "false",
477
				tabIndex: -1
478
			})
479
			.blur();
480
		toShow.prev()
481
			.attr({
482
				"aria-expanded": "true",
483
				tabIndex: 0
484
			})
485
			.focus();
486
	},
487

    
488
	_completed: function( cancel ) {
489
		this.running = cancel ? 0 : --this.running;
490
		if ( this.running ) {
491
			return;
492
		}
493

    
494
		if ( this.options.clearStyle ) {
495
			this.toShow.add( this.toHide ).css({
496
				height: "",
497
				overflow: ""
498
			});
499
		}
500

    
501
		// other classes are removed before the animation; this one needs to stay until completed
502
		this.toHide.removeClass( "ui-accordion-content-active" );
503

    
504
		this._trigger( "change", null, this.data );
505
	}
506
});
507

    
508
$.extend( $.ui.accordion, {
509
	version: "1.8.6",
510
	animations: {
511
		slide: function( options, additions ) {
512
			options = $.extend({
513
				easing: "swing",
514
				duration: 300
515
			}, options, additions );
516
			if ( !options.toHide.size() ) {
517
				options.toShow.animate({
518
					height: "show",
519
					paddingTop: "show",
520
					paddingBottom: "show"
521
				}, options );
522
				return;
523
			}
524
			if ( !options.toShow.size() ) {
525
				options.toHide.animate({
526
					height: "hide",
527
					paddingTop: "hide",
528
					paddingBottom: "hide"
529
				}, options );
530
				return;
531
			}
532
			var overflow = options.toShow.css( "overflow" ),
533
				percentDone = 0,
534
				showProps = {},
535
				hideProps = {},
536
				fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
537
				originalWidth;
538
			// fix width before calculating height of hidden element
539
			var s = options.toShow;
540
			originalWidth = s[0].style.width;
541
			s.width( parseInt( s.parent().width(), 10 )
542
				- parseInt( s.css( "paddingLeft" ), 10 )
543
				- parseInt( s.css( "paddingRight" ), 10 )
544
				- ( parseInt( s.css( "borderLeftWidth" ), 10 ) || 0 )
545
				- ( parseInt( s.css( "borderRightWidth" ), 10) || 0 ) );
546

    
547
			$.each( fxAttrs, function( i, prop ) {
548
				hideProps[ prop ] = "hide";
549

    
550
				var parts = ( "" + $.css( options.toShow[0], prop ) ).match( /^([\d+-.]+)(.*)$/ );
551
				showProps[ prop ] = {
552
					value: parts[ 1 ],
553
					unit: parts[ 2 ] || "px"
554
				};
555
			});
556
			options.toShow.css({ height: 0, overflow: "hidden" }).show();
557
			options.toHide
558
				.filter( ":hidden" )
559
					.each( options.complete )
560
				.end()
561
				.filter( ":visible" )
562
				.animate( hideProps, {
563
				step: function( now, settings ) {
564
					// only calculate the percent when animating height
565
					// IE gets very inconsistent results when animating elements
566
					// with small values, which is common for padding
567
					if ( settings.prop == "height" ) {
568
						percentDone = ( settings.end - settings.start === 0 ) ? 0 :
569
							( settings.now - settings.start ) / ( settings.end - settings.start );
570
					}
571

    
572
					options.toShow[ 0 ].style[ settings.prop ] =
573
						( percentDone * showProps[ settings.prop ].value )
574
						+ showProps[ settings.prop ].unit;
575
				},
576
				duration: options.duration,
577
				easing: options.easing,
578
				complete: function() {
579
					if ( !options.autoHeight ) {
580
						options.toShow.css( "height", "" );
581
					}
582
					options.toShow.css({
583
						width: originalWidth,
584
						overflow: overflow
585
					});
586
					options.complete();
587
				}
588
			});
589
		},
590
		bounceslide: function( options ) {
591
			this.slide( options, {
592
				easing: options.down ? "easeOutBounce" : "swing",
593
				duration: options.down ? 1000 : 200
594
			});
595
		}
596
	}
597
});
598

    
599
})( jQuery );
(16-16/32)