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.
Built from https://develop.svn.wordpress.org/trunk@29051


git-svn-id: http://core.svn.wordpress.org/trunk@28839 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/customize-controls.js

@@ -37,6 +37,7 @@
 			this.id = id;
 			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 ) {
 				return value;
@@ -79,10 +80,30 @@
 					element.set( setting() );
 				});
 			});
+
+			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() {
 			var control      = this,
 				statuses     = this.container.find('.dropdown-status'),
@@ -563,6 +584,26 @@
 
 			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(), {
 				type: 'POST',
 				data: this.query,

wp-admin/js/customize-widgets.js

@@ -751,13 +751,6 @@
 				}
 			} );
 
-			// 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 ) {
 				$( document ).on( 'widget-synced', function( e, widget ) {
@@ -768,6 +761,17 @@
 			}
 		},
 
+		/**
+		 * 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 );
+		},
+
 		/**
 		 * Set up event handlers for widget removal
 		 */
@@ -1418,18 +1422,25 @@
 			} );
 
 			// Update the model with whether or not the sidebar is rendered
-			api.previewer.bind( 'rendered-sidebars', function( renderedSidebars ) {
+			self.active.bind( function ( active ) {
-				var isRendered = !! renderedSidebars[self.params.sidebar_id];
+				registeredSidebar.set( 'is_rendered', active );
-
-				registeredSidebar.set( 'is_rendered', isRendered );
 			} );
+		},
 
-			// Show the sidebar section when it becomes visible
+		/**
-			registeredSidebar.on( 'change:is_rendered', function( ) {
+		 * Show the sidebar section when it becomes visible.
-				var sectionSelector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), $section;
+		 *
+		 * 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 ( this.get( 'is_rendered' ) ) {
+
+			if ( active ) {
 				$section.stop().slideDown( function() {
 					$( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
 				} );
@@ -1443,7 +1454,6 @@
 
 				$section.stop().slideUp();
 			}
-			} );
 		},
 
 		/**

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

@@ -85,6 +85,19 @@ class WP_Customize_Control {
 	 */
 	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 = '';
 
 	/**
 	 * Constructor.
@@ -102,16 +115,21 @@ class WP_Customize_Control {
 	public function __construct( $manager, $id, $args = array() ) {
 		$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();
 		if ( is_array( $this->settings ) ) {
@@ -132,6 +150,41 @@ class WP_Customize_Control {
 	 */
 	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;
+	}
 
 	/**
 	 * Fetch a setting's value.
@@ -143,9 +196,10 @@ class WP_Customize_Control {
 	 * @return mixed The requested setting's value, if the setting exists.
 	 */
 	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();
 		}
+	}
 
 	/**
 	 * Refresh the parameters passed to the JavaScript via JSON.
@@ -159,6 +213,7 @@ class WP_Customize_Control {
 		}
 
 		$this->json['type'] = $this->type;
+		$this->json['active'] = $this->active();
 	}
 
 	/**
@@ -995,6 +1050,13 @@ class WP_Widget_Area_Customize_Control extends WP_Customize_Control {
 		</span>
 		<?php
 	}
+
+	/**
+	 * @return bool
+	 */
+	function active_callback() {
+		return $this->manager->widgets->is_sidebar_rendered( $this->sidebar_id );
+	}
 }
 
 /**
@@ -1035,5 +1097,12 @@ class WP_Widget_Form_Customize_Control extends WP_Customize_Control {
 		$args = wp_list_widget_controls_dynamic_sidebar( array( 0 => $args, 1 => $widget['params'][0] ) );
 		echo $this->manager->widgets->get_widget_control( $args );
 	}
+
+	/**
+	 * @return bool
+	 */
+	function active_callback() {
+		return $this->manager->widgets->is_widget_rendered( $this->widget_id );
+	}
 }
 

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

