[ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[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 });
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Sat Nov 23 20:47:33 2019 | Cross-referenced by PHPXref 0.7 |