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.

687 lines
16 KiB

1 year ago
  1. /*!
  2. * jQuery UI Selectmenu 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: Selectmenu
  10. //>>group: Widgets
  11. /* eslint-disable max-len */
  12. //>>description: Duplicates and extends the functionality of a native HTML select element, allowing it to be customizable in behavior and appearance far beyond the limitations of a native select.
  13. /* eslint-enable max-len */
  14. //>>docs: http://api.jqueryui.com/selectmenu/
  15. //>>demos: http://jqueryui.com/selectmenu/
  16. //>>css.structure: ../../themes/base/core.css
  17. //>>css.structure: ../../themes/base/selectmenu.css, ../../themes/base/button.css
  18. //>>css.theme: ../../themes/base/theme.css
  19. ( function( factory ) {
  20. "use strict";
  21. if ( typeof define === "function" && define.amd ) {
  22. // AMD. Register as an anonymous module.
  23. define( [
  24. "jquery",
  25. "./menu",
  26. "./core"
  27. ], factory );
  28. } else {
  29. // Browser globals
  30. factory( jQuery );
  31. }
  32. } )( function( $ ) {
  33. "use strict";
  34. return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
  35. version: "1.13.2",
  36. defaultElement: "<select>",
  37. options: {
  38. appendTo: null,
  39. classes: {
  40. "ui-selectmenu-button-open": "ui-corner-top",
  41. "ui-selectmenu-button-closed": "ui-corner-all"
  42. },
  43. disabled: null,
  44. icons: {
  45. button: "ui-icon-triangle-1-s"
  46. },
  47. position: {
  48. my: "left top",
  49. at: "left bottom",
  50. collision: "none"
  51. },
  52. width: false,
  53. // Callbacks
  54. change: null,
  55. close: null,
  56. focus: null,
  57. open: null,
  58. select: null
  59. },
  60. _create: function() {
  61. var selectmenuId = this.element.uniqueId().attr( "id" );
  62. this.ids = {
  63. element: selectmenuId,
  64. button: selectmenuId + "-button",
  65. menu: selectmenuId + "-menu"
  66. };
  67. this._drawButton();
  68. this._drawMenu();
  69. this._bindFormResetHandler();
  70. this._rendered = false;
  71. this.menuItems = $();
  72. },
  73. _drawButton: function() {
  74. var icon,
  75. that = this,
  76. item = this._parseOption(
  77. this.element.find( "option:selected" ),
  78. this.element[ 0 ].selectedIndex
  79. );
  80. // Associate existing label with the new button
  81. this.labels = this.element.labels().attr( "for", this.ids.button );
  82. this._on( this.labels, {
  83. click: function( event ) {
  84. this.button.trigger( "focus" );
  85. event.preventDefault();
  86. }
  87. } );
  88. // Hide original select element
  89. this.element.hide();
  90. // Create button
  91. this.button = $( "<span>", {
  92. tabindex: this.options.disabled ? -1 : 0,
  93. id: this.ids.button,
  94. role: "combobox",
  95. "aria-expanded": "false",
  96. "aria-autocomplete": "list",
  97. "aria-owns": this.ids.menu,
  98. "aria-haspopup": "true",
  99. title: this.element.attr( "title" )
  100. } )
  101. .insertAfter( this.element );
  102. this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed",
  103. "ui-button ui-widget" );
  104. icon = $( "<span>" ).appendTo( this.button );
  105. this._addClass( icon, "ui-selectmenu-icon", "ui-icon " + this.options.icons.button );
  106. this.buttonItem = this._renderButtonItem( item )
  107. .appendTo( this.button );
  108. if ( this.options.width !== false ) {
  109. this._resizeButton();
  110. }
  111. this._on( this.button, this._buttonEvents );
  112. this.button.one( "focusin", function() {
  113. // Delay rendering the menu items until the button receives focus.
  114. // The menu may have already been rendered via a programmatic open.
  115. if ( !that._rendered ) {
  116. that._refreshMenu();
  117. }
  118. } );
  119. },
  120. _drawMenu: function() {
  121. var that = this;
  122. // Create menu
  123. this.menu = $( "<ul>", {
  124. "aria-hidden": "true",
  125. "aria-labelledby": this.ids.button,
  126. id: this.ids.menu
  127. } );
  128. // Wrap menu
  129. this.menuWrap = $( "<div>" ).append( this.menu );
  130. this._addClass( this.menuWrap, "ui-selectmenu-menu", "ui-front" );
  131. this.menuWrap.appendTo( this._appendTo() );
  132. // Initialize menu widget
  133. this.menuInstance = this.menu
  134. .menu( {
  135. classes: {
  136. "ui-menu": "ui-corner-bottom"
  137. },
  138. role: "listbox",
  139. select: function( event, ui ) {
  140. event.preventDefault();
  141. // Support: IE8
  142. // If the item was selected via a click, the text selection
  143. // will be destroyed in IE
  144. that._setSelection();
  145. that._select( ui.item.data( "ui-selectmenu-item" ), event );
  146. },
  147. focus: function( event, ui ) {
  148. var item = ui.item.data( "ui-selectmenu-item" );
  149. // Prevent inital focus from firing and check if its a newly focused item
  150. if ( that.focusIndex != null && item.index !== that.focusIndex ) {
  151. that._trigger( "focus", event, { item: item } );
  152. if ( !that.isOpen ) {
  153. that._select( item, event );
  154. }
  155. }
  156. that.focusIndex = item.index;
  157. that.button.attr( "aria-activedescendant",
  158. that.menuItems.eq( item.index ).attr( "id" ) );
  159. }
  160. } )
  161. .menu( "instance" );
  162. // Don't close the menu on mouseleave
  163. this.menuInstance._off( this.menu, "mouseleave" );
  164. // Cancel the menu's collapseAll on document click
  165. this.menuInstance._closeOnDocumentClick = function() {
  166. return false;
  167. };
  168. // Selects often contain empty items, but never contain dividers
  169. this.menuInstance._isDivider = function() {
  170. return false;
  171. };
  172. },
  173. refresh: function() {
  174. this._refreshMenu();
  175. this.buttonItem.replaceWith(
  176. this.buttonItem = this._renderButtonItem(
  177. // Fall back to an empty object in case there are no options
  178. this._getSelectedItem().data( "ui-selectmenu-item" ) || {}
  179. )
  180. );
  181. if ( this.options.width === null ) {
  182. this._resizeButton();
  183. }
  184. },
  185. _refreshMenu: function() {
  186. var item,
  187. options = this.element.find( "option" );
  188. this.menu.empty();
  189. this._parseOptions( options );
  190. this._renderMenu( this.menu, this.items );
  191. this.menuInstance.refresh();
  192. this.menuItems = this.menu.find( "li" )
  193. .not( ".ui-selectmenu-optgroup" )
  194. .find( ".ui-menu-item-wrapper" );
  195. this._rendered = true;
  196. if ( !options.length ) {
  197. return;
  198. }
  199. item = this._getSelectedItem();
  200. // Update the menu to have the correct item focused
  201. this.menuInstance.focus( null, item );
  202. this._setAria( item.data( "ui-selectmenu-item" ) );
  203. // Set disabled state
  204. this._setOption( "disabled", this.element.prop( "disabled" ) );
  205. },
  206. open: function( event ) {
  207. if ( this.options.disabled ) {
  208. return;
  209. }
  210. // If this is the first time the menu is being opened, render the items
  211. if ( !this._rendered ) {
  212. this._refreshMenu();
  213. } else {
  214. // Menu clears focus on close, reset focus to selected item
  215. this._removeClass( this.menu.find( ".ui-state-active" ), null, "ui-state-active" );
  216. this.menuInstance.focus( null, this._getSelectedItem() );
  217. }
  218. // If there are no options, don't open the menu
  219. if ( !this.menuItems.length ) {
  220. return;
  221. }
  222. this.isOpen = true;
  223. this._toggleAttr();
  224. this._resizeMenu();
  225. this._position();
  226. this._on( this.document, this._documentClick );
  227. this._trigger( "open", event );
  228. },
  229. _position: function() {
  230. this.menuWrap.position( $.extend( { of: this.button }, this.options.position ) );
  231. },
  232. close: function( event ) {
  233. if ( !this.isOpen ) {
  234. return;
  235. }
  236. this.isOpen = false;
  237. this._toggleAttr();
  238. this.range = null;
  239. this._off( this.document );
  240. this._trigger( "close", event );
  241. },
  242. widget: function() {
  243. return this.button;
  244. },
  245. menuWidget: function() {
  246. return this.menu;
  247. },
  248. _renderButtonItem: function( item ) {
  249. var buttonItem = $( "<span>" );
  250. this._setText( buttonItem, item.label );
  251. this._addClass( buttonItem, "ui-selectmenu-text" );
  252. return buttonItem;
  253. },
  254. _renderMenu: function( ul, items ) {
  255. var that = this,
  256. currentOptgroup = "";
  257. $.each( items, function( index, item ) {
  258. var li;
  259. if ( item.optgroup !== currentOptgroup ) {
  260. li = $( "<li>", {
  261. text: item.optgroup
  262. } );
  263. that._addClass( li, "ui-selectmenu-optgroup", "ui-menu-divider" +
  264. ( item.element.parent( "optgroup" ).prop( "disabled" ) ?
  265. " ui-state-disabled" :
  266. "" ) );
  267. li.appendTo( ul );
  268. currentOptgroup = item.optgroup;
  269. }
  270. that._renderItemData( ul, item );
  271. } );
  272. },
  273. _renderItemData: function( ul, item ) {
  274. return this._renderItem( ul, item ).data( "ui-selectmenu-item", item );
  275. },
  276. _renderItem: function( ul, item ) {
  277. var li = $( "<li>" ),
  278. wrapper = $( "<div>", {
  279. title: item.element.attr( "title" )
  280. } );
  281. if ( item.disabled ) {
  282. this._addClass( li, null, "ui-state-disabled" );
  283. }
  284. this._setText( wrapper, item.label );
  285. return li.append( wrapper ).appendTo( ul );
  286. },
  287. _setText: function( element, value ) {
  288. if ( value ) {
  289. element.text( value );
  290. } else {
  291. element.html( "&#160;" );
  292. }
  293. },
  294. _move: function( direction, event ) {
  295. var item, next,
  296. filter = ".ui-menu-item";
  297. if ( this.isOpen ) {
  298. item = this.menuItems.eq( this.focusIndex ).parent( "li" );
  299. } else {
  300. item = this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" );
  301. filter += ":not(.ui-state-disabled)";
  302. }
  303. if ( direction === "first" || direction === "last" ) {
  304. next = item[ direction === "first" ? "prevAll" : "nextAll" ]( filter ).eq( -1 );
  305. } else {
  306. next = item[ direction + "All" ]( filter ).eq( 0 );
  307. }
  308. if ( next.length ) {
  309. this.menuInstance.focus( event, next );
  310. }
  311. },
  312. _getSelectedItem: function() {
  313. return this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" );
  314. },
  315. _toggle: function( event ) {
  316. this[ this.isOpen ? "close" : "open" ]( event );
  317. },
  318. _setSelection: function() {
  319. var selection;
  320. if ( !this.range ) {
  321. return;
  322. }
  323. if ( window.getSelection ) {
  324. selection = window.getSelection();
  325. selection.removeAllRanges();
  326. selection.addRange( this.range );
  327. // Support: IE8
  328. } else {
  329. this.range.select();
  330. }
  331. // Support: IE
  332. // Setting the text selection kills the button focus in IE, but
  333. // restoring the focus doesn't kill the selection.
  334. this.button.trigger( "focus" );
  335. },
  336. _documentClick: {
  337. mousedown: function( event ) {
  338. if ( !this.isOpen ) {
  339. return;
  340. }
  341. if ( !$( event.target ).closest( ".ui-selectmenu-menu, #" +
  342. $.escapeSelector( this.ids.button ) ).length ) {
  343. this.close( event );
  344. }
  345. }
  346. },
  347. _buttonEvents: {
  348. // Prevent text selection from being reset when interacting with the selectmenu (#10144)
  349. mousedown: function() {
  350. var selection;
  351. if ( window.getSelection ) {
  352. selection = window.getSelection();
  353. if ( selection.rangeCount ) {
  354. this.range = selection.getRangeAt( 0 );
  355. }
  356. // Support: IE8
  357. } else {
  358. this.range = document.selection.createRange();
  359. }
  360. },
  361. click: function( event ) {
  362. this._setSelection();
  363. this._toggle( event );
  364. },
  365. keydown: function( event ) {
  366. var preventDefault = true;
  367. switch ( event.keyCode ) {
  368. case $.ui.keyCode.TAB:
  369. case $.ui.keyCode.ESCAPE:
  370. this.close( event );
  371. preventDefault = false;
  372. break;
  373. case $.ui.keyCode.ENTER:
  374. if ( this.isOpen ) {
  375. this._selectFocusedItem( event );
  376. }
  377. break;
  378. case $.ui.keyCode.UP:
  379. if ( event.altKey ) {
  380. this._toggle( event );
  381. } else {
  382. this._move( "prev", event );
  383. }
  384. break;
  385. case $.ui.keyCode.DOWN:
  386. if ( event.altKey ) {
  387. this._toggle( event );
  388. } else {
  389. this._move( "next", event );
  390. }
  391. break;
  392. case $.ui.keyCode.SPACE:
  393. if ( this.isOpen ) {
  394. this._selectFocusedItem( event );
  395. } else {
  396. this._toggle( event );
  397. }
  398. break;
  399. case $.ui.keyCode.LEFT:
  400. this._move( "prev", event );
  401. break;
  402. case $.ui.keyCode.RIGHT:
  403. this._move( "next", event );
  404. break;
  405. case $.ui.keyCode.HOME:
  406. case $.ui.keyCode.PAGE_UP:
  407. this._move( "first", event );
  408. break;
  409. case $.ui.keyCode.END:
  410. case $.ui.keyCode.PAGE_DOWN:
  411. this._move( "last", event );
  412. break;
  413. default:
  414. this.menu.trigger( event );
  415. preventDefault = false;
  416. }
  417. if ( preventDefault ) {
  418. event.preventDefault();
  419. }
  420. }
  421. },
  422. _selectFocusedItem: function( event ) {
  423. var item = this.menuItems.eq( this.focusIndex ).parent( "li" );
  424. if ( !item.hasClass( "ui-state-disabled" ) ) {
  425. this._select( item.data( "ui-selectmenu-item" ), event );
  426. }
  427. },
  428. _select: function( item, event ) {
  429. var oldIndex = this.element[ 0 ].selectedIndex;
  430. // Change native select element
  431. this.element[ 0 ].selectedIndex = item.index;
  432. this.buttonItem.replaceWith( this.buttonItem = this._renderButtonItem( item ) );
  433. this._setAria( item );
  434. this._trigger( "select", event, { item: item } );
  435. if ( item.index !== oldIndex ) {
  436. this._trigger( "change", event, { item: item } );
  437. }
  438. this.close( event );
  439. },
  440. _setAria: function( item ) {
  441. var id = this.menuItems.eq( item.index ).attr( "id" );
  442. this.button.attr( {
  443. "aria-labelledby": id,
  444. "aria-activedescendant": id
  445. } );
  446. this.menu.attr( "aria-activedescendant", id );
  447. },
  448. _setOption: function( key, value ) {
  449. if ( key === "icons" ) {
  450. var icon = this.button.find( "span.ui-icon" );
  451. this._removeClass( icon, null, this.options.icons.button )
  452. ._addClass( icon, null, value.button );
  453. }
  454. this._super( key, value );
  455. if ( key === "appendTo" ) {
  456. this.menuWrap.appendTo( this._appendTo() );
  457. }
  458. if ( key === "width" ) {
  459. this._resizeButton();
  460. }
  461. },
  462. _setOptionDisabled: function( value ) {
  463. this._super( value );
  464. this.menuInstance.option( "disabled", value );
  465. this.button.attr( "aria-disabled", value );
  466. this._toggleClass( this.button, null, "ui-state-disabled", value );
  467. this.element.prop( "disabled", value );
  468. if ( value ) {
  469. this.button.attr( "tabindex", -1 );
  470. this.close();
  471. } else {
  472. this.button.attr( "tabindex", 0 );
  473. }
  474. },
  475. _appendTo: function() {
  476. var element = this.options.appendTo;
  477. if ( element ) {
  478. element = element.jquery || element.nodeType ?
  479. $( element ) :
  480. this.document.find( element ).eq( 0 );
  481. }
  482. if ( !element || !element[ 0 ] ) {
  483. element = this.element.closest( ".ui-front, dialog" );
  484. }
  485. if ( !element.length ) {
  486. element = this.document[ 0 ].body;
  487. }
  488. return element;
  489. },
  490. _toggleAttr: function() {
  491. this.button.attr( "aria-expanded", this.isOpen );
  492. // We can't use two _toggleClass() calls here, because we need to make sure
  493. // we always remove classes first and add them second, otherwise if both classes have the
  494. // same theme class, it will be removed after we add it.
  495. this._removeClass( this.button, "ui-selectmenu-button-" +
  496. ( this.isOpen ? "closed" : "open" ) )
  497. ._addClass( this.button, "ui-selectmenu-button-" +
  498. ( this.isOpen ? "open" : "closed" ) )
  499. ._toggleClass( this.menuWrap, "ui-selectmenu-open", null, this.isOpen );
  500. this.menu.attr( "aria-hidden", !this.isOpen );
  501. },
  502. _resizeButton: function() {
  503. var width = this.options.width;
  504. // For `width: false`, just remove inline style and stop
  505. if ( width === false ) {
  506. this.button.css( "width", "" );
  507. return;
  508. }
  509. // For `width: null`, match the width of the original element
  510. if ( width === null ) {
  511. width = this.element.show().outerWidth();
  512. this.element.hide();
  513. }
  514. this.button.outerWidth( width );
  515. },
  516. _resizeMenu: function() {
  517. this.menu.outerWidth( Math.max(
  518. this.button.outerWidth(),
  519. // Support: IE10
  520. // IE10 wraps long text (possibly a rounding bug)
  521. // so we add 1px to avoid the wrapping
  522. this.menu.width( "" ).outerWidth() + 1
  523. ) );
  524. },
  525. _getCreateOptions: function() {
  526. var options = this._super();
  527. options.disabled = this.element.prop( "disabled" );
  528. return options;
  529. },
  530. _parseOptions: function( options ) {
  531. var that = this,
  532. data = [];
  533. options.each( function( index, item ) {
  534. if ( item.hidden ) {
  535. return;
  536. }
  537. data.push( that._parseOption( $( item ), index ) );
  538. } );
  539. this.items = data;
  540. },
  541. _parseOption: function( option, index ) {
  542. var optgroup = option.parent( "optgroup" );
  543. return {
  544. element: option,
  545. index: index,
  546. value: option.val(),
  547. label: option.text(),
  548. optgroup: optgroup.attr( "label" ) || "",
  549. disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" )
  550. };
  551. },
  552. _destroy: function() {
  553. this._unbindFormResetHandler();
  554. this.menuWrap.remove();
  555. this.button.remove();
  556. this.element.show();
  557. this.element.removeUniqueId();
  558. this.labels.attr( "for", this.ids.element );
  559. }
  560. } ] );
  561. } );