Context Navigation

source: trunk/template-common/lib/ui/ui.accordion.js @ 4918

Last change on this file since 4918 was 4918, checked in by nikrou, 14 years ago

Feature 1442 : update jquery

update jquery to 1.4.1
update jquery ui to 1.7.2

Property svn:eol-style set to LF

File size: 13.2 KB

Line
1	/*
2	* jQuery UI Accordion 1.7.2
3	*
4	* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
5	* Dual licensed under the MIT (MIT-LICENSE.txt)
6	* and GPL (GPL-LICENSE.txt) licenses.
7	*
8	* http://docs.jquery.com/UI/Accordion
9	*
10	* Depends:
11	* ui.core.js
12	*/
13	(function($) {
14
15	$.widget("ui.accordion", {
16
17	_init: function() {
18
19	var o = this.options, self = this;
20	this.running = 0;
21
22	// if the user set the alwaysOpen option on init
23	// then we need to set the collapsible option
24	// if they set both on init, collapsible will take priority
25	if (o.collapsible == $.ui.accordion.defaults.collapsible &&
26	o.alwaysOpen != $.ui.accordion.defaults.alwaysOpen) {
27	o.collapsible = !o.alwaysOpen;
28	}
29
30	if ( o.navigation ) {
31	var current = this.element.find("a").filter(o.navigationFilter);
32	if ( current.length ) {
33	if ( current.filter(o.header).length ) {
34	this.active = current;
35	} else {
36	this.active = current.parent().parent().prev();
37	current.addClass("ui-accordion-content-active");
38	}
39	}
40	}
41
42	this.element.addClass("ui-accordion ui-widget ui-helper-reset");
43
44	// in lack of child-selectors in CSS we need to mark top-LIs in a UL-accordion for some IE-fix
45	if (this.element[0].nodeName == "UL") {
46	this.element.children("li").addClass("ui-accordion-li-fix");
47	}
48
49	this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
50	.bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); })
51	.bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); })
52	.bind("focus.accordion", function(){ $(this).addClass('ui-state-focus'); })
53	.bind("blur.accordion", function(){ $(this).removeClass('ui-state-focus'); });
54
55	this.headers
56	.next()
57	.addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");
58
59	this.active = this._findActive(this.active \|\| o.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
60	this.active.next().addClass('ui-accordion-content-active');
61
62	//Append icon elements
63	$("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
64	this.active.find(".ui-icon").toggleClass(o.icons.header).toggleClass(o.icons.headerSelected);
65
66	// IE7-/Win - Extra vertical space in lists fixed
67	if ($.browser.msie) {
68	this.element.find('a').css('zoom', '1');
69	}
70
71	this.resize();
72
73	//ARIA
74	this.element.attr('role','tablist');
75
76	this.headers
77	.attr('role','tab')
78	.bind('keydown', function(event) { return self._keydown(event); })
79	.next()
80	.attr('role','tabpanel');
81
82	this.headers
83	.not(this.active \|\| "")
84	.attr('aria-expanded','false')
85	.attr("tabIndex", "-1")
86	.next()
87	.hide();
88
89	// make sure at least one header is in the tab order
90	if (!this.active.length) {
91	this.headers.eq(0).attr('tabIndex','0');
92	} else {
93	this.active
94	.attr('aria-expanded','true')
95	.attr('tabIndex', '0');
96	}
97
98	// only need links in taborder for Safari
99	if (!$.browser.safari)
100	this.headers.find('a').attr('tabIndex','-1');
101
102	if (o.event) {
103	this.headers.bind((o.event) + ".accordion", function(event) { return self._clickHandler.call(self, event, this); });
104	}
105
106	},
107
108	destroy: function() {
109	var o = this.options;
110
111	this.element
112	.removeClass("ui-accordion ui-widget ui-helper-reset")
113	.removeAttr("role")
114	.unbind('.accordion')
115	.removeData('accordion');
116
117	this.headers
118	.unbind(".accordion")
119	.removeClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top")
120	.removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");
121
122	this.headers.find("a").removeAttr("tabindex");
123	this.headers.children(".ui-icon").remove();
124	var contents = this.headers.next().css("display", "").removeAttr("role").removeClass("ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active");
125	if (o.autoHeight \|\| o.fillHeight) {
126	contents.css("height", "");
127	}
128	},
129
130	_setData: function(key, value) {
131	if(key == 'alwaysOpen') { key = 'collapsible'; value = !value; }
132	$.widget.prototype._setData.apply(this, arguments);
133	},
134
135	_keydown: function(event) {
136
137	var o = this.options, keyCode = $.ui.keyCode;
138
139	if (o.disabled \|\| event.altKey \|\| event.ctrlKey)
140	return;
141
142	var length = this.headers.length;
143	var currentIndex = this.headers.index(event.target);
144	var toFocus = false;
145
146	switch(event.keyCode) {
147	case keyCode.RIGHT:
148	case keyCode.DOWN:
149	toFocus = this.headers[(currentIndex + 1) % length];
150	break;
151	case keyCode.LEFT:
152	case keyCode.UP:
153	toFocus = this.headers[(currentIndex - 1 + length) % length];
154	break;
155	case keyCode.SPACE:
156	case keyCode.ENTER:
157	return this._clickHandler({ target: event.target }, event.target);
158	}
159
160	if (toFocus) {
161	$(event.target).attr('tabIndex','-1');
162	$(toFocus).attr('tabIndex','0');
163	toFocus.focus();
164	return false;
165	}
166
167	return true;
168
169	},
170
171	resize: function() {
172
173	var o = this.options, maxHeight;
174
175	if (o.fillSpace) {
176
177	if($.browser.msie) { var defOverflow = this.element.parent().css('overflow'); this.element.parent().css('overflow', 'hidden'); }
178	maxHeight = this.element.parent().height();
179	if($.browser.msie) { this.element.parent().css('overflow', defOverflow); }
180
181	this.headers.each(function() {
182	maxHeight -= $(this).outerHeight();
183	});
184
185	var maxPadding = 0;
186	this.headers.next().each(function() {
187	maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
188	}).height(Math.max(0, maxHeight - maxPadding))
189	.css('overflow', 'auto');
190
191	} else if ( o.autoHeight ) {
192	maxHeight = 0;
193	this.headers.next().each(function() {
194	maxHeight = Math.max(maxHeight, $(this).outerHeight());
195	}).height(maxHeight);
196	}
197
198	},
199
200	activate: function(index) {
201	// call clickHandler with custom event
202	var active = this._findActive(index)[0];
203	this._clickHandler({ target: active }, active);
204	},
205
206	_findActive: function(selector) {
207	return selector
208	? typeof selector == "number"
209	? this.headers.filter(":eq(" + selector + ")")
210	: this.headers.not(this.headers.not(selector))
211	: selector === false
212	? $([])
213	: this.headers.filter(":eq(0)");
214	},
215
216	_clickHandler: function(event, target) {
217
218	var o = this.options;
219	if (o.disabled) return false;
220
221	// called only when using activate(false) to close all parts programmatically
222	if (!event.target && o.collapsible) {
223	this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
224	.find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
225	this.active.next().addClass('ui-accordion-content-active');
226	var toHide = this.active.next(),
227	data = {
228	options: o,
229	newHeader: $([]),
230	oldHeader: o.active,
231	newContent: $([]),
232	oldContent: toHide
233	},
234	toShow = (this.active = $([]));
235	this._toggle(toShow, toHide, data);
236	return false;
237	}
238
239	// get the click target
240	var clicked = $(event.currentTarget \|\| target);
241	var clickedIsActive = clicked[0] == this.active[0];
242
243	// if animations are still active, or the active header is the target, ignore click
244	if (this.running \|\| (!o.collapsible && clickedIsActive)) {
245	return false;
246	}
247
248	// switch classes
249	this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
250	.find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
251	this.active.next().addClass('ui-accordion-content-active');
252	if (!clickedIsActive) {
253	clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top")
254	.find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
255	clicked.next().addClass('ui-accordion-content-active');
256	}
257
258	// find elements to show and hide
259	var toShow = clicked.next(),
260	toHide = this.active.next(),
261	data = {
262	options: o,
263	newHeader: clickedIsActive && o.collapsible ? $([]) : clicked,
264	oldHeader: this.active,
265	newContent: clickedIsActive && o.collapsible ? $([]) : toShow.find('> *'),
266	oldContent: toHide.find('> *')
267	},
268	down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
269
270	this.active = clickedIsActive ? $([]) : clicked;
271	this._toggle(toShow, toHide, data, clickedIsActive, down);
272
273	return false;
274
275	},
276
277	_toggle: function(toShow, toHide, data, clickedIsActive, down) {
278
279	var o = this.options, self = this;
280
281	this.toShow = toShow;
282	this.toHide = toHide;
283	this.data = data;
284
285	var complete = function() { if(!self) return; return self._completed.apply(self, arguments); };
286
287	// trigger changestart event
288	this._trigger("changestart", null, this.data);
289
290	// count elements to animate
291	this.running = toHide.size() === 0 ? toShow.size() : toHide.size();
292
293	if (o.animated) {
294
295	var animOptions = {};
296
297	if ( o.collapsible && clickedIsActive ) {
298	animOptions = {
299	toShow: $([]),
300	toHide: toHide,
301	complete: complete,
302	down: down,
303	autoHeight: o.autoHeight \|\| o.fillSpace
304	};
305	} else {
306	animOptions = {
307	toShow: toShow,
308	toHide: toHide,
309	complete: complete,
310	down: down,
311	autoHeight: o.autoHeight \|\| o.fillSpace
312	};
313	}
314
315	if (!o.proxied) {
316	o.proxied = o.animated;
317	}
318
319	if (!o.proxiedDuration) {
320	o.proxiedDuration = o.duration;
321	}
322
323	o.animated = $.isFunction(o.proxied) ?
324	o.proxied(animOptions) : o.proxied;
325
326	o.duration = $.isFunction(o.proxiedDuration) ?
327	o.proxiedDuration(animOptions) : o.proxiedDuration;
328
329	var animations = $.ui.accordion.animations,
330	duration = o.duration,
331	easing = o.animated;
332
333	if (!animations[easing]) {
334	animations[easing] = function(options) {
335	this.slide(options, {
336	easing: easing,
337	duration: duration \|\| 700
338	});
339	};
340	}
341
342	animations[easing](animOptions);
343
344	} else {
345
346	if (o.collapsible && clickedIsActive) {
347	toShow.toggle();
348	} else {
349	toHide.hide();
350	toShow.show();
351	}
352
353	complete(true);
354
355	}
356
357	toHide.prev().attr('aria-expanded','false').attr("tabIndex", "-1").blur();
358	toShow.prev().attr('aria-expanded','true').attr("tabIndex", "0").focus();
359
360	},
361
362	_completed: function(cancel) {
363
364	var o = this.options;
365
366	this.running = cancel ? 0 : --this.running;
367	if (this.running) return;
368
369	if (o.clearStyle) {
370	this.toShow.add(this.toHide).css({
371	height: "",
372	overflow: ""
373	});
374	}
375
376	this._trigger('change', null, this.data);
377	}
378
379	});
380
381
382	$.extend($.ui.accordion, {
383	version: "1.7.2",
384	defaults: {
385	active: null,
386	alwaysOpen: true, //deprecated, use collapsible
387	animated: 'slide',
388	autoHeight: true,
389	clearStyle: false,
390	collapsible: false,
391	event: "click",
392	fillSpace: false,
393	header: "> li > :first-child,> :not(li):even",
394	icons: {
395	header: "ui-icon-triangle-1-e",
396	headerSelected: "ui-icon-triangle-1-s"
397	},
398	navigation: false,
399	navigationFilter: function() {
400	return this.href.toLowerCase() == location.href.toLowerCase();
401	}
402	},
403	animations: {
404	slide: function(options, additions) {
405	options = $.extend({
406	easing: "swing",
407	duration: 300
408	}, options, additions);
409	if ( !options.toHide.size() ) {
410	options.toShow.animate({height: "show"}, options);
411	return;
412	}
413	if ( !options.toShow.size() ) {
414	options.toHide.animate({height: "hide"}, options);
415	return;
416	}
417	var overflow = options.toShow.css('overflow'),
418	percentDone,
419	showProps = {},
420	hideProps = {},
421	fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
422	originalWidth;
423	// fix width before calculating height of hidden element
424	var s = options.toShow;
425	originalWidth = s[0].style.width;
426	s.width( parseInt(s.parent().width(),10) - parseInt(s.css("paddingLeft"),10) - parseInt(s.css("paddingRight"),10) - (parseInt(s.css("borderLeftWidth"),10) \|\| 0) - (parseInt(s.css("borderRightWidth"),10) \|\| 0) );
427
428	$.each(fxAttrs, function(i, prop) {
429	hideProps[prop] = 'hide';
430
431	var parts = ('' + $.css(options.toShow[0], prop)).match(/^([\d+-.]+)(.*)$/);
432	showProps[prop] = {
433	value: parts[1],
434	unit: parts[2] \|\| 'px'
435	};
436	});
437	options.toShow.css({ height: 0, overflow: 'hidden' }).show();
438	options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate(hideProps,{
439	step: function(now, settings) {
440	// only calculate the percent when animating height
441	// IE gets very inconsistent results when animating elements
442	// with small values, which is common for padding
443	if (settings.prop == 'height') {
444	percentDone = (settings.now - settings.start) / (settings.end - settings.start);
445	}
446
447	options.toShow[0].style[settings.prop] =
448	(percentDone * showProps[settings.prop].value) + showProps[settings.prop].unit;
449	},
450	duration: options.duration,
451	easing: options.easing,
452	complete: function() {
453	if ( !options.autoHeight ) {
454	options.toShow.css("height", "");
455	}
456	options.toShow.css("width", originalWidth);
457	options.toShow.css({overflow: overflow});
458	options.complete();
459	}
460	});
461	},
462	bounceslide: function(options) {
463	this.slide(options, {
464	easing: options.down ? "easeOutBounce" : "swing",
465	duration: options.down ? 1000 : 200
466	});
467	},
468	easeslide: function(options) {
469	this.slide(options, {
470	easing: "easeinout",
471	duration: 700
472	});
473	}
474	}
475	});
476
477	})(jQuery);

Note: See TracBrowser for help on using the repository browser.

Download in other formats: