Edit File by line

/**

[0] Fix | Delete

* @output wp-includes/js/wp-custom-header.js

[1] Fix | Delete

[2] Fix | Delete

[3] Fix | Delete

/* global YT */

[4] Fix | Delete

(function( window, settings ) {

[5] Fix | Delete

[6] Fix | Delete

var NativeHandler, YouTubeHandler;

[7] Fix | Delete

[8] Fix | Delete

/** @namespace wp */

[9] Fix | Delete

window.wp = window.wp || {};

[10] Fix | Delete

[11] Fix | Delete

// Fail gracefully in unsupported browsers.

[12] Fix | Delete

if ( ! ( 'addEventListener' in window ) ) {

[13] Fix | Delete

return;

[14] Fix | Delete

}

[15] Fix | Delete

[16] Fix | Delete

/**

[17] Fix | Delete

* Trigger an event.

[18] Fix | Delete

[19] Fix | Delete

* @param {Element} target HTML element to dispatch the event on.

[20] Fix | Delete

* @param {string} name Event name.

[21] Fix | Delete

[22] Fix | Delete

function trigger( target, name ) {

[23] Fix | Delete

var evt;

[24] Fix | Delete

[25] Fix | Delete

if ( 'function' === typeof window.Event ) {

[26] Fix | Delete

evt = new Event( name );

[27] Fix | Delete

} else {

[28] Fix | Delete

evt = document.createEvent( 'Event' );

[29] Fix | Delete

evt.initEvent( name, true, true );

[30] Fix | Delete

}

[31] Fix | Delete

[32] Fix | Delete

target.dispatchEvent( evt );

[33] Fix | Delete

}

[34] Fix | Delete

[35] Fix | Delete

/**

[36] Fix | Delete

* Create a custom header instance.

[37] Fix | Delete

[38] Fix | Delete

* @memberOf wp

[39] Fix | Delete

[40] Fix | Delete

* @class

[41] Fix | Delete

[42] Fix | Delete

function CustomHeader() {

[43] Fix | Delete

this.handlers = {

[44] Fix | Delete

nativeVideo: new NativeHandler(),

[45] Fix | Delete

youtube: new YouTubeHandler()

[46] Fix | Delete

};

[47] Fix | Delete

}

[48] Fix | Delete

[49] Fix | Delete

CustomHeader.prototype = {

[50] Fix | Delete

/**

[51] Fix | Delete

* Initialize the custom header.

[52] Fix | Delete

[53] Fix | Delete

* If the environment supports video, loops through registered handlers

[54] Fix | Delete

* until one is found that can handle the video.

[55] Fix | Delete

[56] Fix | Delete

initialize: function() {

[57] Fix | Delete

if ( this.supportsVideo() ) {

[58] Fix | Delete

for ( var id in this.handlers ) {

[59] Fix | Delete

var handler = this.handlers[ id ];

[60] Fix | Delete

[61] Fix | Delete

if ( 'test' in handler && handler.test( settings ) ) {

[62] Fix | Delete

this.activeHandler = handler.initialize.call( handler, settings );

[63] Fix | Delete

[64] Fix | Delete

// Dispatch custom event when the video is loaded.

[65] Fix | Delete

trigger( document, 'wp-custom-header-video-loaded' );

[66] Fix | Delete

break;

[67] Fix | Delete

}

[68] Fix | Delete

}

[69] Fix | Delete

}

[70] Fix | Delete

[71] Fix | Delete

[72] Fix | Delete

/**

[73] Fix | Delete

* Determines if the current environment supports video.

[74] Fix | Delete

[75] Fix | Delete

* Themes and plugins can override this method to change the criteria.

[76] Fix | Delete

[77] Fix | Delete

* @return {boolean}

[78] Fix | Delete

[79] Fix | Delete

supportsVideo: function() {

[80] Fix | Delete

// Don't load video on small screens. @todo Consider bandwidth and other factors.

[81] Fix | Delete

if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) {

[82] Fix | Delete

return false;

[83] Fix | Delete

}

[84] Fix | Delete

[85] Fix | Delete

return true;

[86] Fix | Delete

[87] Fix | Delete

[88] Fix | Delete

/**

[89] Fix | Delete

* Base handler for custom handlers to extend.

[90] Fix | Delete

[91] Fix | Delete

* @type {BaseHandler}

[92] Fix | Delete

[93] Fix | Delete

BaseVideoHandler: BaseHandler

[94] Fix | Delete

};

[95] Fix | Delete

[96] Fix | Delete

/**

[97] Fix | Delete

* Create a video handler instance.

[98] Fix | Delete

[99] Fix | Delete

* @memberOf wp

[100] Fix | Delete

[101] Fix | Delete

* @class

[102] Fix | Delete

[103] Fix | Delete

function BaseHandler() {}

[104] Fix | Delete

[105] Fix | Delete

BaseHandler.prototype = {

[106] Fix | Delete

/**

[107] Fix | Delete

* Initialize the video handler.

[108] Fix | Delete

[109] Fix | Delete

* @param {Object} settings Video settings.

[110] Fix | Delete

[111] Fix | Delete

initialize: function( settings ) {

[112] Fix | Delete

var handler = this,

[113] Fix | Delete

button = document.createElement( 'button' );

[114] Fix | Delete

[115] Fix | Delete

this.settings = settings;

[116] Fix | Delete

this.container = document.getElementById( 'wp-custom-header' );

[117] Fix | Delete

this.button = button;

[118] Fix | Delete

[119] Fix | Delete

button.setAttribute( 'type', 'button' );

[120] Fix | Delete

button.setAttribute( 'id', 'wp-custom-header-video-button' );

[121] Fix | Delete

button.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' );

[122] Fix | Delete

button.innerHTML = settings.l10n.play;

[123] Fix | Delete

[124] Fix | Delete

// Toggle video playback when the button is clicked.

[125] Fix | Delete

button.addEventListener( 'click', function() {

[126] Fix | Delete

if ( handler.isPaused() ) {

[127] Fix | Delete

handler.play();

[128] Fix | Delete

} else {

[129] Fix | Delete

handler.pause();

[130] Fix | Delete

}

[131] Fix | Delete

});

[132] Fix | Delete

[133] Fix | Delete

// Update the button class and text when the video state changes.

[134] Fix | Delete

this.container.addEventListener( 'play', function() {

[135] Fix | Delete

button.className = 'wp-custom-header-video-button wp-custom-header-video-play';

[136] Fix | Delete

button.innerHTML = settings.l10n.pause;

[137] Fix | Delete

if ( 'a11y' in window.wp ) {

[138] Fix | Delete

window.wp.a11y.speak( settings.l10n.playSpeak);

[139] Fix | Delete

}

[140] Fix | Delete

});

[141] Fix | Delete

[142] Fix | Delete

this.container.addEventListener( 'pause', function() {

[143] Fix | Delete

button.className = 'wp-custom-header-video-button wp-custom-header-video-pause';

[144] Fix | Delete

button.innerHTML = settings.l10n.play;

[145] Fix | Delete

if ( 'a11y' in window.wp ) {

[146] Fix | Delete

window.wp.a11y.speak( settings.l10n.pauseSpeak);

[147] Fix | Delete

}

[148] Fix | Delete

});

[149] Fix | Delete

[150] Fix | Delete

this.ready();

[151] Fix | Delete

[152] Fix | Delete

[153] Fix | Delete

/**

[154] Fix | Delete

* Ready method called after a handler is initialized.

[155] Fix | Delete

[156] Fix | Delete

* @abstract

[157] Fix | Delete

[158] Fix | Delete

ready: function() {},

[159] Fix | Delete

[160] Fix | Delete

/**

[161] Fix | Delete

* Whether the video is paused.

[162] Fix | Delete

[163] Fix | Delete

* @abstract

[164] Fix | Delete

* @return {boolean}

[165] Fix | Delete

[166] Fix | Delete

isPaused: function() {},

[167] Fix | Delete

[168] Fix | Delete

/**

[169] Fix | Delete

* Pause the video.

[170] Fix | Delete

[171] Fix | Delete

* @abstract

[172] Fix | Delete

[173] Fix | Delete

pause: function() {},

[174] Fix | Delete

[175] Fix | Delete

/**

[176] Fix | Delete

* Play the video.

[177] Fix | Delete

[178] Fix | Delete

* @abstract

[179] Fix | Delete

[180] Fix | Delete

play: function() {},

[181] Fix | Delete

[182] Fix | Delete

/**

[183] Fix | Delete

* Append a video node to the header container.

[184] Fix | Delete

[185] Fix | Delete

* @param {Element} node HTML element.

[186] Fix | Delete

[187] Fix | Delete

setVideo: function( node ) {

[188] Fix | Delete

var editShortcutNode,

[189] Fix | Delete

editShortcut = this.container.getElementsByClassName( 'customize-partial-edit-shortcut' );

[190] Fix | Delete

[191] Fix | Delete

if ( editShortcut.length ) {

[192] Fix | Delete

editShortcutNode = this.container.removeChild( editShortcut[0] );

[193] Fix | Delete

}

[194] Fix | Delete

[195] Fix | Delete

this.container.innerHTML = '';

[196] Fix | Delete

this.container.appendChild( node );

[197] Fix | Delete

[198] Fix | Delete

if ( editShortcutNode ) {

[199] Fix | Delete

this.container.appendChild( editShortcutNode );

[200] Fix | Delete

}

[201] Fix | Delete

[202] Fix | Delete

[203] Fix | Delete

/**

[204] Fix | Delete

* Show the video controls.

[205] Fix | Delete

[206] Fix | Delete

* Appends a play/pause button to header container.

[207] Fix | Delete

[208] Fix | Delete

showControls: function() {

[209] Fix | Delete

if ( ! this.container.contains( this.button ) ) {

[210] Fix | Delete

this.container.appendChild( this.button );

[211] Fix | Delete

}

[212] Fix | Delete

[213] Fix | Delete

[214] Fix | Delete

/**

[215] Fix | Delete

* Whether the handler can process a video.

[216] Fix | Delete

[217] Fix | Delete

* @abstract

[218] Fix | Delete

* @param {Object} settings Video settings.

[219] Fix | Delete

* @return {boolean}

[220] Fix | Delete

[221] Fix | Delete

test: function() {

[222] Fix | Delete

return false;

[223] Fix | Delete

[224] Fix | Delete

[225] Fix | Delete

/**

[226] Fix | Delete

* Trigger an event on the header container.

[227] Fix | Delete

[228] Fix | Delete

* @param {string} name Event name.

[229] Fix | Delete

[230] Fix | Delete

trigger: function( name ) {

[231] Fix | Delete

trigger( this.container, name );

[232] Fix | Delete

}

[233] Fix | Delete

};

[234] Fix | Delete

[235] Fix | Delete

/**

[236] Fix | Delete

* Create a custom handler.

[237] Fix | Delete

[238] Fix | Delete

* @memberOf wp

[239] Fix | Delete

[240] Fix | Delete

* @param {Object} protoProps Properties to apply to the prototype.

[241] Fix | Delete

* @return CustomHandler The subclass.

[242] Fix | Delete

[243] Fix | Delete

BaseHandler.extend = function( protoProps ) {

[244] Fix | Delete

var prop;

[245] Fix | Delete

[246] Fix | Delete

function CustomHandler() {

[247] Fix | Delete

var result = BaseHandler.apply( this, arguments );

[248] Fix | Delete

return result;

[249] Fix | Delete

}

[250] Fix | Delete

[251] Fix | Delete

CustomHandler.prototype = Object.create( BaseHandler.prototype );

[252] Fix | Delete

CustomHandler.prototype.constructor = CustomHandler;

[253] Fix | Delete

[254] Fix | Delete

for ( prop in protoProps ) {

[255] Fix | Delete

CustomHandler.prototype[ prop ] = protoProps[ prop ];

[256] Fix | Delete

}

[257] Fix | Delete

[258] Fix | Delete

return CustomHandler;

[259] Fix | Delete

};

[260] Fix | Delete

[261] Fix | Delete

/**

[262] Fix | Delete

* Native video handler.

[263] Fix | Delete

[264] Fix | Delete

* @memberOf wp

[265] Fix | Delete

[266] Fix | Delete

* @class

[267] Fix | Delete

[268] Fix | Delete

NativeHandler = BaseHandler.extend(/** @lends wp.NativeHandler.prototype */{

[269] Fix | Delete

/**

[270] Fix | Delete

* Whether the native handler supports a video.

[271] Fix | Delete

[272] Fix | Delete

* @param {Object} settings Video settings.

[273] Fix | Delete

* @return {boolean}

[274] Fix | Delete

[275] Fix | Delete

test: function( settings ) {

[276] Fix | Delete

var video = document.createElement( 'video' );

[277] Fix | Delete

return video.canPlayType( settings.mimeType );

[278] Fix | Delete

[279] Fix | Delete

[280] Fix | Delete

/**

[281] Fix | Delete

* Set up a native video element.

[282] Fix | Delete

[283] Fix | Delete

ready: function() {

[284] Fix | Delete

var handler = this,

[285] Fix | Delete

video = document.createElement( 'video' );

[286] Fix | Delete

[287] Fix | Delete

video.id = 'wp-custom-header-video';

[288] Fix | Delete

video.autoplay = true;

[289] Fix | Delete

video.loop = true;

[290] Fix | Delete

video.muted = true;

[291] Fix | Delete

video.playsInline = true;

[292] Fix | Delete

video.width = this.settings.width;

[293] Fix | Delete

video.height = this.settings.height;

[294] Fix | Delete

[295] Fix | Delete

video.addEventListener( 'play', function() {

[296] Fix | Delete

handler.trigger( 'play' );

[297] Fix | Delete

});

[298] Fix | Delete

[299] Fix | Delete

video.addEventListener( 'pause', function() {

[300] Fix | Delete

handler.trigger( 'pause' );

[301] Fix | Delete

});

[302] Fix | Delete

[303] Fix | Delete

video.addEventListener( 'canplay', function() {

[304] Fix | Delete

handler.showControls();

[305] Fix | Delete

});

[306] Fix | Delete

[307] Fix | Delete

this.video = video;

[308] Fix | Delete

handler.setVideo( video );

[309] Fix | Delete

video.src = this.settings.videoUrl;

[310] Fix | Delete

[311] Fix | Delete

[312] Fix | Delete

/**

[313] Fix | Delete

* Whether the video is paused.

[314] Fix | Delete

[315] Fix | Delete

* @return {boolean}

[316] Fix | Delete

[317] Fix | Delete

isPaused: function() {

[318] Fix | Delete

return this.video.paused;

[319] Fix | Delete

[320] Fix | Delete

[321] Fix | Delete

/**

[322] Fix | Delete

* Pause the video.

[323] Fix | Delete

[324] Fix | Delete

pause: function() {

[325] Fix | Delete

this.video.pause();

[326] Fix | Delete

[327] Fix | Delete

[328] Fix | Delete

/**

[329] Fix | Delete

* Play the video.

[330] Fix | Delete

[331] Fix | Delete

play: function() {

[332] Fix | Delete

this.video.play();

[333] Fix | Delete

}

[334] Fix | Delete

});

[335] Fix | Delete

[336] Fix | Delete

/**

[337] Fix | Delete

* YouTube video handler.

[338] Fix | Delete

[339] Fix | Delete

* @memberOf wp

[340] Fix | Delete

[341] Fix | Delete

* @class wp.YouTubeHandler

[342] Fix | Delete

[343] Fix | Delete

YouTubeHandler = BaseHandler.extend(/** @lends wp.YouTubeHandler.prototype */{

[344] Fix | Delete

/**

[345] Fix | Delete

* Whether the handler supports a video.

[346] Fix | Delete

[347] Fix | Delete

* @param {Object} settings Video settings.

[348] Fix | Delete

* @return {boolean}

[349] Fix | Delete

[350] Fix | Delete

test: function( settings ) {

[351] Fix | Delete

return 'video/x-youtube' === settings.mimeType;

[352] Fix | Delete

[353] Fix | Delete

[354] Fix | Delete

/**

[355] Fix | Delete

* Set up a YouTube iframe.

[356] Fix | Delete

[357] Fix | Delete

* Loads the YouTube IFrame API if the 'YT' global doesn't exist.

[358] Fix | Delete

[359] Fix | Delete

ready: function() {

[360] Fix | Delete

var handler = this;

[361] Fix | Delete

[362] Fix | Delete

if ( 'YT' in window ) {

[363] Fix | Delete

YT.ready( handler.loadVideo.bind( handler ) );

[364] Fix | Delete

} else {

[365] Fix | Delete

var tag = document.createElement( 'script' );

[366] Fix | Delete

tag.src = 'https://www.youtube.com/iframe_api';

[367] Fix | Delete

tag.onload = function () {

[368] Fix | Delete

YT.ready( handler.loadVideo.bind( handler ) );

[369] Fix | Delete

};

[370] Fix | Delete

[371] Fix | Delete

document.getElementsByTagName( 'head' )[0].appendChild( tag );

[372] Fix | Delete

}

[373] Fix | Delete

[374] Fix | Delete

[375] Fix | Delete

/**

[376] Fix | Delete

* Load a YouTube video.

[377] Fix | Delete

[378] Fix | Delete

loadVideo: function() {

[379] Fix | Delete

var handler = this,

[380] Fix | Delete

video = document.createElement( 'div' ),

[381] Fix | Delete

// @link http://stackoverflow.com/a/27728417

[382] Fix | Delete

VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;

[383] Fix | Delete

[384] Fix | Delete

video.id = 'wp-custom-header-video';

[385] Fix | Delete

handler.setVideo( video );

[386] Fix | Delete

[387] Fix | Delete

handler.player = new YT.Player( video, {

[388] Fix | Delete

height: this.settings.height,

[389] Fix | Delete

width: this.settings.width,

[390] Fix | Delete

videoId: this.settings.videoUrl.match( VIDEO_ID_REGEX )[1],

[391] Fix | Delete

events: {

[392] Fix | Delete

onReady: function( e ) {

[393] Fix | Delete

e.target.mute();

[394] Fix | Delete

handler.showControls();

[395] Fix | Delete

[396] Fix | Delete

onStateChange: function( e ) {

[397] Fix | Delete

if ( YT.PlayerState.PLAYING === e.data ) {

[398] Fix | Delete

handler.trigger( 'play' );

[399] Fix | Delete

} else if ( YT.PlayerState.PAUSED === e.data ) {

[400] Fix | Delete

handler.trigger( 'pause' );

[401] Fix | Delete

} else if ( YT.PlayerState.ENDED === e.data ) {

[402] Fix | Delete

e.target.playVideo();

[403] Fix | Delete

}

[404] Fix | Delete

}

[405] Fix | Delete

[406] Fix | Delete

playerVars: {

[407] Fix | Delete

autoplay: 1,

[408] Fix | Delete

controls: 0,

[409] Fix | Delete

disablekb: 1,

[410] Fix | Delete

fs: 0,

[411] Fix | Delete

iv_load_policy: 3,

[412] Fix | Delete

loop: 1,

[413] Fix | Delete

modestbranding: 1,

[414] Fix | Delete

playsinline: 1,

[415] Fix | Delete

rel: 0,

[416] Fix | Delete

showinfo: 0

[417] Fix | Delete

}

[418] Fix | Delete

});

[419] Fix | Delete

[420] Fix | Delete

[421] Fix | Delete

/**

[422] Fix | Delete

* Whether the video is paused.

[423] Fix | Delete

[424] Fix | Delete

* @return {boolean}

[425] Fix | Delete

[426] Fix | Delete

isPaused: function() {

[427] Fix | Delete

return YT.PlayerState.PAUSED === this.player.getPlayerState();

[428] Fix | Delete

[429] Fix | Delete

[430] Fix | Delete

/**

[431] Fix | Delete

* Pause the video.

[432] Fix | Delete

[433] Fix | Delete

pause: function() {

[434] Fix | Delete

this.player.pauseVideo();

[435] Fix | Delete

[436] Fix | Delete

[437] Fix | Delete

/**

[438] Fix | Delete

* Play the video.

[439] Fix | Delete

[440] Fix | Delete

play: function() {

[441] Fix | Delete

this.player.playVideo();

[442] Fix | Delete

}

[443] Fix | Delete

});

[444] Fix | Delete

[445] Fix | Delete

// Initialize the custom header when the DOM is ready.

[446] Fix | Delete

window.wp.customHeader = new CustomHeader();

[447] Fix | Delete

document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize.bind( window.wp.customHeader ), false );

[448] Fix | Delete

[449] Fix | Delete

// Selective refresh support in the Customizer.

[450] Fix | Delete

if ( 'customize' in window.wp ) {

[451] Fix | Delete

window.wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) {

[452] Fix | Delete

if ( 'custom_header_settings' in response ) {

[453] Fix | Delete

settings = response.custom_header_settings;

[454] Fix | Delete

}

[455] Fix | Delete

});

[456] Fix | Delete

[457] Fix | Delete

window.wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {

[458] Fix | Delete

if ( 'custom_header' === placement.partial.id ) {

[459] Fix | Delete

window.wp.customHeader.initialize();

[460] Fix | Delete

}

[461] Fix | Delete

});

[462] Fix | Delete

}

[463] Fix | Delete

[464] Fix | Delete

})( window, window._wpCustomHeaderSettings || {} );

[465] Fix | Delete

[466] Fix | Delete