Changeset 29036
- Timestamp:
- 07/08/2014 08:21:47 PM (10 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/js/accordion.js
r29035 r29036 1 /** 2 * Accordion-folding functionality. 3 * 4 * Markup with the appropriate classes will be automatically hidden, 5 * with one section opening at a time when its title is clicked. 6 * Use the following markup structure for accordion behavior: 7 * 8 * <div class="accordion-container"> 9 * <div class="accordion-section open"> 10 * <h3 class="accordion-section-title"></h3> 11 * <div class="accordion-section-content"> 12 * </div> 13 * </div> 14 * <div class="accordion-section"> 15 * <h3 class="accordion-section-title"></h3> 16 * <div class="accordion-section-content"> 17 * </div> 18 * </div> 19 * <div class="accordion-section"> 20 * <h3 class="accordion-section-title"></h3> 21 * <div class="accordion-section-content"> 22 * </div> 23 * </div> 24 * </div> 25 * 26 * Note that any appropriate tags may be used, as long as the above classes are present. 27 * 28 * In addition to the standard accordion behavior, this file includes JS for the 29 * Customizer's "Panel" functionality. 30 * 31 * @since 3.6.0. 32 */ 33 1 34 ( function( $ ){ 2 35 3 36 $( document ).ready( function () { 4 37 5 // Expand/Collapse on click38 // Expand/Collapse accordion sections on click. 6 39 $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) { 7 40 if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key … … 14 47 }); 15 48 16 // Back to top level49 // Go back to the top-level Customizer accordion. 17 50 $( '.accordion-container' ).on( 'click keydown', '.control-panel-back', function( e ) { 18 51 if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key … … 24 57 panelSwitch( $( this ) ); 25 58 }); 26 27 // Re-initialize accordion when screen options are toggled28 $( '.hide-postbox-tog' ).click( function () {29 accordionInit();30 });31 32 59 }); 33 60 … … 35 62 sectionContent = $( '.accordion-section-content' ); 36 63 37 function accordionInit () { 38 // Rounded corners 39 accordionOptions.removeClass( 'top bottom' ); 40 accordionOptions.filter( ':visible' ).first().addClass( 'top' ); 41 accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' ); 42 } 43 64 /** 65 * Close the current accordion section and open a new one. 66 * 67 * @param {Object} el Title element of the accordion section to toggle. 68 * @since 3.6.0 69 */ 44 70 function accordionSwitch ( el ) { 45 71 var section = el.closest( '.accordion-section' ), … … 47 73 content = section.find( sectionContent ); 48 74 75 // This section has no content and cannot be expanded. 49 76 if ( section.hasClass( 'cannot-expand' ) ) { 50 77 return; 51 78 } 52 79 80 // Slide into a sub-panel instead of accordioning (Customizer-specific). 53 81 if ( section.hasClass( 'control-panel' ) ) { 54 82 panelSwitch( section ); … … 65 93 section.toggleClass( 'open' ); 66 94 } 67 68 accordionInit();69 95 } 70 96 97 /** 98 * Slide into an accordion sub-panel. 99 * 100 * For the Customizer-specific panel functionality 101 * 102 * @param {Object} panel Title element or back button of the accordion panel to toggle. 103 * @since 4.0.0 104 */ 71 105 function panelSwitch( panel ) { 72 106 var position, scroll, … … 108 142 } 109 143 110 // Initialize the accordion (currently just corner fixes)111 accordionInit();112 113 144 })(jQuery);
Note: See TracChangeset
for help on using the changeset viewer.