wp/wp-admin/js/site-health.js
changeset 9 177826044cd9
child 16 a86126ab1dd4
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/wp/wp-admin/js/site-health.js	Mon Oct 14 18:28:13 2019 +0200
@@ -0,0 +1,316 @@
+/**
+ * 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 $progressCount = $progress.find( '.site-health-progress-count' );
+		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 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
+		var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 );
+
+		if ( 0 === totalTests ) {
+			$progress.addClass( 'hidden' );
+			return;
+		}
+
+		$progress.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 ( 50 <= val ) {
+			$circle.addClass( 'orange' ).removeClass( 'red' );
+		}
+
+		if ( 90 <= val ) {
+			$circle.addClass( 'green' ).removeClass( 'orange' );
+		}
+
+		if ( 100 === val ) {
+			$( '.site-status-all-clear' ).removeClass( 'hide' );
+			$( '.site-status-has-issues' ).addClass( 'hide' );
+		}
+
+		$progressCount.text( val + '%' );
+
+		if ( ! isDebugTab ) {
+			$.post(
+				ajaxurl,
+				{
+					'action': 'health-check-site-status-result',
+					'_wpnonce': SiteHealth.nonce.site_status_result,
+					'counts': SiteHealth.site_status.issues
+				}
+			);
+
+			wp.a11y.speak( sprintf(
+				// translators: %s: The percentage score for the tests.
+				__( 'All site health tests have finished running. Your site scored %s, and the results are now available on the page.' ),
+				val + '%'
+			) );
+		}
+	}
+
+	/**
+	 * 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();
+		}
+	}
+} );