wp-admin/js/plugin-install.js

   1 /* global plugininstallL10n, tb_click, tb_remove */
   2
   3 /* Plugin Browser Thickbox related JS*/
   4 var tb_position;
   5 jQuery( document ).ready( function( $ ) {
   6
   7         var tbWindow,
   8                 $focusedBefore,
   9                 $iframeBody,
  10                 $tabbables,
  11                 $firstTabbable,
  12                 $lastTabbable;
  13
  14         tb_position = function() {
  15                 var width = $( window ).width(),
  16                         H = $( window ).height() - ( ( 792 < width ) ? 60 : 20 ),
  17                         W = ( 792 < width ) ? 772 : width - 20;
  18
  19                 tbWindow = $( '#TB_window' );
  20
  21                 if ( tbWindow.length ) {
  22                         tbWindow.width( W ).height( H );
  23                         $( '#TB_iframeContent' ).width( W ).height( H );
  24                         tbWindow.css({
  25                                 'margin-left': '-' + parseInt( ( W / 2 ), 10 ) + 'px'
  26                         });
  27                         if ( typeof document.body.style.maxWidth !== 'undefined' ) {
  28                                 tbWindow.css({
  29                                         'top': '30px',
  30                                         'margin-top': '0'
  31                                 });
  32                         }
  33                 }
  34
  35                 return $( 'a.thickbox' ).each( function() {
  36                         var href = $( this ).attr( 'href' );
  37                         if ( ! href ) {
  38                                 return;
  39                         }
  40                         href = href.replace( /&width=[0-9]+/g, '' );
  41                         href = href.replace( /&height=[0-9]+/g, '' );
  42                         $(this).attr( 'href', href + '&width=' + W + '&height=' + ( H ) );
  43                 });
  44         };
  45
  46         $( window ).resize( function() {
  47                 tb_position();
  48         });
  49
  50         /*
  51          * Custom events: when a Thickbox iframe has loaded and when the Thickbox
  52          * modal gets removed from the DOM.
  53          */
  54         $( 'body' )
  55                 .on( 'thickbox:iframe:loaded', tbWindow, function() {
  56                         iframeLoaded();
  57                 })
  58                 .on( 'thickbox:removed', function() {
  59                         // Set focus back to the element that opened the modal dialog.
  60                         // Note: IE 8 would need this wrapped in a fake setTimeout `0`.
  61                         $focusedBefore.focus();
  62                 });
  63
  64         function iframeLoaded() {
  65                 var $iframe = tbWindow.find( '#TB_iframeContent' );
  66
  67                 // Get the iframe body.
  68                 $iframeBody = $iframe.contents().find( 'body' );
  69
  70                 // Get the tabbable elements and handle the keydown event on first load.
  71                 handleTabbables();
  72
  73                 // Set initial focus on the "Close" button.
  74                 $firstTabbable.focus();
  75
  76                 /*
  77                  * When the "Install" button is disabled (e.g. the Plugin is already installed)
  78                  * then we can't predict where the last focusable element is. We need to get
  79                  * the tabbable elements and handle the keydown event again and again,
  80                  * each time the active tab panel changes.
  81                  */
  82                 $( '#plugin-information-tabs a', $iframeBody ).on( 'click', function() {
  83                         handleTabbables();
  84                 });
  85
  86                 // Close the modal when pressing Escape.
  87                 $iframeBody.on( 'keydown', function( event ) {
  88                         if ( 27 !== event.which ) {
  89                                 return;
  90                         }
  91                         tb_remove();
  92                 });
  93         }
  94
  95         /*
  96          * Get the tabbable elements and detach/attach the keydown event.
  97          * Called after the iframe has fully loaded so we have all the elements we need.
  98          * Called again each time a Tab gets clicked.
  99          * @todo Consider to implement a WordPress general utility for this and don't use jQuery UI.
 100          */
 101         function handleTabbables() {
 102                 var $firstAndLast;
 103                 // Get all the tabbable elements.
 104                 $tabbables = $( ':tabbable', $iframeBody );
 105                 // Our first tabbable element is always the "Close" button.
 106                 $firstTabbable = tbWindow.find( '#TB_closeWindowButton' );
 107                 // Get the last tabbable element.
 108                 $lastTabbable = $tabbables.last();
 109                 // Make a jQuery collection.
 110                 $firstAndLast = $firstTabbable.add( $lastTabbable );
 111                 // Detach any previously attached keydown event.
 112                 $firstAndLast.off( 'keydown.wp-plugin-details' );
 113                 // Attach again the keydown event on the first and last focusable elements.
 114                 $firstAndLast.on( 'keydown.wp-plugin-details', function( event ) {
 115                         constrainTabbing( event );
 116                 });
 117         }
 118
 119         // Constrain tabbing within the plugin modal dialog.
 120         function constrainTabbing( event ) {
 121                 if ( 9 !== event.which ) {
 122                         return;
 123                 }
 124
 125                 if ( $lastTabbable[0] === event.target && ! event.shiftKey ) {
 126                         event.preventDefault();
 127                         $firstTabbable.focus();
 128                 } else if ( $firstTabbable[0] === event.target && event.shiftKey ) {
 129                         event.preventDefault();
 130                         $lastTabbable.focus();
 131                 }
 132         }
 133
 134         // Open the Plugin details modal.
 135         $( '.thickbox.open-plugin-details-modal' ).on( 'click', function( e ) {
 136                 // The `data-title` attribute is used only in the Plugin screens.
 137                 var title = $( this ).data( 'title' ) ? plugininstallL10n.plugin_information + ' ' + $( this ).data( 'title' ) : plugininstallL10n.plugin_modal_label;
 138
 139                 e.preventDefault();
 140                 e.stopPropagation();
 141
 142                 // Store the element that has focus before opening the modal dialog, i.e. the control which opens it.
 143                 $focusedBefore = $( this );
 144
 145                 tb_click.call(this);
 146
 147                 // Set ARIA role and ARIA label.
 148                 tbWindow.attr({
 149                         'role': 'dialog',
 150                         'aria-label': plugininstallL10n.plugin_modal_label
 151                 });
 152
 153                 // Set title attribute on the iframe.
 154                 tbWindow.find( '#TB_iframeContent' ).attr( 'title', title );
 155         });
 156
 157         /* Plugin install related JS */
 158         $( '#plugin-information-tabs a' ).click( function( event ) {
 159                 var tab = $( this ).attr( 'name' );
 160                 event.preventDefault();
 161
 162                 // Flip the tab
 163                 $( '#plugin-information-tabs a.current' ).removeClass( 'current' );
 164                 $( this ).addClass( 'current' );
 165
 166                 // Only show the fyi box in the description section, on smaller screen, where it's otherwise always displayed at the top.
 167                 if ( 'description' !== tab && $( window ).width() < 772 ) {
 168                         $( '#plugin-information-content' ).find( '.fyi' ).hide();
 169                 } else {
 170                         $( '#plugin-information-content' ).find( '.fyi' ).show();
 171                 }
 172
 173                 // Flip the content.
 174                 $( '#section-holder div.section' ).hide(); // Hide 'em all.
 175                 $( '#section-' + tab ).show();
 176         });
 177 });