DIVE-131 Add Gutenberg support for dynamic fields

credits.txt

@@ -13,6 +13,7 @@ Contributors:
 * Matthew Johnson, Co-founder, Alley Interactive LLC
 * Will Gladstone, Alley Interactive LLC
 * Daniel Bachhuber, Digital First Media
+* Kevin Fodness, Alley Interactive LLC
 
 Open Source components consulted or used:
 
@@ -30,4 +31,4 @@ Open Source components consulted or used:
 			 Developed at Twitter by @mdo and @fat
 * [4/8/13]   Consulted Simon Wheatley's demo plugin to support using the 
 			 term_order field to sort core taxonomies.
-			 (http://simonwheatley.co.uk/2012/07/ordering-terms-in-wordpress-taxonomies/)
+			 (http://simonwheatley.co.uk/2012/07/ordering-terms-in-wordpress-taxonomies/)

js/fieldmanager-autocomplete.js

@@ -9,7 +9,13 @@ fm.autocomplete = {
 	},
 
 	enable_autocomplete: function() {
-		$( 'input.fm-autocomplete:visible' ).each( function() {
+		$( 'input.fm-autocomplete' ).each( function() {
+			// Do not apply to a field in a prototype block.
+			if ( fm.is_proto_field( this ) ) {
+				return;
+			}
+
+			// Do not apply if the autocomplete has already been bound.
 			if ( !$( this ).hasClass( 'fm-autocomplete-enabled' ) ) {
 				var ac_params = {};
 				var $el = $( this );

js/fieldmanager-colorpicker.js

@@ -2,7 +2,14 @@
 
 	fm.colorpicker = {
 		init: function() {
-			$( '.fm-colorpicker-popup:visible' ).wpColorPicker();
+			$( '.fm-colorpicker-popup' ).each( function() {
+				// Do not apply to a field in a prototype block.
+				if ( fm.is_proto_field( this ) ) {
+					return;
+				}
+
+				$( this ).wpColorPicker();
+			} );
 		}
 	}
 

js/fieldmanager-datepicker.js

@@ -1,14 +1,20 @@
 ( function( $ ) {
 	fm.datepicker = {
 		add_datepicker: function() {
-			$( '.fm-datepicker-popup:visible' ).each( function() {
+			$( '.fm-datepicker-popup' ).each( function() {
+				// Do not apply to a field in a prototype block.
+				if ( fm.is_proto_field( this ) ) {
+					return;
+				}
+
+				// Do not apply if the datepicker has already been bound.
 				if ( !$( this ).hasClass( 'fm-has-date-picker' ) ) {
 					var opts = $( this ).data( 'datepicker-opts' );
 					$( this ).datepicker( opts ).addClass( 'fm-has-date-picker' );
 				}
 			} );
 		}
-	}
+	};
 
 	$( document ).ready( fm.datepicker.add_datepicker );
 	$( document ).on( 'fm_collapsible_toggle fm_added_element fm_displayif_toggle fm_activate_tab', fm.datepicker.add_datepicker );

js/fieldmanager.js

@@ -1,5 +1,34 @@
 var fm = {};
 
+/**
+ * Polyfill Element.matches, if necessary.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+ */
+if ( ! Element.prototype.matches ) {
+	Element.prototype.matches = Element.prototype.msMatchesSelector ||
+		Element.prototype.webkitMatchesSelector;
+}
+
+/**
+ * Polyfill Element.closest, if necessary.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+ */
+if ( ! Element.prototype.closest ) {
+	Element.prototype.closest = function ( s ) {
+		var el = this;
+		if ( ! document.documentElement.contains( el ) ) {
+			return null;
+		}
+		do {
+			if ( el.matches( s ) ) {
+				return el;
+			}
+			el = el.parentElement || el.parentNode;
+		} while ( el !== null && el.nodeType === 1 );
+		return null;
+	};
+}
+
 ( function( $ ) {
 
 var dynamic_seq = 0;
@@ -272,6 +301,15 @@ $( document ).ready( function () {
 	};
 	$( document ).on( 'change', '.display-trigger', fm.trigger_display_if );
 
+  /**
+	 * A helper function to determine if a node is a field in a proto block.
+   * @param {Element} elem - The field element to check.
+	 * @returns {boolean} - True if part of a proto block, false if not.
+   */
+	fm.is_proto_field = function ( elem ) {
+		return ( null !== elem.closest( '.fmjs-proto' ) );
+	};
+
 	init_label_macros();
 	init_sortable();
 

js/grid.js

@@ -12,10 +12,13 @@ $.fm_grid_init = function() {
 
 $.fn.fm_grid_serialize = function() {
 	var rows = [], row_counter = 0, self = this, bottom_row_with_data = 0;
-	if ( this.find( 'tbody:visible' ).length === 0 ) {
-		return;
-	}
-	this.find( 'tbody tr:visible' ).each( function() {
+	this.find( 'tbody tr' ).each( function() {
+
+		// Do not apply to a field in a prototype block.
+		if ( fm.is_proto_field( this ) ) {
+			return;
+		}
+
 		var row = [];
 		$( this ).find( 'td' ).each( function() {
 			var to_save = {
@@ -63,7 +66,12 @@ $.fn.fm_grid = function( opts ) {
 		}
 	}
 	hot.setDataAtCell( data_to_set );
-	this.find( 'tbody tr:visible' ).each( function() {
+	this.find( 'tbody tr' ).each( function() {
+		// Do not apply to a field in a prototype block.
+		if ( fm.is_proto_field( this ) ) {
+			return;
+		}
+
 		var base_name = self.data( 'fm-grid-name' );
 		var col = 0;
 		if ( !rows || typeof( rows[row] ) === 'undefined' ) return false;

js/richtext.js

@@ -1,7 +1,12 @@
 ( function( $ ) {
 	fm.richtextarea = {
 		add_rte_to_visible_textareas: function() {
-			$( 'textarea.fm-richtext:visible' ).each( function() {
+			$( 'textarea.fm-richtext' ).each( function() {
+				// Do not apply to a field in a prototype block.
+				if ( fm.is_proto_field( this ) ) {
+					return;
+				}
+
 				if ( ! $( this ).hasClass( 'fm-tinymce' ) ) {
 					var init, ed_id, mce_options, qt_options, proto_id;
 					$( this ).addClass( 'fm-tinymce' );