Changeset 29051

Timestamp:

07/09/2014 11:57:29 PM (10 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 */