jquery.ui.menu.js 16KB

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