Changeset 37867

Timestamp:

06/26/2016 11:54:20 AM (10 years ago)

Author:

westonruter

Message:

Customize: Always define functions reflowPaneContents, findControlsForSettings, and _handleSettingValidities on wp.customize.

Moves definitions of functions outside of a jQuery.ready() callback, as these functions needn't be deferred to DOM ready. This change also ensures that the functions are available if customize-controls is enqueued outside of the Customizer context, as the ready callback short-circuits if _wpCustomizeSettings is not defined. The findControlsForSettings and _handleSettingValidities functions were misplaced in r37700.

See #34893.
See #36944.
See #29071.

File:

• trunk/src/wp-admin/js/customize-controls.js (modified) (3 diffs)

trunk/src/wp-admin/js/customize-controls.js

@@ -3420 +3420 @@
         };
 
+        /**
+         * Handle setting_validities in an error response for the customize-save request.
+         *
+         * Add notifications to the settings and focus on the first control that has an invalid setting.
+         *
+         * @since 4.6.0
+         * @private
+         *
+         * @param {object}  args
+         * @param {object}  args.settingValidities
+         * @param {boolean} [args.focusInvalidControl=false]
+         * @returns {void}
+         */
+        api._handleSettingValidities = function handleSettingValidities( args ) {
+                var invalidSettingControls, invalidSettings = [], wasFocused = false;
+
+                // Find the controls that correspond to each invalid setting.
+                _.each( args.settingValidities, function( validity, settingId ) {
+                        var setting = api( settingId );
+                        if ( setting ) {
+
+                                // Add notifications for invalidities.
+                                if ( _.isObject( validity ) ) {
+                                        _.each( validity, function( params, code ) {
+                                                var notification = new api.Notification( code, params ), existingNotification, needsReplacement = false;
+
+                                                // Remove existing notification if already exists for code but differs in parameters.
+                                                existingNotification = setting.notifications( notification.code );
+                                                if ( existingNotification ) {
+                                                        needsReplacement = ( notification.type !== existingNotification.type ) || ! _.isEqual( notification.data, existingNotification.data );
+                                                }
+                                                if ( needsReplacement ) {
+                                                        setting.notifications.remove( code );
+                                                }
+
+                                                if ( ! setting.notifications.has( notification.code ) ) {
+                                                        setting.notifications.add( code, notification );
+                                                }
+                                                invalidSettings.push( setting.id );
+                                        } );
+                                }
+
+                                // Remove notification errors that are no longer valid.
+                                setting.notifications.each( function( notification ) {
+                                        if ( 'error' === notification.type && ( true === validity || ! validity[ notification.code ] ) ) {
+                                                setting.notifications.remove( notification.code );
+                                        }
+                                } );
+                        }
+                } );
+
+                if ( args.focusInvalidControl ) {
+                        invalidSettingControls = api.findControlsForSettings( invalidSettings );
+
+                        // Focus on the first control that is inside of an expanded section (one that is visible).
+                        _( _.values( invalidSettingControls ) ).find( function( controls ) {
+                                return _( controls ).find( function( control ) {
+                                        var isExpanded = control.section() && api.section.has( control.section() ) && api.section( control.section() ).expanded();
+                                        if ( isExpanded && control.expanded ) {
+                                                isExpanded = control.expanded();
+                                        }
+                                        if ( isExpanded ) {
+                                                control.focus();
+                                                wasFocused = true;
+                                        }
+                                        return wasFocused;
+                                } );
+                        } );
+
+                        // Focus on the first invalid control.
+                        if ( ! wasFocused && ! _.isEmpty( invalidSettingControls ) ) {
+                                _.values( invalidSettingControls )[0][0].focus();
+                        }
+                }
+        };
+
+        /**
+         * Find all controls associated with the given settings.
+         *
+         * @since 4.6.0
+         * @param {string[]} settingIds Setting IDs.
+         * @returns {object<string, wp.customize.Control>} Mapping setting ids to arrays of controls.
+         */
+        api.findControlsForSettings = function findControlsForSettings( settingIds ) {
+                var controls = {}, settingControls;
+                _.each( _.unique( settingIds ), function( settingId ) {
+                        var setting = api( settingId );
+                        if ( setting ) {
+                                settingControls = setting.findControls();
+                                if ( settingControls && settingControls.length > 0 ) {
+                                        controls[ settingId ] = settingControls;
+                                }
+                        }
+                } );
+                return controls;
+        };
+
+        /**
+         * Sort panels, sections, controls by priorities. Hide empty sections and panels.
+         *
+         * @since 4.1.0
+         */
+        api.reflowPaneContents = _.bind( function () {
+
+                var appendContainer, activeElement, rootContainers, rootNodes = [], wasReflowed = false;
+
+                if ( document.activeElement ) {
+                        activeElement = $( document.activeElement );
+                }
+
+                // Sort the sections within each panel
+                api.panel.each( function ( panel ) {
+                        var sections = panel.sections(),
+                                sectionContainers = _.pluck( sections, 'container' );
+                        rootNodes.push( panel );
+                        appendContainer = panel.container.find( 'ul:first' );
+                        if ( ! api.utils.areElementListsEqual( sectionContainers, appendContainer.children( '[id]' ) ) ) {
+                                _( sections ).each( function ( section ) {
+                                        appendContainer.append( section.container );
+                                } );
+                                wasReflowed = true;
+                        }
+                } );
+
+                // Sort the controls within each section
+                api.section.each( function ( section ) {
+                        var controls = section.controls(),
+                                controlContainers = _.pluck( controls, 'container' );
+                        if ( ! section.panel() ) {
+                                rootNodes.push( section );
+                        }
+                        appendContainer = section.container.find( 'ul:first' );
+                        if ( ! api.utils.areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) {
+                                _( controls ).each( function ( control ) {
+                                        appendContainer.append( control.container );
+                                } );
+                                wasReflowed = true;
+                        }
+                } );
+
+                // Sort the root panels and sections
+                rootNodes.sort( api.utils.prioritySort );
+                rootContainers = _.pluck( rootNodes, 'container' );
+                appendContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
+                if ( ! api.utils.areElementListsEqual( rootContainers, appendContainer.children() ) ) {
+                        _( rootNodes ).each( function ( rootNode ) {
+                                appendContainer.append( rootNode.container );
+                        } );
+                        wasReflowed = true;
+                }
+
+                // Now re-trigger the active Value callbacks to that the panels and sections can decide whether they can be rendered
+                api.panel.each( function ( panel ) {
+                        var value = panel.active();
+                        panel.active.callbacks.fireWith( panel.active, [ value, value ] );
+                } );
+                api.section.each( function ( section ) {
+                        var value = section.active();
+                        section.active.callbacks.fireWith( section.active, [ value, value ] );
+                } );
+
+                // Restore focus if there was a reflow and there was an active (focused) element
+                if ( wasReflowed && activeElement ) {
+                        activeElement.focus();
+                }
+                api.trigger( 'pane-contents-reflowed' );
+        }, api );
+
         $( function() {
                 api.settings = window._wpCustomizeSettings;
@@ -3710 +3878 @@
                 });
 
