WordPress/wp-admin/js/site-health.js
Sergey Biryukov 42079f34a9 Site Health: Modify the grading indicator to remove percentage score in favor of a "Good" or "Should be improved" status.
This removes arbitrary confusion about what the numbers mean.

Props Clorith, hedgefield, Cybr, arena, DavidAnderson, earnjam, daveshine, Otto42, azaozz, asadkn, KARTHOST, tigertech, maximejobin, johnbillion, raboodesign, ramiy, afragen.
Fixes #47046.
Built from https://develop.svn.wordpress.org/trunk@46106


git-svn-id: http://core.svn.wordpress.org/trunk@45918 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-14 14:29:56 +00:00

314 lines
8.7 KiB
JavaScript

/**
* Interactions used by the Site Health modules in WordPress.
*
* @output wp-admin/js/site-health.js
*/
/* global ajaxurl, ClipboardJS, SiteHealth, wp */
jQuery( document ).ready( function( $ ) {
var __ = wp.i18n.__,
_n = wp.i18n._n,
sprintf = wp.i18n.sprintf;
var data;
var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' );
var isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length;
var pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' );
// Debug information copy section.
clipboard.on( 'success', function( e ) {
var $wrapper = $( e.trigger ).closest( 'div' );
$( '.success', $wrapper ).addClass( 'visible' );
wp.a11y.speak( __( 'Site information has been added to your clipboard.' ) );
} );
// Accordion handling in various areas.
$( '.health-check-accordion' ).on( 'click', '.health-check-accordion-trigger', function() {
var isExpanded = ( 'true' === $( this ).attr( 'aria-expanded' ) );
if ( isExpanded ) {
$( this ).attr( 'aria-expanded', 'false' );
$( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', true );
} else {
$( this ).attr( 'aria-expanded', 'true' );
$( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', false );
}
} );
// Site Health test handling.
$( '.site-health-view-passed' ).on( 'click', function() {
var goodIssuesWrapper = $( '#health-check-issues-good' );
goodIssuesWrapper.toggleClass( 'hidden' );
$( this ).attr( 'aria-expanded', ! goodIssuesWrapper.hasClass( 'hidden' ) );
} );
/**
* Append a new issue to the issue list.
*
* @since 5.2.0
*
* @param {Object} issue The issue data.
*/
function AppendIssue( issue ) {
var template = wp.template( 'health-check-issue' ),
issueWrapper = $( '#health-check-issues-' + issue.status ),
heading,
count;
SiteHealth.site_status.issues[ issue.status ]++;
count = SiteHealth.site_status.issues[ issue.status ];
if ( 'critical' === issue.status ) {
heading = sprintf( _n( '%s Critical issue', '%s Critical issues', count ), '<span class="issue-count">' + count + '</span>' );
} else if ( 'recommended' === issue.status ) {
heading = sprintf( _n( '%s Recommended improvement', '%s Recommended improvements', count ), '<span class="issue-count">' + count + '</span>' );
} else if ( 'good' === issue.status ) {
heading = sprintf( _n( '%s Item with no issues detected', '%s Items with no issues detected', count ), '<span class="issue-count">' + count + '</span>' );
}
if ( heading ) {
$( '.site-health-issue-count-title', issueWrapper ).html( heading );
}
$( '.issues', '#health-check-issues-' + issue.status ).append( template( issue ) );
}
/**
* Update site health status indicator as asynchronous tests are run and returned.
*
* @since 5.2.0
*/
function RecalculateProgression() {
var r, c, pct;
var $progress = $( '.site-health-progress' );
var $wrapper = $progress.closest( '.site-health-progress-wrapper' );
var $progressLabel = $( '.site-health-progress-label', $wrapper );
var $circle = $( '.site-health-progress svg #bar' );
var totalTests = parseInt( SiteHealth.site_status.issues.good, 0 ) + parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
var failedTests = ( parseInt( SiteHealth.site_status.issues.recommended, 0 ) * 0.5 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 );
if ( 0 === totalTests ) {
$progress.addClass( 'hidden' );
return;
}
$wrapper.removeClass( 'loading' );
r = $circle.attr( 'r' );
c = Math.PI * ( r * 2 );
if ( 0 > val ) {
val = 0;
}
if ( 100 < val ) {
val = 100;
}
pct = ( ( 100 - val ) / 100 ) * c;
$circle.css( { strokeDashoffset: pct } );
if ( 1 > parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
$( '#health-check-issues-critical' ).addClass( 'hidden' );
}
if ( 1 > parseInt( SiteHealth.site_status.issues.recommended, 0 ) ) {
$( '#health-check-issues-recommended' ).addClass( 'hidden' );
}
if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
$wrapper.addClass( 'green' ).removeClass( 'orange' );
$progressLabel.text( __( 'Good' ) );
wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good, and the results are now available on the page.' ) );
} else {
$wrapper.addClass( 'orange' ).removeClass( 'green' );
$progressLabel.text( __( 'Should be improved' ) );
wp.a11y.speak( __( 'All site health tests have finished running. There are items that should be addressed, and the results are now available on the page.' ) );
}
if ( ! isDebugTab ) {
$.post(
ajaxurl,
{
'action': 'health-check-site-status-result',
'_wpnonce': SiteHealth.nonce.site_status_result,
'counts': SiteHealth.site_status.issues
}
);
if ( 100 === val ) {
$( '.site-status-all-clear' ).removeClass( 'hide' );
$( '.site-status-has-issues' ).addClass( 'hide' );
}
}
}
/**
* Queue the next asynchronous test when we're ready to run it.
*
* @since 5.2.0
*/
function maybeRunNextAsyncTest() {
var doCalculation = true;
if ( 1 <= SiteHealth.site_status.async.length ) {
$.each( SiteHealth.site_status.async, function() {
var data = {
'action': 'health-check-' + this.test.replace( '_', '-' ),
'_wpnonce': SiteHealth.nonce.site_status
};
if ( this.completed ) {
return true;
}
doCalculation = false;
this.completed = true;
$.post(
ajaxurl,
data,
function( response ) {
AppendIssue( response.data );
maybeRunNextAsyncTest();
}
);
return false;
} );
}
if ( doCalculation ) {
RecalculateProgression();
}
}
if ( 'undefined' !== typeof SiteHealth && ! isDebugTab ) {
if ( 0 === SiteHealth.site_status.direct.length && 0 === SiteHealth.site_status.async.length ) {
RecalculateProgression();
} else {
SiteHealth.site_status.issues = {
'good': 0,
'recommended': 0,
'critical': 0
};
}
if ( 0 < SiteHealth.site_status.direct.length ) {
$.each( SiteHealth.site_status.direct, function() {
AppendIssue( this );
} );
}
if ( 0 < SiteHealth.site_status.async.length ) {
data = {
'action': 'health-check-' + SiteHealth.site_status.async[0].test.replace( '_', '-' ),
'_wpnonce': SiteHealth.nonce.site_status
};
SiteHealth.site_status.async[0].completed = true;
$.post(
ajaxurl,
data,
function( response ) {
AppendIssue( response.data );
maybeRunNextAsyncTest();
}
);
} else {
RecalculateProgression();
}
}
function getDirectorySizes() {
var data = {
action: 'health-check-get-sizes',
_wpnonce: SiteHealth.nonce.site_status_result
};
var timestamp = ( new Date().getTime() );
// After 3 seconds announce that we're still waiting for directory sizes.
var timeout = window.setTimeout( function() {
wp.a11y.speak( __( 'Please wait...' ) );
}, 3000 );
$.post( {
type: 'POST',
url: ajaxurl,
data: data,
dataType: 'json'
} ).done( function( response ) {
updateDirSizes( response.data || {} );
} ).always( function() {
var delay = ( new Date().getTime() ) - timestamp;
$( '.health-check-wp-paths-sizes.spinner' ).css( 'visibility', 'hidden' );
RecalculateProgression();
if ( delay > 3000 ) {
// We have announced that we're waiting.
// Announce that we're ready after giving at least 3 seconds for the first announcement
// to be read out, or the two may collide.
if ( delay > 6000 ) {
delay = 0;
} else {
delay = 6500 - delay;
}
window.setTimeout( function() {
wp.a11y.speak( __( 'All site health tests have finished running.' ) );
}, delay );
} else {
// Cancel the announcement.
window.clearTimeout( timeout );
}
$( document ).trigger( 'site-health-info-dirsizes-done' );
} );
}
function updateDirSizes( data ) {
var copyButton = $( 'button.button.copy-button' );
var clipdoardText = copyButton.attr( 'data-clipboard-text' );
$.each( data, function( name, value ) {
var text = value.debug || value.size;
if ( typeof text !== 'undefined' ) {
clipdoardText = clipdoardText.replace( name + ': loading...', name + ': ' + text );
}
} );
copyButton.attr( 'data-clipboard-text', clipdoardText );
pathsSizesSection.find( 'td[class]' ).each( function( i, element ) {
var td = $( element );
var name = td.attr( 'class' );
if ( data.hasOwnProperty( name ) && data[ name ].size ) {
td.text( data[ name ].size );
}
} );
}
if ( isDebugTab ) {
if ( pathsSizesSection.length ) {
getDirectorySizes();
} else {
RecalculateProgression();
}
}
} );