WordPress/wp-includes/js/wp-custom-header.js
Joe McGill 89a70eb859 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
2016-11-03 01:21:28 +00:00

160 lines
3.9 KiB
JavaScript

(function( window, settings ) {
if ( ! ( 'addEventListener' in window ) ) {
// Fail gracefully in unsupported browsers.
return;
}
function wpCustomHeader() {
var handlers = {
nativeVideo: {
test: function( settings ) {
var video = document.createElement( 'video' );
return video.canPlayType( settings.mimeType );
},
callback: nativeHandler
},
youtube: {
test: function( settings ) {
return 'video/x-youtube' === settings.mimeType;
},
callback: youtubeHandler
}
};
function initialize() {
settings.container = document.getElementById( 'wp-custom-header' );
if ( supportsVideo() ) {
for ( var id in handlers ) {
var handler = handlers[ id ];
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;
}
}
}
}
function supportsVideo() {
// Don't load video on small screens. @todo: consider bandwidth and other factors.
if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) {
return false;
}
return true;
}
return {
handlers: handlers,
initialize: initialize,
supportsVideo: supportsVideo
};
}
function nativeHandler( settings ) {
var video = document.createElement( 'video' );
video.id = 'wp-custom-header-video';
video.autoplay = 'autoplay';
video.loop = 'loop';
video.muted = 'muted';
video.width = settings.width;
video.height = settings.height;
video.addEventListener( 'click', function() {
if ( video.paused ) {
video.play();
} else {
video.pause();
}
});
settings.container.innerHTML = '';
settings.container.appendChild( video );
video.src = settings.videoUrl;
}
function youtubeHandler( settings ) {
// @link http://stackoverflow.com/a/27728417
var VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/,
videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1];
function loadVideo() {
var YT = window.YT || {};
YT.ready(function() {
var video = document.createElement( 'div' );
video.id = 'wp-custom-header-video';
settings.container.innerHTML = '';
settings.container.appendChild( video );
new YT.Player( video, {
height: settings.height,
width: settings.width,
videoId: videoId,
events: {
onReady: function( e ) {
e.target.mute();
},
onStateChange: function( e ) {
if ( YT.PlayerState.ENDED === e.data ) {
e.target.playVideo();
}
}
},
playerVars: {
autoplay: 1,
controls: 0,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
loop: 1,
modestbranding: 1,
//origin: '',
playsinline: 1,
rel: 0,
showinfo: 0
}
});
});
}
if ( 'YT' in window ) {
loadVideo();
} else {
var tag = document.createElement( 'script' );
tag.src = 'https://www.youtube.com/player_api';
tag.onload = function () { loadVideo(); };
document.getElementsByTagName( 'head' )[0].appendChild( tag );
}
}
window.wp = window.wp || {};
window.wp.customHeader = new wpCustomHeader();
document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize, false );
if ( 'customize' in window.wp ) {
wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) {
if ( 'custom_header_settings' in response ) {
settings = response.custom_header_settings;
}
});
wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
if ( 'custom_header' === placement.partial.id ) {
window.wp.customHeader.initialize();
}
});
}
})( window, window._wpCustomHeaderSettings || {} );