From 22bb12dd61d93d8d8a2e31a244b05beba5896152 Mon Sep 17 00:00:00 2001
From: Joe McGill <joemcgill@git.wordpress.org>
Date: Thu, 3 Nov 2016 01:20:14 +0000
Subject: [PATCH] Themes: Remove jQuery dependency from wp-custom-header.js.

In [38985], we used jQuery to trigger a custom event once a video
handler has completed so themes, like Twenty Fourteen, can execute
their own adjustments after the header video has loaded.

This replaces the jQuery `trigger()` method with a native event and
updates Twenty Fourteen accordingly.

Props adamsilverstein, joemcgill.
Fixes #38550.

git-svn-id: https://develop.svn.wordpress.org/trunk@39102 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../themes/twentyfourteen/js/functions.js           | 11 ++++++-----
 src/wp-includes/js/wp-custom-header.js              | 13 +++++++++----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/wp-content/themes/twentyfourteen/js/functions.js b/src/wp-content/themes/twentyfourteen/js/functions.js
index 7efc7cf6b5..2b83db0b3c 100644
--- a/src/wp-content/themes/twentyfourteen/js/functions.js
+++ b/src/wp-content/themes/twentyfourteen/js/functions.js
@@ -105,11 +105,6 @@
 
 			if ( body.is( '.header-image' ) ) {
 
-				// Recaculate the header height when a custom header loads.
-				$( 'body' ).on( 'wp-custom-header-video-loaded', function() {
-					mastheadOffset = $( '#site-header' ).height();
-				} );
-
 				_window.on( 'scroll.twentyfourteen', function() {
 					if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
 						body.addClass( 'masthead-fixed' );
@@ -118,6 +113,12 @@
 					}
 				} );
 
+				// Update masthead offset once a custom header video loads.
+				$( document ).on( 'wp-custom-header-video-loaded', function() {
+					mastheadOffset = $( '#site-header' ).height();
+				} );
+
+
 				// Update masthead offset after a selective refresh.
 				if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) {
 					wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function() {
diff --git a/src/wp-includes/js/wp-custom-header.js b/src/wp-includes/js/wp-custom-header.js
index 80ebd917dc..08e24882fa 100644
--- a/src/wp-includes/js/wp-custom-header.js
+++ b/src/wp-includes/js/wp-custom-header.js
@@ -1,4 +1,4 @@
-(function( window, $, settings ) {
+(function( window, settings ) {
 
 	if ( ! ( 'addEventListener' in window ) ) {
 		// Fail gracefully in unsupported browsers.
@@ -31,11 +31,16 @@
 
 					if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
 						handler.callback( settings );
+
+						// Set up and dispatch custom event when the video is loaded.
+						if ( 'dispatchEvent' in window ) {
+							var videoLoaded = new Event( 'wp-custom-header-video-loaded' );
+							document.dispatchEvent( videoLoaded );
+						}
+
 						break;
 					}
 				}
-
-				$( 'body' ).trigger( 'wp-custom-header-video-loaded' );
 			}
 		}
 
@@ -151,4 +156,4 @@
 		});
 	}
 
-})( window, jQuery, window._wpCustomHeaderSettings || {} );
+})( window, window._wpCustomHeaderSettings || {} );