https://www.laimomo.it/wp-content/themes/laimomo/assets/js/laimomo-wp-custom-header.js?ver=4.9.26

1/* global YT */
2(function( window, settings ) {
3
4	var NativeHandler, YouTubeHandler;
5
6	/** @namespace wp */
7	window.wp = window.wp || {};
8
9	// Fail gracefully in unsupported browsers.
10	if ( ! ( 'addEventListener' in window ) ) {
11		return;
12	}
13
14	/**
15	 * Trigger an event.
16	 *
17	 * @param {Element} target HTML element to dispatch the event on.
18	 * @param {string} name Event name.
19	 */
20	function trigger( target, name ) {
21		var evt;
22
23		if ( 'function' === typeof window.Event ) {
24			evt = new Event( name );
25		} else {
26			evt = document.createEvent( 'Event' );
27			evt.initEvent( name, true, true );
28		}
29
30		target.dispatchEvent( evt );
31	}
32
33	/**
34	 * Create a custom header instance.
35	 *
36	 * @memberOf wp
37	 *
38	 * @class
39	 */
40	function CustomHeader() {
41		this.handlers = {
42			//nativeVideo: new NativeHandler(),
43			youtube: new YouTubeHandler()
44		};
45	}
46
47	CustomHeader.prototype = {
48		/**
49		 * Initalize the custom header.
50		 *
51		 * If the environment supports video, loops through registered handlers
52		 * until one is found that can handle the video.
53		 */
54		initialize: function() {
55			if ( this.supportsVideo() ) {
56				for ( var id in this.handlers ) {
57					var handler = this.handlers[ id ];
58
59					if ( 'test' in handler && handler.test( settings ) ) {
60						this.activeHandler = handler.initialize.call( handler, settings );
61
62						// Dispatch custom event when the video is loaded.
63						trigger( document, 'wp-custom-header-video-loaded' );
64						break;
65					}
66				}
67			}
68		},
69
70		/**
71		 * Determines if the current environment supports video.
72		 *
73		 * Themes and plugins can override this method to change the criteria.
74		 *
75		 * @return {boolean}
76		 */
77		supportsVideo: function() {
78			// Don't load video on small screens. @todo: consider bandwidth and other factors.
79			if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) {
80				return false;
81			}
82
83			return true;
84		},
85
86		/**
87		 * Base handler for custom handlers to extend.
88		 *
89		 * @type {BaseHandler}
90		 */
91		BaseVideoHandler: BaseHandler
92	};
93
94	/**
95	 * Create a video handler instance.
96	 *
97	 * @memberOf wp
98	 *
99	 * @class
100	 */
101	function BaseHandler() {}
102
103	BaseHandler.prototype = {
104		/**
105		 * Initialize the video handler.
106		 *
107		 * @param {object} settings Video settings.
108		 */
109		initialize: function( settings ) {
110			var handler = this,
111				controls = document.createElement( 'div' );
112				buttonPlay = document.createElement( 'button' ),
113				buttonMute = document.createElement( 'button' );
114
115			this.settings = settings;
116			this.container = document.getElementById( 'wp-custom-header' );
117			this.controls = controls;
118
119			controls.appendChild( buttonPlay );
120			controls.appendChild( buttonMute );
121			//this.buttonPlay = buttonPlay;
122			//this.buttonMute = buttonMute;
123
124			controls.setAttribute( 'id', 'wp-custom-header-video-controls' );

125			controls.setAttribute( 'class', 'wp-custom-header-video-controls' );
126
127			buttonPlay.setAttribute( 'type', 'button' );
128			buttonPlay.setAttribute( 'id', 'wp-custom-header-video-button' );
129			buttonPlay.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' );
130			buttonPlay.innerHTML = settings.l10n.myplay;
131
132			// Toggle video playback when the button is clicked.
133			buttonPlay.addEventListener( 'click', function() {
134				//console.log( handler.isPaused() );
135				//console.log( handler.getStatus() );
136				if ( handler.isPaused() || ( handler.getState() == 5 )  ) {
137					handler.play();
138				} else {
139					handler.pause();
140				}
141			});
142
143			// Update the button class and text when the video state changes.
144			this.container.addEventListener( 'play', function() {
145				buttonPlay.className = 'wp-custom-header-video-button wp-custom-header-video-play';
146				buttonPlay.innerHTML = settings.l10n.pause;
147				if ( 'a11y' in window.wp ) {
148					window.wp.a11y.speak( settings.l10n.playSpeak);
149				}
150			});
151
152			this.container.addEventListener( 'pause', function() {
153				buttonPlay.className = 'wp-custom-header-video-button wp-custom-header-video-pause';
154				buttonPlay.innerHTML = settings.l10n.play;
155				if ( 'a11y' in window.wp ) {
156					window.wp.a11y.speak( settings.l10n.pauseSpeak);
157				}
158			});
159
160			
161			buttonMute.setAttribute( 'type', 'button' );
162			buttonMute.setAttribute( 'id', 'wp-custom-header-video-button' );
163			buttonMute.setAttribute( 'class', 'wp-custom-header-video-button' );
164			buttonMute.innerHTML = settings.l10n.mute;
165
166			buttonMute.addEventListener( 'click', function() {
167				//console.log( handler.isPaused() );
168				//console.log( handler.getStatus() );
169				if ( handler.isMuted() || ( handler.getState() == 5 ) ) {
170					handler.unMute();
171					buttonMute.innerHTML = settings.l10n.sound;
172				} else {
173					handler.mute();
174					buttonMute.innerHTML = settings.l10n.mute;
175				}
176			});
177
178
179			this.ready();
180		},
181
182		/**
183		 * Ready method called after a handler is initialized.
184		 *
185		 * @abstract
186		 */
187		ready: function() {},
188
189		/**
190		 *
191		 */
192		getState: function() {}, 
193
194		/**
195		 * Whether the video is paused.
196		 *
197		 * @abstract
198		 * @return {boolean}
199		 */
200		isPaused: function() {},
201
202		/**
203		 * Pause the video.
204		 *
205		 * @abstract
206		 */
207		pause: function() {},
208
209		/**
210		 * Play the video.
211		 *
212		 * @abstract
213		 */
214		play: function() {},
215
216
217		isMuted: function() {},
218
219		mute: function() {},
220
221		unMute: function() {},
222
223
224		/**
225		 * Append a video node to the header container.
226		 *
227		 * @param {Element} node HTML element.
228		 */
229		setVideo: function( node ) {
230			var editShortcutNode,
231				editShortcut = this.container.getElementsByClassName( 'customize-partial-edit-shortcut' );
232
233			if ( editShortcut.length ) {
234				editShortcutNode = this.container.removeChild( editShortcut[0] );
235			}
236
237			this.container.innerHTML = '';
238			this.container.appendChild( node );
239
240			if ( editShortcutNode ) {
241				this.container.appendChild( editShortcutNode );
242			}
243		},
244
245		/**
246		 * Show the video controls.
247		 *
248		 * Appends a play/pause button to header container.
249		 */
250		showControls: function() {
251			/*if ( ! this.container.contains( this.buttonPlay ) ) {
252				this.container.appendChild( this.buttonPlay );
253			}
254
255			// ROBERTO
256			if ( ! this.container.contains( this.buttonMute ) ) {
257				this.container.appendChild( this.buttonMute );
258			}*/
259
260			if ( ! this.container.contains( this.controls ) ) {
261				this.container.appendChild( this.controls );
262			}
263		},
264
265		/**
266		 * Whether the handler can process a video.
267		 *
268		 * @abstract
269		 * @param {object} settings Video settings.
270		 * @return {boolean}
271		 */
272		test: function() {
273			return false;
274		},
275
276		/**
277		 * Trigger an event on the header container.
278		 *
279		 * @param {string} name Event name.
280		 */
281		trigger: function( name ) {
282			trigger( this.container, name );
283		}
284	};
285
286	/**
287	 * Create a custom handler.
288	 *
289	 * @memberOf wp
290	 *
291	 * @param {object} protoProps Properties to apply to the prototype.
292	 * @return CustomHandler The subclass.
293	 */
294	BaseHandler.extend = function( protoProps ) {
295		var prop;
296
297		function CustomHandler() {
298			var result = BaseHandler.apply( this, arguments );
299			return result;
300		}
301
302		CustomHandler.prototype = Object.create( BaseHandler.prototype );
303		CustomHandler.prototype.constructor = CustomHandler;
304
305		for ( prop in protoProps ) {
306			CustomHandler.prototype[ prop ] = protoProps[ prop ];
307		}
308
309		return CustomHandler;
310	};
311
312
313
314	/**
315	 * YouTube video handler.
316	 *
317	 * @memberOf wp
318	 *
319	 * @class wp.YouTubeHandler
320	 */
321	YouTubeHandler = BaseHandler.extend(/** @lends wp.YouTubeHandler.prototype */ {
322
323		/**
324		 * Whether the handler supports a video.
325		 *
326		 * @param {object} settings Video settings.
327		 * @return {boolean}
328		 */
329		test: function( settings ) {
330			return 'video/x-youtube' === settings.mimeType;
331		},
332
333		/**
334		 * Set up a YouTube iframe.
335		 *
336		 * Loads the YouTube IFrame API if the 'YT' global doesn't exist.
337		 */
338		ready: function() {
339			var handler = this;
340
341			if ( 'YT' in window ) {
342				YT.ready( handler.loadVideo.bind( handler ) );
343			} else {
344				var tag = document.createElement( 'script' );
345				tag.src = 'https://www.youtube.com/iframe_api';
346				tag.onload = function () {
347					YT.ready( handler.loadVideo.bind( handler ) );
348				};
349
350				document.getElementsByTagName( 'head' )[0].appendChild( tag );
351			}
352		},
353
354		/**
355		 * Load a YouTube video.
356		 */
357		loadVideo: function() {
358			var handler = this,
359				video = document.createElement( 'div' ),
360				// @link http://stackoverflow.com/a/27728417
361				VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
362
363			video.id = 'wp-custom-header-video';
364			handler.setVideo( video );
365
366			handler.player = new YT.Player( video, {
367				height: this.settings.height,
368				width: this.settings.width,
369				videoId: this.settings.videoUrl.match( VIDEO_ID_REGEX )[1],
370				events: {
371					onReady: function( e ) {
372						e.target.mute();
373						handler.showControls();
374					},
375					onStateChange: function( e ) {
376						if ( YT.PlayerState.PLAYING === e.data ) {
377							handler.trigger( 'play' );
378						} else if ( YT.PlayerState.PAUSED === e.data ) {
379							handler.trigger( 'pause' );
380						} else if ( YT.PlayerState.ENDED === e.data ) {
381							e.target.playVideo();
382						}
383					}
384				},
385				playerVars: {
386					autoplay: 1,
387					controls: 0,
388					disablekb: 1,
389					fs: 0,
390					iv_load_policy: 3,
391					loop: 1,
392					modestbranding: 1,
393					playsinline: 1,
394					rel: 0,
395					showinfo: 0
396				}
397			});
398		},
399
400		/**
401		 * Restituisce lo stato del 
402		 */
403		getState: function() {
404			return this.player.getPlayerState();
405		},
406
407		/**
408		 * Whether the video is paused.
409		 *
410		 * @return {boolean}
411		 */
412		isPaused: function() {
413			return YT.PlayerState.PAUSED === this.player.getPlayerState();
414		},
415
416		/**
417		 * Pause the video.
418		 */
419		pause: function() {
420			this.player.pauseVideo();
421		},
422
423		/**
424		 * Play the video.
425		 */
426		play: function() {
427			this.player.playVideo();
428		},
429
430
431		isMuted: function() {
432			return this.player.isMuted(); 
433		},
434
435		mute: function() {
436			this.player.mute();
437		},
438
439		unMute: function() {
440			this.player.unMute();
441		}
442	});
443
444	// Initialize the custom header when the DOM is ready.
445	window.wp.customHeader = new CustomHeader();
446	document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize.bind( window.wp.customHeader ), false );
447
448	// Selective refresh support in the Customizer.
449	if ( 'customize' in window.wp ) {
450		window.wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) {
451			if ( 'custom_header_settings' in response ) {
452				settings = response.custom_header_settings;
453			}
454		});
455
456		window.wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
457			if ( 'custom_header' === placement.partial.id ) {
458				window.wp.customHeader.initialize();
459			}
460		});
461	}
462
463})( window, window._wpCustomHeaderSettings || {} );