Conditionally Active Controls.

Weston,

I love your plugin, and I am currently moving my themes to being fully customizer compliant. I am, however, having a problem dealing with your dynamically created controls.

I have also implemented the add-on (https://github.com/Invulu/custom-customizer-postmeta) to load my custom post meta. These are fields that I have created via ACF. All of these fields work perfectly for me, using the combination of your two plugins but I would like to add some UI/UX to the meta fields, and hide elements based on checkboxes being checked. If you look at the link below, you will see an example of what I am trying to do:
https://www.dropbox.com/s/u7nxu9as4dxvsio/customizer-screen-shot.jpg?dl=0

I read the article you referenced (above) but it seems to me that that only applies to controls that are either not created dynamically or are using options/theme_mods instead of post meta.

Is is possible to dynamically show and hide these js created fields based on the checkbox or dropdown status? I know how to do all of this via jquery, in my wordpress plugins, but I am having a hard time figuring out what hook to use, or what code to use to properly bind to these controls in the JS-API

Thanks so much for you work on this plugin, I look forward to hearing back from you.

Weston,

Thank you so much for your very quick response, but this is still not working for me. The first time through, I missed the link to your example called “Dependently-Contextual Site Title and Tagline Customizer Controls”, and that helped me understand the proper hooks to use, but it seems that i am still missing something

I will try to layout my code below, and if you would be so kind, maybe you could tell me where I am going wrong:

Here is my PHP

<?php
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%% Setup Controls %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

function fc_edit_customizer( $wp_customize ) {	
	$custom_sidebars_controls = array_filter( array(
		$wp_customize->get_control( 'page_layout' ),
		$wp_customize->get_control( 'sidebar_left' ),
		$wp_customize->get_control( 'sidebar_right' ),
	) );
	foreach ( $custom_sidebars_controls as $control ) {
		$control->active_callback = function( $control ) {
		$setting = $control->manager->get_setting( 'custom_sidebars' );
		if ( ! $setting ) {
			return true;
		}
			return 'blank' !== $setting->value();
		};
	}
}
add_action( 'customize_register' , 'fc_edit_customizer', 100 );

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%% Enqueue JS File %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
function fc_customize_controls_js() { 
	wp_enqueue_script( 'fc-customizer-controls', plugin_dir_url( __FILE__ ).'js/customizer-controls.js', array( 'customize-controls' ) ); 
}
add_action( 'customize_controls_enqueue_scripts', 'fc_customize_controls_js' );
?>

Here is my JS in the enqueued file (above)

// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// %%%%% Contents of the customizer-controls.js File %%%
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

( function( api ) {
	'use strict';

	api( 'custom_sidebars', function( setting ) {
		var isDisplayed, linkToActiveState;

		isDisplayed = function() { return 'blank' !== setting.get(); };

		linkToActiveState = function( control ) {
			var setActiveState = function() { control.active.set( isDisplayed() ); };

			control.active.validate = isDisplayed;

			setActiveState();

			setting.bind( setActiveState );
		};

		api.control( 'page_layout', linkToActiveState );
	} );

}( wp.customize ) );

My post_meta fields are called “custom_sidebars” and “page_layout” respectively.

Is is possible that because this is not an option or a theme_mod, and that potentially there are many fields in the post_meta table that have this key, that maybe I have to somehow designate which post_ID I am trying to use.

Again, I greatly appreciate your help on this, and thanks again for your great work on this plugin.

Sincerely,

Jesse W.

Weston,

Thanks again, for your help, your code examples helped me understand how I would need to format the IDs to get my code to work. And I have the following code working on my site, with one exception (I will explain below):

api( 'postmeta[page][2][custom_sidebars]', function( setting ) {
	var setActiveState, isDisplayed;

	isDisplayed = function() {
		if (setting.get() === true) { return true; } else { return false; }
	};

	setActiveState = function( control ) {
		var setActiveState = function() {
			control.active.set( isDisplayed() );
		};

		control.active.validate = isDisplayed;
		setActiveState();
		setting.bind( setActiveState );
	};

	api.control( 'postmeta[page][2][page_layout]', setActiveState );
} );

The one problem that I am still having, is that the active state is not being set on page reload or save. For example If I check my “custom_sidebars” checkbox, the “page_layout” menu appears, but if I save the changes, the “page_layout” menu disappears, and if I reload the customizer, the “page_layout” menu is hidden, until I check the “custom_sidebars” checkbox off and then on again. Any Ideas? I really appreciate your help.

Sincerely,

Jesse W.

Weston,

Thanks, that helped. i just changed the line like the following and everything is working great now:

if (setting.get() == '1') { return true; } else { return false; }

THanks again, your the best!

Sincerely,

Jesse W.