[Summary view] [Print] [Text view]

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