No Description

accordion.js 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611
  1. /*!
  2. * jQuery UI Accordion 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: Accordion
  10. //>>group: Widgets
  11. // jscs:disable maximumLineLength
  12. //>>description: Displays collapsible content panels for presenting information in a limited amount of space.
  13. // jscs:enable maximumLineLength
  14. //>>docs: http://api.jqueryui.com/accordion/
  15. //>>demos: http://jqueryui.com/accordion/
  16. //>>css.structure: ../../themes/base/core.css
  17. //>>css.structure: ../../themes/base/accordion.css
  18. //>>css.theme: ../../themes/base/theme.css
  19. ( function( factory ) {
  20. if ( typeof define === "function" && define.amd ) {
  21. // AMD. Register as an anonymous module.
  22. define( [
  23. "jquery",
  24. "./core"
  25. ], factory );
  26. } else {
  27. // Browser globals
  28. factory( jQuery );
  29. }
  30. }( function( $ ) {
  31. return $.widget( "ui.accordion", {
  32. version: "1.12.1",
  33. options: {
  34. active: 0,
  35. animate: {},
  36. classes: {
  37. "ui-accordion-header": "ui-corner-top",
  38. "ui-accordion-header-collapsed": "ui-corner-all",
  39. "ui-accordion-content": "ui-corner-bottom"
  40. },
  41. collapsible: false,
  42. event: "click",
  43. header: "> li > :first-child, > :not(li):even",
  44. heightStyle: "auto",
  45. icons: {
  46. activeHeader: "ui-icon-triangle-1-s",
  47. header: "ui-icon-triangle-1-e"
  48. },
  49. // Callbacks
  50. activate: null,
  51. beforeActivate: null
  52. },
  53. hideProps: {
  54. borderTopWidth: "hide",
  55. borderBottomWidth: "hide",
  56. paddingTop: "hide",
  57. paddingBottom: "hide",
  58. height: "hide"
  59. },
  60. showProps: {
  61. borderTopWidth: "show",
  62. borderBottomWidth: "show",
  63. paddingTop: "show",
  64. paddingBottom: "show",
  65. height: "show"
  66. },
  67. _create: function() {
  68. var options = this.options;
  69. this.prevShow = this.prevHide = $();
  70. this._addClass( "ui-accordion", "ui-widget ui-helper-reset" );
  71. this.element.attr( "role", "tablist" );
  72. // Don't allow collapsible: false and active: false / null
  73. if ( !options.collapsible && ( options.active === false || options.active == null ) ) {
  74. options.active = 0;
  75. }
  76. this._processPanels();
  77. // handle negative values
  78. if ( options.active < 0 ) {
  79. options.active += this.headers.length;
  80. }
  81. this._refresh();
  82. },
  83. _getCreateEventData: function() {
  84. return {
  85. header: this.active,
  86. panel: !this.active.length ? $() : this.active.next()
  87. };
  88. },
  89. _createIcons: function() {
  90. var icon, children,
  91. icons = this.options.icons;
  92. if ( icons ) {
  93. icon = $( "<span>" );
  94. this._addClass( icon, "ui-accordion-header-icon", "ui-icon " + icons.header );
  95. icon.prependTo( this.headers );
  96. children = this.active.children( ".ui-accordion-header-icon" );
  97. this._removeClass( children, icons.header )
  98. ._addClass( children, null, icons.activeHeader )
  99. ._addClass( this.headers, "ui-accordion-icons" );
  100. }
  101. },
  102. _destroyIcons: function() {
  103. this._removeClass( this.headers, "ui-accordion-icons" );
  104. this.headers.children( ".ui-accordion-header-icon" ).remove();
  105. },
  106. _destroy: function() {
  107. var contents;
  108. // Clean up main element
  109. this.element.removeAttr( "role" );
  110. // Clean up headers
  111. this.headers
  112. .removeAttr( "role aria-expanded aria-selected aria-controls tabIndex" )
  113. .removeUniqueId();
  114. this._destroyIcons();
  115. // Clean up content panels
  116. contents = this.headers.next()
  117. .css( "display", "" )
  118. .removeAttr( "role aria-hidden aria-labelledby" )
  119. .removeUniqueId();
  120. if ( this.options.heightStyle !== "content" ) {
  121. contents.css( "height", "" );
  122. }
  123. },
  124. _setOption: function( key, value ) {
  125. if ( key === "active" ) {
  126. // _activate() will handle invalid values and update this.options
  127. this._activate( value );
  128. return;
  129. }
  130. if ( key === "event" ) {
  131. if ( this.options.event ) {
  132. this._off( this.headers, this.options.event );
  133. }
  134. this._setupEvents( value );
  135. }
  136. this._super( key, value );
  137. // Setting collapsible: false while collapsed; open first panel
  138. if ( key === "collapsible" && !value && this.options.active === false ) {
  139. this._activate( 0 );
  140. }
  141. if ( key === "icons" ) {
  142. this._destroyIcons();
  143. if ( value ) {
  144. this._createIcons();
  145. }
  146. }
  147. },
  148. _setOptionDisabled: function( value ) {
  149. this._super( value );
  150. this.element.attr( "aria-disabled", value );
  151. // Support: IE8 Only
  152. // #5332 / #6059 - opacity doesn't cascade to positioned elements in IE
  153. // so we need to add the disabled class to the headers and panels
  154. this._toggleClass( null, "ui-state-disabled", !!value );
  155. this._toggleClass( this.headers.add( this.headers.next() ), null, "ui-state-disabled",
  156. !!value );
  157. },
  158. _keydown: function( event ) {
  159. if ( event.altKey || event.ctrlKey ) {
  160. return;
  161. }
  162. var keyCode = $.ui.keyCode,
  163. length = this.headers.length,
  164. currentIndex = this.headers.index( event.target ),
  165. toFocus = false;
  166. switch ( event.keyCode ) {
  167. case keyCode.RIGHT:
  168. case keyCode.DOWN:
  169. toFocus = this.headers[ ( currentIndex + 1 ) % length ];
  170. break;
  171. case keyCode.LEFT:
  172. case keyCode.UP:
  173. toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
  174. break;
  175. case keyCode.SPACE:
  176. case keyCode.ENTER:
  177. this._eventHandler( event );
  178. break;
  179. case keyCode.HOME:
  180. toFocus = this.headers[ 0 ];
  181. break;
  182. case keyCode.END:
  183. toFocus = this.headers[ length - 1 ];
  184. break;
  185. }
  186. if ( toFocus ) {
  187. $( event.target ).attr( "tabIndex", -1 );
  188. $( toFocus ).attr( "tabIndex", 0 );
  189. $( toFocus ).trigger( "focus" );
  190. event.preventDefault();
  191. }
  192. },
  193. _panelKeyDown: function( event ) {
  194. if ( event.keyCode === $.ui.keyCode.UP && event.ctrlKey ) {
  195. $( event.currentTarget ).prev().trigger( "focus" );
  196. }
  197. },
  198. refresh: function() {
  199. var options = this.options;
  200. this._processPanels();
  201. // Was collapsed or no panel
  202. if ( ( options.active === false && options.collapsible === true ) ||
  203. !this.headers.length ) {
  204. options.active = false;
  205. this.active = $();
  206. // active false only when collapsible is true
  207. } else if ( options.active === false ) {
  208. this._activate( 0 );
  209. // was active, but active panel is gone
  210. } else if ( this.active.length && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
  211. // all remaining panel are disabled
  212. if ( this.headers.length === this.headers.find( ".ui-state-disabled" ).length ) {
  213. options.active = false;
  214. this.active = $();
  215. // activate previous panel
  216. } else {
  217. this._activate( Math.max( 0, options.active - 1 ) );
  218. }
  219. // was active, active panel still exists
  220. } else {
  221. // make sure active index is correct
  222. options.active = this.headers.index( this.active );
  223. }
  224. this._destroyIcons();
  225. this._refresh();
  226. },
  227. _processPanels: function() {
  228. var prevHeaders = this.headers,
  229. prevPanels = this.panels;
  230. this.headers = this.element.find( this.options.header );
  231. this._addClass( this.headers, "ui-accordion-header ui-accordion-header-collapsed",
  232. "ui-state-default" );
  233. this.panels = this.headers.next().filter( ":not(.ui-accordion-content-active)" ).hide();
  234. this._addClass( this.panels, "ui-accordion-content", "ui-helper-reset ui-widget-content" );
  235. // Avoid memory leaks (#10056)
  236. if ( prevPanels ) {
  237. this._off( prevHeaders.not( this.headers ) );
  238. this._off( prevPanels.not( this.panels ) );
  239. }
  240. },
  241. _refresh: function() {
  242. var maxHeight,
  243. options = this.options,
  244. heightStyle = options.heightStyle,
  245. parent = this.element.parent();
  246. this.active = this._findActive( options.active );
  247. this._addClass( this.active, "ui-accordion-header-active", "ui-state-active" )
  248. ._removeClass( this.active, "ui-accordion-header-collapsed" );
  249. this._addClass( this.active.next(), "ui-accordion-content-active" );
  250. this.active.next().show();
  251. this.headers
  252. .attr( "role", "tab" )
  253. .each( function() {
  254. var header = $( this ),
  255. headerId = header.uniqueId().attr( "id" ),
  256. panel = header.next(),
  257. panelId = panel.uniqueId().attr( "id" );
  258. header.attr( "aria-controls", panelId );
  259. panel.attr( "aria-labelledby", headerId );
  260. } )
  261. .next()
  262. .attr( "role", "tabpanel" );
  263. this.headers
  264. .not( this.active )
  265. .attr( {
  266. "aria-selected": "false",
  267. "aria-expanded": "false",
  268. tabIndex: -1
  269. } )
  270. .next()
  271. .attr( {
  272. "aria-hidden": "true"
  273. } )
  274. .hide();
  275. // Make sure at least one header is in the tab order
  276. if ( !this.active.length ) {
  277. this.headers.eq( 0 ).attr( "tabIndex", 0 );
  278. } else {
  279. this.active.attr( {
  280. "aria-selected": "true",
  281. "aria-expanded": "true",
  282. tabIndex: 0
  283. } )
  284. .next()
  285. .attr( {
  286. "aria-hidden": "false"
  287. } );
  288. }
  289. this._createIcons();
  290. this._setupEvents( options.event );
  291. if ( heightStyle === "fill" ) {
  292. maxHeight = parent.height();
  293. this.element.siblings( ":visible" ).each( function() {
  294. var elem = $( this ),
  295. position = elem.css( "position" );
  296. if ( position === "absolute" || position === "fixed" ) {
  297. return;
  298. }
  299. maxHeight -= elem.outerHeight( true );
  300. } );
  301. this.headers.each( function() {
  302. maxHeight -= $( this ).outerHeight( true );
  303. } );
  304. this.headers.next()
  305. .each( function() {
  306. $( this ).height( Math.max( 0, maxHeight -
  307. $( this ).innerHeight() + $( this ).height() ) );
  308. } )
  309. .css( "overflow", "auto" );
  310. } else if ( heightStyle === "auto" ) {
  311. maxHeight = 0;
  312. this.headers.next()
  313. .each( function() {
  314. var isVisible = $( this ).is( ":visible" );
  315. if ( !isVisible ) {
  316. $( this ).show();
  317. }
  318. maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() );
  319. if ( !isVisible ) {
  320. $( this ).hide();
  321. }
  322. } )
  323. .height( maxHeight );
  324. }
  325. },
  326. _activate: function( index ) {
  327. var active = this._findActive( index )[ 0 ];
  328. // Trying to activate the already active panel
  329. if ( active === this.active[ 0 ] ) {
  330. return;
  331. }
  332. // Trying to collapse, simulate a click on the currently active header
  333. active = active || this.active[ 0 ];
  334. this._eventHandler( {
  335. target: active,
  336. currentTarget: active,
  337. preventDefault: $.noop
  338. } );
  339. },
  340. _findActive: function( selector ) {
  341. return typeof selector === "number" ? this.headers.eq( selector ) : $();
  342. },
  343. _setupEvents: function( event ) {
  344. var events = {
  345. keydown: "_keydown"
  346. };
  347. if ( event ) {
  348. $.each( event.split( " " ), function( index, eventName ) {
  349. events[ eventName ] = "_eventHandler";
  350. } );
  351. }
  352. this._off( this.headers.add( this.headers.next() ) );
  353. this._on( this.headers, events );
  354. this._on( this.headers.next(), { keydown: "_panelKeyDown" } );
  355. this._hoverable( this.headers );
  356. this._focusable( this.headers );
  357. },
  358. _eventHandler: function( event ) {
  359. var activeChildren, clickedChildren,
  360. options = this.options,
  361. active = this.active,
  362. clicked = $( event.currentTarget ),
  363. clickedIsActive = clicked[ 0 ] === active[ 0 ],
  364. collapsing = clickedIsActive && options.collapsible,
  365. toShow = collapsing ? $() : clicked.next(),
  366. toHide = active.next(),
  367. eventData = {
  368. oldHeader: active,
  369. oldPanel: toHide,
  370. newHeader: collapsing ? $() : clicked,
  371. newPanel: toShow
  372. };
  373. event.preventDefault();
  374. if (
  375. // click on active header, but not collapsible
  376. ( clickedIsActive && !options.collapsible ) ||
  377. // allow canceling activation
  378. ( this._trigger( "beforeActivate", event, eventData ) === false ) ) {
  379. return;
  380. }
  381. options.active = collapsing ? false : this.headers.index( clicked );
  382. // When the call to ._toggle() comes after the class changes
  383. // it causes a very odd bug in IE 8 (see #6720)
  384. this.active = clickedIsActive ? $() : clicked;
  385. this._toggle( eventData );
  386. // Switch classes
  387. // corner classes on the previously active header stay after the animation
  388. this._removeClass( active, "ui-accordion-header-active", "ui-state-active" );
  389. if ( options.icons ) {
  390. activeChildren = active.children( ".ui-accordion-header-icon" );
  391. this._removeClass( activeChildren, null, options.icons.activeHeader )
  392. ._addClass( activeChildren, null, options.icons.header );
  393. }
  394. if ( !clickedIsActive ) {
  395. this._removeClass( clicked, "ui-accordion-header-collapsed" )
  396. ._addClass( clicked, "ui-accordion-header-active", "ui-state-active" );
  397. if ( options.icons ) {
  398. clickedChildren = clicked.children( ".ui-accordion-header-icon" );
  399. this._removeClass( clickedChildren, null, options.icons.header )
  400. ._addClass( clickedChildren, null, options.icons.activeHeader );
  401. }
  402. this._addClass( clicked.next(), "ui-accordion-content-active" );
  403. }
  404. },
  405. _toggle: function( data ) {
  406. var toShow = data.newPanel,
  407. toHide = this.prevShow.length ? this.prevShow : data.oldPanel;
  408. // Handle activating a panel during the animation for another activation
  409. this.prevShow.add( this.prevHide ).stop( true, true );
  410. this.prevShow = toShow;
  411. this.prevHide = toHide;
  412. if ( this.options.animate ) {
  413. this._animate( toShow, toHide, data );
  414. } else {
  415. toHide.hide();
  416. toShow.show();
  417. this._toggleComplete( data );
  418. }
  419. toHide.attr( {
  420. "aria-hidden": "true"
  421. } );
  422. toHide.prev().attr( {
  423. "aria-selected": "false",
  424. "aria-expanded": "false"
  425. } );
  426. // if we're switching panels, remove the old header from the tab order
  427. // if we're opening from collapsed state, remove the previous header from the tab order
  428. // if we're collapsing, then keep the collapsing header in the tab order
  429. if ( toShow.length && toHide.length ) {
  430. toHide.prev().attr( {
  431. "tabIndex": -1,
  432. "aria-expanded": "false"
  433. } );
  434. } else if ( toShow.length ) {
  435. this.headers.filter( function() {
  436. return parseInt( $( this ).attr( "tabIndex" ), 10 ) === 0;
  437. } )
  438. .attr( "tabIndex", -1 );
  439. }
  440. toShow
  441. .attr( "aria-hidden", "false" )
  442. .prev()
  443. .attr( {
  444. "aria-selected": "true",
  445. "aria-expanded": "true",
  446. tabIndex: 0
  447. } );
  448. },
  449. _animate: function( toShow, toHide, data ) {
  450. var total, easing, duration,
  451. that = this,
  452. adjust = 0,
  453. boxSizing = toShow.css( "box-sizing" ),
  454. down = toShow.length &&
  455. ( !toHide.length || ( toShow.index() < toHide.index() ) ),
  456. animate = this.options.animate || {},
  457. options = down && animate.down || animate,
  458. complete = function() {
  459. that._toggleComplete( data );
  460. };
  461. if ( typeof options === "number" ) {
  462. duration = options;
  463. }
  464. if ( typeof options === "string" ) {
  465. easing = options;
  466. }
  467. // fall back from options to animation in case of partial down settings
  468. easing = easing || options.easing || animate.easing;
  469. duration = duration || options.duration || animate.duration;
  470. if ( !toHide.length ) {
  471. return toShow.animate( this.showProps, duration, easing, complete );
  472. }
  473. if ( !toShow.length ) {
  474. return toHide.animate( this.hideProps, duration, easing, complete );
  475. }
  476. total = toShow.show().outerHeight();
  477. toHide.animate( this.hideProps, {
  478. duration: duration,
  479. easing: easing,
  480. step: function( now, fx ) {
  481. fx.now = Math.round( now );
  482. }
  483. } );
  484. toShow
  485. .hide()
  486. .animate( this.showProps, {
  487. duration: duration,
  488. easing: easing,
  489. complete: complete,
  490. step: function( now, fx ) {
  491. fx.now = Math.round( now );
  492. if ( fx.prop !== "height" ) {
  493. if ( boxSizing === "content-box" ) {
  494. adjust += fx.now;
  495. }
  496. } else if ( that.options.heightStyle !== "content" ) {
  497. fx.now = Math.round( total - toHide.outerHeight() - adjust );
  498. adjust = 0;
  499. }
  500. }
  501. } );
  502. },
  503. _toggleComplete: function( data ) {
  504. var toHide = data.oldPanel,
  505. prev = toHide.prev();
  506. this._removeClass( toHide, "ui-accordion-content-active" );
  507. this._removeClass( prev, "ui-accordion-header-active" )
  508. ._addClass( prev, "ui-accordion-header-collapsed" );
  509. // Work around for rendering bug in IE (#5421)
  510. if ( toHide.length ) {
  511. toHide.parent()[ 0 ].className = toHide.parent()[ 0 ].className;
  512. }
  513. this._trigger( "activate", null, data );
  514. }
  515. } );
  516. } ) );