386 lines
11 KiB
JavaScript
386 lines
11 KiB
JavaScript
|
/* global WP_Smush */
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Scan Media Library.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
import SmushProgress from '../common/progressbar';
|
||
|
|
import MediaLibraryScanner from '../common/media-library-scanner';
|
||
|
|
import { GlobalStats } from '../common/globalStats';
|
||
|
|
|
||
|
|
( function() {
|
||
|
|
'use strict';
|
||
|
|
if ( ! window.wp_smush_msgs ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const $ = document.querySelector.bind( document );
|
||
|
|
const existScanProgressBar = $( '.wp-smush-scan-progress-bar-wrapper' );
|
||
|
|
if ( ! existScanProgressBar ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const recheckImagesBtn = $( '.wp-smush-scan' );
|
||
|
|
if ( ! recheckImagesBtn ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const bulkSmushButton = $( '.wp-smush-bo-start' ) || $( '.wp-smush-bulk-wrapper .wp-smush-all' );
|
||
|
|
const { __ } = wp.i18n;
|
||
|
|
|
||
|
|
class MediaLibraryScannerOnBulkSmush extends MediaLibraryScanner {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.runBulkSmushOnComplete = false;
|
||
|
|
this.restoreButton = $( '.wp-smush-restore' );
|
||
|
|
this.autoBulkSmushNotification = $( '.wp-smush-auto-bulk-smush-notification' );
|
||
|
|
}
|
||
|
|
|
||
|
|
startScanThenBulkSmushOnComplete() {
|
||
|
|
this.runBulkSmushOnComplete = true;
|
||
|
|
return this.startScan( true );
|
||
|
|
}
|
||
|
|
|
||
|
|
onStart() {
|
||
|
|
this.hideRecheckNotice();
|
||
|
|
this.disableRelatedButtons();
|
||
|
|
this.setRecheckImagesButtonOnLoad();
|
||
|
|
this.toggleBulkSmushBoxContent();
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
onStartFailure( response ) {
|
||
|
|
super.onStartFailure( response );
|
||
|
|
this.revertRelatedButtons();
|
||
|
|
}
|
||
|
|
|
||
|
|
onCloseProgressBar() {
|
||
|
|
this.maybeHideAutoBulkSmushNotification();
|
||
|
|
}
|
||
|
|
|
||
|
|
disableRelatedButtons() {
|
||
|
|
this.restoreButton.setAttribute( 'disabled', true );
|
||
|
|
if ( bulkSmushButton ) {
|
||
|
|
bulkSmushButton.setAttribute( 'disabled', true );
|
||
|
|
this.setInnerText( bulkSmushButton, __( 'Waiting for Re-check to finish', 'wp-smushit' ) );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
revertRelatedButtons() {
|
||
|
|
if ( bulkSmushButton ) {
|
||
|
|
bulkSmushButton.removeAttribute( 'disabled' );
|
||
|
|
this.revertInnerText( bulkSmushButton );
|
||
|
|
}
|
||
|
|
this.restoreButton.removeAttribute( 'disabled' );
|
||
|
|
this.revertRecheckImagesButton();
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
setRecheckImagesButtonOnLoad() {
|
||
|
|
// recheckImagesBtn.classList.add( 'sui-button-onload' );
|
||
|
|
this.disableRecheckImagesButton();
|
||
|
|
this.setInnerText( recheckImagesBtn.querySelector( '.wp-smush-inner-text' ), __( 'Checking Images', 'wp-smushit' ) );
|
||
|
|
}
|
||
|
|
|
||
|
|
disableRecheckImagesButton() {
|
||
|
|
recheckImagesBtn.setAttribute( 'disabled', true );
|
||
|
|
}
|
||
|
|
|
||
|
|
revertRecheckImagesButton() {
|
||
|
|
// recheckImagesBtn.classList.remove( 'sui-button-onload' );
|
||
|
|
recheckImagesBtn.removeAttribute( 'disabled' );
|
||
|
|
this.revertInnerText( recheckImagesBtn.querySelector( '.wp-smush-inner-text' ) );
|
||
|
|
}
|
||
|
|
|
||
|
|
beforeUpdateStatus( stats ) {
|
||
|
|
this.runBulkSmushOnComplete = stats?.optimize_on_scan_completed;
|
||
|
|
this.maybeShowAutoBulkSmushNotification();
|
||
|
|
}
|
||
|
|
|
||
|
|
onDead( stats ) {
|
||
|
|
super.onDead( stats );
|
||
|
|
this.revertRelatedButtons();
|
||
|
|
this.setRequiredScanForBulkSmushButton();
|
||
|
|
}
|
||
|
|
|
||
|
|
onFinish( stats ) {
|
||
|
|
const globalStats = stats.global_stats;
|
||
|
|
super.onFinish( stats );
|
||
|
|
this.revertRelatedButtons();
|
||
|
|
this.toggleBulkSmushDescription( globalStats );
|
||
|
|
if ( globalStats.is_outdated ) {
|
||
|
|
this.setRequiredScanForBulkSmushButton();
|
||
|
|
} else {
|
||
|
|
this.removeScanEventFromBulkSmushButton();
|
||
|
|
}
|
||
|
|
|
||
|
|
this.revertRecheckWarning();
|
||
|
|
}
|
||
|
|
|
||
|
|
onCompleted( stats ) {
|
||
|
|
const requiredReloadPage = ! bulkSmushButton;
|
||
|
|
if ( requiredReloadPage ) {
|
||
|
|
window.location.reload();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.onFinish( stats );
|
||
|
|
const globalStats = stats.global_stats;
|
||
|
|
const allImagesSmushed = globalStats.remaining_count < 1;
|
||
|
|
if ( allImagesSmushed ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( ! this.runBulkSmushOnComplete ) {
|
||
|
|
this.showRecheckNoticeSuccess();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.runBulkSmushOnComplete = false;
|
||
|
|
|
||
|
|
this.triggerBulkSmushEvent( stats );
|
||
|
|
}
|
||
|
|
|
||
|
|
showNotice( stats ) {
|
||
|
|
if ( ! stats.notice ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let type = 'success';
|
||
|
|
if ( 'undefined' !== typeof stats.noticeType ) {
|
||
|
|
type = stats.noticeType;
|
||
|
|
}
|
||
|
|
window.SUI.openNotice(
|
||
|
|
'wp-smush-ajax-notice',
|
||
|
|
'<p>' + stats.notice + '</p>',
|
||
|
|
{ type, icon: 'check-tick' }
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
showRecheckNoticeSuccess() {
|
||
|
|
const recheckNotice = $( '.wp-smush-recheck-images-notice-box' );
|
||
|
|
if ( ! recheckNotice ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.showAnElement( recheckNotice );
|
||
|
|
this.hideAnElement( recheckNotice.querySelector( '.wp-smush-recheck-images-notice-warning' ) );
|
||
|
|
this.showAnElement( recheckNotice.querySelector( '.wp-smush-recheck-images-notice-success' ) );
|
||
|
|
}
|
||
|
|
|
||
|
|
showRecheckNoticeWarning() {
|
||
|
|
const recheckNotice = $( '.wp-smush-recheck-images-notice-box' );
|
||
|
|
if ( ! recheckNotice ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.showAnElement( recheckNotice );
|
||
|
|
this.hideAnElement( recheckNotice.querySelector( '.wp-smush-recheck-images-notice-success' ) );
|
||
|
|
this.showAnElement( recheckNotice.querySelector( '.wp-smush-recheck-images-notice-warning' ) );
|
||
|
|
}
|
||
|
|
|
||
|
|
hideRecheckNotice() {
|
||
|
|
this.hideAnElement( $( '.wp-smush-recheck-images-notice-box' ) );
|
||
|
|
}
|
||
|
|
|
||
|
|
showProgressErrorNoticeOnRecheckNotice() {
|
||
|
|
const recheckWarningElement = $( '.wp-smush-recheck-images-notice-box .wp-smush-recheck-images-notice-warning' );
|
||
|
|
if ( ! recheckWarningElement ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
recheckWarningElement.classList.add( 'sui-notice-error' );
|
||
|
|
recheckWarningElement.classList.remove( 'sui-notice-warning' );
|
||
|
|
this.setInnerText( recheckWarningElement.querySelector( 'span' ), this.getErrorProgressMessage() );
|
||
|
|
this.showRecheckNoticeWarning();
|
||
|
|
}
|
||
|
|
|
||
|
|
revertRecheckWarning() {
|
||
|
|
const recheckWarningElement = $( '.wp-smush-recheck-images-notice-box .wp-smush-recheck-images-notice-warning' );
|
||
|
|
if ( ! recheckWarningElement ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
recheckWarningElement.classList.add( 'sui-notice-warning' );
|
||
|
|
recheckWarningElement.classList.remove( 'sui-notice-error' );
|
||
|
|
this.revertInnerText( recheckWarningElement.querySelector( 'span' ) );
|
||
|
|
}
|
||
|
|
|
||
|
|
triggerBulkSmushEvent( stats ) {
|
||
|
|
this.disableRecheckImagesButton();
|
||
|
|
|
||
|
|
if ( stats.enabled_background_process ) {
|
||
|
|
this.triggerBackgroundBulkSmushEvent( stats.global_stats );
|
||
|
|
} else {
|
||
|
|
this.triggerAjaxBulkSmushEvent( stats.global_stats );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
toggleBulkSmushDescription( globalStats ) {
|
||
|
|
if ( SmushProgress.isEmptyObject ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( globalStats.remaining_count < 1 ) {
|
||
|
|
SmushProgress.hideBulkSmushDescription();
|
||
|
|
SmushProgress.showBulkSmushAllDone();
|
||
|
|
} else {
|
||
|
|
SmushProgress.showBulkSmushDescription();
|
||
|
|
SmushProgress.hideBulkSmushAllDone();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setRequiredScanForBulkSmushButton() {
|
||
|
|
bulkSmushButton && bulkSmushButton.classList.add( 'wp-smush-scan-and-bulk-smush' );
|
||
|
|
}
|
||
|
|
|
||
|
|
removeScanEventFromBulkSmushButton() {
|
||
|
|
bulkSmushButton && bulkSmushButton.classList.remove( 'wp-smush-scan-and-bulk-smush' );
|
||
|
|
}
|
||
|
|
|
||
|
|
triggerBackgroundBulkSmushEvent( globalStats ) {
|
||
|
|
document.dispatchEvent(
|
||
|
|
new CustomEvent( 'backgroundBulkSmushOnScanCompleted', {
|
||
|
|
detail: globalStats
|
||
|
|
} )
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
triggerAjaxBulkSmushEvent( globalStats ) {
|
||
|
|
document.dispatchEvent(
|
||
|
|
new CustomEvent( 'ajaxBulkSmushOnScanCompleted', {
|
||
|
|
detail: globalStats
|
||
|
|
} )
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
onCancelled( stats ) {
|
||
|
|
this.onFinish( stats );
|
||
|
|
this.runBulkSmushOnComplete = false;
|
||
|
|
this.setRequiredScanForBulkSmushButton();
|
||
|
|
}
|
||
|
|
|
||
|
|
maybeShowAutoBulkSmushNotification() {
|
||
|
|
if (
|
||
|
|
! this.runBulkSmushOnComplete
|
||
|
|
) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.showAnElement( this.autoBulkSmushNotification );
|
||
|
|
}
|
||
|
|
|
||
|
|
maybeHideAutoBulkSmushNotification() {
|
||
|
|
if (
|
||
|
|
! this.runBulkSmushOnComplete
|
||
|
|
) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.hideAnElement( this.autoBulkSmushNotification );
|
||
|
|
}
|
||
|
|
|
||
|
|
toggleBulkSmushBoxContent() {
|
||
|
|
GlobalStats.resetAndHideBulkErrors();
|
||
|
|
this.toggleBulkSmushDescription( GlobalStats.getGlobalStats() );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const mediaLibScanner = new MediaLibraryScannerOnBulkSmush();
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Event Listeners.
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Background Scan Media Library.
|
||
|
|
const registerScanMediaLibraryEvent = () => {
|
||
|
|
if ( ! recheckImagesBtn ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const canScanInBackground = recheckImagesBtn.classList.contains( 'wp-smush-background-scan' );
|
||
|
|
if ( ! canScanInBackground ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
recheckImagesBtn.addEventListener( 'click', () => mediaLibScanner.startScan() );
|
||
|
|
|
||
|
|
//Check scan is running.
|
||
|
|
if ( window.wp_smushit_data.media_library_scan?.in_processing ) {
|
||
|
|
mediaLibScanner.onStart().showProgressBar().autoSyncStatus();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( window.location.search.includes( 'smush-action=start-scan-media' ) ) {
|
||
|
|
recheckImagesBtn.click();
|
||
|
|
const removeScanActionFromURLAddress = () => {
|
||
|
|
const cleanedURL = window.location.href.replace( '&smush-action=start-scan-media', '' );
|
||
|
|
window.history.pushState( null, null, cleanedURL );
|
||
|
|
};
|
||
|
|
removeScanActionFromURLAddress();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
registerScanMediaLibraryEvent();
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Recheck Images Notice events.
|
||
|
|
*/
|
||
|
|
const registerEventsRelatedRecheckImagesNotice = () => {
|
||
|
|
const recheckImagesNotice = $( '.wp-smush-recheck-images-notice-box' );
|
||
|
|
if ( ! recheckImagesNotice || ! recheckImagesBtn ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const triggerBackgroundScanImagesLink = recheckImagesNotice.querySelector( '.wp-smush-trigger-background-scan' );
|
||
|
|
if ( triggerBackgroundScanImagesLink ) {
|
||
|
|
triggerBackgroundScanImagesLink.onclick = ( e ) => {
|
||
|
|
e.preventDefault();
|
||
|
|
recheckImagesBtn.click();
|
||
|
|
};
|
||
|
|
|
||
|
|
if ( window.wp_smushit_data.media_library_scan?.is_dead ) {
|
||
|
|
mediaLibScanner.showProgressErrorNoticeOnRecheckNotice();
|
||
|
|
} else if( window.wp_smushit_data.is_outdated ) {
|
||
|
|
mediaLibScanner.showRecheckNoticeWarning();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const triggerBulkSmush = recheckImagesNotice.querySelector( '.wp-smush-trigger-bulk-smush' );
|
||
|
|
if ( triggerBulkSmush && bulkSmushButton ) {
|
||
|
|
triggerBulkSmush.onclick = ( e ) => {
|
||
|
|
e.preventDefault();
|
||
|
|
recheckImagesNotice.classList.add( 'sui-hidden' );
|
||
|
|
bulkSmushButton.click();
|
||
|
|
};
|
||
|
|
}
|
||
|
|
const dismissNotices = recheckImagesNotice.querySelectorAll( 'button.sui-button-icon' );
|
||
|
|
if ( dismissNotices ) {
|
||
|
|
dismissNotices.forEach( ( dismissNotice ) => {
|
||
|
|
dismissNotice.onclick = ( e ) => {
|
||
|
|
dismissNotice.closest( '.sui-recheck-images-notice' ).classList.add( 'sui-hidden' );
|
||
|
|
};
|
||
|
|
} );
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener( 'onSavedSmushSettings', function( e ) {
|
||
|
|
if ( ! e?.detail?.is_outdated_stats ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
mediaLibScanner.setRequiredScanForBulkSmushButton();
|
||
|
|
|
||
|
|
recheckImagesNotice.classList.remove( 'sui-hidden' );
|
||
|
|
recheckImagesNotice.querySelector( '.wp-smush-recheck-images-notice-success' ).classList.add( 'sui-hidden' );
|
||
|
|
recheckImagesNotice.querySelector( '.wp-smush-recheck-images-notice-warning' ).classList.remove( 'sui-hidden' );
|
||
|
|
} );
|
||
|
|
};
|
||
|
|
|
||
|
|
registerEventsRelatedRecheckImagesNotice();
|
||
|
|
|
||
|
|
// Scan and Bulk Smush.
|
||
|
|
const registerScanAndBulkSmushEvent = () => {
|
||
|
|
if ( ! bulkSmushButton ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleScanAndBulkSmush = ( e ) => {
|
||
|
|
const shouldRunScan = bulkSmushButton.classList.contains( 'wp-smush-scan-and-bulk-smush' );
|
||
|
|
if ( ! shouldRunScan ) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
mediaLibScanner.startScanThenBulkSmushOnComplete();
|
||
|
|
};
|
||
|
|
|
||
|
|
bulkSmushButton.addEventListener( 'click', handleScanAndBulkSmush );
|
||
|
|
};
|
||
|
|
registerScanAndBulkSmushEvent();
|
||
|
|
}() );
|