WordPress.org

Make WordPress Core

Ticket #24988: accordion-cleanup.diff

File accordion-cleanup.diff, 5.1 KB (added by carldanley, 7 years ago)
  • wp-admin/js/accordion.js

     
    1 ( function( $ ){
     1( function( window, $, undefined ) {
    22
    3         $( document ).ready( function () {
     3        "use strict";
    44
    5                 // Expand/Collapse on click
    6                 $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
    7                         if ( e.type === 'keydown' && 13 !== e.which ) // "return" key
    8                                         return;
    9                         e.preventDefault(); // Keep this AFTER the key filter above
     5        // grab the document reference from the window object
     6        var document = window.document;
    107
    11                         accordionSwitch( $( this ) );
    12                 });
     8        /**
     9         * Accordion module for WordPress
     10         *
     11         * @returns {{}}
     12         * @constructor
     13         */
     14        function Accordion() {
    1315
    14                 // Re-initialize accordion when screen options are toggled
    15                 $( '.hide-postbox-tog' ).click( function () {
    16                         accordionInit();
    17                 });
     16                /**
     17                 * Internal container that holds references to cached objects
     18                 *
     19                 * @type {{$container: null, $sectionContent: null, $options: null, $hidePostBoxToggle: null}}
     20                 */
     21                var Cache = {
     22                        $container : null,
     23                        $sectionContent : null,
     24                        $options : null,
     25                        $hidePostBoxToggle : null
     26                };
    1827
    19         });
     28                /**
     29                 * Initializes this module so things are correctly setup with the accordion
     30                 */
     31                function initialize() {
     32                        cacheElements();
     33                        bindEvents();
     34                }
    2035
    21         var accordionOptions = $( '.accordion-container li.accordion-section' ),
    22                 sectionContent   = $( '.accordion-section-content' );
     36                /**
     37                 * Handles binding any events for this module to work properly
     38                 */
     39                function bindEvents() {
     40                        Cache.$container.on( 'click keydown', '.accordion-section-title', onSectionTitleClick )
     41                        Cache.$hidePostBoxToggle.on( 'click', resetAccordionOptions );
     42                }
    2343
    24         function accordionInit () {
    25                 // Rounded corners
    26                 accordionOptions.removeClass( 'top bottom' );
    27                 accordionOptions.filter( ':visible' ).first().addClass( 'top' );
    28                 accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' );
    29         }
     44                /**
     45                 * Callback function that's called when the '.accordion-section-title' element is clicked.
     46                 *
     47                 * @param event
     48                 */
     49                function onSectionTitleClick( event ) {
     50                        var key = e.which || e.keyCode;
     51                        if( event.type === 'keydown' && 13 !== key ) {
     52                                return;
     53                        }
    3054
    31         function accordionSwitch ( el ) {
    32                 var section = el.closest( '.accordion-section' ),
    33                         siblings = section.closest( '.accordion-container' ).find( '.open' ),
    34                         content = section.find( sectionContent );
     55                        // only kill the event if the key filter matches our constraints
     56                        event.preventDefault();
     57                        toggleAccordion( $( this ) );
     58                }
    3559
    36                 if ( section.hasClass( 'cannot-expand' ) )
    37                         return;
     60                /**
     61                 * Toggles the accordion element and adjusts everything so things are displayed correctly when the accordion is
     62                 * toggled.
     63                 *
     64                 * @param $element
     65                 */
     66                function toggleAccordion( $element ) {
     67                        var $closestSection = $element.closest( '.accordion-section' );
     68                        var $siblings = $closestSection.closest( '.accordion-container' ).find( '.open' );
     69                        var $content = $closestSection.find( Cache.$sectionContent );
    3870
    39                 if ( section.hasClass( 'open' ) ) {
    40                         section.toggleClass( 'open' );
    41                         content.toggle( true ).slideToggle( 150 );
    42                 } else {
    43                         siblings.removeClass( 'open' );
    44                         siblings.find( sectionContent ).show().slideUp( 150 );
    45                         content.toggle( false ).slideToggle( 150 );
    46                         section.toggleClass( 'open' );
     71                        if( $closestSection.hasClass( 'cannot-expand' ) ) {
     72                                return;
     73                        }
     74
     75                        if( $closestSection.hasClass( 'open' ) ) {
     76                                $closestSection.toggleClass( 'open' );
     77                                $content.toggle( true ).slideToggle( 150 );
     78                        } else {
     79                                $siblings.removeClass( 'open' ).find( Cache.$sectionContent ).show().slideUp( 150 );
     80                                $content.toggle( false ).slideToggle( 150 );
     81                                $closestSection.toggleClass( 'open' );
     82                        }
     83
     84                        resetAccordionOptions();
    4785                }
    4886
    49                 accordionInit();
     87                /**
     88                 * Resets all of the accordion options so they display correctly on the page
     89                 */
     90                function resetAccordionOptions() {
     91                        Cache.$options.removeClass( 'top bottom' );
     92
     93                        var $visibleOptions = Cache.$options.filter( ':visible' );
     94                        $visibleOptions.first().addClass( 'top' );
     95                        $visibleOptions.last().addClass( 'bottom' ).find( Cache.$sectionContent ).addClass( 'bottom' );
     96                }
     97
     98                /**
     99                 * Handles caching any elements that will be used during the lifetime of this script.
     100                 */
     101                function cacheElements() {
     102                        Cache.$container = $( '.accordion-container' );
     103                        Cache.$sectionContent = $( '.accordion-section-content' );
     104                        Cache.$options = Cache.$container.find( 'li.accordion-section' );
     105                        Cache.$hidePostBoxToggle = $( '.hide-postbox-tog' );
     106                }
     107
     108                // initialize this function on document ready
     109                $( document ).ready( initialize );
     110
     111                /**
     112                 * Expose any public-facing API methods here.
     113                 */
     114                return {};
    50115        }
    51116
    52         // Initialize the accordion (currently just corner fixes)
    53         accordionInit();
     117        window.wp = window.wp || {};
     118        window.wp.accordion = new Accordion();
    54119
    55 })(jQuery);
     120} )( window, jQuery );
     121 No newline at end of file