You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

708 lines
18 KiB

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