Add Customizer context

css/fieldmanager.css

@@ -305,4 +305,20 @@ a.fm-delete:hover {
 .form-field .fm-option label,
 .form-field .fm-checkbox label {
 	display: inline;
-}
+}
+
+.wp-customizer .ui-autocomplete,
+.wp-customizer .ui-datepicker {
+	/* Hoist jQuery UI popups over who-knows-what in the Customizer. */
+	z-index: 500000 !important;
+}
+
+.wp-customizer .fmjs-removable .fmjs-drag-icon {
+	/* Nudge for the Customizer. */
+	margin-top: 7px;
+}
+
+.wp-customizer .fmjs-removable .fmjs-drag-icon + .fmjs-removable-element {
+	/* Nudge for the Customizer. */
+	max-width: 90%;
+}

fieldmanager.php

@@ -69,6 +69,11 @@ function fieldmanager_load_class( $class ) {
 		}
 		return fieldmanager_load_file( 'datasource/class-fieldmanager-datasource-' . $class_id . '.php' );
 	}
+
+	if ( 'Fieldmanager_Customize_Control' === $class ) {
+		return fieldmanager_load_file( 'class-fieldmanager-customize-control.php' );
+	}
+
 	return fieldmanager_load_file( 'class-fieldmanager-' . $class_id . '.php', $class );
 }
 
