Use native DOM events for form events (#38)

kasparsd · Jul 22, 2020 · f615904 · f615904
1 parent af09b88
commit f615904
Show file tree

Hide file tree

Showing 7 changed files with 2,251 additions and 536 deletions.
diff --git a/assets/js/controls.js b/assets/js/controls.js
@@ -1,9 +1,66 @@
 /* eslint camelcase: warn */
 
 ( function( $ ) {
-	if ( ! window.cf7_extras ) {
-		return;
-	}
+
+	var jQueryEvent, formEventCallback;
+
+	var formEventCallbacks = {
+		wpcf7mailsent: function( form ) {
+			var formConfig;
+
+			if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
+				formConfig = getFormConfig( form.contactFormId );
+				trackAnalyticsEvent( 'Contact Form', 'Sent', formConfig.title );
+			}
+		},
+		wpcf7mailfailed: function( form ) {
+			var formConfig;
+
+			if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
+				formConfig = getFormConfig( form.contactFormId );
+				trackAnalyticsEvent( 'Contact Form', 'Error', formConfig.title );
+			}
+		},
+		wpcf7spam: function( form ) {
+			var formConfig;
+
+			if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
+				formConfig = getFormConfig( form.contactFormId );
+				trackAnalyticsEvent( 'Contact Form', 'Spam', formConfig.title );
+			}
+		},
+		wpcf7submit: function( form ) {
+			var formConfig;
+
+			if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
+				formConfig = getFormConfig( form.contactFormId );
+				trackAnalyticsEvent( 'Contact Form', 'Submit', formConfig.title );
+			}
+
+			if ( form.contactFormId && 'mail_sent' === form.status && formEventEnabled( form.contactFormId, 'redirect-success' ) ) {
+				formConfig = getFormConfig( form.contactFormId );
+
+				if ( formConfig.redirect_url ) {
+					window.location = formConfig.redirect_url;
+				}
+			}
+		}
+	};
+
+	var jQueryEvents = {
+		'wpcf7:mailsent': function( event, form ) {
+			formCallbacks.wpcf7mailsent( form );
+		},
+		'wpcf7:mailfailed': function( event, form ) {
+			formCallbacks.wpcf7mailfailed( form );
+		},
+		'wpcf7:spam': function( event, form ) {
+			formCallbacks.wpcf7spam( form );
+		},
+		'wpcf7:submit': function( event, form ) {
+			formCallbacks.wpcf7submit( form );
+		}
+	};
 
 	function trackAnalyticsEvent( eventCategory, eventAction, eventTitle ) {
 
@@ -64,47 +121,26 @@
 		return false;
 	};
 
-	$( document ).on( 'wpcf7:mailsent', function( event, form ) {
-		var formConfig;
-
-		if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
-			formConfig = getFormConfig( form.contactFormId );
-			trackAnalyticsEvent( 'Contact Form', 'Sent', formConfig.title );
-		}
-	} );
-
-	$( document ).on( 'wpcf7:mailfailed', function( event, form ) {
-		var formConfig;
-
-		if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
-			formConfig = getFormConfig( form.contactFormId );
-			trackAnalyticsEvent( 'Contact Form', 'Error', formConfig.title );
-		}
-	} );
-
-	$( document ).on( 'wpcf7:spam', function( event, form ) {
-		var formConfig;
+	// We need the event config for each form to do anything.
+	if ( ! window.cf7_extras ) {
+		return;
+	}
 
-		if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
-			formConfig = getFormConfig( form.contactFormId );
-			trackAnalyticsEvent( 'Contact Form', 'Spam', formConfig.title );
+	// Register the new JS events in CF7 version 5.2 and above.
+	if ( 'function' === typeof document.addEventListener ) {
+		for ( formEventCallback in formEventCallbacks ) {
+			document.addEventListener( formEventCallback, function( event ) {
+				if ( event.type in formEventCallbacks ) {
+					formEventCallbacks[ event.type ].call( event, event.detail );
+				}
+			} );
 		}
-	} );
-
-	$( document ).on( 'wpcf7:submit', function( event, form ) {
-		var formConfig;
 
-		if ( form.contactFormId && formEventEnabled( form.contactFormId, 'track-ga' ) ) {
-			formConfig = getFormConfig( form.contactFormId );
-			trackAnalyticsEvent( 'Contact Form', 'Submit', formConfig.title );
+	// Register the legacy jQuery events pre CF7 version 5.2.
+	} else if ( 'function' === typeof $ ) {
+		for ( jQueryEvent in jQueryEvents ) {
+			$( document ).on( jQueryEvent, jQueryEvents[ jQueryEvent ] );
 		}
+	}
 
-		if ( form.contactFormId && 'mail_sent' === form.status && formEventEnabled( form.contactFormId, 'redirect-success' ) ) {
-			formConfig = getFormConfig( form.contactFormId );
-
-			if ( formConfig.redirect_url ) {
-				window.location = formConfig.redirect_url;
-			}
-		}
-	} );
 }( jQuery ) );
diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.7.3 (July 22, 2020)
+
+- Compatability with the Javascript event changes in the latest [version 5.2 of the Contact Form 7 plugin](https://contactform7.com/2020/07/04/contact-form-7-52/).
+- Mark as tested with WordPress 5.4.
+
 ## 0.7.2 (September 19, 2019)
 
 - Rename the plugin to "Controls for Contact Form 7" for trademark compliance.