Edit File by line

/* global WP_Smush */

[0] Fix | Delete

[1] Fix | Delete

/**

[2] Fix | Delete

* SmushProgressBar

[3] Fix | Delete

* TODO: Update progressbar for free version.

[4] Fix | Delete

[5] Fix | Delete

* @param autoSyncDuration

[6] Fix | Delete

[7] Fix | Delete

export const scanProgressBar = ( autoSyncDuration ) => {

[8] Fix | Delete

const { __, _n } = wp.i18n;

[9] Fix | Delete

const scanProgressBar = document.querySelector( '.wp-smush-scan-progress-bar-wrapper' );

[10] Fix | Delete

const percentElement = scanProgressBar.querySelector( '.wp-smush-progress-percent' );

[11] Fix | Delete

const progressElement = scanProgressBar.querySelector( '.wp-smush-progress-inner' );

[12] Fix | Delete

const remainingTimeElement = scanProgressBar.querySelector( '.wp-smush-remaining-time' );

[13] Fix | Delete

const cancelBtn = scanProgressBar.querySelector( '.wp-smush-cancel-scan-progress-btn' );

[14] Fix | Delete

const holdOnNoticeElement = scanProgressBar.querySelector( '.wp-smush-scan-hold-on-notice' );

[15] Fix | Delete

let onCancelCallback = () => {};

[16] Fix | Delete

let intervalProgressAnimation = 0;

[17] Fix | Delete

// It should be smaller than autoSyncDuration.

[18] Fix | Delete

const progressTransitionDuration = autoSyncDuration - 300;//1200

[19] Fix | Delete

scanProgressBar.style.setProperty( '--progress-transition-duration', progressTransitionDuration / 1000 + 's' );

[20] Fix | Delete

[21] Fix | Delete

let prevProcessedItems = window.wp_smushit_data?.media_library_scan?.processed_items || 0;

[22] Fix | Delete

const cacheProcessTimePerItem = [];

[23] Fix | Delete

let durationToHaveChangeOnProgress = autoSyncDuration;

[24] Fix | Delete

let timeLimitToShowNotice = autoSyncDuration * 10;// 15s.

[25] Fix | Delete

return {

[26] Fix | Delete

update( processedItems, totalItems ) {

[27] Fix | Delete

this.updateRemainingTime( processedItems, totalItems );

[28] Fix | Delete

[29] Fix | Delete

let width = ( totalItems && Math.floor( processedItems / totalItems * 100 ) ) || 0;

[30] Fix | Delete

width = Math.min( width, 100 );

[31] Fix | Delete

[32] Fix | Delete

let currentWidth = progressElement.style.width;

[33] Fix | Delete

currentWidth = ( currentWidth && currentWidth.replace( '%', '' ) ) || 0;

[34] Fix | Delete

progressElement.style.width = width + '%';

[35] Fix | Delete

[36] Fix | Delete

return this.animateProgressBar( currentWidth, width );

[37] Fix | Delete

[38] Fix | Delete

animateProgressBar( currentWidth, width ) {

[39] Fix | Delete

if ( intervalProgressAnimation ) {

[40] Fix | Delete

clearInterval( intervalProgressAnimation );

[41] Fix | Delete

}

[42] Fix | Delete

return new Promise( ( resolve ) => {

[43] Fix | Delete

const delayTime = progressTransitionDuration / ( width - currentWidth );

[44] Fix | Delete

intervalProgressAnimation = setInterval( () => {

[45] Fix | Delete

// Progress bar label.

[46] Fix | Delete

percentElement.innerHTML = currentWidth + '%';

[47] Fix | Delete

currentWidth++;

[48] Fix | Delete

if ( currentWidth > width ) {

[49] Fix | Delete

resolve();

[50] Fix | Delete

clearInterval( intervalProgressAnimation );

[51] Fix | Delete

}

[52] Fix | Delete

}, delayTime );

[53] Fix | Delete

} );

[54] Fix | Delete

[55] Fix | Delete

updateRemainingTime( processedItems, totalItems ) {

[56] Fix | Delete

if ( ! remainingTimeElement ) {

[57] Fix | Delete

return;

[58] Fix | Delete

}

[59] Fix | Delete

const processTimePerItem = this.calcProcessTimePerItem( processedItems ) || 500;

[60] Fix | Delete

const remainingTime = processTimePerItem * ( totalItems - processedItems );

[61] Fix | Delete

remainingTimeElement.innerText = this.formatTime( remainingTime );

[62] Fix | Delete

[63] Fix | Delete

calcProcessTimePerItem( processedItems ) {

[64] Fix | Delete

if ( ! processedItems ) {

[65] Fix | Delete

return;

[66] Fix | Delete

}

[67] Fix | Delete

prevProcessedItems = prevProcessedItems <= processedItems ? prevProcessedItems : 0;

[68] Fix | Delete

if ( prevProcessedItems != processedItems ) {

[69] Fix | Delete

const processTimePerItem = Math.floor( durationToHaveChangeOnProgress / ( processedItems - prevProcessedItems ) );

[70] Fix | Delete

[71] Fix | Delete

prevProcessedItems = processedItems;

[72] Fix | Delete

cacheProcessTimePerItem.push( processTimePerItem );

[73] Fix | Delete

this.resetDurationToHaveChangeOnProgress();

[74] Fix | Delete

} else {

[75] Fix | Delete

this.increaseDurationToHaveChangeOnProgress( autoSyncDuration );

[76] Fix | Delete

}

[77] Fix | Delete

[78] Fix | Delete

if ( ! cacheProcessTimePerItem.length ) {

[79] Fix | Delete

return;

[80] Fix | Delete

}

[81] Fix | Delete

[82] Fix | Delete

return cacheProcessTimePerItem.reduce(

[83] Fix | Delete

( accumulator, processTime ) => accumulator + processTime, 0

[84] Fix | Delete

) / cacheProcessTimePerItem.length;

[85] Fix | Delete

[86] Fix | Delete

increaseDurationToHaveChangeOnProgress( increaseTime ) {

[87] Fix | Delete

durationToHaveChangeOnProgress += increaseTime;

[88] Fix | Delete

if ( durationToHaveChangeOnProgress > timeLimitToShowNotice ) {

[89] Fix | Delete

this.showHoldOnNotice();

[90] Fix | Delete

}

[91] Fix | Delete

[92] Fix | Delete

showHoldOnNotice() {

[93] Fix | Delete

holdOnNoticeElement.classList.remove( 'sui-hidden' );

[94] Fix | Delete

timeLimitToShowNotice = 100000000;

[95] Fix | Delete

[96] Fix | Delete

resetHoldOnNoticeVisibility() {

[97] Fix | Delete

holdOnNoticeElement.classList.add( 'sui-hidden' );

[98] Fix | Delete

[99] Fix | Delete

resetDurationToHaveChangeOnProgress() {

[100] Fix | Delete

durationToHaveChangeOnProgress = autoSyncDuration;

[101] Fix | Delete

[102] Fix | Delete

formatTime( totalMilliSeconds ) {

[103] Fix | Delete

const totalSeconds = Math.floor( ( totalMilliSeconds + progressTransitionDuration ) / 1000 );

[104] Fix | Delete

const seconds = totalSeconds % 60;

[105] Fix | Delete

const minutes = Math.floor( totalSeconds / 60 );

[106] Fix | Delete

[107] Fix | Delete

let timeString = '';

[108] Fix | Delete

if ( minutes ) {

[109] Fix | Delete

timeString += minutes + ' ' + _n( 'minute', 'minutes', minutes, 'wp-smushit' );

[110] Fix | Delete

}

[111] Fix | Delete

[112] Fix | Delete

timeString += ' ' + seconds + ' ' + _n( 'second', 'seconds', seconds, 'wp-smushit' );

[113] Fix | Delete

[114] Fix | Delete

return timeString.trim();

[115] Fix | Delete

[116] Fix | Delete

reset() {

[117] Fix | Delete

progressElement.style.width = '0%';

[118] Fix | Delete

percentElement.innerHTML = '0%';

[119] Fix | Delete

[120] Fix | Delete

this.resetCancelButton();

[121] Fix | Delete

this.resetHoldOnNoticeVisibility();

[122] Fix | Delete

return this;

[123] Fix | Delete

[124] Fix | Delete

open() {

[125] Fix | Delete

cancelBtn.onclick = onCancelCallback;

[126] Fix | Delete

scanProgressBar.classList.remove( 'sui-hidden' );

[127] Fix | Delete

[128] Fix | Delete

close() {

[129] Fix | Delete

scanProgressBar.classList.add( 'sui-hidden' );

[130] Fix | Delete

this.reset();

[131] Fix | Delete

[132] Fix | Delete

setOnCancelCallback( callBack ) {

[133] Fix | Delete

if ( 'function' !== typeof callBack ) {

[134] Fix | Delete

return;

[135] Fix | Delete

}

[136] Fix | Delete

onCancelCallback = callBack;

[137] Fix | Delete

return this;

[138] Fix | Delete

[139] Fix | Delete

setCancelButtonLabel( textContent ) {

[140] Fix | Delete

cancelBtn.textContent = textContent;

[141] Fix | Delete

return this;

[142] Fix | Delete

[143] Fix | Delete

setCancelButtonOnCancelling() {

[144] Fix | Delete

this.setCancelButtonLabel( wp_smush_msgs.cancelling );

[145] Fix | Delete

this.setOnCancelCallback( () => false );

[146] Fix | Delete

cancelBtn.setAttribute( 'disabled', true );

[147] Fix | Delete

[148] Fix | Delete

resetCancelButton() {

[149] Fix | Delete

this.setOnCancelCallback( () => {} );

[150] Fix | Delete

this.resetCancelButtonLabel();

[151] Fix | Delete

cancelBtn.removeAttribute( 'disabled' );

[152] Fix | Delete

[153] Fix | Delete

resetCancelButtonLabel() {

[154] Fix | Delete

this.setCancelButtonLabel( __( 'Cancel Scan', 'wp-smushit' ) );

[155] Fix | Delete

[156] Fix | Delete

resetCancelButtonOnFailure() {

[157] Fix | Delete

this.resetCancelButtonLabel();

[158] Fix | Delete

cancelBtn.removeAttribute( 'disabled' );

[159] Fix | Delete

}

[160] Fix | Delete

};

[161] Fix | Delete

};

[162] Fix | Delete

[163] Fix | Delete

const SmushProgressBar = () => {

[164] Fix | Delete

'use strict';

[165] Fix | Delete

const progressBar = document.querySelector( '.wp-smush-bulk-progress-bar-wrapper' );

[166] Fix | Delete

if ( ! progressBar ) {

[167] Fix | Delete

return {

[168] Fix | Delete

isEmptyObject: true,

[169] Fix | Delete

};

[170] Fix | Delete

}

[171] Fix | Delete

const cancelBtn = progressBar.querySelector( '.wp-smush-cancel-btn' );

[172] Fix | Delete

const bulkSmushDescription = document.querySelector( '.wp-smush-bulk-wrapper' );

[173] Fix | Delete

const bulkRunningNotice = progressBar.querySelector( '#wp-smush-running-notice' );

[174] Fix | Delete

const bulkSmushAllDone = document.querySelector( '.wp-smush-all-done' );

[175] Fix | Delete

const stopBulkSmushModal = document.getElementById( 'smush-stop-bulk-smush-modal' );

[176] Fix | Delete

let isStateHidden = false;

[177] Fix | Delete

let onCancelCallback = () => {};

[178] Fix | Delete

[179] Fix | Delete

return {

[180] Fix | Delete

/**

[181] Fix | Delete

* Update progress bar.

[182] Fix | Delete

[183] Fix | Delete

* @param {number} processedItems

[184] Fix | Delete

* @param {number} totalItems

[185] Fix | Delete

[186] Fix | Delete

update( processedItems, totalItems ) {

[187] Fix | Delete

let width = totalItems && Math.floor( processedItems / totalItems * 100 ) || 0;

[188] Fix | Delete

width = Math.min( width, 100 );

[189] Fix | Delete

[190] Fix | Delete

// Progress bar label.

[191] Fix | Delete

progressBar.querySelector( '.wp-smush-images-percent' ).innerHTML = width + '%';

[192] Fix | Delete

// Progress bar.

[193] Fix | Delete

progressBar.querySelector( '.wp-smush-progress-inner' ).style.width = width + '%';

[194] Fix | Delete

[195] Fix | Delete

// Update processed/total.

[196] Fix | Delete

const processStateStats = progressBar.querySelector( '.sui-progress-state-text' );

[197] Fix | Delete

processStateStats.firstElementChild.innerHTML = processedItems;

[198] Fix | Delete

processStateStats.lastElementChild.innerHTML = totalItems;

[199] Fix | Delete

[200] Fix | Delete

return this;

[201] Fix | Delete

[202] Fix | Delete

close() {

[203] Fix | Delete

progressBar.classList.add( 'sui-hidden' );

[204] Fix | Delete

this.setCancelButtonLabel( window.wp_smush_msgs.cancel )

[205] Fix | Delete

.setOnCancelCallback( () => {} )

[206] Fix | Delete

.update( 0, 0 );

[207] Fix | Delete

this.resetOriginalNotice();

[208] Fix | Delete

this.closeStopBulkSmushModal();

[209] Fix | Delete

return this;

[210] Fix | Delete

[211] Fix | Delete

show() {

[212] Fix | Delete

// Show progress bar.

[213] Fix | Delete

progressBar.classList.remove( 'sui-hidden' );

[214] Fix | Delete

cancelBtn.onclick = this.showStopBulkSmushModal.bind( this );

[215] Fix | Delete

this.hideBulkSmushDescription();

[216] Fix | Delete

this.hideBulkSmushAllDone();

[217] Fix | Delete

this.hideRecheckImagesNotice();

[218] Fix | Delete

[219] Fix | Delete

showStopBulkSmushModal() {

[220] Fix | Delete

if ( ! stopBulkSmushModal ) {

[221] Fix | Delete

return;

[222] Fix | Delete

}

[223] Fix | Delete

[224] Fix | Delete

const stopBulkSmushButton = stopBulkSmushModal.querySelector( '.smush-stop-bulk-smush-button' );

[225] Fix | Delete

stopBulkSmushButton.addEventListener( 'click', onCancelCallback, { once: true } );

[226] Fix | Delete

[227] Fix | Delete

// Displays the modal with the release's higlights if it exists.

[228] Fix | Delete

const modalId = stopBulkSmushModal.id,

[229] Fix | Delete

focusAfterClosed = 'wpbody-content',

[230] Fix | Delete

focusWhenOpen = undefined,

[231] Fix | Delete

hasOverlayMask = false,

[232] Fix | Delete

isCloseOnEsc = false,

[233] Fix | Delete

isAnimated = true;

[234] Fix | Delete

[235] Fix | Delete

window.SUI.openModal(

[236] Fix | Delete

modalId,

[237] Fix | Delete

focusAfterClosed,

[238] Fix | Delete

focusWhenOpen,

[239] Fix | Delete

hasOverlayMask,

[240] Fix | Delete

isCloseOnEsc,

[241] Fix | Delete

isAnimated

[242] Fix | Delete

);

[243] Fix | Delete

[244] Fix | Delete

closeStopBulkSmushModal() {

[245] Fix | Delete

if ( ! window.SUI ) {

[246] Fix | Delete

return;

[247] Fix | Delete

}

[248] Fix | Delete

const isModalClosed = ( ! stopBulkSmushModal ) || ! stopBulkSmushModal.classList.contains( 'sui-content-fade-in' );

[249] Fix | Delete

if ( isModalClosed ) {

[250] Fix | Delete

return;

[251] Fix | Delete

}

[252] Fix | Delete

window.SUI.closeModal( stopBulkSmushModal.id );

[253] Fix | Delete

[254] Fix | Delete

setCancelButtonLabel( textContent ) {

[255] Fix | Delete

cancelBtn.textContent = textContent;

[256] Fix | Delete

return this;

[257] Fix | Delete

[258] Fix | Delete

showBulkSmushDescription() {

[259] Fix | Delete

bulkSmushDescription.classList.remove( 'sui-hidden' );

[260] Fix | Delete

[261] Fix | Delete

hideBulkSmushDescription() {

[262] Fix | Delete

bulkSmushDescription.classList.add( 'sui-hidden' );

[263] Fix | Delete

[264] Fix | Delete

showBulkSmushAllDone() {

[265] Fix | Delete

bulkSmushAllDone.classList.remove( 'sui-hidden' );

[266] Fix | Delete

[267] Fix | Delete

hideBulkSmushAllDone() {

[268] Fix | Delete

bulkSmushAllDone.classList.add( 'sui-hidden' );

[269] Fix | Delete

[270] Fix | Delete

hideState() {

[271] Fix | Delete

if ( isStateHidden ) {

[272] Fix | Delete

return this;

[273] Fix | Delete

}

[274] Fix | Delete

isStateHidden = true;

[275] Fix | Delete

progressBar.querySelector( '.sui-progress-state' ).classList.add( 'sui-hidden' );

[276] Fix | Delete

return this;

[277] Fix | Delete

[278] Fix | Delete

showState() {

[279] Fix | Delete

if ( ! isStateHidden ) {

[280] Fix | Delete

return this;

[281] Fix | Delete

}

[282] Fix | Delete

isStateHidden = false;

[283] Fix | Delete

progressBar.querySelector( '.sui-progress-state' ).classList.remove( 'sui-hidden' );

[284] Fix | Delete

return this;

[285] Fix | Delete

[286] Fix | Delete

setNotice( inProcessNotice ) {

[287] Fix | Delete

const progressMessage = bulkRunningNotice.querySelector( '.sui-notice-message p' );

[288] Fix | Delete

this.cacheOriginalNotice( progressMessage );

[289] Fix | Delete

progressMessage.innerHTML = inProcessNotice;

[290] Fix | Delete

return this;

[291] Fix | Delete

[292] Fix | Delete

cacheOriginalNotice( progressMessage ) {

[293] Fix | Delete

if ( bulkRunningNotice.dataset.progressMessage ) {

[294] Fix | Delete

return;

[295] Fix | Delete

}

[296] Fix | Delete

bulkRunningNotice.dataset.progressMessage = progressMessage.innerHTML;

[297] Fix | Delete

[298] Fix | Delete

resetOriginalNotice() {

[299] Fix | Delete

if ( ! bulkRunningNotice.dataset.progressMessage ) {

[300] Fix | Delete

return;

[301] Fix | Delete

}

[302] Fix | Delete

const progressMessage = bulkRunningNotice.querySelector( '.sui-notice-message p' );

[303] Fix | Delete

progressMessage.innerHTML = bulkRunningNotice.dataset.progressMessage;

[304] Fix | Delete

[305] Fix | Delete

hideBulkProcessingNotice() {

[306] Fix | Delete

bulkRunningNotice.classList.add( 'sui-hidden' );

[307] Fix | Delete

return this;

[308] Fix | Delete

[309] Fix | Delete

showBulkProcessingNotice() {

[310] Fix | Delete

bulkRunningNotice.classList.remove( 'sui-hidden' );

[311] Fix | Delete

return this;

[312] Fix | Delete

[313] Fix | Delete

setCountUnitText( unitText ) {

[314] Fix | Delete

const progressUnit = progressBar.querySelector( '.sui-progress-state-unit' );

[315] Fix | Delete

progressUnit.innerHTML = unitText;

[316] Fix | Delete

[317] Fix | Delete

setOnCancelCallback( callBack ) {

[318] Fix | Delete

if ( 'function' !== typeof callBack ) {

[319] Fix | Delete

return;

[320] Fix | Delete

}

[321] Fix | Delete

onCancelCallback = callBack;

[322] Fix | Delete

return this;

[323] Fix | Delete

[324] Fix | Delete

disableExceedLimitMode() {

[325] Fix | Delete

progressBar.classList.remove( 'wp-smush-exceed-limit' );

[326] Fix | Delete

progressBar.querySelector( '#bulk-smush-resume-button' ).classList.add( 'sui-hidden' );

[327] Fix | Delete

[328] Fix | Delete

hideRecheckImagesNotice() {

[329] Fix | Delete

const recheckImagesNoticeElement = document.querySelector( '.wp-smush-recheck-images-notice-box' );

[330] Fix | Delete

if ( recheckImagesNoticeElement ) {

[331] Fix | Delete

recheckImagesNoticeElement.classList.add( 'sui-hidden' );

[332] Fix | Delete

}

[333] Fix | Delete

}

[334] Fix | Delete

[335] Fix | Delete

};

[336] Fix | Delete

};

[337] Fix | Delete

export default new SmushProgressBar();

[338] Fix | Delete

[339] Fix | Delete