[Summary view] [Print] [Text view]

   1  /**
   2   * @file Functionality for the plugin install screens.
   3   *
   4   * @output wp-admin/js/plugin-install.js
   5   */
   6  
   7  /* global plugininstallL10n, tb_click, tb_remove, tb_position */
   8  
   9  jQuery( document ).ready( function( $ ) {
  10  
  11      var tbWindow,
  12          $iframeBody,
  13          $tabbables,
  14          $firstTabbable,
  15          $lastTabbable,
  16          $focusedBefore = $(),
  17          $uploadViewToggle = $( '.upload-view-toggle' ),
  18          $wrap = $ ( '.wrap' ),
  19          $body = $( document.body );
  20  
  21      window.tb_position = function() {
  22          var width = $( window ).width(),
  23              H = $( window ).height() - ( ( 792 < width ) ? 60 : 20 ),
  24              W = ( 792 < width ) ? 772 : width - 20;
  25  
  26          tbWindow = $( '#TB_window' );
  27  
  28          if ( tbWindow.length ) {
  29              tbWindow.width( W ).height( H );
  30              $( '#TB_iframeContent' ).width( W ).height( H );
  31              tbWindow.css({
  32                  'margin-left': '-' + parseInt( ( W / 2 ), 10 ) + 'px'
  33              });
  34              if ( typeof document.body.style.maxWidth !== 'undefined' ) {
  35                  tbWindow.css({
  36                      'top': '30px',
  37                      'margin-top': '0'
  38                  });
  39              }
  40          }
  41  
  42          return $( 'a.thickbox' ).each( function() {
  43              var href = $( this ).attr( 'href' );
  44              if ( ! href ) {
  45                  return;
  46              }
  47              href = href.replace( /&width=[0-9]+/g, '' );
  48              href = href.replace( /&height=[0-9]+/g, '' );
  49              $(this).attr( 'href', href + '&width=' + W + '&height=' + ( H ) );
  50          });
  51      };
  52  
  53      $( window ).resize( function() {
  54          tb_position();
  55      });
  56  
  57      /*
  58       * Custom events: when a Thickbox iframe has loaded and when the Thickbox
  59       * modal gets removed from the DOM.
  60       */
  61      $body
  62          .on( 'thickbox:iframe:loaded', tbWindow, function() {
  63              /*
  64               * Return if it's not the modal with the plugin details iframe. Other
  65               * thickbox instances might want to load an iframe with content from
  66               * an external domain. Avoid to access the iframe contents when we're
  67               * not sure the iframe loads from the same domain.
  68               */
  69              if ( ! tbWindow.hasClass( 'plugin-details-modal' ) ) {
  70                  return;
  71              }
  72  
  73              iframeLoaded();
  74          })
  75          .on( 'thickbox:removed', function() {
  76              // Set focus back to the element that opened the modal dialog.
  77              // Note: IE 8 would need this wrapped in a fake setTimeout `0`.
  78              $focusedBefore.focus();
  79          });
  80  
  81  	function iframeLoaded() {
  82          var $iframe = tbWindow.find( '#TB_iframeContent' );
  83  
  84          // Get the iframe body.
  85          $iframeBody = $iframe.contents().find( 'body' );
  86  
  87          // Get the tabbable elements and handle the keydown event on first load.
  88          handleTabbables();
  89  
  90          // Set initial focus on the "Close" button.
  91          $firstTabbable.focus();
  92  
  93          /*
  94           * When the "Install" button is disabled (e.g. the Plugin is already installed)
  95           * then we can't predict where the last focusable element is. We need to get
  96           * the tabbable elements and handle the keydown event again and again,
  97           * each time the active tab panel changes.
  98           */
  99          $( '#plugin-information-tabs a', $iframeBody ).on( 'click', function() {
 100              handleTabbables();
 101          });
 102  
 103          // Close the modal when pressing Escape.
 104          $iframeBody.on( 'keydown', function( event ) {
 105              if ( 27 !== event.which ) {
 106                  return;
 107              }
 108              tb_remove();
 109          });
 110      }
 111  
 112      /*
 113       * Get the tabbable elements and detach/attach the keydown event.
 114       * Called after the iframe has fully loaded so we have all the elements we need.
 115       * Called again each time a Tab gets clicked.
 116       * @todo Consider to implement a WordPress general utility for this and don't use jQuery UI.
 117       */
 118  	function handleTabbables() {
 119          var $firstAndLast;
 120          // Get all the tabbable elements.
 121          $tabbables = $( ':tabbable', $iframeBody );
 122          // Our first tabbable element is always the "Close" button.
 123          $firstTabbable = tbWindow.find( '#TB_closeWindowButton' );
 124          // Get the last tabbable element.
 125          $lastTabbable = $tabbables.last();
 126          // Make a jQuery collection.
 127          $firstAndLast = $firstTabbable.add( $lastTabbable );
 128          // Detach any previously attached keydown event.
 129          $firstAndLast.off( 'keydown.wp-plugin-details' );
 130          // Attach again the keydown event on the first and last focusable elements.
 131          $firstAndLast.on( 'keydown.wp-plugin-details', function( event ) {
 132              constrainTabbing( event );
 133          });
 134      }
 135  
 136      // Constrain tabbing within the plugin modal dialog.
 137  	function constrainTabbing( event ) {
 138          if ( 9 !== event.which ) {
 139              return;
 140          }
 141  
 142          if ( $lastTabbable[0] === event.target && ! event.shiftKey ) {
 143              event.preventDefault();
 144              $firstTabbable.focus();
 145          } else if ( $firstTabbable[0] === event.target && event.shiftKey ) {
 146              event.preventDefault();
 147              $lastTabbable.focus();
 148          }
 149      }
 150  
 151      /*
 152       * Open the Plugin details modal. The event is delegated to get also the links
 153       * in the plugins search tab, after the AJAX search rebuilds the HTML. It's
 154       * delegated on the closest ancestor and not on the body to avoid conflicts
 155       * with other handlers, see Trac ticket #43082.
 156       */
 157      $( '.wrap' ).on( 'click', '.thickbox.open-plugin-details-modal', function( e ) {
 158          // The `data-title` attribute is used only in the Plugin screens.
 159          var title = $( this ).data( 'title' ) ? plugininstallL10n.plugin_information + ' ' + $( this ).data( 'title' ) : plugininstallL10n.plugin_modal_label;
 160  
 161          e.preventDefault();
 162          e.stopPropagation();
 163  
 164          // Store the element that has focus before opening the modal dialog, i.e. the control which opens it.
 165          $focusedBefore = $( this );
 166  
 167          tb_click.call(this);
 168  
 169          // Set ARIA role, ARIA label, and add a CSS class.
 170          tbWindow
 171              .attr({
 172                  'role': 'dialog',
 173                  'aria-label': plugininstallL10n.plugin_modal_label
 174              })
 175              .addClass( 'plugin-details-modal' );
 176  
 177          // Set title attribute on the iframe.
 178          tbWindow.find( '#TB_iframeContent' ).attr( 'title', title );
 179      });
 180  
 181      /* Plugin install related JS */
 182      $( '#plugin-information-tabs a' ).click( function( event ) {
 183          var tab = $( this ).attr( 'name' );
 184          event.preventDefault();
 185  
 186          // Flip the tab
 187          $( '#plugin-information-tabs a.current' ).removeClass( 'current' );
 188          $( this ).addClass( 'current' );
 189  
 190          // Only show the fyi box in the description section, on smaller screen, where it's otherwise always displayed at the top.
 191          if ( 'description' !== tab && $( window ).width() < 772 ) {
 192              $( '#plugin-information-content' ).find( '.fyi' ).hide();
 193          } else {
 194              $( '#plugin-information-content' ).find( '.fyi' ).show();
 195          }
 196  
 197          // Flip the content.
 198          $( '#section-holder div.section' ).hide(); // Hide 'em all.
 199          $( '#section-' + tab ).show();
 200      });
 201  
 202      /*
 203       * When a user presses the "Upload Plugin" button, show the upload form in place
 204       * rather than sending them to the devoted upload plugin page.
 205       * The `?tab=upload` page still exists for no-js support and for plugins that
 206       * might access it directly. When we're in this page, let the link behave
 207       * like a link. Otherwise we're in the normal plugin installer pages and the
 208       * link should behave like a toggle button.
 209       */
 210      if ( ! $wrap.hasClass( 'plugin-install-tab-upload' ) ) {
 211          $uploadViewToggle
 212              .attr({
 213                  role: 'button',
 214                  'aria-expanded': 'false'
 215              })
 216              .on( 'click', function( event ) {
 217                  event.preventDefault();
 218                  $body.toggleClass( 'show-upload-view' );
 219                  $uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
 220              });
 221      }
 222  });