menu.js 18 KB

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