wp-includes/js/wp-embed-template.js

   1 (function ( window, document ) {
   2         'use strict';
   3
   4         var supportedBrowser = ( document.querySelector && window.addEventListener ),
   5                 loaded = false,
   6                 secret,
   7                 secretTimeout,
   8                 resizing;
   9
  10         function sendEmbedMessage( message, value ) {
  11                 window.parent.postMessage( {
  12                         message: message,
  13                         value: value,
  14                         secret: secret
  15                 }, '*' );
  16         }
  17
  18         function onLoad() {
  19                 if ( loaded ) {
  20                         return;
  21                 }
  22                 loaded = true;
  23
  24                 var share_dialog = document.querySelector( '.wp-embed-share-dialog' ),
  25                         share_dialog_open = document.querySelector( '.wp-embed-share-dialog-open' ),
  26                         share_dialog_close = document.querySelector( '.wp-embed-share-dialog-close' ),
  27                         share_input = document.querySelectorAll( '.wp-embed-share-input' ),
  28                         share_dialog_tabs = document.querySelectorAll( '.wp-embed-share-tab-button button' ),
  29                         featured_image = document.querySelector( '.wp-embed-featured-image img' ),
  30                         i;
  31
  32                 if ( share_input ) {
  33                         for ( i = 0; i < share_input.length; i++ ) {
  34                                 share_input[ i ].addEventListener( 'click', function ( e ) {
  35                                         e.target.select();
  36                                 } );
  37                         }
  38                 }
  39
  40                 function openSharingDialog() {
  41                         share_dialog.className = share_dialog.className.replace( 'hidden', '' );
  42                         // Initial focus should go on the currently selected tab in the dialog.
  43                         document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' ).focus();
  44                 }
  45
  46                 function closeSharingDialog() {
  47                         share_dialog.className += ' hidden';
  48                         document.querySelector( '.wp-embed-share-dialog-open' ).focus();
  49                 }
  50
  51                 if ( share_dialog_open ) {
  52                         share_dialog_open.addEventListener( 'click', function () {
  53                                 openSharingDialog();
  54                         } );
  55                 }
  56
  57                 if ( share_dialog_close ) {
  58                         share_dialog_close.addEventListener( 'click', function () {
  59                                 closeSharingDialog();
  60                         } );
  61                 }
  62
  63                 function shareClickHandler( e ) {
  64                         var currentTab = document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' );
  65                         currentTab.setAttribute( 'aria-selected', 'false' );
  66                         document.querySelector( '#' + currentTab.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'true' );
  67
  68                         e.target.setAttribute( 'aria-selected', 'true' );
  69                         document.querySelector( '#' + e.target.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'false' );
  70                 }
  71
  72                 function shareKeyHandler( e ) {
  73                         var target = e.target,
  74                                 previousSibling = target.parentElement.previousElementSibling,
  75                                 nextSibling = target.parentElement.nextElementSibling,
  76                                 newTab, newTabChild;
  77
  78                         if ( 37 === e.keyCode ) {
  79                                 newTab = previousSibling;
  80                         } else if ( 39 === e.keyCode ) {
  81                                 newTab = nextSibling;
  82                         } else {
  83                                 return false;
  84                         }
  85
  86                         if ( 'rtl' === document.documentElement.getAttribute( 'dir' ) ) {
  87                                 newTab = ( newTab === previousSibling ) ? nextSibling : previousSibling;
  88                         }
  89
  90                         if ( newTab ) {
  91                                 newTabChild = newTab.firstElementChild;
  92
  93                                 target.setAttribute( 'tabindex', '-1' );
  94                                 target.setAttribute( 'aria-selected', false );
  95                                 document.querySelector( '#' + target.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'true' );
  96
  97                                 newTabChild.setAttribute( 'tabindex', '0' );
  98                                 newTabChild.setAttribute( 'aria-selected', 'true' );
  99                                 newTabChild.focus();
 100                                 document.querySelector( '#' + newTabChild.getAttribute( 'aria-controls' ) ).setAttribute( 'aria-hidden', 'false' );
 101                         }
 102                 }
 103
 104                 if ( share_dialog_tabs ) {
 105                         for ( i = 0; i < share_dialog_tabs.length; i++ ) {
 106                                 share_dialog_tabs[ i ].addEventListener( 'click', shareClickHandler );
 107
 108                                 share_dialog_tabs[ i ].addEventListener( 'keydown', shareKeyHandler );
 109                         }
 110                 }
 111
 112                 document.addEventListener( 'keydown', function ( e ) {
 113                         if ( 27 === e.keyCode && -1 === share_dialog.className.indexOf( 'hidden' ) ) {
 114                                 closeSharingDialog();
 115                         } else if ( 9 === e.keyCode ) {
 116                                 constrainTabbing( e );
 117                         }
 118                 }, false );
 119
 120                 function constrainTabbing( e ) {
 121                         // Need to re-get the selected tab each time.
 122                         var firstFocusable = document.querySelector( '.wp-embed-share-tab-button [aria-selected="true"]' );
 123
 124                         if ( share_dialog_close === e.target && ! e.shiftKey ) {
 125                                 firstFocusable.focus();
 126                                 e.preventDefault();
 127                         } else if ( firstFocusable === e.target && e.shiftKey ) {
 128                                 share_dialog_close.focus();
 129                                 e.preventDefault();
 130                         }
 131                 }
 132
 133                 if ( window.self === window.top ) {
 134                         return;
 135                 }
 136
 137                 /**
 138                  * Send this document's height to the parent (embedding) site.
 139                  */
 140                 sendEmbedMessage( 'height', Math.ceil( document.body.getBoundingClientRect().height ) );
 141
 142                 // Send the document's height again after the featured image has been loaded.
 143                 if ( featured_image ) {
 144                         featured_image.addEventListener( 'load', function() {
 145                                 sendEmbedMessage( 'height', Math.ceil( document.body.getBoundingClientRect().height ) );
 146                         } );
 147                 }
 148
 149                 /**
 150                  * Detect clicks to external (_top) links.
 151                  */
 152                 function linkClickHandler( e ) {
 153                         var target = e.target,
 154                                 href;
 155                         if ( target.hasAttribute( 'href' ) ) {
 156                                 href = target.getAttribute( 'href' );
 157                         } else {
 158                                 href = target.parentElement.getAttribute( 'href' );
 159                         }
 160
 161                         /**
 162                          * Send link target to the parent (embedding) site.
 163                          */
 164                         if ( href ) {
 165                                 sendEmbedMessage( 'link', href );
 166                                 e.preventDefault();
 167                         }
 168                 }
 169
 170                 document.addEventListener( 'click', linkClickHandler );
 171         }
 172
 173         /**
 174          * Iframe resize handler.
 175          */
 176         function onResize() {
 177                 if ( window.self === window.top ) {
 178                         return;
 179                 }
 180
 181                 clearTimeout( resizing );
 182
 183                 resizing = setTimeout( function () {
 184                         sendEmbedMessage( 'height', Math.ceil( document.body.getBoundingClientRect().height ) );
 185                 }, 100 );
 186         }
 187
 188         /**
 189          * Re-get the secret when it was added later on.
 190          */
 191         function getSecret() {
 192                 if ( window.self === window.top || !!secret ) {
 193                         return;
 194                 }
 195
 196                 secret = window.location.hash.replace( /.*secret=([\d\w]{10}).*/, '$1' );
 197
 198                 clearTimeout( secretTimeout );
 199
 200                 secretTimeout = setTimeout( function () {
 201                         getSecret();
 202                 }, 100 );
 203         }
 204
 205         if ( supportedBrowser ) {
 206                 getSecret();
 207                 document.documentElement.className = document.documentElement.className.replace( /\bno-js\b/, '' ) + ' js';
 208                 document.addEventListener( 'DOMContentLoaded', onLoad, false );
 209                 window.addEventListener( 'load', onLoad, false );
 210                 window.addEventListener( 'resize', onResize, false );
 211         }
 212 })( window, document );