Lazy Images: Back-compat for events

dero · dero · commit 3bf681adeb34 · 2020-03-19T13:13:06.000+01:00
diff --git a/modules/infinite-scroll/infinity.js b/modules/infinite-scroll/infinity.js
@@ -126,26 +126,16 @@
 	 * Renders the results from a successful response.
 	 */
 	Scroller.prototype.render = function( response ) {
-		var postLoadEvent;
-
 		this.body.addClass( 'infinity-success' );
 
 		// Check if we can wrap the html
 		this.element.append( response.html );
 
-		try {
-			postLoadEvent = new CustomEvent( 'post-load', {
-				bubbles: true,
-				cancelable: true,
-				detail: response,
-			} );
-		} catch ( e ) {
-			postLoadEvent = document.createEvent( 'CustomEvent' );
-			postLoadEvent.initCustomEvent( 'post-load', true, true, response );
-		}
+		this.trigger( this.body.get( 0 ), 'is.post-load', {
+			jqueryEventName: 'post-load',
+			data: response,
+		} );
 
-		this.body.get( 0 ).dispatchEvent( postLoadEvent );
-		this.body.trigger( 'post-load', response );
 		this.ready = true;
 	};
 
@@ -634,7 +624,10 @@
 				$set.css( 'min-height', '' ).removeClass( 'is--replaced' );
 				if ( this.pageNum in self.pageCache ) {
 					$set.html( self.pageCache[ this.pageNum ].html );
-					self.body.trigger( 'post-load', self.pageCache[ this.pageNum ] );
+					self.trigger( self.body.get( 0 ), 'is.post-load', {
+						jqueryEventName: 'post-load',
+						data: self.pageCache[ this.pageNum ],
+					} );
 				}
 			}
 		} );
@@ -731,6 +724,40 @@
 		this.disabled = false;
 	};
 
+	/**
+	 * Emits custom JS events.
+	 *
+	 * @param {Node}   el
+	 * @param {string} eventName
+	 * @param {*}      data
+	 */
+	Scroller.prototype.trigger = function( el, eventName, opts ) {
+		opts = opts || {};
+
+		/**
+		 * Emit the event in a jQuery way for backwards compatibility where necessary.
+		 */
+		if ( opts.jqueryEventName && jQuery ) {
+			jQuery( el ).trigger( opts.jqueryEventName, opts.data || null );
+		}
+
+		/**
+		 * Emit the event in a standard way.
+		 */
+		var e;
+		try {
+			e = new CustomEvent( eventName, {
+				bubbles: true,
+				cancelable: true,
+				detail: opts.data || null,
+			} );
+		} catch ( err ) {
+			e = document.createEvent( 'CustomEvent' );
+			e.initCustomEvent( eventName, true, true, opts.data || null );
+		}
+		el.dispatchEvent( e );
+	};
+
 	/**
 	 * Ready, set, go!
 	 */
diff --git a/modules/lazy-images/js/lazy-images.js b/modules/lazy-images/js/lazy-images.js
@@ -12,20 +12,17 @@ var jetpackLazyImagesModule = function() {
 		image,
 		i;
 
-
-
 	lazy_load_init();
 
 	var bodyEl = document.querySelector( 'body' );
 	if ( bodyEl ) {
 		// Lazy load images that are brought in from Infinite Scroll
-		bodyEl.addEventListener( 'post-load', lazy_load_init );
+		bodyEl.addEventListener( 'is.post-load', lazy_load_init );
 
 		// Add event to provide optional compatibility for other code.
 		bodyEl.addEventListener( 'jetpack-lazy-images-load', lazy_load_init );
 	}
 
-
 	function lazy_load_init() {
 		images = document.querySelectorAll( 'img.jetpack-lazy-image:not(.jetpack-lazy-image--handled)' );
 		imageCount = images.length;
