You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

213 lines
6.0 KiB

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