[Summary view] [Print] [Text view]

   1  /**
   2   * Interactions used by the Site Health modules in WordPress.
   3   *
   4   * @output wp-admin/js/site-health.js
   5   */
   6  
   7  /* global ajaxurl, ClipboardJS, SiteHealth, wp */
   8  
   9  jQuery( function( $ ) {
  10  
  11      var __ = wp.i18n.__,
  12          _n = wp.i18n._n,
  13          sprintf = wp.i18n.sprintf,
  14          clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' ),
  15          isStatusTab = $( '.health-check-body.health-check-status-tab' ).length,
  16          isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length,
  17          pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' ),
  18          menuCounterWrapper = $( '#adminmenu .site-health-counter' ),
  19          menuCounter = $( '#adminmenu .site-health-counter .count' ),
  20          successTimeout;
  21  
  22      // Debug information copy section.
  23      clipboard.on( 'success', function( e ) {
  24          var triggerElement = $( e.trigger ),
  25              successElement = $( '.success', triggerElement.closest( 'div' ) );
  26  
  27          // Clear the selection and move focus back to the trigger.
  28          e.clearSelection();
  29  
  30          // Show success visual feedback.
  31          clearTimeout( successTimeout );
  32          successElement.removeClass( 'hidden' );
  33  
  34          // Hide success visual feedback after 3 seconds since last success.
  35          successTimeout = setTimeout( function() {
  36              successElement.addClass( 'hidden' );
  37          }, 3000 );
  38  
  39          // Handle success audible feedback.
  40          wp.a11y.speak( __( 'Site information has been copied to your clipboard.' ) );
  41      } );
  42  
  43      // Accordion handling in various areas.
  44      $( '.health-check-accordion' ).on( 'click', '.health-check-accordion-trigger', function() {
  45          var isExpanded = ( 'true' === $( this ).attr( 'aria-expanded' ) );
  46  
  47          if ( $( this ).prop( 'id' ) ) {
  48              window.location.hash = $( this ).prop( 'id' );
  49          }
  50  
  51          if ( isExpanded ) {
  52              $( this ).attr( 'aria-expanded', 'false' );
  53              $( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', true );
  54          } else {
  55              $( this ).attr( 'aria-expanded', 'true' );
  56              $( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', false );
  57          }
  58      } );
  59  
  60      /* global setTimeout */
  61      wp.domReady( function() {
  62          // Get hash from query string and open the related accordion.
  63          var hash = window.location.hash;
  64  
  65          if ( hash ) {
  66              var requestedPanel = $( hash );
  67  
  68              if ( requestedPanel.is( '.health-check-accordion-trigger' ) ) {
  69                  requestedPanel.trigger( 'click' );
  70              }
  71          }
  72      } );
  73  
  74      // Site Health test handling.
  75  
  76      $( '.site-health-view-passed' ).on( 'click', function() {
  77          var goodIssuesWrapper = $( '#health-check-issues-good' );
  78  
  79          goodIssuesWrapper.toggleClass( 'hidden' );
  80          $( this ).attr( 'aria-expanded', ! goodIssuesWrapper.hasClass( 'hidden' ) );
  81      } );
  82  
  83      /**
  84       * Validates the Site Health test result format.
  85       *
  86       * @since 5.6.0
  87       *
  88       * @param {Object} issue The issue data to validate.
  89       *
  90       * @return {boolean} True if the issue data is valid, false otherwise.
  91       */
  92  	function validateIssueData( issue ) {
  93          // Expected minimum format of a valid SiteHealth test response.
  94          var minimumExpected = {
  95                  test: 'string',
  96                  label: 'string',
  97                  description: 'string'
  98              },
  99              passed = true,
 100              key, value, subKey, subValue;
 101  
 102          // If the issue passed is not an object, return a `false` state early.
 103          if ( 'object' !== typeof( issue ) ) {
 104              return false;
 105          }
 106  
 107          // Loop over expected data and match the data types.
 108          for ( key in minimumExpected ) {
 109              value = minimumExpected[ key ];
 110  
 111              if ( 'object' === typeof( value ) ) {
 112                  for ( subKey in value ) {
 113                      subValue = value[ subKey ];
 114  
 115                      if ( 'undefined' === typeof( issue[ key ] ) ||
 116                          'undefined' === typeof( issue[ key ][ subKey ] ) ||
 117                          subValue !== typeof( issue[ key ][ subKey ] )
 118                      ) {
 119                          passed = false;
 120                      }
 121                  }
 122              } else {
 123                  if ( 'undefined' === typeof( issue[ key ] ) ||
 124                      value !== typeof( issue[ key ] )
 125                  ) {
 126                      passed = false;
 127                  }
 128              }
 129          }
 130  
 131          return passed;
 132      }
 133  
 134      /**
 135       * Appends a new issue to the issue list.
 136       *
 137       * @since 5.2.0
 138       *
 139       * @param {Object} issue The issue data.
 140       * @return {void|boolean} True if the issue was appended, false otherwise.
 141       */
 142  	function appendIssue( issue ) {
 143          var template = wp.template( 'health-check-issue' ),
 144              issueWrapper = $( '#health-check-issues-' + issue.status ),
 145              heading,
 146              count;
 147  
 148          /*
 149           * Validate the issue data format before using it.
 150           * If the output is invalid, discard it.
 151           */
 152          if ( ! validateIssueData( issue ) ) {
 153              return false;
 154          }
 155  
 156          SiteHealth.site_status.issues[ issue.status ]++;
 157  
 158          count = SiteHealth.site_status.issues[ issue.status ];
 159  
 160          // If no test name is supplied, append a placeholder for markup references.
 161          if ( typeof issue.test === 'undefined' ) {
 162              issue.test = issue.status + count;
 163          }
 164  
 165          if ( 'critical' === issue.status ) {
 166              heading = sprintf(
 167                  _n( '%s critical issue', '%s critical issues', count ),
 168                  '<span class="issue-count">' + count + '</span>'
 169              );
 170          } else if ( 'recommended' === issue.status ) {
 171              heading = sprintf(
 172                  _n( '%s recommended improvement', '%s recommended improvements', count ),
 173                  '<span class="issue-count">' + count + '</span>'
 174              );
 175          } else if ( 'good' === issue.status ) {
 176              heading = sprintf(
 177                  _n( '%s item with no issues detected', '%s items with no issues detected', count ),
 178                  '<span class="issue-count">' + count + '</span>'
 179              );
 180          }
 181  
 182          if ( heading ) {
 183              $( '.site-health-issue-count-title', issueWrapper ).html( heading );
 184          }
 185  
 186          menuCounter.text( SiteHealth.site_status.issues.critical );
 187  
 188          if ( 0 < parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
 189              $( '#health-check-issues-critical' ).removeClass( 'hidden' );
 190  
 191              menuCounterWrapper.removeClass( 'count-0' );
 192          } else {
 193              menuCounterWrapper.addClass( 'count-0' );
 194          }
 195          if ( 0 < parseInt( SiteHealth.site_status.issues.recommended, 0 ) ) {
 196              $( '#health-check-issues-recommended' ).removeClass( 'hidden' );
 197          }
 198  
 199          $( '.issues', '#health-check-issues-' + issue.status ).append( template( issue ) );
 200      }
 201  
 202      /**
 203       * Updates site health status indicator as asynchronous tests are run and returned.
 204       *
 205       * @since 5.2.0
 206       */
 207  	function recalculateProgression() {
 208          var r, c, pct;
 209          var $progress = $( '.site-health-progress' );
 210          var $wrapper = $progress.closest( '.site-health-progress-wrapper' );
 211          var $progressLabel = $( '.site-health-progress-label', $wrapper );
 212          var $circle = $( '.site-health-progress svg #bar' );
 213          var totalTests = parseInt( SiteHealth.site_status.issues.good, 0 ) +
 214              parseInt( SiteHealth.site_status.issues.recommended, 0 ) +
 215              ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
 216          var failedTests = ( parseInt( SiteHealth.site_status.issues.recommended, 0 ) * 0.5 ) +
 217              ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
 218          var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 );
 219  
 220          if ( 0 === totalTests ) {
 221              $progress.addClass( 'hidden' );
 222              return;
 223          }
 224  
 225          $wrapper.removeClass( 'loading' );
 226  
 227          r = $circle.attr( 'r' );
 228          c = Math.PI * ( r * 2 );
 229  
 230          if ( 0 > val ) {
 231              val = 0;
 232          }
 233          if ( 100 < val ) {
 234              val = 100;
 235          }
 236  
 237          pct = ( ( 100 - val ) / 100 ) * c + 'px';
 238  
 239          $circle.css( { strokeDashoffset: pct } );
 240  
 241          if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) {
 242              $wrapper.addClass( 'green' ).removeClass( 'orange' );
 243  
 244              $progressLabel.text( __( 'Good' ) );
 245              announceTestsProgression( 'good' );
 246          } else {
 247              $wrapper.addClass( 'orange' ).removeClass( 'green' );
 248  
 249              $progressLabel.text( __( 'Should be improved' ) );
 250              announceTestsProgression( 'improvable' );
 251          }
 252  
 253          if ( isStatusTab ) {
 254              $.post(
 255                  ajaxurl,
 256                  {
 257                      'action': 'health-check-site-status-result',
 258                      '_wpnonce': SiteHealth.nonce.site_status_result,
 259                      'counts': SiteHealth.site_status.issues
 260                  }
 261              );
 262  
 263              if ( 100 === val ) {
 264                  $( '.site-status-all-clear' ).removeClass( 'hide' );
 265                  $( '.site-status-has-issues' ).addClass( 'hide' );
 266              }
 267          }
 268      }
 269  
 270      /**
 271       * Queues the next asynchronous test when we're ready to run it.
 272       *
 273       * @since 5.2.0
 274       */
 275  	function maybeRunNextAsyncTest() {
 276          var doCalculation = true;
 277  
 278          if ( 1 <= SiteHealth.site_status.async.length ) {
 279              $.each( SiteHealth.site_status.async, function() {
 280                  var data = {
 281                      'action': 'health-check-' + this.test.replace( '_', '-' ),
 282                      '_wpnonce': SiteHealth.nonce.site_status
 283                  };
 284  
 285                  if ( this.completed ) {
 286                      return true;
 287                  }
 288  
 289                  doCalculation = false;
 290  
 291                  this.completed = true;
 292  
 293                  if ( 'undefined' !== typeof( this.has_rest ) && this.has_rest ) {
 294                      wp.apiRequest( {
 295                          url: wp.url.addQueryArgs( this.test, { _locale: 'user' } ),
 296                          headers: this.headers
 297                      } )
 298                          .done( function( response ) {
 299                              /** This filter is documented in wp-admin/includes/class-wp-site-health.php */
 300                              appendIssue( wp.hooks.applyFilters( 'site_status_test_result', response ) );
 301                          } )
 302                          .fail( function( response ) {
 303                              var description;
 304  
 305                              if ( 'undefined' !== typeof( response.responseJSON ) && 'undefined' !== typeof( response.responseJSON.message ) ) {
 306                                  description = response.responseJSON.message;
 307                              } else {
 308                                  description = __( 'No details available' );
 309                              }
 310  
 311                              addFailedSiteHealthCheckNotice( this.url, description );
 312                          } )
 313                          .always( function() {
 314                              maybeRunNextAsyncTest();
 315                          } );
 316                  } else {
 317                      $.post(
 318                          ajaxurl,
 319                          data
 320                      ).done( function( response ) {
 321                          /** This filter is documented in wp-admin/includes/class-wp-site-health.php */
 322                          appendIssue( wp.hooks.applyFilters( 'site_status_test_result', response.data ) );
 323                      } ).fail( function( response ) {
 324                          var description;
 325  
 326                          if ( 'undefined' !== typeof( response.responseJSON ) && 'undefined' !== typeof( response.responseJSON.message ) ) {
 327                              description = response.responseJSON.message;
 328                          } else {
 329                              description = __( 'No details available' );
 330                          }
 331  
 332                          addFailedSiteHealthCheckNotice( this.url, description );
 333                      } ).always( function() {
 334                          maybeRunNextAsyncTest();
 335                      } );
 336                  }
 337  
 338                  return false;
 339              } );
 340          }
 341  
 342          if ( doCalculation ) {
 343              recalculateProgression();
 344          }
 345      }
 346  
 347      /**
 348       * Add the details of a failed asynchronous test to the list of test results.
 349       *
 350       * @param {string} url
 351       * @param {string} description
 352       * @since 5.6.0
 353       */
 354  	function addFailedSiteHealthCheckNotice( url, description ) {
 355          var issue;
 356  
 357          issue = {
 358              'status': 'recommended',
 359              'label': __( 'A test is unavailable' ),
 360              'badge': {
 361                  'color': 'red',
 362                  'label': __( 'Unavailable' )
 363              },
 364              'description': '<p>' + url + '</p><p>' + description + '</p>',
 365              'actions': ''
 366          };
 367  
 368          /** This filter is documented in wp-admin/includes/class-wp-site-health.php */
 369          appendIssue( wp.hooks.applyFilters( 'site_status_test_result', issue ) );
 370      }
 371  
 372      if ( 'undefined' !== typeof SiteHealth ) {
 373          if ( 0 === SiteHealth.site_status.direct.length && 0 === SiteHealth.site_status.async.length ) {
 374              recalculateProgression();
 375          } else {
 376              SiteHealth.site_status.issues = {
 377                  'good': 0,
 378                  'recommended': 0,
 379                  'critical': 0
 380              };
 381          }
 382  
 383          if ( 0 < SiteHealth.site_status.direct.length ) {
 384              $.each( SiteHealth.site_status.direct, function() {
 385                  appendIssue( this );
 386              } );
 387          }
 388  
 389          if ( 0 < SiteHealth.site_status.async.length ) {
 390              maybeRunNextAsyncTest();
 391          } else {
 392              recalculateProgression();
 393          }
 394      }
 395  
 396  	function getDirectorySizes() {
 397          var timestamp = ( new Date().getTime() );
 398  
 399          // After 3 seconds announce that we're still waiting for directory sizes.
 400          var timeout = window.setTimeout( function() {
 401              announceTestsProgression( 'waiting-for-directory-sizes' );
 402          }, 3000 );
 403  
 404          wp.apiRequest( {
 405              path: '/wp-site-health/v1/directory-sizes'
 406          } ).done( function( response ) {
 407              updateDirSizes( response || {} );
 408          } ).always( function() {
 409              var delay = ( new Date().getTime() ) - timestamp;
 410  
 411              $( '.health-check-wp-paths-sizes.spinner' ).css( 'visibility', 'hidden' );
 412  
 413              if ( delay > 3000 ) {
 414                  /*
 415                   * We have announced that we're waiting.
 416                   * Announce that we're ready after giving at least 3 seconds
 417                   * for the first announcement to be read out, or the two may collide.
 418                   */
 419                  if ( delay > 6000 ) {
 420                      delay = 0;
 421                  } else {
 422                      delay = 6500 - delay;
 423                  }
 424  
 425                  window.setTimeout( function() {
 426                      recalculateProgression();
 427                  }, delay );
 428              } else {
 429                  // Cancel the announcement.
 430                  window.clearTimeout( timeout );
 431              }
 432  
 433              $( document ).trigger( 'site-health-info-dirsizes-done' );
 434          } );
 435      }
 436  
 437  	function updateDirSizes( data ) {
 438          var copyButton = $( 'button.button.copy-button' );
 439          var clipboardText = copyButton.attr( 'data-clipboard-text' );
 440  
 441          $.each( data, function( name, value ) {
 442              var text = value.debug || value.size;
 443  
 444              if ( typeof text !== 'undefined' ) {
 445                  clipboardText = clipboardText.replace( name + ': loading...', name + ': ' + text );
 446              }
 447          } );
 448  
 449          copyButton.attr( 'data-clipboard-text', clipboardText );
 450  
 451          pathsSizesSection.find( 'td[class]' ).each( function( i, element ) {
 452              var td = $( element );
 453              var name = td.attr( 'class' );
 454  
 455              if ( data.hasOwnProperty( name ) && data[ name ].size ) {
 456                  td.text( data[ name ].size );
 457              }
 458          } );
 459      }
 460  
 461      if ( isDebugTab ) {
 462          if ( pathsSizesSection.length ) {
 463              getDirectorySizes();
 464          } else {
 465              recalculateProgression();
 466          }
 467      }
 468  
 469      // Trigger a class toggle when the extended menu button is clicked.
 470      $( '.health-check-offscreen-nav-wrapper' ).on( 'click', function() {
 471          $( this ).toggleClass( 'visible' );
 472      } );
 473  
 474      /**
 475       * Announces to assistive technologies the tests progression status.
 476       *
 477       * @since 6.4.0
 478       *
 479       * @param {string} type The type of message to be announced.
 480       *
 481       * @return {void}
 482       */
 483  	function announceTestsProgression( type ) {
 484          // Only announce the messages in the Site Health pages.
 485          if ( 'site-health' !== SiteHealth.screen ) {
 486              return;
 487          }
 488  
 489          switch ( type ) {
 490              case 'good':
 491                  wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good.' ) );
 492                  break;
 493              case 'improvable':
 494                  wp.a11y.speak( __( 'All site health tests have finished running. There are items that should be addressed.' ) );
 495                  break;
 496              case 'waiting-for-directory-sizes':
 497                  wp.a11y.speak( __( 'Running additional tests... please wait.' ) );
 498                  break;
 499              default:
 500                  return;
 501          }
 502      }
 503  } );