[Summary view] [Print] [Text view]

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