212 lines
		
	
	
	
		
			6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			212 lines
		
	
	
	
		
			6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| (function ( window, document ) {
 | |
| 	'use strict';
 | |
| 
 | |
| 	var supportedBrowser = ( document.querySelector && window.addEventListener ),
 | |
| 		loaded = false,
 | |
| 		secret,
 | |
| 		secretTimeout,
 | |
| 		resizing;
 | |
| 
 | |
| 	function sendEmbedMessage( message, value ) {
 | |
| 		window.parent.postMessage( {
 | |
| 			message: message,
 | |
| 			value: value,
 | |
| 			secret: secret
 | |
| 		}, '*' );
 | |
| 	}
 | |
| 
 | |
| 	function onLoad() {
 | |
| 		if ( loaded ) {
 | |
| 			return;
 | |
| 		}
 | |
| 		loaded = true;
 | |
| 
 | |
| 		var share_dialog = document.querySelector( '.wp-embed-share-dialog' ),
 | |
| 			share_dialog_open = document.querySelector( '.wp-embed-share-dialog-open' ),
 | |
| 			share_dialog_close = document.querySelector( '.wp-embed-share-dialog-close' ),
 | |
| 			share_input = document.querySelectorAll( '.wp-embed-share-input' ),
 | |
| 			share_dialog_tabs = document.querySelectorAll( '.wp-embed-share-tab-button button' ),
 | |
| 			featured_image = document.querySelector( '.wp-embed-featured-image img' ),
 | |
| 			i;
 | |
| 
 | |
| 		if ( share_input ) {
 | |
| 			for ( i = 0; i < share_input.length; i++ ) {
 | |
| 				share_input[ i ].addEventListener( 'click', function ( e ) {
 | |
| 					e.target.select();
 | |
| 				} );
 | |
| 			}
 | |
| 		}
 | |
| 
 | |
| 		function openSharingDialog() {
 | |
| 			share_dialog.className = share_dialog.className.replace( 'hidden', '' );
 | |
| 			// Initial focus should go on the currently selected tab in the dialog.
 | |
| 			document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' ).focus();
 | |
| 		}
 | |
| 
 | |
| 		function closeSharingDialog() {
 | |
| 			share_dialog.className += ' hidden';
 | |
| 			document.querySelector( '.wp-embed-share-dialog-open' ).focus();
 | |
| 		}
 | |
| 
 | |
| 		if ( share_dialog_open ) {
 | |
| 			share_dialog_open.addEventListener( 'click', function () {
 | |
| 				openSharingDialog();
 | |
| 			} );
 | |
| 		}
 | |
| 
 | |
| 		if ( share_dialog_close ) {
 | |
| 			share_dialog_close.addEventListener( 'click', function () {
 | |
| 				closeSharingDialog();
 | |
| 			} );
 | |
| 		}
 | |
| 
 | |
| 		function shareClickHandler( e ) {
 | |
| 			var currentTab = document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' );
 | |
| 			currentTab.setAttribute( 'aria-selected', 'false' );
 | |
| 			document.querySelector( '#' + currentTab.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'true' );
 | |
| 
 | |
| 			e.target.setAttribute( 'aria-selected', 'true' );
 | |
| 			document.querySelector( '#' + e.target.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'false' );
 | |
| 		}
 | |
| 
 | |
| 		function shareKeyHandler( e ) {
 | |
| 			var target = e.target,
 | |
| 				previousSibling = target.parentElement.previousElementSibling,
 | |
| 				nextSibling = target.parentElement.nextElementSibling,
 | |
| 				newTab, newTabChild;
 | |
| 
 | |
| 			if ( 37 === e.keyCode ) {
 | |
| 				newTab = previousSibling;
 | |
| 			} else if ( 39 === e.keyCode ) {
 | |
| 				newTab = nextSibling;
 | |
| 			} else {
 | |
| 				return false;
 | |
| 			}
 | |
| 
 | |
| 			if ( 'rtl' === document.documentElement.getAttribute( 'dir' ) ) {
 | |
| 				newTab = ( newTab === previousSibling ) ? nextSibling : previousSibling;
 | |
| 			}
 | |
| 
 | |
| 			if ( newTab ) {
 | |
| 				newTabChild = newTab.firstElementChild;
 | |
| 
 | |
| 				target.setAttribute( 'tabindex', '-1' );
 | |
| 				target.setAttribute( 'aria-selected', false );
 | |
| 				document.querySelector( '#' + target.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'true' );
 | |
| 
 | |
| 				newTabChild.setAttribute( 'tabindex', '0' );
 | |
| 				newTabChild.setAttribute( 'aria-selected', 'true' );
 | |
| 				newTabChild.focus();
 | |
| 				document.querySelector( '#' + newTabChild.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'false' );
 | |
| 			}
 | |
| 		}
 | |
| 
 | |
| 		if ( share_dialog_tabs ) {
 | |
| 			for ( i = 0; i < share_dialog_tabs.length; i++ ) {
 | |
| 				share_dialog_tabs[ i ].addEventListener( 'click', shareClickHandler );
 | |
| 
 | |
| 				share_dialog_tabs[ i ].addEventListener( 'keydown', shareKeyHandler );
 | |
| 			}
 | |
| 		}
 | |
| 
 | |
| 		document.addEventListener( 'keydown', function ( e ) {
 | |
| 			if ( 27 === e.keyCode && -1 === share_dialog.className.indexOf( 'hidden' ) ) {
 | |
| 				closeSharingDialog();
 | |
| 			} else if ( 9 === e.keyCode ) {
 | |
| 				constrainTabbing( e );
 | |
| 			}
 | |
| 		}, false );
 | |
| 
 | |
| 		function constrainTabbing( e ) {
 | |
| 			// Need to re-get the selected tab each time.
 | |
| 			var firstFocusable = document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' );
 | |
| 
 | |
| 			if ( share_dialog_close === e.target && ! e.shiftKey ) {
 | |
| 				firstFocusable.focus();
 | |
| 				e.preventDefault();
 | |
| 			} else if ( firstFocusable === e.target && e.shiftKey ) {
 | |
| 				share_dialog_close.focus();
 | |
| 				e.preventDefault();
 | |
| 			}
 | |
| 		}
 | |
| 
 | |
| 		if ( window.self === window.top ) {
 | |
| 			return;
 | |
| 		}
 | |
| 
 | |
| 		/**
 | |
| 		 * Send this document's height to the parent (embedding) site.
 | |
| 		 */
 | |
| 		sendEmbedMessage( 'height', Math.ceil( document.body.getBoundingClientRect().height ) );
 | |
| 
 | |
| 		// Send the document's height again after the featured image has been loaded.
 | |
| 		if ( featured_image ) {
 | |
| 			featured_image.addEventListener( 'load', function() {
 | |
| 				sendEmbedMessage( 'height', Math.ceil( document.body.getBoundingClientRect().height ) );
 | |
| 			} );
 | |
| 		}
 | |
| 
 | |
| 		/**
 | |
| 		 * Detect clicks to external (_top) links.
 | |
| 		 */
 | |
| 		function linkClickHandler( e ) {
 | |
| 			var target = e.target,
 | |
| 				href;
 | |
| 			if ( target.hasAttribute( 'href' ) ) {
 | |
| 				href = target.getAttribute( 'href' );
 | |
| 			} else {
 | |
| 				href = target.parentElement.getAttribute( 'href' );
 | |
| 			}
 | |
| 
 | |
| 			/**
 | |
| 			 * Send link target to the parent (embedding) site.
 | |
| 			 */
 | |
| 			if ( href ) {
 | |
| 				sendEmbedMessage( 'link', href );
 | |
| 				e.preventDefault();
 | |
| 			}
 | |
| 		}
 | |
| 
 | |
| 		document.addEventListener( 'click', linkClickHandler );
 | |
| 	}
 | |
| 
 | |
| 	/**
 | |
| 	 * Iframe resize handler.
 | |
| 	 */
 | |
| 	function onResize() {
 | |
| 		if ( window.self === window.top ) {
 | |
| 			return;
 | |
| 		}
 | |
| 
 | |
| 		clearTimeout( resizing );
 | |
| 
 | |
| 		resizing = setTimeout( function () {
 | |
| 			sendEmbedMessage( 'height', Math.ceil( document.body.getBoundingClientRect().height ) );
 | |
| 		}, 100 );
 | |
| 	}
 | |
| 
 | |
| 	/**
 | |
| 	 * Re-get the secret when it was added later on.
 | |
| 	 */
 | |
| 	function getSecret() {
 | |
| 		if ( window.self === window.top || !!secret ) {
 | |
| 			return;
 | |
| 		}
 | |
| 
 | |
| 		secret = window.location.hash.replace( /.*secret=([\d\w]{10}).*/, '$1' );
 | |
| 
 | |
| 		clearTimeout( secretTimeout );
 | |
| 
 | |
| 		secretTimeout = setTimeout( function () {
 | |
| 			getSecret();
 | |
| 		}, 100 );
 | |
| 	}
 | |
| 
 | |
| 	if ( supportedBrowser ) {
 | |
| 		getSecret();
 | |
| 		document.documentElement.className = document.documentElement.className.replace( /\bno-js\b/, '' ) + ' js';
 | |
| 		document.addEventListener( 'DOMContentLoaded', onLoad, false );
 | |
| 		window.addEventListener( 'load', onLoad, false );
 | |
| 		window.addEventListener( 'resize', onResize, false );
 | |
| 	}
 | |
| })( window, document );
 |