Nenhuma Descrição

menu.js 17KB

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