WordPress.org

Make WordPress Core

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

File 27406.accordion.js-docs.diff, 3.5 KB (added by celloexpressions, 4 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);