diff -r 490d5cc509ed -r cf61fcea0001 wp/wp-admin/js/plugin-install.js --- a/wp/wp-admin/js/plugin-install.js Tue Jun 09 11:14:17 2015 +0000 +++ b/wp/wp-admin/js/plugin-install.js Mon Oct 14 17:39:30 2019 +0200 @@ -1,15 +1,29 @@ -/* global plugininstallL10n, tb_click */ +/* global plugininstallL10n, tb_click, tb_remove */ -/* Plugin Browser Thickbox related JS*/ +/** + * Functionality for the plugin install screens. + */ var tb_position; jQuery( document ).ready( function( $ ) { + + var tbWindow, + $iframeBody, + $tabbables, + $firstTabbable, + $lastTabbable, + $focusedBefore = $(), + $uploadViewToggle = $( '.upload-view-toggle' ), + $wrap = $ ( '.wrap' ), + $body = $( document.body ); + tb_position = function() { - var tbWindow = $( '#TB_window' ), - width = $( window ).width(), + var width = $( window ).width(), H = $( window ).height() - ( ( 792 < width ) ? 60 : 20 ), W = ( 792 < width ) ? 772 : width - 20; - if ( tbWindow.size() ) { + tbWindow = $( '#TB_window' ); + + if ( tbWindow.length ) { tbWindow.width( W ).height( H ); $( '#TB_iframeContent' ).width( W ).height( H ); tbWindow.css({ @@ -38,15 +52,128 @@ tb_position(); }); - $( '.plugin-card, .plugins .column-description' ).on( 'click', 'a.thickbox', function() { + /* + * Custom events: when a Thickbox iframe has loaded and when the Thickbox + * modal gets removed from the DOM. + */ + $body + .on( 'thickbox:iframe:loaded', tbWindow, function() { + /* + * Return if it's not the modal with the plugin details iframe. Other + * thickbox instances might want to load an iframe with content from + * an external domain. Avoid to access the iframe contents when we're + * not sure the iframe loads from the same domain. + */ + if ( ! tbWindow.hasClass( 'plugin-details-modal' ) ) { + return; + } + + iframeLoaded(); + }) + .on( 'thickbox:removed', function() { + // Set focus back to the element that opened the modal dialog. + // Note: IE 8 would need this wrapped in a fake setTimeout `0`. + $focusedBefore.focus(); + }); + + function iframeLoaded() { + var $iframe = tbWindow.find( '#TB_iframeContent' ); + + // Get the iframe body. + $iframeBody = $iframe.contents().find( 'body' ); + + // Get the tabbable elements and handle the keydown event on first load. + handleTabbables(); + + // Set initial focus on the "Close" button. + $firstTabbable.focus(); + + /* + * When the "Install" button is disabled (e.g. the Plugin is already installed) + * then we can't predict where the last focusable element is. We need to get + * the tabbable elements and handle the keydown event again and again, + * each time the active tab panel changes. + */ + $( '#plugin-information-tabs a', $iframeBody ).on( 'click', function() { + handleTabbables(); + }); + + // Close the modal when pressing Escape. + $iframeBody.on( 'keydown', function( event ) { + if ( 27 !== event.which ) { + return; + } + tb_remove(); + }); + } + + /* + * Get the tabbable elements and detach/attach the keydown event. + * Called after the iframe has fully loaded so we have all the elements we need. + * Called again each time a Tab gets clicked. + * @todo Consider to implement a WordPress general utility for this and don't use jQuery UI. + */ + function handleTabbables() { + var $firstAndLast; + // Get all the tabbable elements. + $tabbables = $( ':tabbable', $iframeBody ); + // Our first tabbable element is always the "Close" button. + $firstTabbable = tbWindow.find( '#TB_closeWindowButton' ); + // Get the last tabbable element. + $lastTabbable = $tabbables.last(); + // Make a jQuery collection. + $firstAndLast = $firstTabbable.add( $lastTabbable ); + // Detach any previously attached keydown event. + $firstAndLast.off( 'keydown.wp-plugin-details' ); + // Attach again the keydown event on the first and last focusable elements. + $firstAndLast.on( 'keydown.wp-plugin-details', function( event ) { + constrainTabbing( event ); + }); + } + + // Constrain tabbing within the plugin modal dialog. + function constrainTabbing( event ) { + if ( 9 !== event.which ) { + return; + } + + if ( $lastTabbable[0] === event.target && ! event.shiftKey ) { + event.preventDefault(); + $firstTabbable.focus(); + } else if ( $firstTabbable[0] === event.target && event.shiftKey ) { + event.preventDefault(); + $lastTabbable.focus(); + } + } + + /* + * Open the Plugin details modal. The event is delegated to get also the links + * in the plugins search tab, after the AJAX search rebuilds the HTML. It's + * delegated on the closest ancestor and not on the body to avoid conflicts + * with other handlers, see Trac ticket #43082. + */ + $( '.wrap' ).on( 'click', '.thickbox.open-plugin-details-modal', function( e ) { + // The `data-title` attribute is used only in the Plugin screens. + var title = $( this ).data( 'title' ) ? plugininstallL10n.plugin_information + ' ' + $( this ).data( 'title' ) : plugininstallL10n.plugin_modal_label; + + e.preventDefault(); + e.stopPropagation(); + + // Store the element that has focus before opening the modal dialog, i.e. the control which opens it. + $focusedBefore = $( this ); + tb_click.call(this); - $('#TB_title').css({'background-color':'#23282d','color':'#cfcfcf'}); - $('#TB_ajaxWindowTitle').html( '' + plugininstallL10n.plugin_information + ' ' + $(this).data( 'title' ) ); - $('#TB_iframeContent').attr( 'title', plugininstallL10n.plugin_information + ' ' + $(this).data( 'title' ) ); - $('#TB_closeWindowButton').focus(); + // Set ARIA role, ARIA label, and add a CSS class. + tbWindow + .attr({ + 'role': 'dialog', + 'aria-label': plugininstallL10n.plugin_modal_label + }) + .addClass( 'plugin-details-modal' ); - return false; + // Set title attribute on the iframe. + tbWindow.find( '#TB_iframeContent' ).attr( 'title', title ); }); /* Plugin install related JS */ @@ -69,4 +196,25 @@ $( '#section-holder div.section' ).hide(); // Hide 'em all. $( '#section-' + tab ).show(); }); + + /* + * When a user presses the "Upload Plugin" button, show the upload form in place + * rather than sending them to the devoted upload plugin page. + * The `?tab=upload` page still exists for no-js support and for plugins that + * might access it directly. When we're in this page, let the link behave + * like a link. Otherwise we're in the normal plugin installer pages and the + * link should behave like a toggle button. + */ + if ( ! $wrap.hasClass( 'plugin-install-tab-upload' ) ) { + $uploadViewToggle + .attr({ + role: 'button', + 'aria-expanded': 'false' + }) + .on( 'click', function( event ) { + event.preventDefault(); + $body.toggleClass( 'show-upload-view' ); + $uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) ); + }); + } });