Changeset 29051

Timestamp:

07/09/2014 11:57:29 PM (12 years ago)

Author:

SergeyBiryukov

Message:

Customizer: Introduce WP_Customize_Control::active() method to determine whether the control is relevant to the current context (i.e. to the current URL being previewed).

Control can indicate its active state by a subclass overriding the 'active_callback' method, by supplying a callable 'active_callback' argument into the control's constructor, or by filtering 'customize_control_active'.

props westonruter.
see #27993.

Location:

trunk/src

Files:

• wp-admin/js/customize-controls.js (modified) (3 diffs)
• wp-admin/js/customize-widgets.js (modified) (3 diffs)
• wp-includes/class-wp-customize-control.php (modified) (8 diffs)
• wp-includes/class-wp-customize-manager.php (modified) (2 diffs)
• wp-includes/class-wp-customize-widgets.php (modified) (1 diff)
• wp-includes/js/customize-preview-widgets.js (modified) (1 diff)
• wp-includes/js/customize-preview.js (modified) (1 diff)

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

@@ -38 +38 @@
                         this.selector = '#customize-control-' + id.replace( /\]/g, '' ).replace( /\[/g, '-' );
                         this.container = $( this.selector );
+                        this.active = new api.Value( this.params.active );
 
                         settings = $.map( this.params.settings, function( value ) {
@@ -80 +81 @@
                                 });
                         });
+
+                        control.active.bind( function ( active ) {
+                                control.toggle( active );
+                        } );
+                        control.toggle( control.active() );
                 },
 
                 ready: function() {},
+
+                /**
+                 * Callback for change to the control's active state.
+                 *
+                 * Override function for custom behavior for the control being active/inactive.
+                 *
+                 * @param {Boolean} active
+                 */
+                toggle: function ( active ) {
+                        if ( active ) {
+                                this.container.slideDown();
+                        } else {
+                                this.container.slideUp();
+                        }
+                },
 
                 dropdownInit: function() {
@@ -563 +584 @@
 
                         this.bind( 'ready', this._ready );
+
+                        this.bind( 'ready', function ( data ) {
+                                if ( ! data || ! data.activeControls ) {
+                                        return;
+                                }
+
+                                // Any controls not even registered on the previewed URL are not active either
+                                api.control.each( function ( control ) {
+                                        if ( typeof data.activeControls[ control.id ] === 'undefined' ) {
+                                                data.activeControls[ control.id ] = false;
+                                        }
+                                } );
+
+                                $.each( data.activeControls, function ( id, active ) {
+                                        var control = api.control( id );
+                                        if ( control ) {
+                                                control.active( active );
+                                        }
+                                } );
+                        } );
 
                         this.request = $.ajax( this.previewUrl(), {

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

@@ -752 +752 @@
                         } );
 
-                        // Update widget control to indicate whether it is currently rendered
-                        api.previewer.bind( 'rendered-widgets', function( renderedWidgets ) {
-                                var isRendered = !! renderedWidgets[self.params.widget_id];
-
-                                self.container.toggleClass( 'widget-rendered', isRendered );
-                        } );
-
                         formSyncHandler = api.Widgets.formSyncHandlers[ this.params.widget_id_base ];
                         if ( formSyncHandler ) {
@@ -767 +760 @@
                                 } );
                         }
+                },
+
+                /**
+                 * Update widget control to indicate whether it is currently rendered.
+                 *
+                 * Overrides api.Control.toggle()
+                 *
+                 * @param {Boolean} active
+                 */
+                toggle: function ( active ) {
+                        this.container.toggleClass( 'widget-rendered', active );
                 },
 
@@ -1419 +1423 @@
 
                         // Update the model with whether or not the sidebar is rendered
-                        api.previewer.bind( 'rendered-sidebars', function( renderedSidebars ) {
-                                var isRendered = !! renderedSidebars[self.params.sidebar_id];
-
-                                registeredSidebar.set( 'is_rendered', isRendered );
-                        } );
-
-                        // Show the sidebar section when it becomes visible
-                        registeredSidebar.on( 'change:is_rendered', function( ) {
-                                var sectionSelector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), $section;
-
-                                $section = $( sectionSelector );
-                                if ( this.get( 'is_rendered' ) ) {
-                                        $section.stop().slideDown( function() {
-                                                $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
-                                        } );
-
-                                } else {
-                                        // Make sure that hidden sections get closed first
-                                        if ( $section.hasClass( 'open' ) ) {
-                                                // it would be nice if accordionSwitch() in accordion.js was public
-                                                $section.find( '.accordion-section-title' ).trigger( 'click' );
-                                        }
-
-                                        $section.stop().slideUp();
-                                }
-                        } );
+                        self.active.bind( function ( active ) {
+                                registeredSidebar.set( 'is_rendered', active );
+                        } );
+                },
+
+                /**
+                 * Show the sidebar section when it becomes visible.
+                 *
+                 * Overrides api.Control.toggle()
+                 *
+                 * @param {Boolean} active
+                 */
+                toggle: function ( active ) {
+                        var $section, sectionSelector;
+
+                        sectionSelector = '#accordion-section-sidebar-widgets-' + this.params.sidebar_id;
+                        $section = $( sectionSelector );
+
+                        if ( active ) {
+                                $section.stop().slideDown( function() {
+                                        $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
+                                } );
+
+                        } else {
+                                // Make sure that hidden sections get closed first
+                                if ( $section.hasClass( 'open' ) ) {
+                                        // it would be nice if accordionSwitch() in accordion.js was public
+                                        $section.find( '.accordion-section-title' ).trigger( 'click' );
+                                }
+
+                                $section.stop().slideUp();
+                        }
                 },
 

