Remove jQuery from Independent Publisher 2

Rewrites existing jQuery code as vanila, IE11-compatible ES5.
The only exception is the customizer code, which is only used in
wp-admin.

Sites that are not making use of other jQuery-dependent functionality
should see a nice reduction in the amount of loaded JS.

independent-publisher-2/functions.php

@@ -210,12 +210,12 @@ function independent_publisher_2_scripts() {
 	wp_enqueue_script( 'independent-publisher-2-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20170317', true );
 
 	if ( ! is_active_sidebar( 'sidebar-1' ) ) {
-		wp_enqueue_script( 'independent-publisher-2-images', get_template_directory_uri() . '/js/independent-publisher-2.js', array( 'jquery' ), '20170406', true );
+		wp_enqueue_script( 'independent-publisher-2-images', get_template_directory_uri() . '/js/independent-publisher-2.js', array(), '20210111', true );
 	}
 
 	// If there's an active Video widget, and it's (hopefully) in the footer widget area
 	if ( is_active_widget( '','', 'media_video' ) && ( is_active_sidebar( 'sidebar-2' ) || is_active_sidebar( 'sidebar-3' ) || is_active_sidebar( 'sidebar-4' ) ) ) {
-		wp_enqueue_script( 'independent-publisher-2-video-widget', get_template_directory_uri() . '/js/video-widget.js', array( 'jquery' ), '20170608', true );
+		wp_enqueue_script( 'independent-publisher-2-video-widget', get_template_directory_uri() . '/js/video-widget.js', array(), '20210111', true );
 	}
 
 	wp_enqueue_script( 'independent-publisher-2-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20170315', true );

independent-publisher-2/inc/script-wpcom.js

@@ -4,25 +4,30 @@
  * Handles toggling of body class name to help WordPress.com custom colors target color changes at different window sizes.
  * The Custom Colors plugin does not support media queries.
  */
-
- ( function( $ ) {
+( function() {
 	function checkWidth( init ) {
 		// If browser is resized, check width again
-		if ( $( window ).width() > 992 ) {
-			$( 'body' ).addClass( 'tablet-desktop' );
+		if ( window.innerWidth > 992 ) {
+			document.body.classList.add( 'tablet-desktop' );
 		}
 		else {
 			if ( ! init ) {
-				$( 'body' ).removeClass( 'tablet-desktop' );
+				document.body.classList.remove( 'tablet-desktop' );
 			}
 		}
 	}
 
-	$( document ).ready( function() {
+	function init() {
 		checkWidth( true );
+		window.addEventListener( 'resize', function() {
+			checkWidth( false);
+		} );
+	}
 
-		$( window ).resize( function() {
-			checkWidth( false );
-		});
-	});
-} )( jQuery );
+	// After DOM is ready.
+	if ( document.readyState !== 'loading' ) {
+		init();
+	} else {
+		document.addEventListener( 'DOMContentLoaded', init );
+	}
+} )();

independent-publisher-2/js/independent-publisher-2.js

@@ -1,69 +1,136 @@
-( function( $ ) {
-
-    /*
-     * Wrap tiled galleries so we can outdent them
-     */
-    function galleryWrapper() {
-        var gallery = $( '.entry-content' ).find( '.tiled-gallery' );
-
-        //If this tiled gallery has not yet been wrapped, add a wrapper
-        if ( ! gallery.parent().hasClass( 'tiled-gallery-wrapper' ) ) {
-            gallery.wrap( '<div class="tiled-gallery-wrapper"></div>' );
-            gallery.resize();
-        }
-    }
-
-    /*
-     * Add an extra class to large images and videos to outdent them
-     */
-    function outdentMedia() {
-
-        $( '.entry-content img, .post-image-link img' ).each( function() {
-
-            var img = $( this ),
-                caption = $( this ).closest( 'figure' ),
-                new_img = new Image();
-
-                new_img.src = img.attr( 'src' );
-
-                $( new_img ).load( function() {
-
-                    var img_width = new_img.width;
-
-                    if ( img_width >= 1100
-                        && img.parents( '.tiled-gallery-item-large' ).length === 0
-                        && img.parents( '[class^="wp-block-"]' ).length === 0 ) {
-                            $( img ).addClass( 'size-big' );
-                     }
-
-                    if ( caption.hasClass( 'wp-caption' ) && img_width >= 1100 ) {
-                        caption.addClass( 'size-big' );
-                    }
-                } );
-        } );
-
-        $( '.entry-content .jetpack-video-wrapper' ).each( function() {
-            if ( $( this ).find( ':first-child' ).width >= 1100 ) {
-                $( this ).addClass( 'caption-big' );
-            }
-        } );
-    }
-
-    // After DOM is ready
-    $( document ).ready( function() {
-        galleryWrapper();
-        outdentMedia();
-    } );
-
-    // After window loads
-    $( window ).load( function() {
-        outdentMedia();
-    } );
-
-    // After window is resized or infinite scroll loads new posts
-    $( window ).on( 'resize post-load', function() {
-        galleryWrapper();
-        outdentMedia();
-    } );
-
-} )( jQuery );
+( function () {
+	// Helper matches function (not a polyfill), compatible with IE 11.
+	function matches( el, sel ) {
+		if ( Element.prototype.matches ) {
+			return el.matches( sel );
+		}
+
+		if ( Element.prototype.msMatchesSelector ) {
+			return el.msMatchesSelector( sel );
+		}
+	}
+
+	// Helper closest parent node function (not a polyfill) based on
+	// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+	function closest( el, sel ) {
+		if ( el.closest ) {
+			return el.closest( sel );
+		}
+
+		var current = el;
+
+		do {
+			if ( matches( el, sel ) ) {
+				return current;
+			}
+			current = current.parentElement || current.parentNode;
+		} while ( current !== null && current.nodeType === 1 );
+
+		return null;
+	}
+
+	function emitResizeEvent() {
+		if ( typeof( Event ) === 'function' ) {
+			window.dispatchEvent( new Event( 'resize' ) );
+		} else {
+			var event = window.document.createEvent( 'UIEvents' );
+			event.initUIEvent( 'resize', true, false, window, 0 );
+			window.dispatchEvent( event );
+		}
+	}
+
+	function updatePage() {
+		galleryWrapper();
+		outdentMedia();
+	}
+
+	// Wrap tiled galleries so we can outdent them
+	function galleryWrapper() {
+		var galleries = document.querySelectorAll( '.entry-content .tiled-gallery' );
+		var shouldOutdent = false;
+
+		for( var i = 0; i < galleries.length; i++ ) {
+			var gallery = galleries[ i ];
+			var parent = gallery.parentNode;
+
+			// If this tiled gallery has not yet been wrapped, add a wrapper.
+			if ( parent && ! parent.classList.contains( 'tiled-gallery-wrapper' ) ) {
+				var div = document.createElement( 'div' );
+				parent.insertBefore( div, gallery );
+				parent.removeChild( gallery );
+				div.appendChild( gallery );
+				div.classList.add( 'tiled-gallery-wrapper' );
+
+				// Outdent in the next event loop.
+				shouldOutdent = true;
+			}
+		}
+
+		if ( shouldOutdent ) {
+			emitResizeEvent();
+		}
+	}
+
+	// Add an extra class to large images and videos to outdent them.
+	function outdentMedia() {
+		var images = document.querySelectorAll( '.entry-content img, .post-image-link img' );
+
+		for ( var i = 0; i < images.length; i++ ) {
+			var img = images[ i ];
+			var caption = closest( img, 'figure' );
+			var newImg = new Image();
+
+			newImg.addEventListener(
+				'load',
+				// Use an IIFE to avoid scoping issues.
+				( function ( img, caption, newImg ) {
+					return function () {
+						var imgWidth = newImg.offsetWidth;
+
+						if ( imgWidth >= 1100 &&
+								! closest( img, '.tiled-gallery-item-large' ) &&
+								! closest( img, '[class^="wp-block-"]' ) ) {
+							img.classList.add( 'size-big' );
+						}
+
+						if ( caption && caption.classList.contains( 'wp-caption' ) && imgWidth >= 1100 ) {
+							caption.classList.add( 'size-big' );
+						}
+					}
+				} )( img, caption, newImg )
+			);
+
+			newImg.src = img.getAttribute( 'src' );
+		}
+
+		var wrappers = document.querySelectorAll( '.entry-content .jetpack-video-wrapper' );
+
+		for ( var j = 0; j < wrappers.length; j++ ) {
+			var wrapper = wrappers[ j ];
+			var firstChild = wrapper.querySelector( ':first-child' );
+
+			if ( firstChild && firstChild.offsetWidth >= 1100 ) {
+				wrapper.classList.add( 'caption-big' );
+			}
+		}
+	}
+
+	// After DOM is ready.
+	if ( document.readyState !== 'loading' ) {
+		updatePage();
+	} else {
+		document.addEventListener( 'DOMContentLoaded', updatePage );
+	}
+
+	// After window loads.
+	if ( document.readyState === 'complete' ) {
+		outdentMedia();
+	} else {
+		window.addEventListener( 'load', outdentMedia );
+	}
+
+	// After window is resized or infinite scroll loads new posts
+	window.addEventListener( 'resize', updatePage );
+	document.body.addEventListener( 'is.post-load', updatePage );
+
+} )();

independent-publisher-2/js/video-widget.js

@@ -1,9 +1,9 @@
 /*
  * Triggers resize event to make sure video widgets in the footer maintain the correct aspect ratio
  */
-( function( $ ) {
+( function() {
 
-    $( window ).on( 'load', function() {
+	function init() {
 		setTimeout( function(){
 			if ( typeof( Event ) === 'function' ) {
 				window.dispatchEvent( new Event( 'resize' ) );
@@ -13,6 +13,12 @@
 				window.dispatchEvent( event );
 			}
 		} );
-	});
+	}
 
-} )( jQuery );
+	if ( document.readyState === 'complete' ) {
+		init();
+	} else {
+		window.addEventListener( 'load', init );
+	}
+
+} )();