WordPress.org

Make WordPress Core

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

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

Cleanup old/unneeded functions, add some inline documentation and an example to accordion.js.

  • 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         */ 
    4467        function accordionSwitch ( el ) { 
    4568                var section = el.closest( '.accordion-section' ), 
    4669                        siblings = section.closest( '.accordion-container' ).find( '.open' ), 
    4770                        content = section.find( sectionContent ); 
    4871 
     72                // This section has no content and cannot be expanded. 
    4973                if ( section.hasClass( 'cannot-expand' ) ) { 
    5074                        return; 
    5175                } 
    5276 
     77                // Slide into a sub-panel instead of accordioning (Customizer-specific). 
    5378                if ( section.hasClass( 'control-panel' ) ) { 
    5479                        panelSwitch( section ); 
    5580                        return; 
     
    6489                        content.toggle( false ).slideToggle( 150 ); 
    6590                        section.toggleClass( 'open' ); 
    6691                } 
    67  
    68                 accordionInit(); 
    6992        } 
    7093 
     94        /** 
     95         * Slide into an accordion sub-panel. 
     96         * 
     97         * For the Customizer-specific panel functionality 
     98         */ 
    7199        function panelSwitch( panel ) { 
    72100                var position, 
    73101                        section = panel.closest( '.accordion-section' ), 
     
    92120                } 
    93121        } 
    94122 
    95         // Initialize the accordion (currently just corner fixes) 
    96         accordionInit(); 
    97  
    98123})(jQuery);