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