: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
/* global wp_smushit_data */
import {GlobalStats} from "../common/globalStats";
import SmushProgress from "../common/progressbar";
import tracker from '../utils/tracker';
* @since 2.9.0 Moved from admin.js into a dedicated ES6 class.
* @param {Object} button Button object that made the call.
* @param {boolean} bulk Bulk smush or not.
* @param {string} type Accepts: 'nextgen', 'media'.
constructor( button, bulk, type = 'media' ) {
//If smush attribute is not defined, Need not skip re-Smush IDs.
'undefined' === typeof button.data( 'smush' ) ||
this.button = jQuery( button[ 0 ] );
this.is_bulk = typeof bulk ? bulk : false;
this.log = jQuery( '.smush-final-log' );
0 < wp_smushit_data.resmush.length && ! this.skip_resmush;
this.status = this.button.parent().prev( '.smush-status' );
// Added for NextGen support.
this.single_ajax_suffix =
'nextgen' === this.smush_type
'nextgen' === this.smush_type
? 'wp_smushit_nextgen_bulk'
this.get_stats_action = 'nextgen' === this.smush_type ? 'nextgen_get_stats' : 'get_stats';
? Smush.smushAddParams( this.url, {
action: this.bulk_ajax_suffix,
: Smush.smushAddParams( this.url, {
action: this.single_ajax_suffix,
( ! this.is_bulk ) && this.run();
this.bindDeferredEvents();
* @param {string} url URL to add the params to.
* @param {Object} data Object with params.
* @return {string} URL with params.
static smushAddParams( url, data ) {
if ( ! jQuery.isEmptyObject( data ) ) {
( url.indexOf( '?' ) >= 0 ? '&' : '?' ) + jQuery.param( data );
* Check membership validity.
* @param {number} data.show_warning
static membershipValidity( data ) {
const memberValidityNotice = jQuery( '#wp-smush-invalid-member' );
// Check for membership warning.
'undefined' !== typeof data &&
'undefined' !== typeof data.show_warning &&
memberValidityNotice.length > 0
if ( data.show_warning ) {
memberValidityNotice.show();
memberValidityNotice.hide();
* Send Ajax request for compressing the image.
* @param {boolean} isBulkResmush
* @param {string} sendUrl
* @param {boolean} newBulkSmushStarted
* @return {*|jQuery.promise|void} Compression results.
static ajax( isBulkResmush, id, sendUrl, nonce, newBulkSmushStarted= false ) {
const param = jQuery.param( {
is_bulk_resmush: isBulkResmush,
new_bulk_smush_started: newBulkSmushStarted
/** @param {Array} wp_smushit_data */
timeout: wp_smushit_data.timeout,
if ( 0 < wp_smushit_data.resmush.length && ! this.skip_resmush ) {
if ( 0 < wp_smushit_data.unsmushed.length ) {
ids = wp_smushit_data.resmush.concat( wp_smushit_data.unsmushed );
ids = wp_smushit_data.resmush;
ids = wp_smushit_data.unsmushed;
if ( 'object' === typeof ids ) {
// If button has re-Smush class, and we do have ids that needs to re-Smushed, put them in the list.
this.ids = ids.filter( function( itm, i, a ) {
return i === a.indexOf( itm );
* Show loader in button for single and bulk Smush.
this.button.prop( 'disabled', true );
this.button.addClass( 'wp-smush-started' );
jQuery( '.wp-smush-bulk-wrapper' ).addClass( 'sui-hidden' );
// Hide the bulk limit message.
'.wp-smush-bulk-progress-bar-wrapper .sui-notice-warning:first-of-type'
// Hide parent wrapper, if there are no other messages.
0 >= jQuery( 'div.smush-final-log .smush-bulk-error-row' ).length
jQuery( 'div.smush-final-log' ).addClass('sui-hidden');
// Show the progress bar.
'.bulk-smush-wrapper .wp-smush-bulk-progress-bar-wrapper, #wp-smush-running-notice'
).removeClass( 'sui-hidden' );
* Start single image Smush.
'<span class="spinner wp-smush-progress">' +
window.wp_smush_msgs.smushing +
this.status.removeClass( 'error' );
this.button.prop( 'disabled', false );
jQuery('.wp-smush-all').prop('disabled', false);
jQuery('.wp-smush-restore').prop('disabled', false);
// For bulk process, enable other buttons.
'a.wp-smush-lossy-enable, button.wp-smush-resize-enable, button#save-settings-button'
).prop('disabled', false);
* Finish single image Smush.
.done( function( response ) {
if ( 'undefined' !== typeof response.data ) {
// Check if stats div exists.
const parent = self.status.parent();
// Check whether to show membership validity notice or not.
Smush.membershipValidity( response.data );
if ( ! response.success ) {
if ( response.data.html_stats ) {
parent.html( response.data.html_stats );
self.status.addClass( 'smush-warning' );
/** @param {string} response.data.error_msg */
self.status.html( response.data.error_msg );
window.smush_vars.strings.stats_label
// If we've updated status, replace the content.
parent.html( response.data );
self.button.html( window.wp_smush_msgs.all_done );
* Update image size in attachment info panel.
* @param {string|number} response.data.new_size
Smush.updateImageStats( response.data.new_size );
.fail( function( response ) {
self.status.html( response.data );
self.status.addClass( 'smush-warning' );
* Get total images left to optimize.
* @see get_total_images_to_smush() in Abstract_Summary_Page class.
static getTotalImagesToSmush() {
const imagesToResmush = wp_smushit_data.resmush.length;
const unsmushedCount = wp_smushit_data.count_total - wp_smushit_data.count_smushed;
if ( unsmushedCount > 0 ) {
return imagesToResmush + unsmushedCount;
* Update the "optimized images" score on the summary meta box.
* @see get_grade_data() in Abstract_Summary_Page class.
static updateScoreProgress() {
let grade = 'sui-grade-dismissed';
let percentOptimized = 0;
const totalImagesToSmush = Smush.getTotalImagesToSmush();
const totalImages = parseInt( wp_smushit_data.count_total );
if ( totalImages === totalImagesToSmush ) {
} else if ( 0 < totalImages ) {
percentOptimized = Math.floor( ( totalImages - totalImagesToSmush ) * 100 / totalImages );
percentMetric = percentOptimized;
if ( percentOptimized >= 60 && percentOptimized < 90 ) {
} else if ( percentOptimized >= 90 ) {
const imageScore = jQuery( '#smush-image-score' );
function( index, className ) {
const matchedClasses = className.match( /(^|\s)sui-grade-\S+/g );
return ( matchedClasses || [] ).join( ' ' );
.attr( 'data-score', percentOptimized )
.find( '.sui-circle-score-label' ).html( percentOptimized );
.find( 'circle:last-child' )
.attr( 'style', '--metric-array:' + ( 2.63893782902 * percentMetric ) + ' ' + ( 263.893782902 - percentMetric ) );
* Update all stats sections based on the response.
* @param {string} scanType Current scan type.
static updateStats( scanType ) {
const isNextgen = 'undefined' !== typeof scanType && 'nextgen' === scanType;
// Calculate updated savings in bytes.
wp_smushit_data.savings_bytes = parseInt( wp_smushit_data.size_before ) - parseInt( wp_smushit_data.size_after );
const formattedSize = WP_Smush.helpers.formatBytes( wp_smushit_data.savings_bytes, 0 );
const statsHuman = jQuery( '.wp-smush-savings .wp-smush-stats-human' );
statsHuman.html( formattedSize );
statsHuman.html( WP_Smush.helpers.getFormatFromString( formattedSize ) );
jQuery( '.sui-summary-large.wp-smush-stats-human' )
.html( WP_Smush.helpers.getSizeFromString( formattedSize ) );
// Update the savings percent.
wp_smushit_data.savings_percent = WP_Smush.helpers.precise_round(
( parseInt( wp_smushit_data.savings_bytes ) /
parseInt( wp_smushit_data.size_before ) ) *
if ( ! isNaN( wp_smushit_data.savings_percent ) ) {
jQuery( '.wp-smush-savings .wp-smush-stats-percent' )
.html( wp_smushit_data.savings_percent );
jQuery( '.sui-summary-details span.wp-smush-total-optimised' )
.html( wp_smushit_data.count_images );
jQuery( 'span.smushed-items-count span.wp-smush-count-total span.wp-smush-total-optimised' )
.html( wp_smushit_data.count_images );
// Update resize image count.
if ( wp_smushit_data.count_resize > 0 ) {
jQuery( 'span.smushed-items-count span.wp-smush-count-resize-total' ).removeClass( 'sui-hidden' );
jQuery( 'span.smushed-items-count span.wp-smush-count-resize-total span.wp-smush-total-optimised' )
.html( wp_smushit_data.count_resize );
// Update super-Smushed image count.
const smushedCountDiv = jQuery( 'li.super-smush-attachments .smushed-count' );
if ( smushedCountDiv.length && 'undefined' !== typeof wp_smushit_data.count_supersmushed ) {
smushedCountDiv.html( wp_smushit_data.count_supersmushed );
// Update conversion savings.
const smushConversionSavings = jQuery( '.smush-conversion-savings' );
smushConversionSavings.length > 0 &&
'undefined' !== typeof wp_smushit_data.savings_conversion &&
wp_smushit_data.savings_conversion !== ''
const conversionSavings = smushConversionSavings.find( '.wp-smush-stats' );
if ( conversionSavings.length > 0 ) {
WP_Smush.helpers.formatBytes( wp_smushit_data.savings_conversion, 1 )
* Update image size in attachment info panel.
* @param {number} newSize
static updateImageStats( newSize ) {
const attachmentSize = jQuery( '.attachment-info .file-size' );
const currentSize = attachmentSize
return this.nodeType === 3;
// There is a space before the size.
if ( currentSize !== ' ' + newSize ) {
const sizeStrongEl = attachmentSize
return this.nodeType === 1;
'<strong>' + sizeStrongEl + '</strong> ' + newSize
const messageHolder = jQuery(
'div.wp-smush-bulk-progress-bar-wrapper div.wp-smush-count.tc'
// Store the existing content in a variable.
const progressMessage = messageHolder.html();
/** @param {string} wp_smush_msgs.sync_stats */
messageHolder.html( window.wp_smush_msgs.sync_stats );
action: this.get_stats_action,
_ajax_nonce: window.wp_smush_msgs.nonce,
if ( ! response?.success ) {
WP_Smush.helpers.showNotice( response, {
GlobalStats.updateGlobalStatsFromSmushScriptData( response.data );
GlobalStats.renderStats();
SmushProgress.update( 0, response.data.remaining_count );
jQuery('.wp-smush-scan').prop('disabled', false);
self.hideBulkFreeLimitReachedNotice();
.always( () => messageHolder.html( progressMessage ) );