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, 4 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);