@@ -475,7 +475,8 @@ final class WP_Customize_Manager {
 	public function customize_preview_settings() {
 		$settings = array(
 			'values'  => array(),
-			'channel' => esc_js( $_POST['customize_messenger_channel'] ),
+			'channel' => wp_unslash( $_POST['customize_messenger_channel'] ),
+			'activeControls' => array(),
 		);
 
 		if ( 2 == $this->nonce_tick ) {
@@ -488,6 +489,9 @@ final class WP_Customize_Manager {
 		foreach ( $this->settings as $id => $setting ) {
 			$settings['values'][ $id ] = $setting->js_value();
 		}
+		foreach ( $this->controls as $id => $control ) {
+			$settings['activeControls'][ $id ] = $control->active();
+		}
 
 		?>
 		<script type="text/javascript">

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

@@ -1068,7 +1068,33 @@ final class WP_Customize_Widgets {
 	 * @param array $widget Rendered widget to tally.
 	 */
 	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 );
 	}
 
 	/**

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

@@ -23,11 +23,6 @@
 			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 );
 		},
 

wp-includes/js/customize-preview-widgets.min.js

@@ -1 +1 @@
-!function(a,b){if(a&&a.customize){var c,d=a.customize;d.WidgetCustomizerPreview={renderedSidebars:{},renderedWidgets:{},registeredSidebars:[],registeredWidgets:{},widgetSelectors:[],preview:null,l10n:{},init:function(){var a=this;this.buildWidgetSelectors(),this.highlightControls(),this.preview.bind("active",function(){a.preview.send("rendered-sidebars",a.renderedSidebars),a.preview.send("rendered-widgets",a.renderedWidgets)}),this.preview.bind("highlight-widget",a.highlightWidget)},buildWidgetSelectors:function(){var a=this;b.each(this.registeredSidebars,function(c,d){var e,f,g,h=[d.before_widget.replace("%1$s","").replace("%2$s",""),d.before_title,d.after_title,d.after_widget].join("");e=b(h),f=e.prop("tagName"),g=e.prop("className"),g&&(g=g.replace(/^\s+|\s+$/g,""),g&&(f+="."+g.split(/\s+/).join(".")),a.widgetSelectors.push(f))})},highlightWidget:function(a){var c=b(document.body),d=b("#"+a);c.find(".widget-customizer-highlighted-widget").removeClass("widget-customizer-highlighted-widget"),d.addClass("widget-customizer-highlighted-widget"),setTimeout(function(){d.removeClass("widget-customizer-highlighted-widget")},500)},highlightControls:function(){var a=this,c=this.widgetSelectors.join(",");b(c).attr("title",this.l10n.widgetTooltip),b(document).on("mouseenter",c,function(){a.preview.send("highlight-widget-control",b(this).prop("id"))}),b(document).on("click",c,function(c){c.shiftKey&&(c.preventDefault(),a.preview.send("focus-widget-control",b(this).prop("id")))})}},c=d.Preview,d.Preview=c.extend({initialize:function(a,b){d.WidgetCustomizerPreview.preview=this,c.prototype.initialize.call(this,a,b)}}),b(function(){var a=window._wpWidgetCustomizerPreviewSettings;a&&(b.extend(d.WidgetCustomizerPreview,a),d.WidgetCustomizerPreview.init())})}}(window.wp,jQuery);
+!function(a,b){if(a&&a.customize){var c,d=a.customize;d.WidgetCustomizerPreview={renderedSidebars:{},renderedWidgets:{},registeredSidebars:[],registeredWidgets:{},widgetSelectors:[],preview:null,l10n:{},init:function(){var a=this;this.buildWidgetSelectors(),this.highlightControls(),this.preview.bind("highlight-widget",a.highlightWidget)},buildWidgetSelectors:function(){var a=this;b.each(this.registeredSidebars,function(c,d){var e,f,g,h=[d.before_widget.replace("%1$s","").replace("%2$s",""),d.before_title,d.after_title,d.after_widget].join("");e=b(h),f=e.prop("tagName"),g=e.prop("className"),g&&(g=g.replace(/^\s+|\s+$/g,""),g&&(f+="."+g.split(/\s+/).join(".")),a.widgetSelectors.push(f))})},highlightWidget:function(a){var c=b(document.body),d=b("#"+a);c.find(".widget-customizer-highlighted-widget").removeClass("widget-customizer-highlighted-widget"),d.addClass("widget-customizer-highlighted-widget"),setTimeout(function(){d.removeClass("widget-customizer-highlighted-widget")},500)},highlightControls:function(){var a=this,c=this.widgetSelectors.join(",");b(c).attr("title",this.l10n.widgetTooltip),b(document).on("mouseenter",c,function(){a.preview.send("highlight-widget-control",b(this).prop("id"))}),b(document).on("click",c,function(c){c.shiftKey&&(c.preventDefault(),a.preview.send("focus-widget-control",b(this).prop("id")))})}},c=d.Preview,d.Preview=c.extend({initialize:function(a,b){d.WidgetCustomizerPreview.preview=this,c.prototype.initialize.call(this,a,b)}}),b(function(){var a=window._wpWidgetCustomizerPreviewSettings;a&&(b.extend(d.WidgetCustomizerPreview,a),d.WidgetCustomizerPreview.init())})}}(window.wp,jQuery);

wp-includes/js/customize-preview.js

@@ -95,7 +95,9 @@
                 preview.send( 'nonce', api.settings.nonce );
         });
 
-		preview.send( 'ready' );
+		preview.send( 'ready', {
+			activeControls: api.settings.activeControls
+		} );
 
 		/* Custom Backgrounds */
 		bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {

wp-includes/js/customize-preview.min.js

@@ -1 +1 @@
-!function(a,b){var c,d=wp.customize;c=function(a,b,c){var d;return function(){var e=arguments;c=c||this,clearTimeout(d),d=setTimeout(function(){d=null,a.apply(c,e)},b)}},d.Preview=d.Messenger.extend({initialize:function(a,e){var f=this;d.Messenger.prototype.initialize.call(this,a,e),this.body=b(document.body),this.body.on("click.preview","a",function(a){a.preventDefault(),f.send("scroll",0),f.send("url",b(this).prop("href"))}),this.body.on("submit.preview","form",function(a){a.preventDefault()}),this.window=b(window),this.window.on("scroll.preview",c(function(){f.send("scroll",f.window.scrollTop())},200)),this.bind("scroll",function(a){f.window.scrollTop(a)})}}),b(function(){if(d.settings=window._wpCustomizeSettings,d.settings){var a,c;a=new d.Preview({url:window.location.href,channel:d.settings.channel}),a.bind("settings",function(a){b.each(a,function(a,b){d.has(a)?d(a).set(b):d.create(a,b)})}),a.trigger("settings",d.settings.values),a.bind("setting",function(a){var b;a=a.slice(),(b=d(a.shift()))&&b.set.apply(b,a)}),a.bind("sync",function(c){b.each(c,function(b,c){a.trigger(b,c)}),a.send("synced")}),a.bind("active",function(){d.settings.nonce&&a.send("nonce",d.settings.nonce)}),a.send("ready"),c=b.map(["color","image","position_x","repeat","attachment"],function(a){return"background_"+a}),d.when.apply(d,c).done(function(a,c,d,e,f){var g,h=b(document.body),i=b("head"),j=b("#custom-background-css");g=function(){var g="";h.toggleClass("custom-background",!(!a()&&!c())),a()&&(g+="background-color: "+a()+";"),c()&&(g+='background-image: url("'+c()+'");',g+="background-position: top "+d()+";",g+="background-repeat: "+e()+";",g+="background-attachment: "+f()+";"),j.remove(),j=b('<style type="text/css" id="custom-background-css">body.custom-background { '+g+" }</style>").appendTo(i)},b.each(arguments,function(){this.bind(g)})})}})}(wp,jQuery);
+!function(a,b){var c,d=wp.customize;c=function(a,b,c){var d;return function(){var e=arguments;c=c||this,clearTimeout(d),d=setTimeout(function(){d=null,a.apply(c,e)},b)}},d.Preview=d.Messenger.extend({initialize:function(a,e){var f=this;d.Messenger.prototype.initialize.call(this,a,e),this.body=b(document.body),this.body.on("click.preview","a",function(a){a.preventDefault(),f.send("scroll",0),f.send("url",b(this).prop("href"))}),this.body.on("submit.preview","form",function(a){a.preventDefault()}),this.window=b(window),this.window.on("scroll.preview",c(function(){f.send("scroll",f.window.scrollTop())},200)),this.bind("scroll",function(a){f.window.scrollTop(a)})}}),b(function(){if(d.settings=window._wpCustomizeSettings,d.settings){var a,c;a=new d.Preview({url:window.location.href,channel:d.settings.channel}),a.bind("settings",function(a){b.each(a,function(a,b){d.has(a)?d(a).set(b):d.create(a,b)})}),a.trigger("settings",d.settings.values),a.bind("setting",function(a){var b;a=a.slice(),(b=d(a.shift()))&&b.set.apply(b,a)}),a.bind("sync",function(c){b.each(c,function(b,c){a.trigger(b,c)}),a.send("synced")}),a.bind("active",function(){d.settings.nonce&&a.send("nonce",d.settings.nonce)}),a.send("ready",{activeControls:d.settings.activeControls}),c=b.map(["color","image","position_x","repeat","attachment"],function(a){return"background_"+a}),d.when.apply(d,c).done(function(a,c,d,e,f){var g,h=b(document.body),i=b("head"),j=b("#custom-background-css");g=function(){var g="";h.toggleClass("custom-background",!(!a()&&!c())),a()&&(g+="background-color: "+a()+";"),c()&&(g+='background-image: url("'+c()+'");',g+="background-position: top "+d()+";",g+="background-repeat: "+e()+";",g+="background-attachment: "+f()+";"),j.remove(),j=b('<style type="text/css" id="custom-background-css">body.custom-background { '+g+" }</style>").appendTo(i)},b.each(arguments,function(){this.bind(g)})})}})}(wp,jQuery);