-                /**
-                 * Handle setting_validities in an error response for the customize-save request.
-                 *
-                 * Add notifications to the settings and focus on the first control that has an invalid setting.
-                 *
-                 * @since 4.6.0
-                 * @private
-                 *
-                 * @param {object}  args
-                 * @param {object}  args.settingValidities
-                 * @param {boolean} [args.focusInvalidControl=false]
-                 * @returns {void}
-                 */
-                api._handleSettingValidities = function handleSettingValidities( args ) {
-                        var invalidSettingControls, invalidSettings = [], wasFocused = false;
-
-                        // Find the controls that correspond to each invalid setting.
-                        _.each( args.settingValidities, function( validity, settingId ) {
-                                var setting = api( settingId );
-                                if ( setting ) {
-
-                                        // Add notifications for invalidities.
-                                        if ( _.isObject( validity ) ) {
-                                                _.each( validity, function( params, code ) {
-                                                        var notification = new api.Notification( code, params ), existingNotification, needsReplacement = false;
-
-                                                        // Remove existing notification if already exists for code but differs in parameters.
-                                                        existingNotification = setting.notifications( notification.code );
-                                                        if ( existingNotification ) {
-                                                                needsReplacement = ( notification.type !== existingNotification.type ) || ! _.isEqual( notification.data, existingNotification.data );
-                                                        }
-                                                        if ( needsReplacement ) {
-                                                                setting.notifications.remove( code );
-                                                        }
-
-                                                        if ( ! setting.notifications.has( notification.code ) ) {
-                                                                setting.notifications.add( code, notification );
-                                                        }
-                                                        invalidSettings.push( setting.id );
-                                                } );
-                                        }
-
-                                        // Remove notification errors that are no longer valid.
-                                        setting.notifications.each( function( notification ) {
-                                                if ( 'error' === notification.type && ( true === validity || ! validity[ notification.code ] ) ) {
-                                                        setting.notifications.remove( notification.code );
-                                                }
-                                        } );
-                                }
-                        } );
-
-                        if ( args.focusInvalidControl ) {
-                                invalidSettingControls = api.findControlsForSettings( invalidSettings );
-
-                                // Focus on the first control that is inside of an expanded section (one that is visible).
-                                _( _.values( invalidSettingControls ) ).find( function( controls ) {
-                                        return _( controls ).find( function( control ) {
-                                                var isExpanded = control.section() && api.section.has( control.section() ) && api.section( control.section() ).expanded();
-                                                if ( isExpanded && control.expanded ) {
-                                                        isExpanded = control.expanded();
-                                                }
-                                                if ( isExpanded ) {
-                                                        control.focus();
-                                                        wasFocused = true;
-                                                }
-                                                return wasFocused;
-                                        } );
-                                } );
-
-                                // Focus on the first invalid control.
-                                if ( ! wasFocused && ! _.isEmpty( invalidSettingControls ) ) {
-                                        _.values( invalidSettingControls )[0][0].focus();
-                                }
-                        }
-                };
-
-                /**
-                 * Find all controls associated with the given settings.
-                 *
-                 * @since 4.6.0
-                 * @param {string[]} settingIds Setting IDs.
-                 * @returns {object<string, wp.customize.Control>} Mapping setting ids to arrays of controls.
-                 */
-                api.findControlsForSettings = function findControlsForSettings( settingIds ) {
-                        var controls = {}, settingControls;
-                        _.each( _.unique( settingIds ), function( settingId ) {
-                                var setting = api( settingId );
-                                if ( setting ) {
-                                        settingControls = setting.findControls();
-                                        if ( settingControls && settingControls.length > 0 ) {
-                                                controls[ settingId ] = settingControls;
-                                        }
-                                }
-                        } );
-                        return controls;
-                };
-
-                /**
-                 * Sort panels, sections, controls by priorities. Hide empty sections and panels.
-                 *
-                 * @since 4.1.0
-                 */
-                api.reflowPaneContents = _.bind( function () {
-
-                        var appendContainer, activeElement, rootContainers, rootNodes = [], wasReflowed = false;
-
-                        if ( document.activeElement ) {
-                                activeElement = $( document.activeElement );
-                        }
-
-                        // Sort the sections within each panel
-                        api.panel.each( function ( panel ) {
-                                var sections = panel.sections(),
-                                        sectionContainers = _.pluck( sections, 'container' );
-                                rootNodes.push( panel );
-                                appendContainer = panel.container.find( 'ul:first' );
-                                if ( ! api.utils.areElementListsEqual( sectionContainers, appendContainer.children( '[id]' ) ) ) {
-                                        _( sections ).each( function ( section ) {
-                                                appendContainer.append( section.container );
-                                        } );
-                                        wasReflowed = true;
-                                }
-                        } );
-
-                        // Sort the controls within each section
-                        api.section.each( function ( section ) {
-                                var controls = section.controls(),
-                                        controlContainers = _.pluck( controls, 'container' );
-                                if ( ! section.panel() ) {
-                                        rootNodes.push( section );
-                                }
-                                appendContainer = section.container.find( 'ul:first' );
-                                if ( ! api.utils.areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) {
-                                        _( controls ).each( function ( control ) {
-                                                appendContainer.append( control.container );
-                                        } );
-                                        wasReflowed = true;
-                                }
-                        } );
-
-                        // Sort the root panels and sections
-                        rootNodes.sort( api.utils.prioritySort );
-                        rootContainers = _.pluck( rootNodes, 'container' );
-                        appendContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
-                        if ( ! api.utils.areElementListsEqual( rootContainers, appendContainer.children() ) ) {
-                                _( rootNodes ).each( function ( rootNode ) {
-                                        appendContainer.append( rootNode.container );
-                                } );
-                                wasReflowed = true;
-                        }
-
-                        // Now re-trigger the active Value callbacks to that the panels and sections can decide whether they can be rendered
-                        api.panel.each( function ( panel ) {
-                                var value = panel.active();
-                                panel.active.callbacks.fireWith( panel.active, [ value, value ] );
-                        } );
-                        api.section.each( function ( section ) {
-                                var value = section.active();
-                                section.active.callbacks.fireWith( section.active, [ value, value ] );
-                        } );
-
-                        // Restore focus if there was a reflow and there was an active (focused) element
-                        if ( wasReflowed && activeElement ) {
-                                activeElement.focus();
-                        }
-                        api.trigger( 'pane-contents-reflowed' );
-                }, api );
                 api.bind( 'ready', api.reflowPaneContents );
-                api.reflowPaneContents = _.debounce( api.reflowPaneContents, 100 );
                 $( [ api.panel, api.section, api.control ] ).each( function ( i, values ) {
-                        values.bind( 'add', api.reflowPaneContents );
-                        values.bind( 'change', api.reflowPaneContents );
-                        values.bind( 'remove', api.reflowPaneContents );
+                        var debouncedReflowPaneContents = _.debounce( api.reflowPaneContents, 100 );
+                        values.bind( 'add', debouncedReflowPaneContents );
+                        values.bind( 'change', debouncedReflowPaneContents );
+                        values.bind( 'remove', debouncedReflowPaneContents );
                 } );
 
@@ -3929 +3930 @@
 
                         activated.bind( function( to ) {
-                                if ( to )
+                                if ( to ) {
                                         api.trigger( 'activated' );
+                                }
                         });