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.
Built from https://develop.svn.wordpress.org/trunk@39102


git-svn-id: http://core.svn.wordpress.org/trunk@39044 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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() {

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 || {} );

wp-includes/js/wp-custom-header.min.js

@@ -1 +1 @@
-!function(a,b,c){function d(){function d(){if(c.container=document.getElementById("wp-custom-header"),g()){for(var a in h){var d=h[a];if(h.hasOwnProperty(a)&&d.test(c)){d.callback(c);break}}b("body").trigger("wp-custom-header-video-loaded")}}function g(){return!(a.innerWidth<c.minWidth||a.innerHeight<c.minHeight)}var h={nativeVideo:{test:function(a){var b=document.createElement("video");return b.canPlayType(a.mimeType)},callback:e},youtube:{test:function(a){return"video/x-youtube"===a.mimeType},callback:f}};return{handlers:h,initialize:d,supportsVideo:g}}function e(a){var b=document.createElement("video");b.id="wp-custom-header-video",b.autoplay="autoplay",b.loop="loop",b.muted="muted",b.width=a.width,b.height=a.height,b.addEventListener("click",function(){b.paused?b.play():b.pause()}),a.container.innerHTML="",a.container.appendChild(b),b.src=a.videoUrl}function f(b){function c(){var c=a.YT||{};c.ready(function(){var a=document.createElement("div");a.id="wp-custom-header-video",b.container.innerHTML="",b.container.appendChild(a),new c.Player(a,{height:b.height,width:b.width,videoId:e,events:{onReady:function(a){a.target.mute()},onStateChange:function(a){c.PlayerState.ENDED===a.data&&a.target.playVideo()}},playerVars:{autoplay:1,controls:0,disablekb:1,fs:0,iv_load_policy:3,loop:1,modestbranding:1,playsinline:1,rel:0,showinfo:0}})})}var d=/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/,e=b.videoUrl.match(d)[1];if("YT"in a)c();else{var f=document.createElement("script");f.src="https://www.youtube.com/player_api",f.onload=function(){c()},document.getElementsByTagName("head")[0].appendChild(f)}}"addEventListener"in a&&(a.wp=a.wp||{},a.wp.customHeader=new d,document.addEventListener("DOMContentLoaded",a.wp.customHeader.initialize,!1),"customize"in a.wp&&(wp.customize.selectiveRefresh.bind("render-partials-response",function(a){"custom_header_settings"in a&&(c=a.custom_header_settings)}),wp.customize.selectiveRefresh.bind("partial-content-rendered",function(b){"custom_header"===b.partial.id&&a.wp.customHeader.initialize()})))}(window,jQuery,window._wpCustomHeaderSettings||{});
+!function(a,b){function c(){function c(){if(b.container=document.getElementById("wp-custom-header"),f())for(var c in g){var d=g[c];if(g.hasOwnProperty(c)&&d.test(b)){if(d.callback(b),"dispatchEvent"in a){var e=new Event("wp-custom-header-video-loaded");document.dispatchEvent(e)}break}}}function f(){return!(a.innerWidth<b.minWidth||a.innerHeight<b.minHeight)}var g={nativeVideo:{test:function(a){var b=document.createElement("video");return b.canPlayType(a.mimeType)},callback:d},youtube:{test:function(a){return"video/x-youtube"===a.mimeType},callback:e}};return{handlers:g,initialize:c,supportsVideo:f}}function d(a){var b=document.createElement("video");b.id="wp-custom-header-video",b.autoplay="autoplay",b.loop="loop",b.muted="muted",b.width=a.width,b.height=a.height,b.addEventListener("click",function(){b.paused?b.play():b.pause()}),a.container.innerHTML="",a.container.appendChild(b),b.src=a.videoUrl}function e(b){function c(){var c=a.YT||{};c.ready(function(){var a=document.createElement("div");a.id="wp-custom-header-video",b.container.innerHTML="",b.container.appendChild(a),new c.Player(a,{height:b.height,width:b.width,videoId:e,events:{onReady:function(a){a.target.mute()},onStateChange:function(a){c.PlayerState.ENDED===a.data&&a.target.playVideo()}},playerVars:{autoplay:1,controls:0,disablekb:1,fs:0,iv_load_policy:3,loop:1,modestbranding:1,playsinline:1,rel:0,showinfo:0}})})}var d=/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/,e=b.videoUrl.match(d)[1];if("YT"in a)c();else{var f=document.createElement("script");f.src="https://www.youtube.com/player_api",f.onload=function(){c()},document.getElementsByTagName("head")[0].appendChild(f)}}"addEventListener"in a&&(a.wp=a.wp||{},a.wp.customHeader=new c,document.addEventListener("DOMContentLoaded",a.wp.customHeader.initialize,!1),"customize"in a.wp&&(wp.customize.selectiveRefresh.bind("render-partials-response",function(a){"custom_header_settings"in a&&(b=a.custom_header_settings)}),wp.customize.selectiveRefresh.bind("partial-content-rendered",function(b){"custom_header"===b.partial.id&&a.wp.customHeader.initialize()})))}(window,window._wpCustomHeaderSettings||{});

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-beta1-39101';
+$wp_version = '4.7-beta1-39102';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.