Ticket #24988: accordion-cleanup.diff

wp-admin/js/accordion.js

@@ -1 @@
-( function( $ ){
+( function( window, $, undefined ) {
 
-        $( document ).ready( function () {
+        "use strict";
 
-                // Expand/Collapse on click
-                $( '.accordion-container' ).on( 'click keydown', '.accordion-section-title', function( e ) {
-                        if ( e.type === 'keydown' && 13 !== e.which ) // "return" key
-                                        return;
-                        e.preventDefault(); // Keep this AFTER the key filter above
+        // grab the document reference from the window object
+        var document = window.document;
 
-                        accordionSwitch( $( this ) );
-                });
+        /**
+         * Accordion module for WordPress
+         *
+         * @returns {{}}
+         * @constructor
+         */
+        function Accordion() {
 
-                // Re-initialize accordion when screen options are toggled
-                $( '.hide-postbox-tog' ).click( function () {
-                        accordionInit();
-                });
+                /**
+                 * Internal container that holds references to cached objects
+                 *
+                 * @type {{$container: null, $sectionContent: null, $options: null, $hidePostBoxToggle: null}}
+                 */
+                var Cache = {
+                        $container : null,
+                        $sectionContent : null,
+                        $options : null,
+                        $hidePostBoxToggle : null
+                };
 
-        });
+                /**
+                 * Initializes this module so things are correctly setup with the accordion
+                 */
+                function initialize() {
+                        cacheElements();
+                        bindEvents();
+                }
 
-        var accordionOptions = $( '.accordion-container li.accordion-section' ),
-                sectionContent   = $( '.accordion-section-content' );
+                /**
+                 * Handles binding any events for this module to work properly
+                 */
+                function bindEvents() {
+                        Cache.$container.on( 'click keydown', '.accordion-section-title', onSectionTitleClick )
+                        Cache.$hidePostBoxToggle.on( 'click', resetAccordionOptions );
+                }
 
-        function accordionInit () {
-                // Rounded corners
-                accordionOptions.removeClass( 'top bottom' );
-                accordionOptions.filter( ':visible' ).first().addClass( 'top' );
-                accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' );
-        }
+                /**
+                 * Callback function that's called when the '.accordion-section-title' element is clicked.
+                 *
+                 * @param event
+                 */
+                function onSectionTitleClick( event ) {
+                        var key = e.which || e.keyCode;
+                        if( event.type === 'keydown' && 13 !== key ) {
+                                return;
+                        }
 
-        function accordionSwitch ( el ) {
-                var section = el.closest( '.accordion-section' ),
-                        siblings = section.closest( '.accordion-container' ).find( '.open' ),
-                        content = section.find( sectionContent );
+                        // only kill the event if the key filter matches our constraints
+                        event.preventDefault();
+                        toggleAccordion( $( this ) );
+                }
 
-                if ( section.hasClass( 'cannot-expand' ) )
-                        return;
+                /**
+                 * Toggles the accordion element and adjusts everything so things are displayed correctly when the accordion is
+                 * toggled.
+                 *
+                 * @param $element
+                 */
+                function toggleAccordion( $element ) {
+                        var $closestSection = $element.closest( '.accordion-section' );
+                        var $siblings = $closestSection.closest( '.accordion-container' ).find( '.open' );
+                        var $content = $closestSection.find( Cache.$sectionContent );
 
-                if ( section.hasClass( 'open' ) ) {
-                        section.toggleClass( 'open' );
-                        content.toggle( true ).slideToggle( 150 );
-                } else {
-                        siblings.removeClass( 'open' );
-                        siblings.find( sectionContent ).show().slideUp( 150 );
-                        content.toggle( false ).slideToggle( 150 );
-                        section.toggleClass( 'open' );
+                        if( $closestSection.hasClass( 'cannot-expand' ) ) {
+                                return;
+                        }
+
+                        if( $closestSection.hasClass( 'open' ) ) {
+                                $closestSection.toggleClass( 'open' );
+                                $content.toggle( true ).slideToggle( 150 );
+                        } else {
+                                $siblings.removeClass( 'open' ).find( Cache.$sectionContent ).show().slideUp( 150 );
+                                $content.toggle( false ).slideToggle( 150 );
+                                $closestSection.toggleClass( 'open' );
+                        }
+
+                        resetAccordionOptions();
                 }
 
-                accordionInit();
+                /**
+                 * Resets all of the accordion options so they display correctly on the page
+                 */
+                function resetAccordionOptions() {
+                        Cache.$options.removeClass( 'top bottom' );
+
+                        var $visibleOptions = Cache.$options.filter( ':visible' );
+                        $visibleOptions.first().addClass( 'top' );
+                        $visibleOptions.last().addClass( 'bottom' ).find( Cache.$sectionContent ).addClass( 'bottom' );
+                }
+
+                /**
+                 * Handles caching any elements that will be used during the lifetime of this script.
+                 */
+                function cacheElements() {
+                        Cache.$container = $( '.accordion-container' );
+                        Cache.$sectionContent = $( '.accordion-section-content' );
+                        Cache.$options = Cache.$container.find( 'li.accordion-section' );
+                        Cache.$hidePostBoxToggle = $( '.hide-postbox-tog' );
+                }
+
+                // initialize this function on document ready
+                $( document ).ready( initialize );
+
+                /**
+                 * Expose any public-facing API methods here.
+                 */
+                return {};
         }
 
-        // Initialize the accordion (currently just corner fixes)
-        accordionInit();
+        window.wp = window.wp || {};
+        window.wp.accordion = new Accordion();
 
-})(jQuery);
+} )( window, jQuery );
+ No newline at end of file