Add Customizer context

css/fieldmanager.css

@@ -379,3 +379,34 @@ a.fm-delete:hover {
 .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;
+}
+
+.customize-control input.fm-datepicker-popup {
+	/* Override Customizer defaults; datepickers have multiple inputs on one line. */
+	width: 100px;
+}
+
+.customize-control input.fm-datepicker-time {
+	/* Override Customizer defaults; datepickers have multiple inputs on one line. */
+	width: 30px;
+}
+
+.fm-datepicker-time-wrapper select {
+	/* Override Customizer defaults; datepickers have multiple inputs on one line. */
+	min-width: 0;
+}
+
+.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: 80%;
+}

fieldmanager.php

@@ -70,6 +70,14 @@ 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' );
+	}
+
+	if ( 'Fieldmanager_Customize_Setting' === $class ) {
+		return fieldmanager_load_file( 'class-fieldmanager-customize-setting.php' );
+	}
+
 	if ( 0 === strpos( $class, 'Fieldmanager_Util' ) ) {
 		return fieldmanager_load_file( 'util/class-fieldmanager-util-' . $class_id . '.php' );
 	}
@@ -250,8 +258,12 @@ function fm_get_context( $recalculate = false ) {
 function fm_calculate_context() {
 	$calculated_context = array( null, null );
 
+	if ( is_customize_preview() ) {
+		$calculated_context = array( 'customize', null );
+	}
+
 	// Safe to use at any point in the load process, and better than URL matching.
-	if ( is_admin() ) {
+	if ( empty( $calculated_context[0] ) && is_admin() ) {
 		$script = substr( $_SERVER['PHP_SELF'], strrpos( $_SERVER['PHP_SELF'], '/' ) + 1 );
 
 		/*
@@ -284,7 +296,12 @@ function fm_calculate_context() {
 			}
 		}
 
+		if ( 'customize.php' === $script || is_customize_preview() ) {
+			$calculated_context = array( 'customize', null );
+		}
+
 		if ( empty( $calculated_context[0] ) ) {
+
 			switch ( $script ) {
 				// Context = "post".
 				case 'post.php':

js/fieldmanager-autocomplete.js

@@ -1,4 +1,4 @@
-( function( $ ) {
+(function( $ ) {
 
 fm.autocomplete = {
 
@@ -84,5 +84,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-colorpicker.js

@@ -2,9 +2,28 @@
 
 	fm.colorpicker = {
 		init: function() {
-			$( '.fm-colorpicker-popup:visible' ).wpColorPicker();
+			$( '.fm-colorpicker-popup:visible' ).wpColorPicker({
+				change: function ( e, ui ) {
+					// Make sure the input's value attribute also changes.
+					$( this ).attr( 'value', ui.color.toString() );
+					fm.colorpicker.triggerUpdateEvent( this );
+				},
+				clear: function () {
+					// Make sure the input's value attribute also changes.
+					$( this ).attr( 'value', '' );
+					fm.colorpicker.triggerUpdateEvent( this );
+				},
+			});
+		},
+		triggerUpdateEvent: function ( el ) {
+			/**
+			 * Trigger a common event for a value 'change' or 'clear'.
+			 *
+			 * @var {Element} Colorpicker element.
+			 */
+			$( document ).trigger( 'fm_colorpicker_update', el );
 		}
-	}
+	};
 
 	$( document ).ready( fm.colorpicker.init );
 	$( document ).on( 'fm_collapsible_toggle fm_added_element fm_displayif_toggle fm_activate_tab', fm.colorpicker.init );

js/fieldmanager-customize.js

@@ -0,0 +1,256 @@
+/* global document, jQuery, wp, _, fm */
+/**
+ * Integrate Fieldmanager and the Customizer.
+ *
+ * @param {function} $ jQuery
+ * @param {function} api Customizer API.
+ * @param {function} _ Underscore
+ * @param {Object} fm Fieldmanager API.
+ */
+(function( $, api, _, fm ) {
+	'use strict';
+
+	fm.customize = {
+		/**
+		 * jQuery selector targeting all elements to include in a Fieldmanager setting value.
+		 *
+		 * @type {String}
+		 */
+		targetSelector: '.fm-element',
+
+		/**
+		 * Set the values of all Fieldmanager controls.
+		 */
+		setEachControl: function () {
+			var that = this;
+
+			api.control.each(function( control ) {
+				that.setControl( control );
+			});
+		},
+
+		/**
+		 * Set the value of any Fieldmanager control with a given element in its container.
+		 *
+		 * @param {Element} el Element to look for.
+		 */
+		setControlsContainingElement: function ( el ) {
+			var that = this;
+
+			api.control.each(function( control ) {
+				if ( control.container.find( el ).length ) {
+					that.setControl( control );
+				}
+			});
+		},
+
+		/**
+		 * Set a Fieldmanager setting to its control's form values.
+		 *
+		 * @param {Object} control Customizer Control object.
+		 * @return {Object} The updated Control.
+		 */
+		setControl: function ( control ) {
+			var $element;
+			var serialized;
+			var value;
+
+			if ( 'fieldmanager' !== control.params.type ) {
+				return;
+			}
+
+			if ( ! control.setting ) {
+				return;
+			}
+
+			$element = control.container.find( this.targetSelector );
+
+			if ( $element.serializeJSON ) {
+				serialized = $element.serializeJSON();
+				value = serialized[ control.id ];
+			} else {
+				value = $element.serialize();
+			}
+
+			return control.setting.set( value );
+		},
+	};
+
+	/**
+	 * Fires when an .fm-element input triggers a 'change' event.
+	 *
+	 * @param {Event} e Event object.
+	 */
+	var onFmElementChange = function( e ) {
+		fm.customize.setControlsContainingElement( e.target );
+	};
+
+	/**
+	 * 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' ) ) {
+			/*
+			 * Don't update when typing into the autocomplete input. The hidden
+			 * field actually contains the value and is handled onFmElementChange().
+			 */
+			return;
+		}
+
+		fm.customize.setControlsContainingElement( e.target );
+	};
+
+	/**
+	 * 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 ) {
+		fm.customize.setControlsContainingElement( el );
+	};
+
+	/**
+	 * Fires when Fieldmanager adds a new element in a repeatable field.
+	 *
+	 * @param {Event} e Event object.
+	 */
+	var onFmAddedElement = function( e ) {
+		fm.customize.setControlsContainingElement( e.target );
+	};
+
+	/**
+	 * 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 ) {
+		fm.customize.setControlsContainingElement( e.target );
+	};
+
+	/**
+	 * Fires after TinyMCE initializes in a Fieldmanager richtext field.
+	 *
+	 * @param {Event} e Event object.
+	 * @param {Object} ed TinyMCE instance.
+	 */
+	var onFmRichtextInit = function( e, ed ) {
+		ed.on( 'keyup AddUndo', function () {
+			ed.save();
+			fm.customize.setControlsContainingElement( document.getElementById( ed.id ) );
+		} );
+	};
+
+	/**
+	 * Fires after a Fieldmanager colorpicker field updates.
+	 *
+	 * @param {Event} e Event object.
+	 * @param {Element} el Colorpicker element.
+	 */
+	var onFmColorpickerUpdate = function( e, el ) {
+		fm.customize.setControlsContainingElement( el );
+	};
+
+	/**
+	 * Fires after clicking the "Remove" link of a Fieldmanager media field.
+	 *
+	 * @param {Event} e Event object.
+	 */
+	 var onFmMediaRemoveClick = function ( e ) {
+		// The control no longer contains the element, so set all of them.
+		fm.customize.setEachControl();
+	 };
+
+	 /**
+	  * Fires after clicking the "Remove" link of a Fieldmanager repeatable field.
+	  *
+	  * @param {Event} e Event object.
+	  */
+	 var onFmjsRemoveClick = function ( e ) {
+		// The control no longer contains the element, so set all of them.
+		fm.customize.setEachControl();
+	 };
+
+	/**
+	 * Fires when a Customizer Section expands.
+	 *
+	 * @param {Object} section Customizer Section object.
+	 */
+	var onSectionExpanded = function( section ) {
+		/*
+		 * Trigger a Fieldmanager event when a Customizer section expands.
+		 *
+		 * We bind to sections whether or not they have FM controls in case a
+		 * control is added dynamically.
+		 */
+		$( document ).trigger( 'fm_customize_control_section_expanded' );
+
+		if ( fm.richtextarea ) {
+			fm.richtextarea.add_rte_to_visible_textareas();
+		}
+
+		if ( fm.colorpicker ) {
+			fm.colorpicker.init();
+		}
+
+		/*
+		 * Reserialize any Fieldmanager controls in this section with null
+		 * values. We assume null indicates nothing has been saved to the
+		 * database, so we want to make sure default values take effect in the
+		 * preview and are submitted on save as they would be in other contexts.
+		 */
+		_.each( section.controls(), function ( control ) {
+			if (
+				control.settings.default &&
+				null === control.settings.default.get()
+			) {
+				fm.customize.setControl( control );
+			}
+		});
+	};
+
+	/**
+	 * Fires when the Customizer is loaded.
+	 */
+	var ready = function() {
+		var $document = $( document );
+
+		$document.on( 'keyup', '.fm-element', 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 );
+		$document.on( 'fm_richtext_init', onFmRichtextInit );
+		$document.on( 'fm_colorpicker_update', onFmColorpickerUpdate );
+	};
+
+	/**
+	 * Fires when a Customizer Section is added.
+	 *
+	 * @param {Object} section Customizer Section object.
+	 */
+	var addSection = function( section ) {
+		// It would be more efficient to do this only when adding an FM control to a section.
+		section.container.bind( 'expanded', function () {
+			onSectionExpanded( section );
+		} );
+	};
+
+	if ( typeof api !== 'undefined' ) {
+		api.bind( 'ready', ready );
+		api.section.bind( 'add', addSection );
+	}
+})( jQuery, wp.customize, _, fm );

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 );
-} ) ( jQuery );
+	$( document ).on(
+		'fm_collapsible_toggle fm_added_element fm_displayif_toggle fm_activate_tab fm_customize_control_section_expanded',
+		fm.datepicker.add_datepicker
+	);
+} ) ( jQuery );