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
  34 ( function( $ ){
  35
  36         $( document ).ready( function () {
  37
  38                 // Expand/Collapse accordion sections on click.
  39                 $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
  40                         if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
  41                                 return;
  42                         }
  43
  44                         e.preventDefault(); // Keep this AFTER the key filter above
  45
  46                         accordionSwitch( $( this ) );
  47                 });
  48
  49                 // Go back to the top-level Customizer accordion.
  50                 $( '#customize-header-actions' ).on( 'click keydown', '.control-panel-back', function( e ) {
  51                         if ( e.type === 'keydown' && 13 !== e.which ) { // "return" key
  52                                 return;
  53                         }
  54
  55                         e.preventDefault(); // Keep this AFTER the key filter above
  56
  57                         panelSwitch( $( '.current-panel' ) );
  58                 });
  59         });
  60
  61         var sectionContent = $( '.accordion-section-content' );
  62
  63         /**
  64          * Close the current accordion section and open a new one.
  65          *
  66          * @param {Object} el Title element of the accordion section to toggle.
  67          * @since 3.6.0
  68          */
  69         function accordionSwitch ( el ) {
  70                 var section = el.closest( '.accordion-section' ),
  71                         siblings = section.closest( '.accordion-container' ).find( '.open' ),
  72                         content = section.find( sectionContent );
  73
  74                 // This section has no content and cannot be expanded.
  75                 if ( section.hasClass( 'cannot-expand' ) ) {
  76                         return;
  77                 }
  78
  79                 // Slide into a sub-panel instead of accordioning (Customizer-specific).
  80                 if ( section.hasClass( 'control-panel' ) ) {
  81                         panelSwitch( section );
  82                         return;
  83                 }
  84
  85                 if ( section.hasClass( 'open' ) ) {
  86                         section.toggleClass( 'open' );
  87                         content.toggle( true ).slideToggle( 150 );
  88                 } else {
  89                         siblings.removeClass( 'open' );
  90                         siblings.find( sectionContent ).show().slideUp( 150 );
  91                         content.toggle( false ).slideToggle( 150 );
  92                         section.toggleClass( 'open' );
  93                 }
  94         }
  95
  96         /**
  97          * Slide into an accordion sub-panel.
  98          *
  99          * For the Customizer-specific panel functionality
 100          *
 101          * @param {Object} panel Title element or back button of the accordion panel to toggle.
 102          * @since 4.0.0
 103          */
 104         function panelSwitch( panel ) {
 105                 var position, scroll,
 106                         section = panel.closest( '.accordion-section' ),
 107                         overlay = section.closest( '.wp-full-overlay' ),
 108                         container = section.closest( '.accordion-container' ),
 109                         siblings = container.find( '.open' ),
 110                         topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
 111                         backBtn = overlay.find( '.control-panel-back' ),
 112                         panelTitle = section.find( '.accordion-section-title' ).first(),
 113                         content = section.find( '.control-panel-content' );
 114
 115                 if ( section.hasClass( 'current-panel' ) ) {
 116                         section.toggleClass( 'current-panel' );
 117                         overlay.toggleClass( 'in-sub-panel' );
 118                         content.delay( 180 ).hide( 0, function() {
 119                                 content.css( 'margin-top', 'inherit' ); // Reset
 120                         } );
 121                         topPanel.attr( 'tabindex', '0' );
 122                         backBtn.attr( 'tabindex', '-1' );
 123                         panelTitle.focus();
 124                         container.scrollTop( 0 );
 125                 } else {
 126                         // Close all open sections in any accordion level.
 127                         siblings.removeClass( 'open' );
 128                         siblings.find( sectionContent ).show().slideUp( 0 );
 129                         content.show( 0, function() {
 130                                 position = content.offset().top;
 131                                 scroll = container.scrollTop();
 132                                 content.css( 'margin-top', ( 45 - position - scroll ) );
 133                                 section.toggleClass( 'current-panel' );
 134                                 overlay.toggleClass( 'in-sub-panel' );
 135                                 container.scrollTop( 0 );
 136                         } );
 137                         topPanel.attr( 'tabindex', '-1' );
 138                         backBtn.attr( 'tabindex', '0' );
 139                         backBtn.focus();
 140                 }
 141         }
 142
 143 })(jQuery);