WordPress.org

Make WordPress Core

Ticket #27406: 27406.accordion.js-docs.2.diff

File 27406.accordion.js-docs.2.diff, 3.7 KB (added by celloexpressions, 3 years ago)

2nd pass at accordion.js docs and cleanup.

  • src/wp-admin/js/accordion.js

     
     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 
    134( function( $ ){ 
    235 
    336        $( document ).ready( function () { 
    437 
    5                 // Expand/Collapse on click 
     38                // Expand/Collapse accordion sections on click. 
    639                $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) { 
    740                        if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key 
    841                                return; 
     
    1346                        accordionSwitch( $( this ) ); 
    1447                }); 
    1548 
    16                 // Back to top level 
     49                // Go back to the top-level Customizer accordion. 
    1750                $( '.accordion-container' ).on( 'click keydown', '.control-panel-back', function( e ) { 
    1851                        if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key 
    1952                                return; 
     
    2356 
    2457                        panelSwitch( $( this ) ); 
    2558                }); 
    26  
    27                 // Re-initialize accordion when screen options are toggled 
    28                 $( '.hide-postbox-tog' ).click( function () { 
    29                         accordionInit(); 
    30                 }); 
    31  
    3259        }); 
    3360 
    3461        var accordionOptions = $( '.accordion-container li.accordion-section' ), 
    3562                sectionContent   = $( '.accordion-section-content' ); 
    3663 
    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         */ 
    4470        function accordionSwitch ( el ) { 
    4571                var section = el.closest( '.accordion-section' ), 
    4672                        siblings = section.closest( '.accordion-container' ).find( '.open' ), 
    4773                        content = section.find( sectionContent ); 
    4874 
     75                // This section has no content and cannot be expanded. 
    4976                if ( section.hasClass( 'cannot-expand' ) ) { 
    5077                        return; 
    5178                } 
    5279 
     80                // Slide into a sub-panel instead of accordioning (Customizer-specific). 
    5381                if ( section.hasClass( 'control-panel' ) ) { 
    5482                        panelSwitch( section ); 
    5583                        return; 
     
    6492                        content.toggle( false ).slideToggle( 150 ); 
    6593                        section.toggleClass( 'open' ); 
    6694                } 
    67  
    68                 accordionInit(); 
    6995        } 
    7096 
     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         */ 
    71105        function panelSwitch( panel ) { 
    72106                var position, 
    73107                        section = panel.closest( '.accordion-section' ), 
     
    92126                } 
    93127        } 
    94128 
    95         // Initialize the accordion (currently just corner fixes) 
    96         accordionInit(); 
    97  
    98129})(jQuery);