@@ -181,6 +186,12 @@ function fm_add_script( $handle, $path, $deps = array(), $ver = false, $in_foote
 
 	add_action( 'admin_enqueue_scripts', $add_script );
 	add_action( 'wp_enqueue_scripts', $add_script );
+	/*
+	 * Use a later priority because 'customize_controls_enqueue_scripts' will be
+	 * in the middle of firing at the default priority when
+	 * Fieldmanager_Customize_Control::enqueue() calls this.
+	 */
+	add_action( 'customize_controls_enqueue_scripts', $add_script, 20 );
 }
 
 /**
@@ -278,6 +289,11 @@ function fm_get_context() {
  * }
  */
 function fm_calculate_context() {
+	// Consider the Customizer preview authoritative.
+	if ( is_customize_preview() ) {
+		return array( 'customizer', null );
+	}
+
 	// Safe to use at any point in the load process, and better than URL matching.
 	if ( is_admin() ) {
 		$script = substr( $_SERVER['PHP_SELF'], strrpos( $_SERVER['PHP_SELF'], '/' ) + 1 );
@@ -312,6 +328,10 @@ function fm_calculate_context() {
 			}
 		}
 
+		if ( 'customize.php' === $script || is_customize_preview() ) {
+			return array( 'customizer', null );
+		}
+
 		switch ( $script ) {
 			// Context = "post".
 			case 'post.php':

js/fieldmanager-autocomplete.js

@@ -1,4 +1,4 @@
-( function( $ ) {
+(function( $ ) {
 
 fm.autocomplete = {
 
@@ -34,7 +34,7 @@ fm.autocomplete = {
 								custom_data = custom_result;
 							}
 						}
-						
+
 						$.post( ajaxurl, {
 							action: $el.data( 'action' ),
 							fm_context: $el.data( 'context' ),
@@ -77,5 +77,9 @@ fm.autocomplete = {
 
 $( document ).ready( fm.autocomplete.enable_autocomplete );
 $( document ).on( 'fm_collapsible_toggle fm_added_element fm_displayif_toggle fm_activate_tab', fm.autocomplete.enable_autocomplete );
+$( document ).on( 'focus',
+	'input[class*="fm-autocomplete"]:not(.fm-autocomplete-enabled)',
+	fm.autocomplete.enable_autocomplete
+);
 
-} ) ( jQuery );
+})( jQuery );

js/fieldmanager-customize.js

@@ -0,0 +1,181 @@
+/* global document, jQuery, wp, _ */
+/**
+ * Integrate Fieldmanager and the Customizer.
+ *
+ * @param {function} $ jQuery
+ * @param {function} api wp.customize API.
+ * @param {function} _ Underscore
+ */
+(function( $, api, _ ) {
+	'use strict';
+
+	/**
+	 * Fires when an .fm-element input triggers a 'change' event.
+	 *
+	 * @param {Event} e Event object.
+	 */
+	var onFmElementChange = function( e ) {
+		reserializeEachControl();
+	};
+
+	/**
+	 * Fires when an .fm-element input triggers a 'keyup' event.
+	 *
+	 * @param {Event} e Event object.
+	 */
+	var onFmElementKeyup = function( e ) {
+		var $target = $( e.target );
+
+		// Ignore [Escape] and [Enter].
+		if ( 27 === e.keyCode || 13 === e.keyCode ) {
+			return;
+		}
+
+		if ( $target.hasClass( 'fm-autocomplete' ) ) {
+			// Update an autocomplete setting object when the input's text is deleted.
+			if ( '' === $target.val() ) {
+				// See fm.autocomplete.enable_autocomplete() for this tree.
+				// @todo Risky? Autocomplete hidden fields don't typically get set to value="".
+				$target.siblings( 'input[type=hidden]' ).first().val( '' );
+
+			/*
+			 * Don't update when typing into the autocomplete input. The hidden
+			 * field actually contains the value and is handled onFmElementChange().
+			 */
+			} else {
+				return;
+			}
+		}
+
+		reserializeEachControl();
+	};
+
+	/**
+	 * Fires when a Fieldmanager object is dropped while sorting.
+	 *
+	 * @param {Event} e Event object.
+	 * @param {Element} el The sorted element.
+	 */
+	var onFmSortableDrop = function( e, el ) {
+		reserializeEachControl();
+	};
+
+	/**
+	 * Fires when Fieldmanager adds a new element in a repeatable field.
+	 *
+	 * @param {Event} e Event object.
+	 */
+	var onFmAddedElement = function( e ) {
+		reserializeEachControl();
+	};
+
+	/**
+	 * Fires when an item is selected and previewed in a Fieldmanager media field.
+	 *
+	 * @param {Event} e Event object.
+	 * @param {jQuery} $wrapper .media-wrapper jQuery object.
+	 * @param {object} attachment Attachment attributes.
+	 * @param {object} wp Global WordPress JS API.
+	 */
+	var onFieldmanagerMediaPreview = function( e, $wrapper, attachment, wp ) {
+		reserializeEachControl();
+	};
+
+	/**
+	 * Fires after clicking the "Remove" link of a Fieldmanager media field.
+	 *
+	 * @param {Event} e Event object.
+	 */
+	var onFmMediaRemoveClick = function( e ) {
+		reserializeEachControl();
+	};
+
+	/**
+	 * Fires after clicking the "Remove" link of a Fieldmanager repeatable field.
+	 *
+	 * @param {Event} e Event object.
+	 */
+	var onFmjsRemoveClick = function( e ) {
+		reserializeEachControl();
+	};
+
+	/**
+	 * Set the values of all Fieldmanager controls.
+	 */
+	var reserializeEachControl = function() {
+		api.control.each( reserializeControl );
+	};
+
+	/**
+	 * Set a Fieldmanager control to its form values.
+	 *
+	 * @param {Object} control Customizer Control object.
+	 */
+	var reserializeControl = function( control ) {
+		if ( 'fieldmanager' !== control.params.type ) {
+			return;
+		}
+
+		control.setting.set( control.container.find( '.fm-element' ).serialize() );
+	};
+
+	/**
+	 * Trigger an event when a Customizer section with a Fieldmanager control expands.
+	 */
+	var bindToSectionsWithFm = function() {
+		// @todo Also do this on section add
+		api.section.each(function( section ) {
+			$.each( section.controls(), function( i, control ) {
+				if ( 'fieldmanager' !== control.params.type ) {
+					return;
+				}
+
+				section.container.bind( 'expanded', function() {
+					$( document ).trigger( 'fm_customizer_control_section_expanded' );
+				});
+
+				return false;
+			});
+		});
+	};
+
+	/**
+	 * Fires when the Customizer is loaded.
+	 */
+	var ready = function() {
+		var $document = $( document );
+
+		/*
+		 * We debounce() most keyup events to avoid refreshing the Customizer
+		 * preview every single time the user types a letter. But typing into
+		 * the autocomplete input does not itself trigger a refresh -- the only
+		 * time it should affect the preview is when removing an autocomplete
+		 * selection. We allow that to occur normally.
+		 */
+		$document.on( 'keyup', '.fm-element:not(.fm-autocomplete)', _.debounce( onFmElementKeyup, 500 ) );
+		$document.on( 'keyup', '.fm-autocomplete', onFmElementKeyup );
+
+		$document.on( 'change', '.fm-element', onFmElementChange );
+		$document.on( 'click', '.fm-media-remove', onFmMediaRemoveClick );
+		$document.on( 'click', '.fmjs-remove', onFmjsRemoveClick );
+		$document.on( 'fm_sortable_drop', onFmSortableDrop );
+		$document.on( 'fieldmanager_media_preview', onFieldmanagerMediaPreview );
+
+		bindToSectionsWithFm();
+
+		/*
+		 * Hacky, because it always prompts the user to save. Unlike when we
+		 * create individual settings, the field "value" is always going to
+		 * change when it's reserialized. It also ensures defaults are applied
+		 * when the Customizer loads. But if the user saved those changes, the
+		 * defaults would be applied, as opposed to a submenu page, where there
+		 * isn't an AYS prompt. Creating a query string on the PHP side might
+		 * work, but that's even weirder.
+		 */
+		reserializeEachControl();
+	};
+
+	if ( typeof api !== 'undefined' ) {
+		api.bind( 'ready', ready );
+	}
+})( jQuery, wp.customize, _ );

js/fieldmanager-datepicker.js

@@ -11,5 +11,8 @@
 	}
 
 	$( document ).ready( fm.datepicker.add_datepicker );
-	$( document ).on( 'fm_collapsible_toggle fm_added_element fm_displayif_toggle fm_activate_tab', fm.datepicker.add_datepicker );
+	$( document ).on(
+		'fm_collapsible_toggle fm_added_element fm_displayif_toggle fm_activate_tab fm_customizer_control_section_expanded',
+		fm.datepicker.add_datepicker
+	);
 } ) ( jQuery );

js/fieldmanager.js

@@ -114,6 +114,25 @@ var match_value = function( values, match_string ) {
 	return false;
 }
 
+/**
+ * Initializes triggers to conditionally hide or show fields.
+ */
+var init_display_if = function() {
+	$( '.display-if' ).each(function() {
+		var src = $( this ).data( 'display-src' );
+		var values = $( this ).data( 'display-value' ).split( ',' );
+		var trigger = $( this ).siblings( '.fm-' + src + '-wrapper' ).find( '.fm-element' );
+		var val = trigger.val();
+		if ( trigger.is( ':radio' ) && trigger.filter( ':checked' ).length ) {
+			val = trigger.filter( ':checked' ).val();
+		}
+		trigger.addClass( 'display-trigger' );
+		if ( ! match_value( values, val ) ) {
+			$( this ).hide();
+		}
+	});
+};
+
 fm_add_another = function( $element ) {
 	var el_name = $element.data( 'related-element' )
 		, limit = $element.data( 'limit' ) - 0
@@ -163,21 +182,6 @@ $( document ).ready( function () {
 
 	$( '.fm-collapsed > .fm-group:not(.fmjs-proto) > .fm-group-inner' ).hide();
 
-	// Initializes triggers to conditionally hide or show fields
-	$( '.display-if' ).each( function() {
-		var src = $( this ).data( 'display-src' );
-		var values = $( this ).data( 'display-value' ).split( ',' );
-		var trigger = $( this ).siblings( '.fm-' + src + '-wrapper' ).find( '.fm-element' );
-		var val = trigger.val();
-		if ( trigger.is( ':radio' ) && trigger.filter( ':checked' ).length ) {
-			val = trigger.filter( ':checked' ).val();
-		}
-		trigger.addClass( 'display-trigger' );
-		if ( !match_value( values, val ) ) {
-			$( this ).hide();
-		}
-	} );
-
 	// Controls the trigger to show or hide fields
 	$( document ).on( 'change', '.display-trigger', function() {
 		var val = $( this ).val().split(',');
@@ -198,8 +202,11 @@ $( document ).ready( function () {
 
 	init_label_macros();
 	init_sortable();
+	init_display_if();
 
-	$( document ).on( 'fm_activate_tab', init_sortable );
+	$( document ).on( 'fm_activate_tab fm_customizer_control_section_expanded', init_sortable );
+	$( document ).on( 'fm_customizer_control_section_expanded', init_label_macros );
+	$( document ).on( 'fm_customizer_control_section_expanded', init_display_if );
 } );
 
 } )( jQuery );

php/class-fieldmanager-customize-control.php

@@ -0,0 +1,47 @@
+<?php
+/**
+ * Class file for Fieldmanager_Customize_Control.
+ */
+
+if ( class_exists( 'WP_Customize_Control' ) ) :
+	/**
+	 * Render a Fieldmanager field as a Customizer control.
+	 */
+	class Fieldmanager_Customize_Control extends WP_Customize_Control {
+		/**
+		 * The field object to use. Supply via `$args['fm']`.
+		 *
+		 * @var Fieldmanager_Field
+		 */
+		protected $fm;
+
+		/**
+		 * The control 'type', used in scripts to identify FM controls.
+		 *
+		 * @var string
+		 */
+		public $type = 'fieldmanager';
+
+		/**
+		 * Enqueue control-related scripts and styles.
+		 */
+		public function enqueue() {
+			fm_add_script(
+				'fm_customizer',
+				'js/fieldmanager-customize.js',
+				array( 'jquery', 'underscore', 'fieldmanager_script', 'customize-controls' ),
+				'1.0.0',
+				true
+			);
+		}
+
+		/**
+		 * Render the control's content.
+		 *
+		 * @see Fieldmanager_Field::element_markup().
+		 */
+		public function render_content() {
+			echo $this->fm->element_markup( $this->value() );
+		}
+	}
+endif;