|
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( document ).ready( function( $ ) { |
|
10 |
|
11 var __ = wp.i18n.__, |
|
12 _n = wp.i18n._n, |
|
13 sprintf = wp.i18n.sprintf; |
|
14 |
|
15 var data; |
|
16 var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' ); |
|
17 var isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length; |
|
18 var pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' ); |
|
19 |
|
20 // Debug information copy section. |
|
21 clipboard.on( 'success', function( e ) { |
|
22 var $wrapper = $( e.trigger ).closest( 'div' ); |
|
23 $( '.success', $wrapper ).addClass( 'visible' ); |
|
24 |
|
25 wp.a11y.speak( __( 'Site information has been added to your clipboard.' ) ); |
|
26 } ); |
|
27 |
|
28 // Accordion handling in various areas. |
|
29 $( '.health-check-accordion' ).on( 'click', '.health-check-accordion-trigger', function() { |
|
30 var isExpanded = ( 'true' === $( this ).attr( 'aria-expanded' ) ); |
|
31 |
|
32 if ( isExpanded ) { |
|
33 $( this ).attr( 'aria-expanded', 'false' ); |
|
34 $( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', true ); |
|
35 } else { |
|
36 $( this ).attr( 'aria-expanded', 'true' ); |
|
37 $( '#' + $( this ).attr( 'aria-controls' ) ).attr( 'hidden', false ); |
|
38 } |
|
39 } ); |
|
40 |
|
41 // Site Health test handling. |
|
42 |
|
43 $( '.site-health-view-passed' ).on( 'click', function() { |
|
44 var goodIssuesWrapper = $( '#health-check-issues-good' ); |
|
45 |
|
46 goodIssuesWrapper.toggleClass( 'hidden' ); |
|
47 $( this ).attr( 'aria-expanded', ! goodIssuesWrapper.hasClass( 'hidden' ) ); |
|
48 } ); |
|
49 |
|
50 /** |
|
51 * Append a new issue to the issue list. |
|
52 * |
|
53 * @since 5.2.0 |
|
54 * |
|
55 * @param {Object} issue The issue data. |
|
56 */ |
|
57 function AppendIssue( issue ) { |
|
58 var template = wp.template( 'health-check-issue' ), |
|
59 issueWrapper = $( '#health-check-issues-' + issue.status ), |
|
60 heading, |
|
61 count; |
|
62 |
|
63 SiteHealth.site_status.issues[ issue.status ]++; |
|
64 |
|
65 count = SiteHealth.site_status.issues[ issue.status ]; |
|
66 |
|
67 if ( 'critical' === issue.status ) { |
|
68 heading = sprintf( _n( '%s Critical issue', '%s Critical issues', count ), '<span class="issue-count">' + count + '</span>' ); |
|
69 } else if ( 'recommended' === issue.status ) { |
|
70 heading = sprintf( _n( '%s Recommended improvement', '%s Recommended improvements', count ), '<span class="issue-count">' + count + '</span>' ); |
|
71 } else if ( 'good' === issue.status ) { |
|
72 heading = sprintf( _n( '%s Item with no issues detected', '%s Items with no issues detected', count ), '<span class="issue-count">' + count + '</span>' ); |
|
73 } |
|
74 |
|
75 if ( heading ) { |
|
76 $( '.site-health-issue-count-title', issueWrapper ).html( heading ); |
|
77 } |
|
78 |
|
79 $( '.issues', '#health-check-issues-' + issue.status ).append( template( issue ) ); |
|
80 } |
|
81 |
|
82 /** |
|
83 * Update site health status indicator as asynchronous tests are run and returned. |
|
84 * |
|
85 * @since 5.2.0 |
|
86 */ |
|
87 function RecalculateProgression() { |
|
88 var r, c, pct; |
|
89 var $progress = $( '.site-health-progress' ); |
|
90 var $progressCount = $progress.find( '.site-health-progress-count' ); |
|
91 var $circle = $( '.site-health-progress svg #bar' ); |
|
92 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 ); |
|
93 var failedTests = parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 ); |
|
94 var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 ); |
|
95 |
|
96 if ( 0 === totalTests ) { |
|
97 $progress.addClass( 'hidden' ); |
|
98 return; |
|
99 } |
|
100 |
|
101 $progress.removeClass( 'loading' ); |
|
102 |
|
103 r = $circle.attr( 'r' ); |
|
104 c = Math.PI * ( r * 2 ); |
|
105 |
|
106 if ( 0 > val ) { |
|
107 val = 0; |
|
108 } |
|
109 if ( 100 < val ) { |
|
110 val = 100; |
|
111 } |
|
112 |
|
113 pct = ( ( 100 - val ) / 100 ) * c; |
|
114 |
|
115 $circle.css( { strokeDashoffset: pct } ); |
|
116 |
|
117 if ( 1 > parseInt( SiteHealth.site_status.issues.critical, 0 ) ) { |
|
118 $( '#health-check-issues-critical' ).addClass( 'hidden' ); |
|
119 } |
|
120 |
|
121 if ( 1 > parseInt( SiteHealth.site_status.issues.recommended, 0 ) ) { |
|
122 $( '#health-check-issues-recommended' ).addClass( 'hidden' ); |
|
123 } |
|
124 |
|
125 if ( 50 <= val ) { |
|
126 $circle.addClass( 'orange' ).removeClass( 'red' ); |
|
127 } |
|
128 |
|
129 if ( 90 <= val ) { |
|
130 $circle.addClass( 'green' ).removeClass( 'orange' ); |
|
131 } |
|
132 |
|
133 if ( 100 === val ) { |
|
134 $( '.site-status-all-clear' ).removeClass( 'hide' ); |
|
135 $( '.site-status-has-issues' ).addClass( 'hide' ); |
|
136 } |
|
137 |
|
138 $progressCount.text( val + '%' ); |
|
139 |
|
140 if ( ! isDebugTab ) { |
|
141 $.post( |
|
142 ajaxurl, |
|
143 { |
|
144 'action': 'health-check-site-status-result', |
|
145 '_wpnonce': SiteHealth.nonce.site_status_result, |
|
146 'counts': SiteHealth.site_status.issues |
|
147 } |
|
148 ); |
|
149 |
|
150 wp.a11y.speak( sprintf( |
|
151 // translators: %s: The percentage score for the tests. |
|
152 __( 'All site health tests have finished running. Your site scored %s, and the results are now available on the page.' ), |
|
153 val + '%' |
|
154 ) ); |
|
155 } |
|
156 } |
|
157 |
|
158 /** |
|
159 * Queue the next asynchronous test when we're ready to run it. |
|
160 * |
|
161 * @since 5.2.0 |
|
162 */ |
|
163 function maybeRunNextAsyncTest() { |
|
164 var doCalculation = true; |
|
165 |
|
166 if ( 1 <= SiteHealth.site_status.async.length ) { |
|
167 $.each( SiteHealth.site_status.async, function() { |
|
168 var data = { |
|
169 'action': 'health-check-' + this.test.replace( '_', '-' ), |
|
170 '_wpnonce': SiteHealth.nonce.site_status |
|
171 }; |
|
172 |
|
173 if ( this.completed ) { |
|
174 return true; |
|
175 } |
|
176 |
|
177 doCalculation = false; |
|
178 |
|
179 this.completed = true; |
|
180 |
|
181 $.post( |
|
182 ajaxurl, |
|
183 data, |
|
184 function( response ) { |
|
185 AppendIssue( response.data ); |
|
186 maybeRunNextAsyncTest(); |
|
187 } |
|
188 ); |
|
189 |
|
190 return false; |
|
191 } ); |
|
192 } |
|
193 |
|
194 if ( doCalculation ) { |
|
195 RecalculateProgression(); |
|
196 } |
|
197 } |
|
198 |
|
199 if ( 'undefined' !== typeof SiteHealth && ! isDebugTab ) { |
|
200 if ( 0 === SiteHealth.site_status.direct.length && 0 === SiteHealth.site_status.async.length ) { |
|
201 RecalculateProgression(); |
|
202 } else { |
|
203 SiteHealth.site_status.issues = { |
|
204 'good': 0, |
|
205 'recommended': 0, |
|
206 'critical': 0 |
|
207 }; |
|
208 } |
|
209 |
|
210 if ( 0 < SiteHealth.site_status.direct.length ) { |
|
211 $.each( SiteHealth.site_status.direct, function() { |
|
212 AppendIssue( this ); |
|
213 } ); |
|
214 } |
|
215 |
|
216 if ( 0 < SiteHealth.site_status.async.length ) { |
|
217 data = { |
|
218 'action': 'health-check-' + SiteHealth.site_status.async[0].test.replace( '_', '-' ), |
|
219 '_wpnonce': SiteHealth.nonce.site_status |
|
220 }; |
|
221 |
|
222 SiteHealth.site_status.async[0].completed = true; |
|
223 |
|
224 $.post( |
|
225 ajaxurl, |
|
226 data, |
|
227 function( response ) { |
|
228 AppendIssue( response.data ); |
|
229 maybeRunNextAsyncTest(); |
|
230 } |
|
231 ); |
|
232 } else { |
|
233 RecalculateProgression(); |
|
234 } |
|
235 } |
|
236 |
|
237 function getDirectorySizes() { |
|
238 var data = { |
|
239 action: 'health-check-get-sizes', |
|
240 _wpnonce: SiteHealth.nonce.site_status_result |
|
241 }; |
|
242 |
|
243 var timestamp = ( new Date().getTime() ); |
|
244 |
|
245 // After 3 seconds announce that we're still waiting for directory sizes. |
|
246 var timeout = window.setTimeout( function() { |
|
247 wp.a11y.speak( __( 'Please wait...' ) ); |
|
248 }, 3000 ); |
|
249 |
|
250 $.post( { |
|
251 type: 'POST', |
|
252 url: ajaxurl, |
|
253 data: data, |
|
254 dataType: 'json' |
|
255 } ).done( function( response ) { |
|
256 updateDirSizes( response.data || {} ); |
|
257 } ).always( function() { |
|
258 var delay = ( new Date().getTime() ) - timestamp; |
|
259 |
|
260 $( '.health-check-wp-paths-sizes.spinner' ).css( 'visibility', 'hidden' ); |
|
261 RecalculateProgression(); |
|
262 |
|
263 if ( delay > 3000 ) { |
|
264 // We have announced that we're waiting. |
|
265 // Announce that we're ready after giving at least 3 seconds for the first announcement |
|
266 // to be read out, or the two may collide. |
|
267 if ( delay > 6000 ) { |
|
268 delay = 0; |
|
269 } else { |
|
270 delay = 6500 - delay; |
|
271 } |
|
272 |
|
273 window.setTimeout( function() { |
|
274 wp.a11y.speak( __( 'All site health tests have finished running.' ) ); |
|
275 }, delay ); |
|
276 } else { |
|
277 // Cancel the announcement. |
|
278 window.clearTimeout( timeout ); |
|
279 } |
|
280 |
|
281 $( document ).trigger( 'site-health-info-dirsizes-done' ); |
|
282 } ); |
|
283 } |
|
284 |
|
285 function updateDirSizes( data ) { |
|
286 var copyButton = $( 'button.button.copy-button' ); |
|
287 var clipdoardText = copyButton.attr( 'data-clipboard-text' ); |
|
288 |
|
289 $.each( data, function( name, value ) { |
|
290 var text = value.debug || value.size; |
|
291 |
|
292 if ( typeof text !== 'undefined' ) { |
|
293 clipdoardText = clipdoardText.replace( name + ': loading...', name + ': ' + text ); |
|
294 } |
|
295 } ); |
|
296 |
|
297 copyButton.attr( 'data-clipboard-text', clipdoardText ); |
|
298 |
|
299 pathsSizesSection.find( 'td[class]' ).each( function( i, element ) { |
|
300 var td = $( element ); |
|
301 var name = td.attr( 'class' ); |
|
302 |
|
303 if ( data.hasOwnProperty( name ) && data[ name ].size ) { |
|
304 td.text( data[ name ].size ); |
|
305 } |
|
306 } ); |
|
307 } |
|
308 |
|
309 if ( isDebugTab ) { |
|
310 if ( pathsSizesSection.length ) { |
|
311 getDirectorySizes(); |
|
312 } else { |
|
313 RecalculateProgression(); |
|
314 } |
|
315 } |
|
316 } ); |