wp-admin/js/plugin-install.js

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