22

✏️ Editing: bulk-restore.js

/* global WP_Smush */
/* global ajaxurl */

/**
 * Bulk restore JavaScript code.
 *
 * @since 3.2.2
 */
( function() {
	'use strict';

/**
	 * Bulk restore modal.
	 *
	 * @since 3.2.2
	 */
	WP_Smush.restore = {
		modal: document.getElementById( 'smush-restore-images-dialog' ),
		contentContainer: document.getElementById(
			'smush-bulk-restore-content'
		),
		settings: {
			slide: 'start', // start, progress or finish.
			success: 0,
			errors: [],
		},
		items: [], // total items, 1 item = 1 step.
		success: [], // successful items restored.
		errors: [], // failed items.
		currentStep: 0,
		totalSteps: 0,

/**
		 * Init module.
		 */
		init() {
			if ( ! this.modal ) {
				return;
			}

this.settings = {
				slide: 'start',
				success: 0,
				errors: [],
			};

this.resetModalWidth();
			this.renderTemplate();

// Show the modal.

window.SUI.openModal(
				'smush-restore-images-dialog',
				'wpbody-content',
				undefined,
				false
			);
		},

/**
		 * Update the template, register new listeners.
		 */
		renderTemplate() {
			const template = WP_Smush.onboarding.template(
				'smush-bulk-restore'
			);
			const content = template( this.settings );

if ( content ) {
				this.contentContainer.innerHTML = content;
			}

this.bindSubmit();
		},

/**
		 * Reset modal width.
		 *
		 * @since 3.6.0
		 */
		resetModalWidth() {
			this.modal.style.maxWidth = '460px';
			this.modal.querySelector( '.sui-box' ).style.maxWidth = '460px';
		},

/**
		 * Catch "Finish setup wizard" button click.
		 */
		bindSubmit() {
			const confirmButton = this.modal.querySelector(
				'button[id="smush-bulk-restore-button"]'
			);
			const self = this;

if ( confirmButton ) {
				confirmButton.addEventListener( 'click', function( e ) {
					e.preventDefault();
					self.resetModalWidth();

self.settings = { slide: 'progress' };
					self.errors = [];

self.renderTemplate();
					self.initScan();
				} );
			}
		},

/**
		 * Cancel the bulk restore.
		 */
		cancel() {
			if (
				'start' === this.settings.slide ||
				'finish' === this.settings.slide
			) {
				// Hide the modal.
				window.SUI.closeModal();
			} else {
				this.updateProgressBar( true );
				window.location.reload();
			}
		},

/**
		 * Update progress bar during directory smush.
		 *
		 * @param {boolean} cancel  Cancel status.
		 */
		updateProgressBar( cancel = false ) {
			let progress = 0;
			if ( 0 < this.currentStep ) {
				progress = Math.min(
					Math.round( ( this.currentStep * 100 ) / this.totalSteps ),
					99
				);
			}

if ( progress > 100 ) {
				progress = 100;
			}

// Update progress bar
			this.modal.querySelector( '.sui-progress-text span' ).innerHTML =
				progress + '%';
			this.modal.querySelector( '.sui-progress-bar span' ).style.width =
				progress + '%';

/**
		 * First step in bulk restore - get the bulk attachment count.
		 */
		initScan() {
			const self = this;
			const _nonce = document.getElementById( '_wpnonce' );

/**
		 * Execute a scan step recursively
		 */
		step() {
			const self = this;
			const _nonce = document.getElementById( '_wpnonce' );

if ( 0 < this.items.length ) {
				const item = this.items.pop();
				const xhr = new XMLHttpRequest();
				xhr.open( 'POST', ajaxurl + '?action=restore_step', true );
				xhr.setRequestHeader(
					'Content-type',
					'application/x-www-form-urlencoded'
				);
				xhr.onload = () => {
					this.currentStep++;

if ( 200 === xhr.status ) {
						const res = JSON.parse( xhr.response );
						if (
							'undefined' !== typeof res.data.success &&
							res.data.success
						) {
							self.success.push( item );
						} else {
							self.errors.push( {
								id: item,
								src: res.data.src,
								thumb: res.data.thumb,
								link: res.data.link,
							} );
						}
					}

self.updateProgressBar();
					self.step();
				};
				xhr.send( 'item=' + item + '&_ajax_nonce=' + _nonce.value );
			} else {
				// Finish.
				this.settings = {
					slide: 'finish',
					success: this.success.length,
					errors: this.errors,
					total: this.totalSteps,
				};

self.renderTemplate();
				if ( 0 < this.errors.length ) {
					this.modal.style.maxWidth = '660px';
					this.modal.querySelector( '.sui-box' ).style.maxWidth =
						'660px';
				}
			}
		},
	};

/**
	 * Template function (underscores based).
	 *
	 * @type {Function}
	 */
	WP_Smush.restore.template = _.memoize( ( id ) => {
		let compiled;
		const options = {
			evaluate: /<#([\s\S]+?)#>/g,
			interpolate: /{{{([\s\S]+?)}}}/g,
			escape: /{{([^}]+?)}}(?!})/g,
			variable: 'data',
		};

return ( data ) => {
			_.templateSettings = options;
			compiled =
				compiled ||
				_.template( document.getElementById( id ).innerHTML );
			return compiled( data );
		};
	} );
} )();

MR SKB