trunk/src/wp-includes/class-wp-customize-control.php

@@ -86 +86 @@
         public $type = 'text';
 
+        /**
+         * Callback
+         *
+         * @since 4.0.0
+         *
+         * @access public
+         * @see WP_Customize_Control::active()
+         * @var callable  Callback is called with one argument, the instance of
+         *                WP_Customize_Control, and returns bool to indicate whether
+         *                the control is active (such as it relates to the URL
+         *                currently being previewed).
+         */
+        public $active_callback = '';
 
         /**
@@ -103 +116 @@
                 $keys = array_keys( get_object_vars( $this ) );
                 foreach ( $keys as $key ) {
-                        if ( isset( $args[ $key ] ) )
+                        if ( isset( $args[ $key ] ) ) {
                                 $this->$key = $args[ $key ];
+                        }
                 }
 
                 $this->manager = $manager;
                 $this->id = $id;
+                if ( empty( $this->active_callback ) ) {
+                        $this->active_callback = array( $this, 'active_callback' );
+                }
 
                 // Process settings.
-                if ( empty( $this->settings ) )
+                if ( empty( $this->settings ) ) {
                         $this->settings = $id;
+                }
 
                 $settings = array();
@@ -133 +151 @@
         public function enqueue() {}
 
+        /**
+         * Check whether control is active to current customizer preview.
+         *
+         * @since 4.0.0
+         *
+         * @return bool
+         */
+        public final function active() {
+                $control = $this;
+                $active = call_user_func( $this->active_callback, $this );
+
+                /**
+                 * Filter response of WP_Customize_Control::active().
+                 *
+                 * @since 4.0.0
+                 *
+                 * @param bool $active
+                 * @param WP_Customize_Control $control
+                 */
+                $active = apply_filters( 'customize_control_active', $active, $control );
+
+                return $active;
+        }
+
+        /**
+         * Default callback used when invoking WP_Customize_Control::active().
+         *
+         * Subclasses can override this with their specific logic, or they may
+         * provide an 'active_callback' argument to the constructor.
+         *
+         * @return bool
+         */
+        public function active_callback() {
+                return true;
+        }
 
         /**
@@ -144 +197 @@
          */
         public final function value( $setting_key = 'default' ) {
-                if ( isset( $this->settings[ $setting_key ] ) )
+                if ( isset( $this->settings[ $setting_key ] ) ) {
                         return $this->settings[ $setting_key ]->value();
+                }
         }
 
@@ -160 +214 @@
 
                 $this->json['type'] = $this->type;
+                $this->json['active'] = $this->active();
         }
 
@@ -257 +312 @@
         }
 
-        /**
+        /**
          * Render the custom attributes for the control's input element.
          *
@@ -996 +1051 @@
                 <?php
         }
+
+        /**
+         * @return bool
+         */
+        function active_callback() {
+                return $this->manager->widgets->is_sidebar_rendered( $this->sidebar_id );
+        }
 }
 
@@ -1036 +1098 @@
                 echo $this->manager->widgets->get_widget_control( $args );
         }
+
+        /**
+         * @return bool
+         */
+        function active_callback() {
+                return $this->manager->widgets->is_widget_rendered( $this->widget_id );
+        }
 }
 

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -476 +476 @@
                 $settings = array(
                         'values'  => array(),
-                        'channel' => esc_js( $_POST['customize_messenger_channel'] ),
+                        'channel' => wp_unslash( $_POST['customize_messenger_channel'] ),
+                        'activeControls' => array(),
                 );
 
@@ -488 +489 @@
                 foreach ( $this->settings as $id => $setting ) {
                         $settings['values'][ $id ] = $setting->js_value();
+                }
+                foreach ( $this->controls as $id => $control ) {
+                        $settings['activeControls'][ $id ] = $control->active();
                 }
 

trunk/src/wp-includes/class-wp-customize-widgets.php

@@ -1069 +1069 @@
          */
         public function tally_rendered_widgets( $widget ) {
-                $this->rendered_widgets[$widget['id']] = true;
+                $this->rendered_widgets[ $widget['id'] ] = true;
+        }
+
+        /**
+         * Determine if a widget is rendered on the page.
+         *
+         * @since 4.0.0
+         * @access public
+         *
+         * @param string $widget_id
+         * @return bool
+         */
+        public function is_widget_rendered( $widget_id ) {
+                return in_array( $widget_id, $this->rendered_widgets );
+        }
+
+        /**
+         * Determine if a sidebar is rendered on the page.
+         *
+         * @since 4.0.0
+         * @access public
+         *
+         * @param string $sidebar_id
+         * @return bool
+         */
+        public function is_sidebar_rendered( $sidebar_id ) {
+                return in_array( $sidebar_id, $this->rendered_sidebars );
         }
 

trunk/src/wp-includes/js/customize-preview-widgets.js

@@ -23 +23 @@
                         this.buildWidgetSelectors();
                         this.highlightControls();
-
-                        this.preview.bind( 'active', function() {
-                                self.preview.send( 'rendered-sidebars', self.renderedSidebars ); // @todo Only send array of IDs
-                                self.preview.send( 'rendered-widgets', self.renderedWidgets ); // @todo Only send array of IDs
-                        } );
 
                         this.preview.bind( 'highlight-widget', self.highlightWidget );

trunk/src/wp-includes/js/customize-preview.js

@@ -96 +96 @@
         });
 
-                preview.send( 'ready' );
+                preview.send( 'ready', {
+                        activeControls: api.settings.activeControls
+                } );
 
                 /* Custom Backgrounds */