menu.js 17 KB

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