Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
40 aurelien 1
/*
2
 * jQuery UI Accordion 1.8.5
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 ui-corner-top" );
96
		self.active.next().addClass( "ui-accordion-content-active" );
97
 
98
		self._createIcons();
99
		self.resize();
100
 
101
		// ARIA
102
		self.element.attr( "role", "tablist" );
103
 
104
		self.headers
105
			.attr( "role", "tab" )
106
			.bind( "keydown.accordion", function( event ) {
107
				return self._keydown( event );
108
			})
109
			.next()
110
				.attr( "role", "tabpanel" );
111
 
112
		self.headers
113
			.not( self.active || "" )
114
			.attr({
115
				"aria-expanded": "false",
116
				tabIndex: -1
117
			})
118
			.next()
119
				.hide();
120
 
121
		// make sure at least one header is in the tab order
122
		if ( !self.active.length ) {
123
			self.headers.eq( 0 ).attr( "tabIndex", 0 );
124
		} else {
125
			self.active
126
				.attr({
127
					"aria-expanded": "true",
128
					tabIndex: 0
129
				});
130
		}
131
 
132
		// only need links in tab order for Safari
133
		if ( !$.browser.safari ) {
134
			self.headers.find( "a" ).attr( "tabIndex", -1 );
135
		}
136
 
137
		if ( options.event ) {
138
			self.headers.bind( options.event.split(" ").join(".accordion ") + ".accordion", function(event) {
139
				self._clickHandler.call( self, event, this );
140
				event.preventDefault();
141
			});
142
		}
143
	},
144
 
145
	_createIcons: function() {
146
		var options = this.options;
147
		if ( options.icons ) {
148
			$( "<span></span>" )
149
				.addClass( "ui-icon " + options.icons.header )
150
				.prependTo( this.headers );
151
			this.active.children( ".ui-icon" )
152
				.toggleClass(options.icons.header)
153
				.toggleClass(options.icons.headerSelected);
154
			this.element.addClass( "ui-accordion-icons" );
155
		}
156
	},
157
 
158
	_destroyIcons: function() {
159
		this.headers.children( ".ui-icon" ).remove();
160
		this.element.removeClass( "ui-accordion-icons" );
161
	},
162
 
163
	destroy: function() {
164
		var options = this.options;
165
 
166
		this.element
167
			.removeClass( "ui-accordion ui-widget ui-helper-reset" )
168
			.removeAttr( "role" );
169
 
170
		this.headers
171
			.unbind( ".accordion" )
172
			.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" )
173
			.removeAttr( "role" )
174
			.removeAttr( "aria-expanded" )
175
			.removeAttr( "tabIndex" );
176
 
177
		this.headers.find( "a" ).removeAttr( "tabIndex" );
178
		this._destroyIcons();
179
		var contents = this.headers.next()
180
			.css( "display", "" )
181
			.removeAttr( "role" )
182
			.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-accordion-disabled ui-state-disabled" );
183
		if ( options.autoHeight || options.fillHeight ) {
184
			contents.css( "height", "" );
185
		}
186
 
187
		return $.Widget.prototype.destroy.call( this );
188
	},
189
 
190
	_setOption: function( key, value ) {
191
		$.Widget.prototype._setOption.apply( this, arguments );
192
 
193
		if ( key == "active" ) {
194
			this.activate( value );
195
		}
196
		if ( key == "icons" ) {
197
			this._destroyIcons();
198
			if ( value ) {
199
				this._createIcons();
200
			}
201
		}
202
		// #5332 - opacity doesn't cascade to positioned elements in IE
203
		// so we need to add the disabled class to the headers and panels
204
		if ( key == "disabled" ) {
205
			this.headers.add(this.headers.next())
206
				[ value ? "addClass" : "removeClass" ](
207
					"ui-accordion-disabled ui-state-disabled" );
208
		}
209
	},
210
 
211
	_keydown: function( event ) {
212
		if ( this.options.disabled || event.altKey || event.ctrlKey ) {
213
			return;
214
		}
215
 
216
		var keyCode = $.ui.keyCode,
217
			length = this.headers.length,
218
			currentIndex = this.headers.index( event.target ),
219
			toFocus = false;
220
 
221
		switch ( event.keyCode ) {
222
			case keyCode.RIGHT:
223
			case keyCode.DOWN:
224
				toFocus = this.headers[ ( currentIndex + 1 ) % length ];
225
				break;
226
			case keyCode.LEFT:
227
			case keyCode.UP:
228
				toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
229
				break;
230
			case keyCode.SPACE:
231
			case keyCode.ENTER:
232
				this._clickHandler( { target: event.target }, event.target );
233
				event.preventDefault();
234
		}
235
 
236
		if ( toFocus ) {
237
			$( event.target ).attr( "tabIndex", -1 );
238
			$( toFocus ).attr( "tabIndex", 0 );
239
			toFocus.focus();
240
			return false;
241
		}
242
 
243
		return true;
244
	},
245
 
246
	resize: function() {
247
		var options = this.options,
248
			maxHeight;
249
 
250
		if ( options.fillSpace ) {
251
			if ( $.browser.msie ) {
252
				var defOverflow = this.element.parent().css( "overflow" );
253
				this.element.parent().css( "overflow", "hidden");
254
			}
255
			maxHeight = this.element.parent().height();
256
			if ($.browser.msie) {
257
				this.element.parent().css( "overflow", defOverflow );
258
			}
259
 
260
			this.headers.each(function() {
261
				maxHeight -= $( this ).outerHeight( true );
262
			});
263
 
264
			this.headers.next()
265
				.each(function() {
266
					$( this ).height( Math.max( 0, maxHeight -
267
						$( this ).innerHeight() + $( this ).height() ) );
268
				})
269
				.css( "overflow", "auto" );
270
		} else if ( options.autoHeight ) {
271
			maxHeight = 0;
272
			this.headers.next()
273
				.each(function() {
274
					maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() );
275
				})
276
				.height( maxHeight );
277
		}
278
 
279
		return this;
280
	},
281
 
282
	activate: function( index ) {
283
		// TODO this gets called on init, changing the option without an explicit call for that
284
		this.options.active = index;
285
		// call clickHandler with custom event
286
		var active = this._findActive( index )[ 0 ];
287
		this._clickHandler( { target: active }, active );
288
 
289
		return this;
290
	},
291
 
292
	_findActive: function( selector ) {
293
		return selector
294
			? typeof selector === "number"
295
				? this.headers.filter( ":eq(" + selector + ")" )
296
				: this.headers.not( this.headers.not( selector ) )
297
			: selector === false
298
				? $( [] )
299
				: this.headers.filter( ":eq(0)" );
300
	},
301
 
302
	// TODO isn't event.target enough? why the separate target argument?
303
	_clickHandler: function( event, target ) {
304
		var options = this.options;
305
		if ( options.disabled ) {
306
			return;
307
		}
308
 
309
		// called only when using activate(false) to close all parts programmatically
310
		if ( !event.target ) {
311
			if ( !options.collapsible ) {
312
				return;
313
			}
314
			this.active
315
				.removeClass( "ui-state-active ui-corner-top" )
316
				.addClass( "ui-state-default ui-corner-all" )
317
				.children( ".ui-icon" )
318
					.removeClass( options.icons.headerSelected )
319
					.addClass( options.icons.header );
320
			this.active.next().addClass( "ui-accordion-content-active" );
321
			var toHide = this.active.next(),
322
				data = {
323
					options: options,
324
					newHeader: $( [] ),
325
					oldHeader: options.active,
326
					newContent: $( [] ),
327
					oldContent: toHide
328
				},
329
				toShow = ( this.active = $( [] ) );
330
			this._toggle( toShow, toHide, data );
331
			return;
332
		}
333
 
334
		// get the click target
335
		var clicked = $( event.currentTarget || target ),
336
			clickedIsActive = clicked[0] === this.active[0];
337
 
338
		// TODO the option is changed, is that correct?
339
		// TODO if it is correct, shouldn't that happen after determining that the click is valid?
340
		options.active = options.collapsible && clickedIsActive ?
341
			false :
342
			this.headers.index( clicked );
343
 
344
		// if animations are still active, or the active header is the target, ignore click
345
		if ( this.running || ( !options.collapsible && clickedIsActive ) ) {
346
			return;
347
		}
348
 
349
		// switch classes
350
		this.active
351
			.removeClass( "ui-state-active ui-corner-top" )
352
			.addClass( "ui-state-default ui-corner-all" )
353
			.children( ".ui-icon" )
354
				.removeClass( options.icons.headerSelected )
355
				.addClass( options.icons.header );
356
		if ( !clickedIsActive ) {
357
			clicked
358
				.removeClass( "ui-state-default ui-corner-all" )
359
				.addClass( "ui-state-active ui-corner-top" )
360
				.children( ".ui-icon" )
361
					.removeClass( options.icons.header )
362
					.addClass( options.icons.headerSelected );
363
			clicked
364
				.next()
365
				.addClass( "ui-accordion-content-active" );
366
		}
367
 
368
		// find elements to show and hide
369
		var toShow = clicked.next(),
370
			toHide = this.active.next(),
371
			data = {
372
				options: options,
373
				newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
374
				oldHeader: this.active,
375
				newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
376
				oldContent: toHide
377
			},
378
			down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
379
 
380
		this.active = clickedIsActive ? $([]) : clicked;
381
		this._toggle( toShow, toHide, data, clickedIsActive, down );
382
 
383
		return;
384
	},
385
 
386
	_toggle: function( toShow, toHide, data, clickedIsActive, down ) {
387
		var self = this,
388
			options = self.options;
389
 
390
		self.toShow = toShow;
391
		self.toHide = toHide;
392
		self.data = data;
393
 
394
		var complete = function() {
395
			if ( !self ) {
396
				return;
397
			}
398
			return self._completed.apply( self, arguments );
399
		};
400
 
401
		// trigger changestart event
402
		self._trigger( "changestart", null, self.data );
403
 
404
		// count elements to animate
405
		self.running = toHide.size() === 0 ? toShow.size() : toHide.size();
406
 
407
		if ( options.animated ) {
408
			var animOptions = {};
409
 
410
			if ( options.collapsible && clickedIsActive ) {
411
				animOptions = {
412
					toShow: $( [] ),
413
					toHide: toHide,
414
					complete: complete,
415
					down: down,
416
					autoHeight: options.autoHeight || options.fillSpace
417
				};
418
			} else {
419
				animOptions = {
420
					toShow: toShow,
421
					toHide: toHide,
422
					complete: complete,
423
					down: down,
424
					autoHeight: options.autoHeight || options.fillSpace
425
				};
426
			}
427
 
428
			if ( !options.proxied ) {
429
				options.proxied = options.animated;
430
			}
431
 
432
			if ( !options.proxiedDuration ) {
433
				options.proxiedDuration = options.duration;
434
			}
435
 
436
			options.animated = $.isFunction( options.proxied ) ?
437
				options.proxied( animOptions ) :
438
				options.proxied;
439
 
440
			options.duration = $.isFunction( options.proxiedDuration ) ?
441
				options.proxiedDuration( animOptions ) :
442
				options.proxiedDuration;
443
 
444
			var animations = $.ui.accordion.animations,
445
				duration = options.duration,
446
				easing = options.animated;
447
 
448
			if ( easing && !animations[ easing ] && !$.easing[ easing ] ) {
449
				easing = "slide";
450
			}
451
			if ( !animations[ easing ] ) {
452
				animations[ easing ] = function( options ) {
453
					this.slide( options, {
454
						easing: easing,
455
						duration: duration || 700
456
					});
457
				};
458
			}
459
 
460
			animations[ easing ]( animOptions );
461
		} else {
462
			if ( options.collapsible && clickedIsActive ) {
463
				toShow.toggle();
464
			} else {
465
				toHide.hide();
466
				toShow.show();
467
			}
468
 
469
			complete( true );
470
		}
471
 
472
		// TODO assert that the blur and focus triggers are really necessary, remove otherwise
473
		toHide.prev()
474
			.attr({
475
				"aria-expanded": "false",
476
				tabIndex: -1
477
			})
478
			.blur();
479
		toShow.prev()
480
			.attr({
481
				"aria-expanded": "true",
482
				tabIndex: 0
483
			})
484
			.focus();
485
	},
486
 
487
	_completed: function( cancel ) {
488
		this.running = cancel ? 0 : --this.running;
489
		if ( this.running ) {
490
			return;
491
		}
492
 
493
		if ( this.options.clearStyle ) {
494
			this.toShow.add( this.toHide ).css({
495
				height: "",
496
				overflow: ""
497
			});
498
		}
499
 
500
		// other classes are removed before the animation; this one needs to stay until completed
501
		this.toHide.removeClass( "ui-accordion-content-active" );
502
 
503
		this._trigger( "change", null, this.data );
504
	}
505
});
506
 
507
$.extend( $.ui.accordion, {
508
	version: "1.8.5",
509
	animations: {
510
		slide: function( options, additions ) {
511
			options = $.extend({
512
				easing: "swing",
513
				duration: 300
514
			}, options, additions );
515
			if ( !options.toHide.size() ) {
516
				options.toShow.animate({
517
					height: "show",
518
					paddingTop: "show",
519
					paddingBottom: "show"
520
				}, options );
521
				return;
522
			}
523
			if ( !options.toShow.size() ) {
524
				options.toHide.animate({
525
					height: "hide",
526
					paddingTop: "hide",
527
					paddingBottom: "hide"
528
				}, options );
529
				return;
530
			}
531
			var overflow = options.toShow.css( "overflow" ),
532
				percentDone = 0,
533
				showProps = {},
534
				hideProps = {},
535
				fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
536
				originalWidth;
537
			// fix width before calculating height of hidden element
538
			var s = options.toShow;
539
			originalWidth = s[0].style.width;
540
			s.width( parseInt( s.parent().width(), 10 )
541
				- parseInt( s.css( "paddingLeft" ), 10 )
542
				- parseInt( s.css( "paddingRight" ), 10 )
543
				- ( parseInt( s.css( "borderLeftWidth" ), 10 ) || 0 )
544
				- ( parseInt( s.css( "borderRightWidth" ), 10) || 0 ) );
545
 
546
			$.each( fxAttrs, function( i, prop ) {
547
				hideProps[ prop ] = "hide";
548
 
549
				var parts = ( "" + $.css( options.toShow[0], prop ) ).match( /^([\d+-.]+)(.*)$/ );
550
				showProps[ prop ] = {
551
					value: parts[ 1 ],
552
					unit: parts[ 2 ] || "px"
553
				};
554
			});
555
			options.toShow.css({ height: 0, overflow: "hidden" }).show();
556
			options.toHide
557
				.filter( ":hidden" )
558
					.each( options.complete )
559
				.end()
560
				.filter( ":visible" )
561
				.animate( hideProps, {
562
				step: function( now, settings ) {
563
					// only calculate the percent when animating height
564
					// IE gets very inconsistent results when animating elements
565
					// with small values, which is common for padding
566
					if ( settings.prop == "height" ) {
567
						percentDone = ( settings.end - settings.start === 0 ) ? 0 :
568
							( settings.now - settings.start ) / ( settings.end - settings.start );
569
					}
570
 
571
					options.toShow[ 0 ].style[ settings.prop ] =
572
						( percentDone * showProps[ settings.prop ].value )
573
						+ showProps[ settings.prop ].unit;
574
				},
575
				duration: options.duration,
576
				easing: options.easing,
577
				complete: function() {
578
					if ( !options.autoHeight ) {
579
						options.toShow.css( "height", "" );
580
					}
581
					options.toShow.css({
582
						width: originalWidth,
583
						overflow: overflow
584
					});
585
					options.complete();
586
				}
587
			});
588
		},
589
		bounceslide: function( options ) {
590
			this.slide( options, {
591
				easing: options.down ? "easeOutBounce" : "swing",
592
				duration: options.down ? 1000 : 200
593
			});
594
		}
595
	}
596
});
597
 
598
})( jQuery );