first
This commit is contained in:
222
wp-content/plugins/wp-smushit/_src/js/common/globalStats.js
Normal file
222
wp-content/plugins/wp-smushit/_src/js/common/globalStats.js
Normal file
@ -0,0 +1,222 @@
|
||||
/* global WP_Smush */
|
||||
export const UpsellManger = ( () => {
|
||||
return {
|
||||
maybeShowCDNActivationNotice() {
|
||||
if ( ! wp_smush_msgs.smush_cdn_activation_notice ) {
|
||||
return;
|
||||
}
|
||||
WP_Smush.helpers.renderActivationCDNNotice( wp_smush_msgs.smush_cdn_activation_notice );
|
||||
},
|
||||
maybeShowCDNUpsellForPreSiteOnStart() {
|
||||
const upsellCdn = document.querySelector( '.wp-smush-upsell-cdn' );
|
||||
if ( upsellCdn ) {
|
||||
upsellCdn.querySelector( 'p' ).innerHTML = wp_smush_msgs.processing_cdn_for_free;
|
||||
upsellCdn.classList.remove( 'sui-hidden' );
|
||||
}
|
||||
},
|
||||
maybeShowCDNUpsellForPreSiteOnCompleted() {
|
||||
const upsellCdn = document.querySelector( '.wp-smush-upsell-cdn' );
|
||||
if ( upsellCdn ) {
|
||||
upsellCdn.querySelector( 'p' ).innerHTML = wp_smush_msgs.processed_cdn_for_free;
|
||||
upsellCdn.classList.remove( 'sui-hidden' );
|
||||
}
|
||||
}
|
||||
};
|
||||
} )();
|
||||
export const GlobalStats = ( () => {
|
||||
const $ = document.querySelector.bind( document );
|
||||
const summarySmush = $( '.sui-summary-smush-metabox' );
|
||||
if ( ! summarySmush ) {
|
||||
return {};
|
||||
}
|
||||
// Cache initial stats.
|
||||
let boStats = window.wp_smushit_data.bo_stats;
|
||||
let globalStats = {
|
||||
count_images: 0,
|
||||
count_total: 0,
|
||||
count_resize: 0,
|
||||
count_skipped: 0,
|
||||
count_smushed: 0,
|
||||
savings_bytes: 0,
|
||||
savings_resize: 0,
|
||||
size_after: 0,
|
||||
size_before: 0,
|
||||
savings_percent: 0,
|
||||
percent_grade: 'sui-grade-dismissed',
|
||||
percent_metric: 0,
|
||||
percent_optimized: 0,
|
||||
remaining_count: 0,
|
||||
human_bytes: '',
|
||||
savings_conversion_human: '',
|
||||
savings_conversion: 0,
|
||||
};
|
||||
|
||||
const imageScore = $( '#smush-image-score' );
|
||||
const logBulk = $( '.smush-final-log .smush-bulk-errors' );
|
||||
const bulkSmushCountContent = $( '#wp-smush-bulk-content' );
|
||||
let allErrors = {};
|
||||
|
||||
const generateGlobalStatsFromSmushData = ( smushScriptData ) => {
|
||||
window.wp_smushit_data = Object.assign( window.wp_smushit_data, smushScriptData || {} );
|
||||
globalStats = Object.keys( globalStats ).reduce( function( newStats, key ) {
|
||||
if ( key in window.wp_smushit_data ) {
|
||||
newStats[ key ] = window.wp_smushit_data[ key ];
|
||||
}
|
||||
return newStats;
|
||||
}, {} );
|
||||
}
|
||||
|
||||
generateGlobalStatsFromSmushData( window.wp_smushit_data );
|
||||
|
||||
return {
|
||||
isChangedStats( newBoStats ) {
|
||||
const primaryKeys = [ 'total_items', 'processed_items', 'failed_items', 'is_cancelled', 'is_completed' ];
|
||||
return primaryKeys.some( ( key ) => {
|
||||
return newBoStats[ key ] !== boStats[ key ];
|
||||
} );
|
||||
},
|
||||
setBoStats( newBoStats ) {
|
||||
boStats = Object.assign( boStats, newBoStats || {} );
|
||||
return this;
|
||||
},
|
||||
getBoStats() {
|
||||
return boStats;
|
||||
},
|
||||
setGlobalStats( newGlobalStats ) {
|
||||
globalStats = Object.assign( globalStats, newGlobalStats || {} );
|
||||
return this;
|
||||
},
|
||||
getGlobalStats() {
|
||||
return globalStats;
|
||||
},
|
||||
/**
|
||||
* Circle progress bar.
|
||||
*/
|
||||
renderScoreProgress() {
|
||||
imageScore.className = imageScore.className.replace( /(^|\s)sui-grade-\S+/g, '' );
|
||||
imageScore.classList.add( globalStats.percent_grade );
|
||||
imageScore.dataset.score = globalStats.percent_optimized;
|
||||
imageScore.querySelector( '.sui-circle-score-label' ).innerHTML = globalStats.percent_optimized;
|
||||
|
||||
imageScore
|
||||
.querySelector( 'circle:last-child' )
|
||||
.setAttribute( 'style', '--metric-array:' + ( 2.63893782902 * globalStats.percent_metric ) + ' ' + ( 263.893782902 - globalStats.percent_metric ) );
|
||||
},
|
||||
/**
|
||||
* Summary detail - center meta box.
|
||||
*/
|
||||
renderSummaryDetail() {
|
||||
this.renderTotalStats();
|
||||
this.renderResizedStats();
|
||||
this.renderConversionSavings();
|
||||
},
|
||||
renderTotalStats() {
|
||||
// Total savings.
|
||||
summarySmush.querySelector( '.sui-summary-large.wp-smush-stats-human' ).innerHTML = globalStats.human_bytes;
|
||||
// Update the savings percent.
|
||||
summarySmush.querySelector( '.wp-smush-savings .wp-smush-stats-percent' ).innerHTML = globalStats.savings_percent;
|
||||
// To total smushed images files.
|
||||
summarySmush.querySelector( '.wp-smush-count-total .wp-smush-total-optimised' ).innerHTML = globalStats.count_images;
|
||||
},
|
||||
renderResizedStats() {
|
||||
const resizeCountElement = summarySmush.querySelector( '.wp-smush-count-resize-total' );
|
||||
if ( ! resizeCountElement ) {
|
||||
return;
|
||||
}
|
||||
if ( globalStats.count_resize > 0 ) {
|
||||
resizeCountElement.classList.remove( 'sui-hidden' );
|
||||
} else {
|
||||
resizeCountElement.classList.add( 'sui-hidden' );
|
||||
}
|
||||
resizeCountElement.querySelector( '.wp-smush-total-optimised' ).innerHTML = globalStats.count_resize;
|
||||
},
|
||||
renderConversionSavings() {
|
||||
// PNG2JPG Savings.
|
||||
const conversionSavingsElement = summarySmush.querySelector( '.smush-conversion-savings .wp-smush-stats' );
|
||||
if ( ! conversionSavingsElement ) {
|
||||
return;
|
||||
}
|
||||
conversionSavingsElement.innerHTML = globalStats.savings_conversion_human;
|
||||
if ( globalStats.savings_conversion > 0 ) {
|
||||
conversionSavingsElement.parentElement.classList.remove( 'sui-hidden' );
|
||||
} else {
|
||||
conversionSavingsElement.parentElement.classList.add( 'sui-hidden' );
|
||||
}
|
||||
},
|
||||
renderBoxSummary() {
|
||||
// Circle core progress.
|
||||
this.renderScoreProgress();
|
||||
// Summary detail.
|
||||
this.renderSummaryDetail();
|
||||
},
|
||||
setErrors( newErrors ) {
|
||||
allErrors = newErrors || {};
|
||||
},
|
||||
getErrors() {
|
||||
return allErrors;
|
||||
},
|
||||
renderErrors() {
|
||||
if ( ! Object.keys( allErrors ).length || ! boStats.is_completed ) {
|
||||
return;
|
||||
}
|
||||
const errors = [];
|
||||
const errorKeys = Object.keys( allErrors );
|
||||
// Cache error code to avoid double upsell notice.
|
||||
let showAnimatedUpsell = false;
|
||||
errorKeys.map( ( image_id, index ) => {
|
||||
const upsellErrorCode = allErrors[ image_id ].error_code;
|
||||
if ( index < 5 && 'animated' === upsellErrorCode ) {
|
||||
showAnimatedUpsell = true;
|
||||
}
|
||||
errors.push( WP_Smush.helpers.prepareBulkSmushErrorRow(
|
||||
allErrors[ image_id ].error_message,
|
||||
allErrors[ image_id ].file_name,
|
||||
allErrors[ image_id ].thumbnail,
|
||||
image_id,
|
||||
'media',
|
||||
allErrors[ image_id ].error_code,
|
||||
) );
|
||||
}
|
||||
);
|
||||
logBulk.innerHTML = errors.join( '' );
|
||||
logBulk.parentElement.classList.remove( 'sui-hidden' );
|
||||
logBulk.parentElement.style.display = null;
|
||||
// Show view all.
|
||||
if ( errorKeys.length > 1 ) {
|
||||
$( '.smush-bulk-errors-actions' ).classList.remove( 'sui-hidden' );
|
||||
}
|
||||
|
||||
// Show animated upsell CDN if user disabled CDN and found an animated error in first 5 errors.
|
||||
if ( showAnimatedUpsell ) {
|
||||
UpsellManger.maybeShowCDNActivationNotice();
|
||||
}
|
||||
},
|
||||
resetAndHideBulkErrors() {
|
||||
if ( ! logBulk ) {
|
||||
return;
|
||||
}
|
||||
this.resetErrors();
|
||||
logBulk.parentElement.classList.add( 'sui-hidden' );
|
||||
logBulk.innerHTML = '';
|
||||
},
|
||||
resetErrors() {
|
||||
allErrors = {};
|
||||
},
|
||||
renderStats() {
|
||||
// Render Smush box summary.
|
||||
this.renderBoxSummary();
|
||||
// Render Errors.
|
||||
this.renderErrors();
|
||||
},
|
||||
maybeUpdateBulkSmushCountContent( newContent ) {
|
||||
if ( newContent && bulkSmushCountContent ) {
|
||||
bulkSmushCountContent.innerHTML = newContent;
|
||||
}
|
||||
},
|
||||
updateGlobalStatsFromSmushScriptData( smushScriptData ) {
|
||||
this.maybeUpdateBulkSmushCountContent( smushScriptData?.content );
|
||||
generateGlobalStatsFromSmushData( smushScriptData );
|
||||
return this;
|
||||
},
|
||||
};
|
||||
} )();
|
||||
@ -0,0 +1,267 @@
|
||||
/* global WP_Smush */
|
||||
|
||||
/**
|
||||
* Abstract Media Library Scanner.
|
||||
*
|
||||
*/
|
||||
import Fetcher from '../utils/fetcher';
|
||||
import { scanProgressBar } from './progressbar';
|
||||
import { GlobalStats } from './globalStats';
|
||||
const { __ } = wp.i18n;
|
||||
export default class MediaLibraryScanner {
|
||||
constructor() {
|
||||
this.autoSyncDuration = 1500;
|
||||
this.progressTimeoutId = 0;
|
||||
this.scanProgress = scanProgressBar( this.autoSyncDuration );
|
||||
}
|
||||
|
||||
startScan( optimizeOnScanCompleted = false ) {
|
||||
this.onStart();
|
||||
return Fetcher.scanMediaLibrary.start( optimizeOnScanCompleted ).then( ( response ) => {
|
||||
if ( ! response?.success ) {
|
||||
this.onStartFailure( response );
|
||||
return;
|
||||
}
|
||||
this.showProgressBar().autoSyncStatus();
|
||||
} );
|
||||
}
|
||||
|
||||
onStart() {
|
||||
// Do nothing at the moment.
|
||||
}
|
||||
|
||||
onStartFailure( response ) {
|
||||
WP_Smush.helpers.showNotice( response, {
|
||||
showdismiss: true,
|
||||
autoclose: false,
|
||||
} );
|
||||
}
|
||||
|
||||
showProgressBar() {
|
||||
this.onShowProgressBar();
|
||||
this.scanProgress.reset().setOnCancelCallback( this.showStopScanningModal.bind( this ) ).open();
|
||||
return this;
|
||||
}
|
||||
|
||||
onShowProgressBar() {
|
||||
// Do nothing at the moment.
|
||||
}
|
||||
|
||||
showStopScanningModal() {
|
||||
if ( ! window.SUI ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.onShowStopScanningModal();
|
||||
|
||||
window.SUI.openModal(
|
||||
'smush-stop-scanning-dialog',
|
||||
'wpbody-content',
|
||||
undefined,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
onShowStopScanningModal() {
|
||||
this.registerCancelProcessEvent();
|
||||
}
|
||||
|
||||
registerCancelProcessEvent() {
|
||||
const stopScanButton = document.querySelector( '.smush-stop-scanning-dialog-button' );
|
||||
if ( ! stopScanButton ) {
|
||||
return;
|
||||
}
|
||||
|
||||
stopScanButton.addEventListener( 'click', this.cancelProgress.bind( this ) );
|
||||
}
|
||||
|
||||
closeStopScanningModal() {
|
||||
if ( ! window.SUI ) {
|
||||
return;
|
||||
}
|
||||
const stopScanningElement = document.querySelector( '#smush-stop-scanning-dialog' );
|
||||
const isModalClosed = ( ! stopScanningElement ) || ! stopScanningElement.classList.contains( 'sui-content-fade-in' );
|
||||
if ( isModalClosed ) {
|
||||
return;
|
||||
}
|
||||
window.SUI.closeModal( 'smush-stop-scanning-dialog' );
|
||||
}
|
||||
|
||||
closeProgressBar() {
|
||||
this.onCloseProgressBar();
|
||||
this.scanProgress.close();
|
||||
}
|
||||
|
||||
onCloseProgressBar() {
|
||||
// Do nothing at the moment.
|
||||
}
|
||||
|
||||
updateProgress( stats ) {
|
||||
const totalItems = this.getTotalItems( stats );
|
||||
const processedItems = this.getProcessedItems( stats );
|
||||
|
||||
return this.scanProgress.update( processedItems, totalItems );
|
||||
}
|
||||
|
||||
getProcessedItems( stats ) {
|
||||
return stats?.processed_items || 0;
|
||||
}
|
||||
|
||||
getTotalItems( stats ) {
|
||||
return stats?.total_items || 0;
|
||||
}
|
||||
|
||||
cancelProgress() {
|
||||
this.scanProgress.setCancelButtonOnCancelling();
|
||||
return Fetcher.scanMediaLibrary.cancel().then( ( response ) => {
|
||||
if ( ! response?.success ) {
|
||||
this.onCancelFailure( response );
|
||||
return;
|
||||
}
|
||||
this.onCancelled( response.data );
|
||||
} );
|
||||
}
|
||||
|
||||
onCancelFailure( response ) {
|
||||
WP_Smush.helpers.showNotice( response, {
|
||||
showdismiss: true,
|
||||
autoclose: false,
|
||||
} );
|
||||
this.scanProgress.resetCancelButtonOnFailure();
|
||||
}
|
||||
|
||||
getErrorProgressMessage() {
|
||||
return __( 'Unfortunately the scan hit an error due to limited resources on your site, we have adjusted the scan to use fewer resources the next time.', 'wp-smushit' );
|
||||
}
|
||||
|
||||
onDead( stats ) {
|
||||
this.clearProgressTimeout();
|
||||
this.closeProgressBar();
|
||||
this.closeStopScanningModal();
|
||||
this.showRetryScanModal();
|
||||
}
|
||||
|
||||
showRetryScanModal() {
|
||||
const retryScanModalElement = document.getElementById( 'smush-retry-scan-notice' );
|
||||
if ( ! window.SUI || ! retryScanModalElement ) {
|
||||
return;
|
||||
}
|
||||
|
||||
retryScanModalElement.querySelector('.smush-retry-scan-notice-button').onclick = (e) => {
|
||||
window.SUI.closeModal( 'smush-retry-scan-notice' );
|
||||
const recheckImagesBtn = document.querySelector( '.wp-smush-scan' );
|
||||
if ( ! recheckImagesBtn ) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
recheckImagesBtn.click();
|
||||
}
|
||||
|
||||
window.SUI.openModal(
|
||||
'smush-retry-scan-notice',
|
||||
'wpbody-content',
|
||||
undefined,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
onCompleted( stats ) {
|
||||
this.onFinish( stats );
|
||||
}
|
||||
|
||||
onCancelled( stats ) {
|
||||
this.onFinish( stats );
|
||||
}
|
||||
|
||||
onFinish( stats ) {
|
||||
this.clearProgressTimeout();
|
||||
const globalStats = stats?.global_stats;
|
||||
this.updateGlobalStatsAndBulkContent( globalStats );
|
||||
this.closeProgressBar();
|
||||
this.closeStopScanningModal();
|
||||
}
|
||||
|
||||
clearProgressTimeout() {
|
||||
if ( this.progressTimeoutId ) {
|
||||
clearTimeout( this.progressTimeoutId );
|
||||
}
|
||||
}
|
||||
|
||||
updateGlobalStatsAndBulkContent( globalStats ) {
|
||||
if ( ! globalStats ) {
|
||||
return;
|
||||
}
|
||||
GlobalStats.updateGlobalStatsFromSmushScriptData( globalStats );
|
||||
GlobalStats.renderStats();
|
||||
}
|
||||
|
||||
getStatus() {
|
||||
return Fetcher.scanMediaLibrary.getScanStatus();
|
||||
}
|
||||
|
||||
autoSyncStatus() {
|
||||
const startTime = new Date().getTime();
|
||||
this.getStatus().then( ( response ) => {
|
||||
if ( ! response?.success ) {
|
||||
return;
|
||||
}
|
||||
const stats = response.data;
|
||||
|
||||
if ( stats.is_dead ) {
|
||||
this.onDead( response.data );
|
||||
return;
|
||||
}
|
||||
|
||||
this.beforeUpdateStatus( stats );
|
||||
|
||||
this.updateProgress( stats ).then( () => {
|
||||
this.scanProgress.increaseDurationToHaveChangeOnProgress( new Date().getTime() - startTime );
|
||||
|
||||
const isCompleted = stats?.is_completed;
|
||||
if ( isCompleted ) {
|
||||
this.onCompleted( stats );
|
||||
return;
|
||||
}
|
||||
const isCancelled = stats?.is_cancelled;
|
||||
if ( isCancelled ) {
|
||||
this.onCancelled( stats );
|
||||
return;
|
||||
}
|
||||
|
||||
this.progressTimeoutId = setTimeout( () => this.autoSyncStatus(), this.autoSyncDuration );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
beforeUpdateStatus() {
|
||||
// Do nothing at the moment.
|
||||
}
|
||||
|
||||
setInnerText( element, newText ) {
|
||||
if ( ! element ) {
|
||||
return;
|
||||
}
|
||||
element.dataset.originalText = element.dataset.originalText || element.innerText.trim();
|
||||
element.innerText = newText;
|
||||
}
|
||||
|
||||
revertInnerText( element ) {
|
||||
if ( ! element || ! element.dataset.originalText ) {
|
||||
return;
|
||||
}
|
||||
element.innerText = element.dataset.originalText.trim();
|
||||
}
|
||||
|
||||
hideAnElement( element ) {
|
||||
if ( element ) {
|
||||
element.classList.add( 'sui-hidden' );
|
||||
}
|
||||
}
|
||||
|
||||
showAnElement( element ) {
|
||||
if ( element ) {
|
||||
element.classList.remove( 'sui-hidden' );
|
||||
}
|
||||
}
|
||||
}
|
||||
302
wp-content/plugins/wp-smushit/_src/js/common/progressbar.js
Normal file
302
wp-content/plugins/wp-smushit/_src/js/common/progressbar.js
Normal file
@ -0,0 +1,302 @@
|
||||
/* global WP_Smush */
|
||||
|
||||
/**
|
||||
* SmushProgressBar
|
||||
* TODO: Update progressbar for free version.
|
||||
*
|
||||
* @param autoSyncDuration
|
||||
*/
|
||||
export const scanProgressBar = ( autoSyncDuration ) => {
|
||||
const { __, _n } = wp.i18n;
|
||||
const scanProgressBar = document.querySelector( '.wp-smush-scan-progress-bar-wrapper' );
|
||||
const percentElement = scanProgressBar.querySelector( '.wp-smush-progress-percent' );
|
||||
const progressElement = scanProgressBar.querySelector( '.wp-smush-progress-inner' );
|
||||
const remainingTimeElement = scanProgressBar.querySelector( '.wp-smush-remaining-time' );
|
||||
const cancelBtn = scanProgressBar.querySelector( '.wp-smush-cancel-scan-progress-btn' );
|
||||
const holdOnNoticeElement = scanProgressBar.querySelector( '.wp-smush-scan-hold-on-notice' );
|
||||
let onCancelCallback = () => {};
|
||||
let intervalProgressAnimation = 0;
|
||||
// It should be smaller than autoSyncDuration.
|
||||
const progressTransitionDuration = autoSyncDuration - 300;//1200
|
||||
scanProgressBar.style.setProperty( '--progress-transition-duration', progressTransitionDuration / 1000 + 's' );
|
||||
|
||||
let prevProcessedItems = window.wp_smushit_data?.media_library_scan?.processed_items || 0;
|
||||
const cacheProcessTimePerItem = [];
|
||||
let durationToHaveChangeOnProgress = autoSyncDuration;
|
||||
let timeLimitToShowNotice = autoSyncDuration * 10;// 15s.
|
||||
return {
|
||||
update( processedItems, totalItems ) {
|
||||
this.updateRemainingTime( processedItems, totalItems );
|
||||
|
||||
let width = ( totalItems && Math.floor( processedItems / totalItems * 100 ) ) || 0;
|
||||
width = Math.min( width, 100 );
|
||||
|
||||
let currentWidth = progressElement.style.width;
|
||||
currentWidth = ( currentWidth && currentWidth.replace( '%', '' ) ) || 0;
|
||||
progressElement.style.width = width + '%';
|
||||
|
||||
return this.animateProgressBar( currentWidth, width );
|
||||
},
|
||||
animateProgressBar( currentWidth, width ) {
|
||||
if ( intervalProgressAnimation ) {
|
||||
clearInterval( intervalProgressAnimation );
|
||||
}
|
||||
return new Promise( ( resolve ) => {
|
||||
const delayTime = progressTransitionDuration / ( width - currentWidth );
|
||||
intervalProgressAnimation = setInterval( () => {
|
||||
// Progress bar label.
|
||||
percentElement.innerHTML = currentWidth + '%';
|
||||
currentWidth++;
|
||||
if ( currentWidth > width ) {
|
||||
resolve();
|
||||
clearInterval( intervalProgressAnimation );
|
||||
}
|
||||
}, delayTime );
|
||||
} );
|
||||
},
|
||||
updateRemainingTime( processedItems, totalItems ) {
|
||||
if ( ! remainingTimeElement ) {
|
||||
return;
|
||||
}
|
||||
const processTimePerItem = this.calcProcessTimePerItem( processedItems ) || 500;
|
||||
const remainingTime = processTimePerItem * ( totalItems - processedItems );
|
||||
remainingTimeElement.innerText = this.formatTime( remainingTime );
|
||||
},
|
||||
calcProcessTimePerItem( processedItems ) {
|
||||
if ( ! processedItems ) {
|
||||
return;
|
||||
}
|
||||
prevProcessedItems = prevProcessedItems <= processedItems ? prevProcessedItems : 0;
|
||||
if ( prevProcessedItems != processedItems ) {
|
||||
const processTimePerItem = Math.floor( durationToHaveChangeOnProgress / ( processedItems - prevProcessedItems ) );
|
||||
|
||||
prevProcessedItems = processedItems;
|
||||
cacheProcessTimePerItem.push( processTimePerItem );
|
||||
this.resetDurationToHaveChangeOnProgress();
|
||||
} else {
|
||||
this.increaseDurationToHaveChangeOnProgress( autoSyncDuration );
|
||||
}
|
||||
|
||||
if ( ! cacheProcessTimePerItem.length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
return cacheProcessTimePerItem.reduce(
|
||||
( accumulator, processTime ) => accumulator + processTime, 0
|
||||
) / cacheProcessTimePerItem.length;
|
||||
},
|
||||
increaseDurationToHaveChangeOnProgress( increaseTime ) {
|
||||
durationToHaveChangeOnProgress += increaseTime;
|
||||
if ( durationToHaveChangeOnProgress > timeLimitToShowNotice ) {
|
||||
this.showHoldOnNotice();
|
||||
}
|
||||
},
|
||||
showHoldOnNotice() {
|
||||
holdOnNoticeElement.classList.remove( 'sui-hidden' );
|
||||
timeLimitToShowNotice = 100000000;
|
||||
},
|
||||
resetHoldOnNoticeVisibility() {
|
||||
holdOnNoticeElement.classList.add( 'sui-hidden' );
|
||||
},
|
||||
resetDurationToHaveChangeOnProgress() {
|
||||
durationToHaveChangeOnProgress = autoSyncDuration;
|
||||
},
|
||||
formatTime( totalMilliSeconds ) {
|
||||
const totalSeconds = Math.floor( ( totalMilliSeconds + progressTransitionDuration ) / 1000 );
|
||||
const seconds = totalSeconds % 60;
|
||||
const minutes = Math.floor( totalSeconds / 60 );
|
||||
|
||||
let timeString = '';
|
||||
if ( minutes ) {
|
||||
timeString += minutes + ' ' + _n( 'minute', 'minutes', minutes, 'wp-smushit' );
|
||||
}
|
||||
|
||||
timeString += ' ' + seconds + ' ' + _n( 'second', 'seconds', seconds, 'wp-smushit' );
|
||||
|
||||
return timeString.trim();
|
||||
},
|
||||
reset() {
|
||||
progressElement.style.width = '0%';
|
||||
percentElement.innerHTML = '0%';
|
||||
|
||||
this.resetCancelButton();
|
||||
this.resetHoldOnNoticeVisibility();
|
||||
return this;
|
||||
},
|
||||
open() {
|
||||
cancelBtn.onclick = onCancelCallback;
|
||||
scanProgressBar.classList.remove( 'sui-hidden' );
|
||||
},
|
||||
close() {
|
||||
scanProgressBar.classList.add( 'sui-hidden' );
|
||||
this.reset();
|
||||
},
|
||||
setOnCancelCallback( callBack ) {
|
||||
if ( 'function' !== typeof callBack ) {
|
||||
return;
|
||||
}
|
||||
onCancelCallback = callBack;
|
||||
return this;
|
||||
},
|
||||
setCancelButtonLabel( textContent ) {
|
||||
cancelBtn.textContent = textContent;
|
||||
return this;
|
||||
},
|
||||
setCancelButtonOnCancelling() {
|
||||
this.setCancelButtonLabel( wp_smush_msgs.cancelling );
|
||||
this.setOnCancelCallback( () => false );
|
||||
cancelBtn.setAttribute( 'disabled', true );
|
||||
},
|
||||
resetCancelButton() {
|
||||
this.setOnCancelCallback( () => {} );
|
||||
this.resetCancelButtonLabel();
|
||||
cancelBtn.removeAttribute( 'disabled' );
|
||||
},
|
||||
resetCancelButtonLabel() {
|
||||
this.setCancelButtonLabel( __( 'Cancel Scan', 'wp-smushit' ) );
|
||||
},
|
||||
resetCancelButtonOnFailure() {
|
||||
this.resetCancelButtonLabel();
|
||||
cancelBtn.removeAttribute( 'disabled' );
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const SmushProgressBar = () => {
|
||||
'use strict';
|
||||
const progressBar = document.querySelector( '.wp-smush-bulk-progress-bar-wrapper' );
|
||||
if ( ! progressBar ) {
|
||||
return {
|
||||
isEmptyObject: true,
|
||||
};
|
||||
}
|
||||
const cancelBtn = progressBar.querySelector( '.wp-smush-cancel-btn' );
|
||||
const bulkSmushDescription = document.querySelector( '.wp-smush-bulk-wrapper' );
|
||||
const bulkRunningNotice = progressBar.querySelector( '#wp-smush-running-notice' );
|
||||
const bulkSmushAllDone = document.querySelector( '.wp-smush-all-done' );
|
||||
let isStateHidden = false;
|
||||
let onCancelCallback = () => {};
|
||||
|
||||
return {
|
||||
/**
|
||||
* Update progress bar.
|
||||
*
|
||||
* @param {number} processedItems
|
||||
* @param {number} totalItems
|
||||
*/
|
||||
update( processedItems, totalItems ) {
|
||||
let width = totalItems && Math.floor( processedItems / totalItems * 100 ) || 0;
|
||||
width = Math.min( width, 100 );
|
||||
|
||||
// Progress bar label.
|
||||
progressBar.querySelector( '.wp-smush-images-percent' ).innerHTML = width + '%';
|
||||
// Progress bar.
|
||||
progressBar.querySelector( '.wp-smush-progress-inner' ).style.width = width + '%';
|
||||
|
||||
// Update processed/total.
|
||||
const processStateStats = progressBar.querySelector( '.sui-progress-state-text' );
|
||||
processStateStats.firstElementChild.innerHTML = processedItems;
|
||||
processStateStats.lastElementChild.innerHTML = totalItems;
|
||||
|
||||
return this;
|
||||
},
|
||||
close() {
|
||||
progressBar.classList.add( 'sui-hidden' );
|
||||
this.setCancelButtonLabel( window.wp_smush_msgs.cancel )
|
||||
.setOnCancelCallback( () => {} )
|
||||
.update( 0, 0 );
|
||||
this.resetOriginalNotice();
|
||||
return this;
|
||||
},
|
||||
show() {
|
||||
// Show progress bar.
|
||||
cancelBtn.onclick = onCancelCallback;
|
||||
progressBar.classList.remove( 'sui-hidden' );
|
||||
this.hideBulkSmushDescription();
|
||||
this.hideBulkSmushAllDone();
|
||||
this.hideRecheckImagesNotice();
|
||||
},
|
||||
setCancelButtonLabel( textContent ) {
|
||||
cancelBtn.textContent = textContent;
|
||||
return this;
|
||||
},
|
||||
showBulkSmushDescription() {
|
||||
bulkSmushDescription.classList.remove( 'sui-hidden' );
|
||||
},
|
||||
hideBulkSmushDescription() {
|
||||
bulkSmushDescription.classList.add( 'sui-hidden' );
|
||||
},
|
||||
showBulkSmushAllDone() {
|
||||
bulkSmushAllDone.classList.remove( 'sui-hidden' );
|
||||
},
|
||||
hideBulkSmushAllDone() {
|
||||
bulkSmushAllDone.classList.add( 'sui-hidden' );
|
||||
},
|
||||
hideState() {
|
||||
if ( isStateHidden ) {
|
||||
return this;
|
||||
}
|
||||
isStateHidden = true;
|
||||
progressBar.querySelector( '.sui-progress-state' ).classList.add( 'sui-hidden' );
|
||||
return this;
|
||||
},
|
||||
showState() {
|
||||
if ( ! isStateHidden ) {
|
||||
return this;
|
||||
}
|
||||
isStateHidden = false;
|
||||
progressBar.querySelector( '.sui-progress-state' ).classList.remove( 'sui-hidden' );
|
||||
return this;
|
||||
},
|
||||
setNotice( inProcessNotice ) {
|
||||
const progressMessage = bulkRunningNotice.querySelector( '.sui-notice-message p' );
|
||||
this.cacheOriginalNotice( progressMessage );
|
||||
progressMessage.innerHTML = inProcessNotice;
|
||||
return this;
|
||||
},
|
||||
cacheOriginalNotice( progressMessage ) {
|
||||
if ( bulkRunningNotice.dataset.progressMessage ) {
|
||||
return;
|
||||
}
|
||||
bulkRunningNotice.dataset.progressMessage = progressMessage.innerHTML;
|
||||
},
|
||||
resetOriginalNotice() {
|
||||
if ( ! bulkRunningNotice.dataset.progressMessage ) {
|
||||
return;
|
||||
}
|
||||
const progressMessage = bulkRunningNotice.querySelector( '.sui-notice-message p' );
|
||||
progressMessage.innerHTML = bulkRunningNotice.dataset.progressMessage;
|
||||
},
|
||||
hideBulkProcessingNotice() {
|
||||
bulkRunningNotice.classList.add( 'sui-hidden' );
|
||||
return this;
|
||||
},
|
||||
showBulkProcessingNotice() {
|
||||
bulkRunningNotice.classList.remove( 'sui-hidden' );
|
||||
return this;
|
||||
},
|
||||
setCountUnitText( unitText ) {
|
||||
const progressUnit = progressBar.querySelector( '.sui-progress-state-unit' );
|
||||
progressUnit.innerHTML = unitText;
|
||||
},
|
||||
setOnCancelCallback( callBack ) {
|
||||
if ( 'function' !== typeof callBack ) {
|
||||
return;
|
||||
}
|
||||
onCancelCallback = callBack;
|
||||
return this;
|
||||
},
|
||||
disableExceedLimitMode() {
|
||||
progressBar.classList.remove( 'wp-smush-exceed-limit' );
|
||||
progressBar.querySelector( '#bulk-smush-resume-button' ).classList.add( 'sui-hidden' );
|
||||
},
|
||||
hideRecheckImagesNotice() {
|
||||
const recheckImagesNoticeElement = document.querySelector( '.wp-smush-recheck-images-notice-box' );
|
||||
if ( recheckImagesNoticeElement ) {
|
||||
recheckImagesNoticeElement.classList.add( 'sui-hidden' );
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
export default new SmushProgressBar();
|
||||
Reference in New Issue
Block a user