Gravatar Hovercards: jQuery to vanilla JS (#15049)

Automattic · Mar 26, 2020 · fb3824d · fb3824d
1 parent fd65d59
commit fb3824d
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 35 deletions.
diff --git a/modules/gravatar-hovercards.php b/modules/gravatar-hovercards.php
@@ -12,7 +12,7 @@
  * Additional Search Queries: gravatar, hovercards
  */
 
-define( 'GROFILES__CACHE_BUSTER', gmdate( 'YM' ) . 'aa' ); // Break CDN cache, increment when gravatar.com/js/gprofiles.js changes
+define( 'GROFILES__CACHE_BUSTER', gmdate( 'YM' ) . '-2' ); // Break CDN cache, increment when gravatar.com/js/gprofiles.js changes.
 
 function grofiles_hovercards_init() {
 	add_filter( 'get_avatar',          'grofiles_get_avatar', 10, 2 );
@@ -182,7 +182,7 @@ function grofiles_attach_cards() {
 		return;
 	}
 
-	wp_enqueue_script( 'grofiles-cards', 'https://secure.gravatar.com/js/gprofiles.js', array( 'jquery' ), GROFILES__CACHE_BUSTER, true );
+	wp_enqueue_script( 'grofiles-cards', 'https://secure.gravatar.com/js/gprofiles.js', array(), GROFILES__CACHE_BUSTER, true );
 	wp_enqueue_script( 'wpgroho', plugins_url( 'wpgroho.js', __FILE__ ), array( 'grofiles-cards' ), false, true );
 	if ( is_user_logged_in() ) {
 		$cu = wp_get_current_user();

diff --git a/modules/wpgroho.js b/modules/wpgroho.js
@@ -1,43 +1,76 @@
 /* global WPGroHo:true, Gravatar */
-WPGroHo = jQuery.extend(
-	{
-		my_hash: '',
-		data: {},
-		renderers: {},
-		syncProfileData: function( hash, id ) {
-			if ( ! WPGroHo.data[ hash ] ) {
-				WPGroHo.data[ hash ] = {};
-				jQuery( 'div.grofile-hash-map-' + hash + ' span' ).each( function() {
-					WPGroHo.data[ hash ][ this.className ] = jQuery( this ).text();
-				} );
+( function() {
+	var extend = function( out ) {
+		out = out || {};
+
+		for ( var i = 1; i < arguments.length; i++ ) {
+			if ( ! arguments[ i ] ) continue;
+
+			for ( var key in arguments[ i ] ) {
+				if ( arguments[ i ].hasOwnProperty( key ) ) out[ key ] = arguments[ i ][ key ];
 			}
+		}
 
-			WPGroHo.appendProfileData( WPGroHo.data[ hash ], hash, id );
-		},
-		appendProfileData: function( data, hash, id ) {
-			for ( var key in data ) {
-				if ( jQuery.isFunction( WPGroHo.renderers[ key ] ) ) {
-					return WPGroHo.renderers[ key ]( data[ key ], hash, id, key );
+		return out;
+	};
+
+	WPGroHo = extend(
+		{
+			my_hash: '',
+			data: {},
+			renderers: {},
+			syncProfileData: function( hash, id ) {
+				var hashElements;
+
+				if ( ! WPGroHo.data[ hash ] ) {
+					WPGroHo.data[ hash ] = {};
+					hashElements = document.querySelectorAll( 'div.grofile-hash-map-' + hash + ' span' );
+					for ( var i = 0; i < hashElements.length; i++ ) {
+						WPGroHo.data[ hash ][ hashElements[ i ].className ] = hashElements[ i ].innerText;
+					}
 				}
 
-				jQuery( '#' + id )
-					.find( 'h4' )
-					.after( jQuery( '<p class="grav-extra ' + key + '" />' ).html( data[ key ] ) );
-			}
+				WPGroHo.appendProfileData( WPGroHo.data[ hash ], hash, id );
+			},
+			appendProfileData: function( data, hash, id ) {
+				for ( var key in data ) {
+					if ( 'function' === typeof WPGroHo.renderers[ key ] ) {
+						return WPGroHo.renderers[ key ]( data[ key ], hash, id, key );
+					}
+
+					var card = document.getElementById( id );
+					if ( card ) {
+						var heading = card.querySelector( 'h4' );
+						if ( heading ) {
+							var extra = document.createElement( 'p' );
+							extra.className = 'grav-extra ' + key;
+							extra.innerHTML = data[ key ];
+
+							heading.insertAdjacentElement( 'afterend', extra );
+						}
+					}
+				}
+			},
 		},
-	},
-	WPGroHo
-);
+		WPGroHo || {}
+	);
 
-jQuery( document ).ready( function() {
-	if ( 'undefined' === typeof Gravatar ) {
-		return;
-	}
+	var jetpackHovercardsInit = function() {
+		if ( 'undefined' === typeof Gravatar ) {
+			return;
+		}
+
+		Gravatar.profile_cb = function( h, d ) {
+			WPGroHo.syncProfileData( h, d );
+		};
 
-	Gravatar.profile_cb = function( h, d ) {
-		WPGroHo.syncProfileData( h, d );
+		Gravatar.my_hash = WPGroHo.my_hash;
+		Gravatar.init( 'body', '#wpadminbar' );
 	};
 
-	Gravatar.my_hash = WPGroHo.my_hash;
-	Gravatar.init( 'body', '#wpadminbar' );
-} );
+	if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
+		jetpackHovercardsInit();
+	} else {
+		document.addEventListener( 'DOMContentLoaded', jetpackHovercardsInit );
+	}
+} )();