Context Navigation

source: trunk/themes/default/js/ui/jquery.ui.menu.js @ 28780

Last change on this file since 28780 was 28780, checked in by rvelices, 10 years ago
upgrade jquery ui from 1.10.1 to 1.10.4
File size: 16.4 KB

Line
1	/*!
2	* jQuery UI Menu 1.10.4
3	* http://jqueryui.com
4	*
5	* Copyright 2014 jQuery Foundation and other contributors
6	* Released under the MIT license.
7	* http://jquery.org/license
8	*
9	* http://api.jqueryui.com/menu/
10	*
11	* Depends:
12	* jquery.ui.core.js
13	* jquery.ui.widget.js
14	* jquery.ui.position.js
15	*/
16	(function( $, undefined ) {
17
18	$.widget( "ui.menu", {
19	version: "1.10.4",
20	defaultElement: "<ul>",
21	delay: 300,
22	options: {
23	icons: {
24	submenu: "ui-icon-carat-1-e"
25	},
26	menus: "ul",
27	position: {
28	my: "left top",
29	at: "right top"
30	},
31	role: "menu",
32
33	// callbacks
34	blur: null,
35	focus: null,
36	select: null
37	},
38
39	_create: function() {
40	this.activeMenu = this.element;
41	// flag used to prevent firing of the click handler
42	// as the event bubbles up through nested menus
43	this.mouseHandled = false;
44	this.element
45	.uniqueId()
46	.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
47	.toggleClass( "ui-menu-icons", !!this.element.find( ".ui-icon" ).length )
48	.attr({
49	role: this.options.role,
50	tabIndex: 0
51	})
52	// need to catch all clicks on disabled menu
53	// not possible through _on
54	.bind( "click" + this.eventNamespace, $.proxy(function( event ) {
55	if ( this.options.disabled ) {
56	event.preventDefault();
57	}
58	}, this ));
59
60	if ( this.options.disabled ) {
61	this.element
62	.addClass( "ui-state-disabled" )
63	.attr( "aria-disabled", "true" );
64	}
65
66	this._on({
67	// Prevent focus from sticking to links inside menu after clicking
68	// them (focus should always stay on UL during navigation).
69	"mousedown .ui-menu-item > a": function( event ) {
70	event.preventDefault();
71	},
72	"click .ui-state-disabled > a": function( event ) {
73	event.preventDefault();
74	},
75	"click .ui-menu-item:has(a)": function( event ) {
76	var target = $( event.target ).closest( ".ui-menu-item" );
77	if ( !this.mouseHandled && target.not( ".ui-state-disabled" ).length ) {
78	this.select( event );
79
80	// Only set the mouseHandled flag if the event will bubble, see #9469.
81	if ( !event.isPropagationStopped() ) {
82	this.mouseHandled = true;
83	}
84
85	// Open submenu on click
86	if ( target.has( ".ui-menu" ).length ) {
87	this.expand( event );
88	} else if ( !this.element.is( ":focus" ) && $( this.document[ 0 ].activeElement ).closest( ".ui-menu" ).length ) {
89
90	// Redirect focus to the menu
91	this.element.trigger( "focus", [ true ] );
92
93	// If the active item is on the top level, let it stay active.
94	// Otherwise, blur the active item since it is no longer visible.
95	if ( this.active && this.active.parents( ".ui-menu" ).length === 1 ) {
96	clearTimeout( this.timer );
97	}
98	}
99	}
100	},
101	"mouseenter .ui-menu-item": function( event ) {
102	var target = $( event.currentTarget );
103	// Remove ui-state-active class from siblings of the newly focused menu item
104	// to avoid a jump caused by adjacent elements both having a class with a border
105	target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" );
106	this.focus( event, target );
107	},
108	mouseleave: "collapseAll",
109	"mouseleave .ui-menu": "collapseAll",
110	focus: function( event, keepActiveItem ) {
111	// If there's already an active item, keep it active
112	// If not, activate the first item
113	var item = this.active \|\| this.element.children( ".ui-menu-item" ).eq( 0 );
114
115	if ( !keepActiveItem ) {
116	this.focus( event, item );
117	}
118	},
119	blur: function( event ) {
120	this._delay(function() {
121	if ( !$.contains( this.element[0], this.document[0].activeElement ) ) {
122	this.collapseAll( event );
123	}
124	});
125	},
126	keydown: "_keydown"
127	});
128
129	this.refresh();
130
131	// Clicks outside of a menu collapse any open menus
132	this._on( this.document, {
133	click: function( event ) {
134	if ( !$( event.target ).closest( ".ui-menu" ).length ) {
135	this.collapseAll( event );
136	}
137
138	// Reset the mouseHandled flag
139	this.mouseHandled = false;
140	}
141	});
142	},
143
144	_destroy: function() {
145	// Destroy (sub)menus
146	this.element
147	.removeAttr( "aria-activedescendant" )
148	.find( ".ui-menu" ).addBack()
149	.removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all ui-menu-icons" )
150	.removeAttr( "role" )
151	.removeAttr( "tabIndex" )
152	.removeAttr( "aria-labelledby" )
153	.removeAttr( "aria-expanded" )
154	.removeAttr( "aria-hidden" )
155	.removeAttr( "aria-disabled" )
156	.removeUniqueId()
157	.show();
158
159	// Destroy menu items
160	this.element.find( ".ui-menu-item" )
161	.removeClass( "ui-menu-item" )
162	.removeAttr( "role" )
163	.removeAttr( "aria-disabled" )
164	.children( "a" )
165	.removeUniqueId()
166	.removeClass( "ui-corner-all ui-state-hover" )
167	.removeAttr( "tabIndex" )
168	.removeAttr( "role" )
169	.removeAttr( "aria-haspopup" )
170	.children().each( function() {
171	var elem = $( this );
172	if ( elem.data( "ui-menu-submenu-carat" ) ) {
173	elem.remove();
174	}
175	});
176
177	// Destroy menu dividers
178	this.element.find( ".ui-menu-divider" ).removeClass( "ui-menu-divider ui-widget-content" );
179	},
180
181	_keydown: function( event ) {
182	var match, prev, character, skip, regex,
183	preventDefault = true;
184
185	function escape( value ) {
186	return value.replace( /[\-\[\]{}()*+?.,\\\^$\|#\s]/g, "\\$&" );
187	}
188
189	switch ( event.keyCode ) {
190	case $.ui.keyCode.PAGE_UP:
191	this.previousPage( event );
192	break;
193	case $.ui.keyCode.PAGE_DOWN:
194	this.nextPage( event );
195	break;
196	case $.ui.keyCode.HOME:
197	this._move( "first", "first", event );
198	break;
199	case $.ui.keyCode.END:
200	this._move( "last", "last", event );
201	break;
202	case $.ui.keyCode.UP:
203	this.previous( event );
204	break;
205	case $.ui.keyCode.DOWN:
206	this.next( event );
207	break;
208	case $.ui.keyCode.LEFT:
209	this.collapse( event );
210	break;
211	case $.ui.keyCode.RIGHT:
212	if ( this.active && !this.active.is( ".ui-state-disabled" ) ) {
213	this.expand( event );
214	}
215	break;
216	case $.ui.keyCode.ENTER:
217	case $.ui.keyCode.SPACE:
218	this._activate( event );
219	break;
220	case $.ui.keyCode.ESCAPE:
221	this.collapse( event );
222	break;
223	default:
224	preventDefault = false;
225	prev = this.previousFilter \|\| "";
226	character = String.fromCharCode( event.keyCode );
227	skip = false;
228
229	clearTimeout( this.filterTimer );
230
231	if ( character === prev ) {
232	skip = true;
233	} else {
234	character = prev + character;
235	}
236
237	regex = new RegExp( "^" + escape( character ), "i" );
238	match = this.activeMenu.children( ".ui-menu-item" ).filter(function() {
239	return regex.test( $( this ).children( "a" ).text() );
240	});
241	match = skip && match.index( this.active.next() ) !== -1 ?
242	this.active.nextAll( ".ui-menu-item" ) :
243	match;
244
245	// If no matches on the current filter, reset to the last character pressed
246	// to move down the menu to the first item that starts with that character
247	if ( !match.length ) {
248	character = String.fromCharCode( event.keyCode );
249	regex = new RegExp( "^" + escape( character ), "i" );
250	match = this.activeMenu.children( ".ui-menu-item" ).filter(function() {
251	return regex.test( $( this ).children( "a" ).text() );
252	});
253	}
254
255	if ( match.length ) {
256	this.focus( event, match );
257	if ( match.length > 1 ) {
258	this.previousFilter = character;
259	this.filterTimer = this._delay(function() {
260	delete this.previousFilter;
261	}, 1000 );
262	} else {
263	delete this.previousFilter;
264	}
265	} else {
266	delete this.previousFilter;
267	}
268	}
269
270	if ( preventDefault ) {
271	event.preventDefault();
272	}
273	},
274
275	_activate: function( event ) {
276	if ( !this.active.is( ".ui-state-disabled" ) ) {
277	if ( this.active.children( "a[aria-haspopup='true']" ).length ) {
278	this.expand( event );
279	} else {
280	this.select( event );
281	}
282	}
283	},
284
285	refresh: function() {
286	var menus,
287	icon = this.options.icons.submenu,
288	submenus = this.element.find( this.options.menus );
289
290	this.element.toggleClass( "ui-menu-icons", !!this.element.find( ".ui-icon" ).length );
291
292	// Initialize nested menus
293	submenus.filter( ":not(.ui-menu)" )
294	.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
295	.hide()
296	.attr({
297	role: this.options.role,
298	"aria-hidden": "true",
299	"aria-expanded": "false"
300	})
301	.each(function() {
302	var menu = $( this ),
303	item = menu.prev( "a" ),
304	submenuCarat = $( "<span>" )
305	.addClass( "ui-menu-icon ui-icon " + icon )
306	.data( "ui-menu-submenu-carat", true );
307
308	item
309	.attr( "aria-haspopup", "true" )
310	.prepend( submenuCarat );
311	menu.attr( "aria-labelledby", item.attr( "id" ) );
312	});
313
314	menus = submenus.add( this.element );
315
316	// Don't refresh list items that are already adapted
317	menus.children( ":not(.ui-menu-item):has(a)" )
318	.addClass( "ui-menu-item" )
319	.attr( "role", "presentation" )
320	.children( "a" )
321	.uniqueId()
322	.addClass( "ui-corner-all" )
323	.attr({
324	tabIndex: -1,
325	role: this._itemRole()
326	});
327
328	// Initialize unlinked menu-items containing spaces and/or dashes only as dividers
329	menus.children( ":not(.ui-menu-item)" ).each(function() {
330	var item = $( this );
331	// hyphen, em dash, en dash
332	if ( !/[^\-\u2014\u2013\s]/.test( item.text() ) ) {
333	item.addClass( "ui-widget-content ui-menu-divider" );
334	}
335	});
336
337	// Add aria-disabled attribute to any disabled menu item
338	menus.children( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
339
340	// If the active item has been removed, blur the menu
341	if ( this.active && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
342	this.blur();
343	}
344	},
345
346	_itemRole: function() {
347	return {
348	menu: "menuitem",
349	listbox: "option"
350	}[ this.options.role ];
351	},
352
353	_setOption: function( key, value ) {
354	if ( key === "icons" ) {
355	this.element.find( ".ui-menu-icon" )
356	.removeClass( this.options.icons.submenu )
357	.addClass( value.submenu );
358	}
359	this._super( key, value );
360	},
361
362	focus: function( event, item ) {
363	var nested, focused;
364	this.blur( event, event && event.type === "focus" );
365
366	this._scrollIntoView( item );
367
368	this.active = item.first();
369	focused = this.active.children( "a" ).addClass( "ui-state-focus" );
370	// Only update aria-activedescendant if there's a role
371	// otherwise we assume focus is managed elsewhere
372	if ( this.options.role ) {
373	this.element.attr( "aria-activedescendant", focused.attr( "id" ) );
374	}
375
376	// Highlight active parent menu item, if any
377	this.active
378	.parent()
379	.closest( ".ui-menu-item" )
380	.children( "a:first" )
381	.addClass( "ui-state-active" );
382
383	if ( event && event.type === "keydown" ) {
384	this._close();
385	} else {
386	this.timer = this._delay(function() {
387	this._close();
388	}, this.delay );
389	}
390
391	nested = item.children( ".ui-menu" );
392	if ( nested.length && event && ( /^mouse/.test( event.type ) ) ) {
393	this._startOpening(nested);
394	}
395	this.activeMenu = item.parent();
396
397	this._trigger( "focus", event, { item: item } );
398	},
399
400	_scrollIntoView: function( item ) {
401	var borderTop, paddingTop, offset, scroll, elementHeight, itemHeight;
402	if ( this._hasScroll() ) {
403	borderTop = parseFloat( $.css( this.activeMenu[0], "borderTopWidth" ) ) \|\| 0;
404	paddingTop = parseFloat( $.css( this.activeMenu[0], "paddingTop" ) ) \|\| 0;
405	offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
406	scroll = this.activeMenu.scrollTop();
407	elementHeight = this.activeMenu.height();
408	itemHeight = item.height();
409
410	if ( offset < 0 ) {
411	this.activeMenu.scrollTop( scroll + offset );
412	} else if ( offset + itemHeight > elementHeight ) {
413	this.activeMenu.scrollTop( scroll + offset - elementHeight + itemHeight );
414	}
415	}
416	},
417
418	blur: function( event, fromFocus ) {
419	if ( !fromFocus ) {
420	clearTimeout( this.timer );
421	}
422
423	if ( !this.active ) {
424	return;
425	}
426
427	this.active.children( "a" ).removeClass( "ui-state-focus" );
428	this.active = null;
429
430	this._trigger( "blur", event, { item: this.active } );
431	},
432
433	_startOpening: function( submenu ) {
434	clearTimeout( this.timer );
435
436	// Don't open if already open fixes a Firefox bug that caused a .5 pixel
437	// shift in the submenu position when mousing over the carat icon
438	if ( submenu.attr( "aria-hidden" ) !== "true" ) {
439	return;
440	}
441
442	this.timer = this._delay(function() {
443	this._close();
444	this._open( submenu );
445	}, this.delay );
446	},
447
448	_open: function( submenu ) {
449	var position = $.extend({
450	of: this.active
451	}, this.options.position );
452
453	clearTimeout( this.timer );
454	this.element.find( ".ui-menu" ).not( submenu.parents( ".ui-menu" ) )
455	.hide()
456	.attr( "aria-hidden", "true" );
457
458	submenu
459	.show()
460	.removeAttr( "aria-hidden" )
461	.attr( "aria-expanded", "true" )
462	.position( position );
463	},
464
465	collapseAll: function( event, all ) {
466	clearTimeout( this.timer );
467	this.timer = this._delay(function() {
468	// If we were passed an event, look for the submenu that contains the event
469	var currentMenu = all ? this.element :
470	$( event && event.target ).closest( this.element.find( ".ui-menu" ) );
471
472	// If we found no valid submenu ancestor, use the main menu to close all sub menus anyway
473	if ( !currentMenu.length ) {
474	currentMenu = this.element;
475	}
476
477	this._close( currentMenu );
478
479	this.blur( event );
480	this.activeMenu = currentMenu;
481	}, this.delay );
482	},
483
484	// With no arguments, closes the currently active menu - if nothing is active
485	// it closes all menus. If passed an argument, it will search for menus BELOW
486	_close: function( startMenu ) {
487	if ( !startMenu ) {
488	startMenu = this.active ? this.active.parent() : this.element;
489	}
490
491	startMenu
492	.find( ".ui-menu" )
493	.hide()
494	.attr( "aria-hidden", "true" )
495	.attr( "aria-expanded", "false" )
496	.end()
497	.find( "a.ui-state-active" )
498	.removeClass( "ui-state-active" );
499	},
500
501	collapse: function( event ) {
502	var newItem = this.active &&
503	this.active.parent().closest( ".ui-menu-item", this.element );
504	if ( newItem && newItem.length ) {
505	this._close();
506	this.focus( event, newItem );
507	}
508	},
509
510	expand: function( event ) {
511	var newItem = this.active &&
512	this.active
513	.children( ".ui-menu " )
514	.children( ".ui-menu-item" )
515	.first();
516
517	if ( newItem && newItem.length ) {
518	this._open( newItem.parent() );
519
520	// Delay so Firefox will not hide activedescendant change in expanding submenu from AT
521	this._delay(function() {
522	this.focus( event, newItem );
523	});
524	}
525	},
526
527	next: function( event ) {
528	this._move( "next", "first", event );
529	},
530
531	previous: function( event ) {
532	this._move( "prev", "last", event );
533	},
534
535	isFirstItem: function() {
536	return this.active && !this.active.prevAll( ".ui-menu-item" ).length;
537	},
538
539	isLastItem: function() {
540	return this.active && !this.active.nextAll( ".ui-menu-item" ).length;
541	},
542
543	_move: function( direction, filter, event ) {
544	var next;
545	if ( this.active ) {
546	if ( direction === "first" \|\| direction === "last" ) {
547	next = this.active
548	[ direction === "first" ? "prevAll" : "nextAll" ]( ".ui-menu-item" )
549	.eq( -1 );
550	} else {
551	next = this.active
552	[ direction + "All" ]( ".ui-menu-item" )
553	.eq( 0 );
554	}
555	}
556	if ( !next \|\| !next.length \|\| !this.active ) {
557	next = this.activeMenu.children( ".ui-menu-item" )[ filter ]();
558	}
559
560	this.focus( event, next );
561	},
562
563	nextPage: function( event ) {
564	var item, base, height;
565
566	if ( !this.active ) {
567	this.next( event );
568	return;
569	}
570	if ( this.isLastItem() ) {
571	return;
572	}
573	if ( this._hasScroll() ) {
574	base = this.active.offset().top;
575	height = this.element.height();
576	this.active.nextAll( ".ui-menu-item" ).each(function() {
577	item = $( this );
578	return item.offset().top - base - height < 0;
579	});
580
581	this.focus( event, item );
582	} else {
583	this.focus( event, this.activeMenu.children( ".ui-menu-item" )
584	[ !this.active ? "first" : "last" ]() );
585	}
586	},
587
588	previousPage: function( event ) {
589	var item, base, height;
590	if ( !this.active ) {
591	this.next( event );
592	return;
593	}
594	if ( this.isFirstItem() ) {
595	return;
596	}
597	if ( this._hasScroll() ) {
598	base = this.active.offset().top;
599	height = this.element.height();
600	this.active.prevAll( ".ui-menu-item" ).each(function() {
601	item = $( this );
602	return item.offset().top - base + height > 0;
603	});
604
605	this.focus( event, item );
606	} else {
607	this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() );
608	}
609	},
610
611	_hasScroll: function() {
612	return this.element.outerHeight() < this.element.prop( "scrollHeight" );
613	},
614
615	select: function( event ) {
616	// TODO: It should never be possible to not have an active item at this
617	// point, but the tests don't trigger mouseenter before click.
618	this.active = this.active \|\| $( event.target ).closest( ".ui-menu-item" );
619	var ui = { item: this.active };
620	if ( !this.active.has( ".ui-menu" ).length ) {
621	this.collapseAll( event, true );
622	}
623	this._trigger( "select", event, ui );
624	}
625	});
626
627	}( jQuery ));

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

Download in other formats: