selectmenu.js 14 KB

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