home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-includes / js / wp-embed-template.js < prev    next >
Encoding:
JavaScript  |  2016-07-05  |  6.0 KB  |  213 lines
  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 );
  213.