sss

Signed-off-by: Jeff <jeff@gotenzing.com>

+import '../scss/app.scss';
+
+/**
+ * Admin modules
+ */
+
+const WP_Smush = WP_Smush || {};
+window.WP_Smush = WP_Smush;
+
+/**
+ * IE polyfill for includes.
+ *
+ * @since 3.1.0
+ * @param {string} search
+ * @param {number} start
+ * @return {boolean}  Returns true if searchString appears as a substring of the result of converting this
+ * object to a String, at one or more positions that are
+ * greater than or equal to position; otherwise, returns false.
+ */
+if ( ! String.prototype.includes ) {
+	String.prototype.includes = function( search, start ) {
+		if ( typeof start !== 'number' ) {
+			start = 0;
+		}
+
+		if ( start + search.length > this.length ) {
+			return false;
+		}
+		return this.indexOf( search, start ) !== -1;
+	};
+}
+
+require( './modules/helpers' );
+require( './modules/admin' );
+require( './modules/admin-common' );
+require( './modules/bulk-smush' );
+require( './modules/background-process' );
+require( './modules/onboarding' );
+require( './modules/directory-smush' );
+require( './smush/cdn' );
+require( './smush/webp' );
+require( './smush/lazy-load' );
+require( './modules/bulk-restore' );
+require( './smush/settings' );
+
+/**
+ * Notice scripts.
+ *
+ * Notices are used in the following functions:
+ *
+ * @used-by \Smush\Core\Modules\Smush::smush_updated()
+ * @used-by \Smush\Core\Integrations\S3::3_support_required_notice()
+ * @used-by \Smush\App\Abstract_Page::installation_notice()
+ *
+ * TODO: should this be moved out in a separate file like common.scss?
+ */
+require( './modules/notice' );

+import lazySizes from 'lazysizes';
+import 'lazysizes/plugins/native-loading/ls.native-loading';
+
+lazySizes.cfg.nativeLoading = {
+	setLoadingAttribute: true,
+	disableListeners: {
+		scroll: true,
+	},
+};
+
+lazySizes.init();

+import lazySizes from 'lazysizes';
+
+lazySizes.init();

+import '../../scss/resize-detection.scss';
+
+/**
+ * Image resize detection (IRD).
+ *
+ * Show all wrongly scaled images with a highlighted border and resize box.
+ *
+ * Made in pure JS.
+ * DO NOT ADD JQUERY SUPPORT!!!
+ *
+ * @since 2.9
+ */
+( function() {
+	'use strict';
+
+	const SmushIRS = {
+		bar: document.getElementById( 'smush-image-bar' ),
+		toggle: document.getElementById( 'smush-image-bar-toggle' ),
+		images: {
+			bigger: [],
+			smaller: [],
+		},
+		strings: window.wp_smush_resize_vars,
+
+		/**
+		 * Init scripts.
+		 */
+		init() {
+			/**
+			 * Make sure these are set, before we proceed.
+			 */
+			if ( ! this.bar ) {
+				this.bar = document.getElementById( 'smush-image-bar' );
+			}
+			if ( ! this.toggle ) {
+				this.toggle = document.getElementById(
+					'smush-image-bar-toggle'
+				);
+			}
+
+			this.process();
+
+			// Register the event handler after everything is done.
+			this.toggle.addEventListener(
+				'click',
+				this.handleToggleClick.bind( this )
+			);
+		},
+
+		/**
+		 * Do image processing.
+		 */
+		process() {
+			const icon = this.toggle.querySelector( 'i' );
+
+			icon.classList.add( 'sui-icon-loader' );
+			icon.classList.remove( 'sui-icon-info' );
+
+			this.detectImages();
+
+			if ( ! this.images.bigger.length && ! this.images.smaller.length ) {
+				this.toggle.classList.add( 'smush-toggle-success' );
+				document.getElementById(
+					'smush-image-bar-notice'
+				).style.display = 'block';
+				document.getElementById(
+					'smush-image-bar-notice-desc'
+				).style.display = 'none';
+			} else {
+				this.toggle.classList.remove( 'smush-toggle-success' );
+				document.getElementById(
+					'smush-image-bar-notice'
+				).style.display = 'none';
+				document.getElementById(
+					'smush-image-bar-notice-desc'
+				).style.display = 'block';
+				this.generateMarkup( 'bigger' );
+				this.generateMarkup( 'smaller' );
+			}
+
+			this.toggleDivs();
+
+			icon.classList.remove( 'sui-icon-loader' );
+			icon.classList.add( 'sui-icon-info' );
+		},
+
+		/**
+		 * Various checks to see if the image should be processed.
+		 *
+		 * @param {Object} image
+		 * @return {boolean}  Should skip image or not.
+		 */
+		shouldSkipImage( image ) {
+			// Skip avatars.
+			if ( image.classList.contains( 'avatar' ) ) {
+				return true;
+			}
+
+			// Skip images from Smush CDN with auto-resize feature.
+			if (
+				'string' === typeof image.getAttribute( 'no-resize-detection' )
+			) {
+				return true;
+			}
+
+			// Skip 1x1px images.
+			if (
+				image.clientWidth === image.clientHeight &&
+				1 === image.clientWidth
+			) {
+				return true;
+			}
+
+			// Skip 1x1px placeholders.
+			if (
+				image.naturalWidth === image.naturalHeight &&
+				1 === image.naturalWidth
+			) {
+				return true;
+			}
+
+			// If width attribute is not set, do not continue.
+			return null === image.clientWidth || null === image.clientHeight;
+		},
+
+		/**
+		 * Get tooltip text.
+		 *
+		 * @param {Object} props
+		 * @return {string}  Tooltip.
+		 */
+		getTooltipText( props ) {
+			let tooltipText = '';
+
+			if ( props.bigger_width || props.bigger_height ) {
+				/** @param {string} strings.large_image */
+				tooltipText = this.strings.large_image;
+			} else if ( props.smaller_width || props.smaller_height ) {
+				/** @param {string} strings.small_image */
+				tooltipText = this.strings.small_image;
+			}
+
+			return tooltipText
+				.replace( 'width', props.real_width )
+				.replace( 'height', props.real_height );
+		},
+
+		/**
+		 * Generate markup.
+		 *
+		 * @param {string} type Accepts: 'bigger' or 'smaller'.
+		 */
+		generateMarkup( type ) {
+			this.images[ type ].forEach( ( image, index ) => {
+				const item = document.createElement( 'div' ),
+					tooltip = this.getTooltipText( image.props );
+
+				item.setAttribute(
+					'class',
+					'smush-resize-box smush-tooltip smush-tooltip-constrained'
+				);
+				item.setAttribute( 'data-tooltip', tooltip );
+				item.setAttribute( 'data-image', image.class );
+				item.addEventListener( 'click', ( e ) =>
+					this.highlightImage( e )
+				);
+
+				item.innerHTML = `
+					<div class="smush-image-info">
+						<span>${ index + 1 }</span>
+						<span class="smush-tag">${ image.props.computed_width } x ${ image.props.computed_height }px</span>
+						<i class="smush-front-icons smush-front-icon-arrows-in" aria-hidden="true">&nbsp;</i>
+						<span class="smush-tag smush-tag-success">${ image.props.real_width } × ${ image.props.real_height }px</span>					
+					</div>
+					<div class="smush-image-description">${ tooltip }</div>
+				`;
+
+				document
+					.getElementById( 'smush-image-bar-items-' + type )
+					.appendChild( item );
+			} );
+		},
+
+		/**
+		 * Show/hide sections based on images.
+		 */
+		toggleDivs() {
+			const types = [ 'bigger', 'smaller' ];
+			types.forEach( ( type ) => {
+				const div = document.getElementById(
+					'smush-image-bar-items-' + type
+				);
+				if ( 0 === this.images[ type ].length ) {
+					div.style.display = 'none';
+				} else {
+					div.style.display = 'block';
+				}
+			} );
+		},
+
+		/**
+		 * Scroll the selected image into view and highlight it.
+		 *
+		 * @param {Object} e
+		 */
+		highlightImage( e ) {
+			this.removeSelection();
+
+			const el = document.getElementsByClassName(
+				e.currentTarget.dataset.image
+			);
+			if ( 'undefined' !== typeof el[ 0 ] ) {
+				// Display description box.
+				e.currentTarget.classList.toggle( 'show-description' );
+
+				// Scroll and flash image.
+				el[ 0 ].scrollIntoView( {
+					behavior: 'smooth',
+					block: 'center',
+					inline: 'nearest',
+				} );
+				el[ 0 ].style.opacity = '0.5';
+				setTimeout( () => {
+					el[ 0 ].style.opacity = '1';
+				}, 1000 );
+			}
+		},
+
+		/**
+		 * Handle click on the toggle item.
+		 */
+		handleToggleClick() {
+			this.bar.classList.toggle( 'closed' );
+			this.toggle.classList.toggle( 'closed' );
+			this.removeSelection();
+		},
+
+		/**
+		 * Remove selected items.
+		 */
+		removeSelection() {
+			const items = document.getElementsByClassName( 'show-description' );
+			if ( items.length > 0 ) {
+				Array.from( items ).forEach( ( div ) =>
+					div.classList.remove( 'show-description' )
+				);
+			}
+		},
+
+		/**
+		 * Function to highlight all scaled images.
+		 *
+		 * Add yellow border and then show one small box to
+		 * resize the images as per the required size, on fly.
+		 */
+		detectImages() {
+			const images = document.getElementsByTagName( 'img' );
+			for ( const image of images ) {
+				if ( this.shouldSkipImage( image ) ) {
+					continue;
+				}
+
+				// Get defined width and height.
+				const props = {
+					real_width: image.clientWidth,
+					real_height: image.clientHeight,
+					computed_width: image.naturalWidth,
+					computed_height: image.naturalHeight,
+					bigger_width: image.clientWidth * 1.5 < image.naturalWidth,
+					bigger_height:
+						image.clientHeight * 1.5 < image.naturalHeight,
+					smaller_width: image.clientWidth > image.naturalWidth,
+					smaller_height: image.clientHeight > image.naturalHeight,
+				};
+
+				// In case image is in correct size, do not continue.
+				if (
+					! props.bigger_width &&
+					! props.bigger_height &&
+					! props.smaller_width &&
+					! props.smaller_height
+				) {
+					continue;
+				}
+
+				const imgType =
+						props.bigger_width || props.bigger_height
+							? 'bigger'
+							: 'smaller',
+					imageClass =
+						'smush-image-' + ( this.images[ imgType ].length + 1 );
+
+				// Fill the images arrays.
+				this.images[ imgType ].push( {
+					src: image,
+					props,
+					class: imageClass,
+				} );
+
+				/**
+				 * Add class to original image.
+				 * Can't add two classes in single add(), because no support in IE11.
+				 * image.classList.add('smush-detected-img', imageClass);
+				 */
+				image.classList.add( 'smush-detected-img' );
+				image.classList.add( imageClass );
+			}
+		}, // End detectImages()
+
+		/**
+		 * Allows refreshing the list. A good way is to refresh on lazyload actions.
+		 *
+		 * @since 3.6.0
+		 */
+		refresh() {
+			// Clear out classes on DOM.
+			for ( let id in this.images.bigger ) {
+				if ( this.images.bigger.hasOwnProperty( id ) ) {
+					this.images.bigger[ id ].src.classList.remove(
+						'smush-detected-img'
+					);
+					this.images.bigger[ id ].src.classList.remove(
+						'smush-image-' + ++id
+					);
+				}
+			}
+
+			for ( let id in this.images.smaller ) {
+				if ( this.images.smaller.hasOwnProperty( id ) ) {
+					this.images.smaller[ id ].src.classList.remove(
+						'smush-detected-img'
+					);
+					this.images.smaller[ id ].src.classList.remove(
+						'smush-image-' + ++id
+					);
+				}
+			}
+
+			this.images = {
+				bigger: [],
+				smaller: [],
+			};
+
+			// This might be overkill - there will probably never be a situation when there are less images than on
+			// initial page load.
+			const elements = document.getElementsByClassName(
+				'smush-resize-box'
+			);
+			while ( elements.length > 0 ) {
+				elements[ 0 ].remove();
+			}
+
+			this.process();
+		},
+	}; // End WP_Smush_IRS
+
+	/**
+	 * After page load, initialize toggle event.
+	 */
+	window.addEventListener( 'DOMContentLoaded', () => SmushIRS.init() );
+	window.addEventListener( 'lazyloaded', () => SmushIRS.refresh() );
+}() );

+import '../scss/common.scss';
+
+/* global ajaxurl */
+
+document.addEventListener('DOMContentLoaded', function () {
+	const dismissNoticeButton = document.querySelectorAll(
+		'.smush-dismissible-notice .smush-dismiss-notice-button'
+	);
+	dismissNoticeButton.forEach((button) => {
+		button.addEventListener('click', dismissNotice);
+	});
+
+	function dismissNotice(event) {
+		event.preventDefault();
+
+		const button = event.target;
+		const notice = button.closest('.smush-dismissible-notice');
+		const key = notice.getAttribute('data-key');
+
+		const xhr = new XMLHttpRequest();
+		xhr.open(
+			'POST',
+			ajaxurl + '?action=smush_dismiss_notice&key=' + key + '&_ajax_nonce=' + smush_global.nonce,
+			true
+		);
+		xhr.onload = () => {
+			if (notice) {
+				notice.querySelector('button.notice-dismiss').dispatchEvent(new MouseEvent('click', {
+					view: window,
+					bubbles: true,
+					cancelable: true
+				}));
+			}
+		};
+		xhr.send();
+	}
+});

+/* global wp_smush_mixpanel */
+
+import mixpanel from "mixpanel-browser";
+
+export default class MixPanel {
+	constructor() {
+		this.mixpanelInstance = mixpanel.init(wp_smush_mixpanel.token, {
+			opt_out_tracking_by_default: !wp_smush_mixpanel.opt_in,
+			loaded: (mixpanel) => {
+				mixpanel.identify(wp_smush_mixpanel.unique_id);
+				mixpanel.register(wp_smush_mixpanel.super_properties);
+			}
+		}, 'smush');
+	}
+
+	track(event, properties = {}) {
+		this.mixpanelInstance.track(event, properties);
+	}
+
+	trackBulkSmushCompleted(totalSavingsSize, totalImageCount, optimizationPercentage, savingsPercentage) {
+		this.track('Bulk Smush Completed', {
+			'Total Savings': totalSavingsSize,
+			'Total Images': totalImageCount,
+			'Media Optimization Percentage': optimizationPercentage,
+			'Percentage of Savings': savingsPercentage
+		});
+	}
+
+	trackBulkSmushCancel() {
+		this.track('Bulk Smush Cancelled');
+	}
+}

+jQuery(function ($) {
+	'use strict';
+
+    /**
+	 * Handle the Smush Stats link click
+	 */
+    $('body').on('click', 'a.smush-stats-details', function (e) {
+        //If disabled
+        if ($(this).prop('disabled')) {
+            return false;
+        }
+
+        // prevent the default action
+        e.preventDefault();
+        //Replace the `+` with a `-`
+        const slide_symbol = $(this).find('.stats-toggle');
+        $(this).parents().eq(1).find('.smush-stats-wrapper').slideToggle();
+        slide_symbol.text(slide_symbol.text() == '+' ? '-' : '+');
+    });
+});
\ No newline at end of file

+/* global WP_Smush */
+/* global ajaxurl */
+/* global _ */
+
+import MixPanel from "../mixpanel";
+
+/**
+ * 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.mixPanel = new MixPanel();
+
+			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();
+
+					self.mixPanel.track('Bulk Restore Triggered');
+				});
+			}
+		},
+
+		/**
+		 * 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 + '%';
+
+			const statusDiv = this.modal.querySelector(
+				'.sui-progress-state-text'
+			);
+			if (progress >= 90) {
+				statusDiv.innerHTML = 'Finalizing...';
+			} else if (cancel) {
+				statusDiv.innerHTML = 'Cancelling...';
+			} else {
+				statusDiv.innerHTML =
+					this.currentStep +
+					'/' +
+					this.totalSteps +
+					' ' +
+					'images restored';
+			}
+		},
+
+		/**
+		 * First step in bulk restore - get the bulk attachment count.
+		 */
+		initScan() {
+			const self = this;
+			const _nonce = document.getElementById('_wpnonce');
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', ajaxurl + '?action=get_image_count', true);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.onload = () => {
+				if (200 === xhr.status) {
+					const res = JSON.parse(xhr.response);
+					if ('undefined' !== typeof res.data.items) {
+						self.items = res.data.items;
+						self.totalSteps = res.data.items.length;
+						self.step();
+					}
+				} else {
+					window.console.log(
+						'Request failed.  Returned status of ' + xhr.status
+					);
+				}
+			};
+			xhr.send('_ajax_nonce=' + _nonce.value);
+		},
+
+		/**
+		 * 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);
+		};
+	});
+})();

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * Bulk Smush functionality.
+ *
+ * @since 2.9.0  Moved from admin.js
+ */
+
+import Smush from '../smush/smush';
+import Fetcher from '../utils/fetcher';
+
+( function( $ ) {
+	'use strict';
+
+	WP_Smush.bulk = {
+		init: () => {
+			/**
+			 * Handle the Bulk Smush/Bulk re-Smush button click.
+			 */
+			$( '.wp-smush-all' ).on( 'click', function( e ) {
+				e.preventDefault();
+
+				const bulkRunning = document.getElementById(
+					'wp-smush-running-notice'
+				);
+				bulkRunning.classList.add( 'sui-hidden' );
+
+				// Remove limit exceeded styles.
+				const progress = $( '.wp-smush-bulk-progress-bar-wrapper' );
+				// TODO: we don't have wp-smush-exceed-limit remove the following line and test
+				progress.removeClass( 'wp-smush-exceed-limit' );
+				progress
+					.find( '.sui-progress-block .wp-smush-all' )
+					.addClass( 'sui-hidden' );
+				progress
+					.find( '.sui-progress-block .wp-smush-cancel-bulk' )
+					.removeClass( 'sui-hidden' );
+				if ( bulkRunning ) {
+					document
+						.getElementById( 'bulk-smush-resume-button' )
+						.classList.add( 'sui-hidden' );
+				}
+
+				// remove smush-limit-reached-notice.
+				const limitReachedNotice = document.getElementById( 'smush-limit-reached-notice' );
+				if ( limitReachedNotice ) {
+					limitReachedNotice.classList.add( 'sui-hidden' );
+				}
+
+				// Disable re-Smush and scan button.
+				// TODO: refine what is disabled.
+				$(
+					'.wp-resmush.wp-smush-action, .wp-smush-scan, .wp-smush-all:not(.sui-progress-close), a.wp-smush-lossy-enable, button.wp-smush-resize-enable, button#save-settings-button'
+				).prop( 'disabled', true );
+
+				// Check for IDs, if there is none (unsmushed or lossless), don't call Smush function.
+				/** @param {Array} wp_smushit_data.unsmushed */
+				if (
+					'undefined' === typeof window.wp_smushit_data ||
+					( 0 === window.wp_smushit_data.unsmushed.length &&
+						0 === window.wp_smushit_data.resmush.length )
+				) {
+					return false;
+				}
+
+				$( '.wp-smush-remaining' ).addClass( 'sui-hidden' );
+
+				WP_Smush.bulk.maybeShowCDNUpsellForPreSiteOnStart();
+
+				// Show loader.
+				progress
+					.find( '.sui-progress-block i.sui-icon-info' )
+					.removeClass( 'sui-icon-info' )
+					.addClass( 'sui-loading' )
+					.addClass( 'sui-icon-loader' );
+
+				new Smush( $( this ), true );
+			} );
+
+			/**
+			 * Ignore file from bulk Smush.
+			 *
+			 * @since 2.9.0
+			 */
+			$( 'body' ).on( 'click', '.smush-ignore-image', function( e ) {
+				e.preventDefault();
+
+				const self = $( this );
+
+				self.prop( 'disabled', true );
+				self.attr( 'data-tooltip' );
+				self.removeClass( 'sui-tooltip' );
+				$.post( ajaxurl, {
+					action: 'ignore_bulk_image',
+					id: self.attr( 'data-id' ),
+					_ajax_nonce: wp_smush_msgs.nonce,
+				} ).done( ( response ) => {
+					if ( self.is( 'a' ) && response.success && 'undefined' !== typeof response.data.links ) {
+						if ( e.target.closest( '.smush-status-links' ) ) {
+							const smushStatus = self.parent().parent().find( '.smush-status' );
+							smushStatus.text( wp_smush_msgs.ignored );
+							smushStatus.addClass('smush-ignored');
+							e.target.closest( '.smush-status-links' ).innerHTML = response.data.links;
+						} else if (e.target.closest( '.smush-bulk-error-row' ) ){
+							self.addClass('disabled');
+							e.target.closest( '.smush-bulk-error-row' ).style.opacity = 0.5;
+						}
+					}
+				} );
+			} );
+
+			/**
+			 * Ignore file from bulk Smush.
+			 *
+			 * @since 3.12.0
+			 */
+			 const ignoreAll = document.querySelector('.wp_smush_ignore_all_failed_items');
+			 if ( ignoreAll ) {
+				 ignoreAll.onclick = (e) => {
+					 e.preventDefault();
+					 e.target.setAttribute('disabled','');
+					 e.target.style.cursor = 'progress';
+					 const type = e.target.dataset.type || null;
+					 e.target.classList.remove('sui-tooltip');
+					 Fetcher.smush.ignoreAll(type).then((res) => {
+						 if ( res.success ) {
+							 window.location.reload();
+						 } else {
+							 e.target.style.cursor = 'pointer';
+							 e.target.removeAttribute('disabled');
+							 WP_Smush.helpers.showNotice( res );
+						 }
+					 });
+				 }
+			 }
+		},
+		maybeShowCDNUpsellForPreSiteOnStart: () => {
+			// Show upsell cdn.
+			const upsell_cdn = document.querySelector('.wp-smush-upsell-cdn');
+			if ( upsell_cdn ) {
+				upsell_cdn.classList.remove('sui-hidden');
+			}
+		}
+	};
+
+	WP_Smush.bulk.init();
+} )( jQuery );

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * Directory Smush module JavaScript code.
+ *
+ * @since 2.8.1  Separated from admin.js into dedicated file.
+ */
+
+import { createTree } from 'jquery.fancytree';
+import Scanner from '../smush/directory-scanner';
+
+( function( $ ) {
+	'use strict';
+
+	WP_Smush.directory = {
+		selected: [],
+		tree: [],
+		wp_smush_msgs: [],
+		triggered: false,
+
+		init() {
+			const self = this,
+				progressDialog = $( '#wp-smush-progress-dialog' );
+
+			let totalSteps = 0,
+				currentScanStep = 0;
+
+			// Make sure directory smush vars are set.
+			if ( typeof window.wp_smushit_data.dir_smush !== 'undefined' ) {
+				totalSteps = window.wp_smushit_data.dir_smush.totalSteps;
+				currentScanStep =
+					window.wp_smushit_data.dir_smush.currentScanStep;
+			}
+
+			// Init image scanner.
+			this.scanner = new Scanner( totalSteps, currentScanStep );
+
+			/**
+			 * Smush translation strings.
+			 *
+			 * @param {Array} wp_smush_msgs
+			 */
+			this.wp_smush_msgs = window.wp_smush_msgs || {};
+
+			/**
+			 * Open the "Select Smush directory" modal.
+			 */
+			$( 'button.wp-smush-browse, a#smush-directory-open-modal' ).on(
+				'click',
+				function( e ) {
+					e.preventDefault();
+
+					if ( $( e.currentTarget ).hasClass( 'wp-smush-browse' ) ) {
+						// Hide all the notices.
+						$( 'div.wp-smush-scan-result div.wp-smush-notice' ).hide();
+
+						// Remove notice.
+						$( 'div.wp-smush-info' ).remove();
+					}
+
+					window.SUI.openModal(
+						'wp-smush-list-dialog',
+						e.currentTarget,
+						$(
+							'#wp-smush-list-dialog .sui-box-header [data-modal-close]'
+						)[0],
+						true
+					);
+					//Display File tree for Directory Smush
+					self.initFileTree();
+				}
+			);
+
+			/**
+			 * Smush images: Smush in Choose Directory modal clicked
+			 */
+			$( '#wp-smush-select-dir' ).on( 'click', function( e ) {
+				e.preventDefault();
+
+				$( 'div.wp-smush-list-dialog div.sui-box-body' ).css( {
+					opacity: '0.8',
+				} );
+				$( 'div.wp-smush-list-dialog div.sui-box-body a' ).off(
+					'click'
+				);
+
+				const button = $( this );
+
+				// Display the spinner.
+				button.addClass('sui-button-onload');
+
+				const selectedFolders = self.tree.getSelectedNodes();
+
+				const paths = [];
+				selectedFolders.forEach( function( folder ) {
+					paths.push( folder.key );
+				} );
+
+				// Send a ajax request to get a list of all the image files
+				const param = {
+					action: 'image_list',
+					smush_path: paths,
+					image_list_nonce: $(
+						'input[name="image_list_nonce"]'
+					).val(),
+				};
+
+				$.post( ajaxurl, param, function( response ) {
+					if ( response.success ) {
+						// Close the modal.
+						window.SUI.closeModal();
+
+						self.scanner = new Scanner( response.data, 0 );
+						self.showProgressDialog( response.data );
+						self.scanner.scan();
+					} else {
+						// Remove the spinner.
+						button.removeClass('sui-button-onload');
+
+						window.SUI.openNotice(
+							'wp-smush-ajax-notice',
+							response.data.message,
+							{ type: 'warning' }
+						);
+					}
+				} );
+			} );
+
+			/**
+			 * Cancel scan.
+			 */
+			progressDialog.on(
+				'click',
+				'#cancel-directory-smush, #dialog-close-div, .wp-smush-cancel-dir',
+				function( e ) {
+					e.preventDefault();
+					// Display the spinner
+					$( '.wp-smush-cancel-dir' ).addClass( 'sui-button-onload' );
+					self.scanner
+						.cancel()
+						.done(
+							() =>
+								( window.location.href =
+									self.wp_smush_msgs.directory_url )
+						);
+				}
+			);
+
+			/**
+			 * Continue scan.
+			 */
+			progressDialog.on(
+				'click',
+				'.sui-icon-play, .wp-smush-resume-scan',
+				function( e ) {
+					e.preventDefault();
+					self.scanner.resume();
+				}
+			);
+
+			/**
+			 * Check to see if we should open the directory module.
+			 * Used to redirect from dashboard page.
+			 *
+			 * @since 3.8.6
+			 */
+			const queryString = window.location.search;
+			const urlParams = new URLSearchParams( queryString );
+			if ( urlParams.has( 'start' ) && ! this.triggered ) {
+				this.triggered = true;
+				$( 'button.wp-smush-browse' ).trigger( 'click' );
+			}
+		},
+
+		/**
+		 * Init fileTree.
+		 */
+		initFileTree() {
+			const self = this,
+				smushButton = $( 'button#wp-smush-select-dir' ),
+				ajaxSettings = {
+					type: 'GET',
+					url: ajaxurl,
+					data: {
+						action: 'smush_get_directory_list',
+						list_nonce: $( 'input[name="list_nonce"]' ).val(),
+					},
+					cache: false,
+				};
+
+			// Object already defined.
+			if ( Object.entries( self.tree ).length > 0 ) {
+				return;
+			}
+
+			self.tree = createTree( '.wp-smush-list-dialog .content', {
+				autoCollapse: true, // Automatically collapse all siblings, when a node is expanded
+				clickFolderMode: 3, // 1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)
+				checkbox: true, // Show checkboxes
+				debugLevel: 0, // 0:quiet, 1:errors, 2:warnings, 3:infos, 4:debug
+				selectMode: 3, // 1:single, 2:multi, 3:multi-hier
+				tabindex: '0', // Whole tree behaves as one single control
+				keyboard: true, // Support keyboard navigation
+				quicksearch: true, // Navigate to next node by typing the first letters
+				source: ajaxSettings,
+				lazyLoad: ( event, data ) => {
+					data.result = new Promise( function( resolve, reject ) {
+						ajaxSettings.data.dir = data.node.key;
+						$.ajax( ajaxSettings )
+							.done( ( response ) => resolve( response ) )
+							.fail( reject );
+					} );
+				},
+				loadChildren: ( event, data ) =>
+					data.node.fixSelection3AfterClick(), // Apply parent's state to new child nodes:
+				select: () =>
+					smushButton.prop(
+						'disabled',
+						! +self.tree.getSelectedNodes().length
+					),
+				init: () => smushButton.prop( 'disabled', true ),
+			} );
+		},
+
+		/**
+		 * Show progress dialog.
+		 *
+		 * @param {number} items Number of items in the scan.
+		 */
+		showProgressDialog( items ) {
+			// Update items status and show the progress dialog..
+			$( '.wp-smush-progress-dialog .sui-progress-state-text' ).html(
+				'0/' + items + ' ' + self.wp_smush_msgs.progress_smushed
+			);
+
+			window.SUI.openModal(
+				'wp-smush-progress-dialog',
+				'dialog-close-div',
+				undefined,
+				false
+			);
+		},
+
+		/**
+		 * Update progress bar during directory smush.
+		 *
+		 * @param {number}  progress Current progress in percent.
+		 * @param {boolean} cancel   Cancel status.
+		 */
+		updateProgressBar( progress, cancel = false ) {
+			if ( progress > 100 ) {
+				progress = 100;
+			}
+
+			// Update progress bar
+			$( '.sui-progress-block .sui-progress-text span' ).text(
+				progress + '%'
+			);
+			$( '.sui-progress-block .sui-progress-bar span' ).width(
+				progress + '%'
+			);
+
+			if ( progress >= 90 ) {
+				$( '.sui-progress-state .sui-progress-state-text' ).text(
+					'Finalizing...'
+				);
+			}
+
+			if ( cancel ) {
+				$( '.sui-progress-state .sui-progress-state-text' ).text(
+					'Cancelling...'
+				);
+			}
+		},
+	};
+
+	WP_Smush.directory.init();
+}( jQuery ) );

+/* global WP_Smush */
+/* global ajaxurl */
+/* global wp_smush_msgs */
+
+/**
+ * Helpers functions.
+ *
+ * @since 2.9.0  Moved from admin.js
+ */
+( function() {
+	'use strict';
+
+	WP_Smush.helpers = {
+		cacheUpsellErrorCodes: [],
+		init: () => {},
+
+		/**
+		 * Convert bytes to human-readable form.
+		 *
+		 * @param {number} a Bytes
+		 * @param {number} b Number of digits
+		 * @return {*} Formatted Bytes
+		 */
+		formatBytes: ( a, b ) => {
+			const thresh = 1024,
+				units = [ 'KB', 'MB', 'GB', 'TB', 'PB' ];
+
+			if ( Math.abs( a ) < thresh ) {
+				return a + ' B';
+			}
+
+			let u = -1;
+
+			do {
+				a /= thresh;
+				++u;
+			} while ( Math.abs( a ) >= thresh && u < units.length - 1 );
+
+			return a.toFixed( b ) + ' ' + units[ u ];
+		},
+
+		/**
+		 * Get size from a string.
+		 *
+		 * @param {string} formattedSize Formatter string
+		 * @return {*} Formatted Bytes
+		 */
+		getSizeFromString: ( formattedSize ) => {
+			return formattedSize.replace( /[a-zA-Z]/g, '' ).trim();
+		},
+
+		/**
+		 * Get type from formatted string.
+		 *
+		 * @param {string} formattedSize Formatted string
+		 * @return {*} Formatted Bytes
+		 */
+		getFormatFromString: ( formattedSize ) => {
+			return formattedSize.replace( /[0-9.]/g, '' ).trim();
+		},
+
+		/**
+		 * Stackoverflow: http://stackoverflow.com/questions/1726630/formatting-a-number-with-exactly-two-decimals-in-javascript
+		 *
+		 * @param {number} num
+		 * @param {number} decimals
+		 * @return {number}  Number
+		 */
+		precise_round: ( num, decimals ) => {
+			const sign = num >= 0 ? 1 : -1;
+			// Keep the percentage below 100.
+			num = num > 100 ? 100 : num;
+			return (
+				Math.round( num * Math.pow( 10, decimals ) + sign * 0.001 ) /
+				Math.pow( 10, decimals )
+			);
+		},
+
+		/**
+		 * Displays a floating error message using the #wp-smush-ajax-notice container.
+		 *
+		 * @since 3.8.0
+		 *
+		 * @param {string} message
+		 */
+		showErrorNotice: ( message ) => {
+			if ( 'undefined' === typeof message ) {
+				return;
+			}
+
+			const noticeMessage = `<p>${ message }</p>`,
+				noticeOptions = {
+					type: 'error',
+					icon: 'info',
+				};
+
+			SUI.openNotice( 'wp-smush-ajax-notice', noticeMessage, noticeOptions );
+
+			const loadingButton = document.querySelector( '.sui-button-onload' );
+			if ( loadingButton ) {
+				loadingButton.classList.remove( 'sui-button-onload' );
+			}
+		},
+
+		/**
+		 * Reset settings.
+		 *
+		 * @since 3.2.0
+		 */
+		resetSettings: () => {
+			const _nonce = document.getElementById( 'wp_smush_reset' );
+			const xhr = new XMLHttpRequest();
+			xhr.open( 'POST', ajaxurl + '?action=reset_settings', true );
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					const res = JSON.parse( xhr.response );
+					if ( 'undefined' !== typeof res.success && res.success ) {
+						window.location.href = wp_smush_msgs.smush_url;
+					}
+				} else {
+					window.console.log(
+						'Request failed.  Returned status of ' + xhr.status
+					);
+				}
+			};
+			xhr.send( '_ajax_nonce=' + _nonce.value );
+		},
+
+		/**
+		 * Prepare error row. Will only allow to hide errors for WP media attachments (not nextgen).
+		 *
+		 * @since 1.9.0
+		 * @since 3.12.0 Moved from Smush.
+		 *
+		 * @param {string} errorMsg   Error message.
+		 * @param {string} fileName   File name.
+		 * @param {string} thumbnail  Thumbnail for image (if available).
+		 * @param {number} id         Image ID.
+		 * @param {string} type       Smush type: media or netxgen.
+		 * @param {string} errorCode  Error code.
+		 *
+		 * @return {string}  Row with error.
+		 */
+		 prepareBulkSmushErrorRow: (errorMsg, fileName, thumbnail, id, type, errorCode) => {
+			const thumbDiv =
+				'undefined' === typeof thumbnail ?
+				'<i class="sui-icon-photo-picture" aria-hidden="true"></i>' :
+				thumbnail;
+			const editLink = window.wp_smush_msgs.edit_link.replace('{{id}}', id);
+			const fileLink =
+				'undefined' === fileName || 'undefined' === typeof fileName ?
+				'undefined' :
+				fileName;
+
+			let tableDiv =
+				'<div class="smush-bulk-error-row" data-error-code="'+ errorCode + '">' +
+				'<div class="smush-bulk-image-data">' +
+				'<div class="smush-bulk-image-title">' +
+				thumbDiv +
+				'<span class="smush-image-name">' +
+				fileLink +
+				'</span>' +
+				'</div>' +
+				'<div class="smush-image-error">' +
+				errorMsg +
+				'</div>' +
+				'</div>';
+
+			if ('media' === type) {
+				tableDiv =
+					tableDiv +
+					'<div class="smush-bulk-image-actions">' +
+					'<a href="javascript:void(0)" class="sui-tooltip sui-tooltip-constrained sui-tooltip-left smush-ignore-image" data-tooltip="' +
+					window.wp_smush_msgs.error_ignore +
+					'" data-id="' +
+					id +
+					'">' +
+					window.wp_smush_msgs.btn_ignore +
+					'</a>' +
+					'<a class="smush-link-detail" href="' + editLink + '">' +
+						window.wp_smush_msgs.view_detail +
+					'</a>' +
+				'</div>';
+			}
+
+			tableDiv = tableDiv + '</div>';
+
+			tableDiv += WP_Smush.helpers.upsellWithError(errorCode);
+
+			return tableDiv;
+		},
+		/**
+		 * Get upsell base on error code.
+		 * @param {string} errorCode Error code.
+		 * @returns {string}
+		 *
+		 * Do not use arrow function to use `this`.
+		 */
+		upsellWithError: function (errorCode) {
+			if (!errorCode || !window.wp_smush_msgs['error_' + errorCode] || this.isUpsellRendered( errorCode )) {
+				return '';
+			}
+			this.cacheRenderedUpsell( errorCode );
+			return '<div class="smush-bulk-error-row smush-error-upsell">' +
+				'<div class="smush-bulk-image-title">' +
+				'<span class="smush-image-error">' +
+				window.wp_smush_msgs['error_' + errorCode] +
+				'</span>' +
+				'</div></div>';
+		},
+		// Do not use arrow function to use `this`.
+		isUpsellRendered: function( errorCode ) {
+			return this.cacheUpsellErrorCodes.includes( errorCode );
+		},
+		// Do not use arrow function to use `this`.
+		cacheRenderedUpsell: function ( errorCode ) {
+			this.cacheUpsellErrorCodes.push( errorCode );
+		},
+		/**
+		 * Get error message from Ajax response or Error. 
+		 * @param {Object} resp
+		 */
+		getErrorMessage: ( resp ) => {
+			return resp.message || resp.data && resp.data.message ||
+				resp.responseJSON && resp.responseJSON.data && resp.responseJSON.data.message ||
+				window.wp_smush_msgs.generic_ajax_error ||
+				resp.status && 'Request failed. Returned status of ' + resp.status
+		},
+
+		/**
+		 * Displays a floating message from response,
+		 * using the #wp-smush-ajax-notice container.
+		 *
+		 * @param {Object|string} notice
+		 * @param {Object} 		  noticeOptions
+		 */
+		showNotice: function( notice, noticeOptions ) {
+			let message;
+			if ( 'object' === typeof notice ) {
+				message = this.getErrorMessage( notice );
+			} else {
+				message = notice;
+			}
+
+			if ( ! message ) {
+				return;
+			}
+
+			noticeOptions = noticeOptions || {};
+			noticeOptions = Object.assign({
+				showdismiss: false,
+				autoclose: true,
+			},noticeOptions);
+			noticeOptions = {
+				type: noticeOptions.type || 'error',
+				icon: noticeOptions.icon || ( 'success' === noticeOptions.type ? 'check-tick' : 'info' ),
+				dismiss: {
+					show: noticeOptions.showdismiss,
+					label: window.wp_smush_msgs.noticeDismiss,
+					tooltip: window.wp_smush_msgs.noticeDismissTooltip,
+				},
+				autoclose: {
+					show: noticeOptions.autoclose
+				}
+			};
+
+			const noticeMessage = `<p>${ message }</p>`;
+
+			SUI.openNotice( 'wp-smush-ajax-notice', noticeMessage, noticeOptions );
+			return Promise.resolve( '#wp-smush-ajax-notice' );
+		},
+		renderActivationCDNNotice: function( noticeMessage ) {
+			const animatedNotice = document.getElementById('wp-smush-animated-upsell-notice');
+			if ( animatedNotice ) {
+				return;
+			}
+			const upsellHtml = `<div class="sui-notice sui-notice-info sui-margin-top" id="wp-smush-animated-upsell-notice">
+									<div class="sui-notice-content">
+										<div class="sui-notice-message">
+											<i class="sui-notice-icon sui-icon-info" aria-hidden="true"></i>
+											<p>${noticeMessage}</p>
+										</div>
+									</div>
+								</div>`;
+			document.querySelector( '#smush-box-bulk .wp-smush-bulk-wrapper' ).outerHTML += upsellHtml;
+		}
+	};
+
+	WP_Smush.helpers.init();
+}() );

+/* global ajaxurl */
+/* global wp_smush_msgs */
+
+( function( $ ) {
+	'use strict';
+
+	const s3alert = $( '#wp-smush-s3support-alert' );
+
+	/**
+	 * S3 support alert.
+	 *
+	 * @since 3.6.2  Moved from class-s3.php
+	 */
+	if ( s3alert.length ) {
+		const noticeOptions = {
+			type: 'warning',
+			icon: 'info',
+			dismiss: {
+				show: true,
+				label: wp_smush_msgs.noticeDismiss,
+				tooltip: wp_smush_msgs.noticeDismissTooltip,
+			},
+		};
+
+		window.SUI.openNotice(
+			'wp-smush-s3support-alert',
+			s3alert.data( 'message' ),
+			noticeOptions
+		);
+	}
+
+	// Dismiss S3 support alert.
+	s3alert.on( 'click', 'button', () => {
+		$.post( ajaxurl,
+			{
+				action: 'dismiss_s3support_alert',
+				_ajax_nonce: window.wp_smush_msgs.nonce,
+			}
+		);
+	} );
+
+	// Remove API message.
+	$( '#wp-smush-api-message button.sui-button-icon' ).on( 'click', function( e ) {
+		e.preventDefault();
+		const notice = $( '#wp-smush-api-message' );
+		notice.slideUp( 'slow', function() {
+			notice.remove();
+		} );
+		$.post( ajaxurl,
+			{
+				action: 'hide_api_message',
+				_ajax_nonce: window.wp_smush_msgs.nonce,
+			}
+		);
+	} );
+
+	// Hide the notice after a CTA button was clicked
+	function removeNotice( e ) {
+		const $notice = $( e.currentTarget ).closest( '.smush-notice' );
+		$notice.fadeTo( 100, 0, () =>
+			$notice.slideUp( 100, () => $notice.remove() )
+		);
+	}
+
+	// Only used for the Dashboard notification for now.
+	$( '.smush-notice .smush-notice-act' ).on( 'click', ( e ) => {
+		removeNotice( e );
+	} );
+
+	// Dismiss the update notice.
+	$( '.wp-smush-update-info' ).on( 'click', '.notice-dismiss', ( e ) => {
+		e.preventDefault();
+		removeNotice( e );
+		$.post( ajaxurl,
+			{
+				action: 'dismiss_update_info',
+				_ajax_nonce: window.wp_smush_msgs.nonce,
+			}
+		);
+	} );
+}( jQuery ) );

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * Modals JavaScript code.
+ */
+ ( function() {
+	'use strict';
+
+	/**
+	 * Onboarding modal.
+	 *
+	 * @since 3.1
+	 */
+	WP_Smush.onboarding = {
+		membership: 'free', // Assume free by default.
+		onboardingModal: document.getElementById( 'smush-onboarding-dialog' ),
+		scanFilesModal: document.getElementById( 'checking-files-dialog' ),
+		first_slide: 'usage',
+		settings: {
+			first: true,
+			last: false,
+			slide: 'usage',
+			value: false,
+		},
+		selection: {
+			usage: false,
+			auto: true,
+			lossy: true,
+			strip_exif: true,
+			original: false,
+			lazy_load: true,
+		},
+		contentContainer: document.getElementById( 'smush-onboarding-content' ),
+		onboardingSlides: [
+			'usage',
+			'auto',
+			'lossy',
+			'strip_exif',
+			'original',
+			'lazy_load',
+		],
+		touchX: null,
+		touchY: null,
+
+		/**
+		 * Init module.
+		 */
+		init() {
+			if ( ! this.onboardingModal ) {
+				return;
+			}
+
+			const dialog = document.getElementById( 'smush-onboarding' );
+
+			this.membership = dialog.dataset.type;
+
+			if ( 'pro' !== this.membership ) {
+				this.onboardingSlides = [
+					'usage',
+					'auto',
+					'lossy',
+					'strip_exif',
+					'lazy_load',
+				];
+			}
+
+			if ( 'false' === dialog.dataset.tracking ) {
+				this.onboardingSlides.pop();
+			}
+
+			this.renderTemplate();
+
+			// Skip setup.
+			const skipButton = this.onboardingModal.querySelector(
+				'.smush-onboarding-skip-link'
+			);
+			if ( skipButton ) {
+				skipButton.addEventListener( 'click', this.skipSetup );
+			}
+
+			// Show the modal.
+			window.SUI.openModal(
+				'smush-onboarding-dialog',
+				'checking-files-dialog',
+				undefined,
+				false
+			);
+		},
+
+		/**
+		 * Get swipe coordinates.
+		 *
+		 * @param {Object} e
+		 */
+		handleTouchStart( e ) {
+			const firstTouch = e.touches[ 0 ];
+			this.touchX = firstTouch.clientX;
+			this.touchY = firstTouch.clientY;
+		},
+
+		/**
+		 * Process swipe left/right.
+		 *
+		 * @param {Object} e
+		 */
+		handleTouchMove( e ) {
+			if ( ! this.touchX || ! this.touchY ) {
+				return;
+			}
+
+			const xUp = e.touches[ 0 ].clientX,
+				yUp = e.touches[ 0 ].clientY,
+				xDiff = this.touchX - xUp,
+				yDiff = this.touchY - yUp;
+
+			if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
+				if ( xDiff > 0 ) {
+					if ( false === WP_Smush.onboarding.settings.last ) {
+						WP_Smush.onboarding.next( null, 'next' );
+					}
+				} else if ( false === WP_Smush.onboarding.settings.first ) {
+					WP_Smush.onboarding.next( null, 'prev' );
+				}
+			}
+
+			this.touchX = null;
+			this.touchY = null;
+		},
+
+		/**
+		 * Update the template, register new listeners.
+		 *
+		 * @param {string} directionClass Accepts: fadeInRight, fadeInLeft, none.
+		 */
+		renderTemplate( directionClass = 'none' ) {
+			// Grab the selected value.
+			const input = this.onboardingModal.querySelector(
+				'input[type="checkbox"]'
+			);
+			if ( input ) {
+				this.selection[ input.id ] = input.checked;
+			}
+
+			const template = WP_Smush.onboarding.template( 'smush-onboarding' );
+			const content = template( this.settings );
+
+			if ( content ) {
+				this.contentContainer.innerHTML = content;
+
+				if ( 'none' === directionClass ) {
+					this.contentContainer.classList.add( 'loaded' );
+				} else {
+					this.contentContainer.classList.remove( 'loaded' );
+					this.contentContainer.classList.add( directionClass );
+					setTimeout( () => {
+						this.contentContainer.classList.add( 'loaded' );
+						this.contentContainer.classList.remove(
+							directionClass
+						);
+					}, 600 );
+				}
+			}
+
+			this.onboardingModal.addEventListener(
+				'touchstart',
+				this.handleTouchStart,
+				false
+			);
+			this.onboardingModal.addEventListener(
+				'touchmove',
+				this.handleTouchMove,
+				false
+			);
+
+			this.bindSubmit();
+		},
+
+		/**
+		 * Catch "Finish setup wizard" button click.
+		 */
+		bindSubmit() {
+			const submitButton = this.onboardingModal.querySelector(
+				'button[type="submit"]'
+			);
+			const self = this;
+
+			if ( submitButton ) {
+				submitButton.addEventListener( 'click', function( e ) {
+					e.preventDefault();
+
+					// Because we are not rendering the template, we need to update the last element value.
+					const input = self.onboardingModal.querySelector(
+						'input[type="checkbox"]'
+					);
+					if ( input ) {
+						self.selection[ input.id ] = input.checked;
+					}
+
+					const _nonce = document.getElementById(
+						'smush_quick_setup_nonce'
+					);
+
+					const xhr = new XMLHttpRequest();
+					xhr.open( 'POST', ajaxurl + '?action=smush_setup', true );
+					xhr.setRequestHeader(
+						'Content-type',
+						'application/x-www-form-urlencoded'
+					);
+					xhr.onload = () => {
+						if ( 200 === xhr.status ) {
+							WP_Smush.onboarding.showScanDialog();
+						} else {
+							window.console.log(
+								'Request failed.  Returned status of ' +
+									xhr.status
+							);
+						}
+					};
+					xhr.send(
+						'smush_settings=' +
+							JSON.stringify( self.selection ) +
+							'&_ajax_nonce=' +
+							_nonce.value
+					);
+				} );
+			}
+		},
+
+		/**
+		 * Handle navigation.
+		 *
+		 * @param {Object}      e
+		 * @param {null|string} whereTo
+		 */
+		next( e, whereTo = null ) {
+			const index = this.onboardingSlides.indexOf( this.settings.slide );
+			let newIndex = 0;
+
+			if ( ! whereTo ) {
+				newIndex =
+					null !== e && e.classList.contains( 'next' )
+						? index + 1
+						: index - 1;
+			} else {
+				newIndex = 'next' === whereTo ? index + 1 : index - 1;
+			}
+
+			const directionClass =
+				null !== e && e.classList.contains( 'next' )
+					? 'fadeInRight'
+					: 'fadeInLeft';
+
+			this.settings = {
+				first: 0 === newIndex,
+				last: newIndex + 1 === this.onboardingSlides.length, // length !== index
+				slide: this.onboardingSlides[ newIndex ],
+				value: this.selection[ this.onboardingSlides[ newIndex ] ],
+			};
+
+			this.renderTemplate( directionClass );
+		},
+
+		/**
+		 * Handle circle navigation.
+		 *
+		 * @param {string} target
+		 */
+		goTo( target ) {
+			const newIndex = this.onboardingSlides.indexOf( target );
+
+			this.settings = {
+				first: 0 === newIndex,
+				last: newIndex + 1 === this.onboardingSlides.length, // length !== index
+				slide: target,
+				value: this.selection[ target ],
+			};
+
+			this.renderTemplate();
+		},
+
+		/**
+		 * Skip onboarding experience.
+		 */
+		skipSetup: () => {
+			const _nonce = document.getElementById( 'smush_quick_setup_nonce' );
+
+			const xhr = new XMLHttpRequest();
+			xhr.open(
+				'POST',
+				ajaxurl + '?action=skip_smush_setup&_ajax_nonce=' + _nonce.value
+			);
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					WP_Smush.onboarding.showScanDialog();
+				} else {
+					window.console.log(
+						'Request failed.  Returned status of ' + xhr.status
+					);
+				}
+			};
+			xhr.send();
+		},
+
+		/**
+		 * Show checking files dialog.
+		 */
+		showScanDialog() {
+			window.SUI.closeModal();
+			// Do not need to re-check images if we are in bulk smush page.
+			if ( window.location.search.indexOf('page=smush-bulk') > -1 ) {
+				return;
+			}
+			window.SUI.openModal(
+				'checking-files-dialog',
+				'wpbody-content',
+				undefined,
+				false
+			);
+
+			const nonce = document.getElementById( 'wp_smush_options_nonce' );
+
+			setTimeout( () => {
+				const xhr = new XMLHttpRequest();
+				xhr.open( 'POST', ajaxurl + '?action=scan_for_resmush', true );
+				xhr.setRequestHeader(
+					'Content-type',
+					'application/x-www-form-urlencoded'
+				);
+				xhr.onload = () => {
+					const elem = document.querySelector(
+						'#smush-onboarding-dialog'
+					);
+					elem.parentNode.removeChild( elem );
+
+					if ( 200 === xhr.status ) {
+						setTimeout( function() {
+							window.location.search = 'page=smush-bulk';
+						}, 1000 );
+					} else {
+						window.console.log(
+							'Request failed.  Returned status of ' + xhr.status
+						);
+					}
+				};
+				xhr.send(
+					'type=media&get_ui=false&process_settings=false&wp_smush_options_nonce=' +
+						nonce.value
+				);
+			}, 3000 );
+		},
+
+		/**
+		 * Hide new features modal.
+		 *
+		 * @param {string} redirectUrl Redirect url after dismissing the new feature modal.
+		 * @since 3.7.0
+		 * @since 3.12.2 Add a new parameter redirectUrl
+		 */
+		hideUpgradeModal: ( redirectUrl ) => {
+			window.SUI.closeModal( 'smush-updated-dialog' );
+			const xhr = new XMLHttpRequest();
+			xhr.open( 'POST', ajaxurl + '?action=hide_new_features&_ajax_nonce=' + window.wp_smush_msgs.nonce );
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					if ( redirectUrl ) {
+						window.location.href = redirectUrl;
+					}
+				} else {
+					window.console.log(
+						'Request failed.  Returned status of ' + xhr.status
+					);
+				}
+			}
+			xhr.send();
+		},
+	};
+
+	/**
+	 * Template function (underscores based).
+	 *
+	 * @type {Function}
+	 */
+	WP_Smush.onboarding.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 );
+			data.first_slide = WP_Smush.onboarding.first_slide;
+			return compiled( data );
+		};
+	} );
+
+	window.addEventListener( 'load', () => WP_Smush.onboarding.init() );
+}() );

+/**
+ * Shared UI JS libraries. Use only what we need to keep the vendor file size smaller.
+ *
+ * @package
+ */
+require( '@wpmudev/shared-ui/dist/js/_src/code-snippet' );
+require( '@wpmudev/shared-ui/dist/js/_src/modal-dialog' );
+require( '@wpmudev/shared-ui/dist/js/_src/notifications' );
+require( '@wpmudev/shared-ui/dist/js/_src/select2.full' );
+require( '@wpmudev/shared-ui/dist/js/_src/select2' );
+require( '@wpmudev/shared-ui/dist/js/_src/tabs' );
+require( '@wpmudev/shared-ui/dist/js/_src/upload' ); // Used on lazy load page (since 3.2.2).
+require( '@wpmudev/shared-ui/dist/js/_src/reviews' );

+/**
+ * BLOCK: extend image block
+ */
+const { createHigherOrderComponent } = wp.compose,
+	{ Fragment } = wp.element,
+	{ InspectorControls } = wp.blockEditor,
+	{ PanelBody } = wp.components;
+
+/**
+ * Transform bytes to human readable format.
+ *
+ * @param {number} bytes
+ * @return {string}  Readable size string.
+ */
+function humanFileSize( bytes ) {
+	const thresh = 1024,
+		units = [ 'kB', 'MB', 'GB', 'TB' ];
+
+	if ( Math.abs( bytes ) < thresh ) {
+		return bytes + ' B';
+	}
+
+	let u = -1;
+	do {
+		bytes /= thresh;
+		++u;
+	} while ( Math.abs( bytes ) >= thresh && u < units.length - 1 );
+
+	return bytes.toFixed( 1 ) + ' ' + units[ u ];
+}
+
+/**
+ * Generate Smush stats table.
+ *
+ * @param {number} id
+ * @param {Object} stats
+ * @return {*}  Smush stats.
+ */
+export function smushStats( id, stats ) {
+	if ( 'undefined' === typeof stats ) {
+		return window.smush_vars.strings.gb.select_image;
+	} else if ( 'string' === typeof stats ) {
+		return stats;
+	}
+
+	return (
+		<div
+			id="smush-stats"
+			className="sui-smush-media smush-stats-wrapper hidden"
+			style={ { display: 'block' } }
+		>
+			<table className="wp-smush-stats-holder">
+				<thead>
+					<tr>
+						<th className="smush-stats-header">
+							{ window.smush_vars.strings.gb.size }
+						</th>
+						<th className="smush-stats-header">
+							{ window.smush_vars.strings.gb.savings }
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{ Object.keys( stats.sizes )
+						.filter( ( item ) => 0 < stats.sizes[ item ].percent )
+						.map( ( item, i ) => (
+							<tr key={ i }>
+								<td>{ item.toUpperCase() }</td>
+								<td>
+									{ humanFileSize(
+										stats.sizes[ item ].bytes
+									) }{ ' ' }
+									( { stats.sizes[ item ].percent }% )
+								</td>
+							</tr>
+						) ) }
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+/**
+ * Fetch image data. If image is Smushing, update in 3 seconds.
+ *
+ * TODO: this could be optimized not to query so much.
+ *
+ * @param {Object} props
+ */
+export function fetchProps( props ) {
+	const image = new wp.api.models.Media( { id: props.attributes.id } ),
+		smushData = props.attributes.smush;
+
+	image.fetch( { attribute: 'smush' } ).done( function( img ) {
+		if ( 'string' === typeof img.smush ) {
+			props.setAttributes( { smush: img.smush } );
+			//setTimeout( () => fetch( props ), 3000 );
+		} else if (
+			'undefined' !== typeof img.smush &&
+			( 'undefined' === typeof smushData ||
+				JSON.stringify( smushData ) !== JSON.stringify( img.smush ) )
+		) {
+			props.setAttributes( { smush: img.smush } );
+		}
+	} );
+}
+
+/**
+ * Modify the block’s edit component.
+ * Receives the original block BlockEdit component and returns a new wrapped component.
+ */
+const smushStatsControl = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		// If not image block or not selected, return unmodified block.
+		if (
+			'core/image' !== props.name ||
+			! props.isSelected ||
+			'undefined' === typeof props.attributes.id
+		) {
+			return (
+				<Fragment>
+					<BlockEdit { ...props } />
+				</Fragment>
+			);
+		}
+
+		const smushData = props.attributes.smush;
+		fetchProps( props );
+
+		return (
+			<Fragment>
+				<BlockEdit { ...props } />
+				<InspectorControls>
+					<PanelBody title={ window.smush_vars.strings.gb.stats }>
+						{ smushStats( props.attributes.id, smushData ) }
+					</PanelBody>
+				</InspectorControls>
+			</Fragment>
+		);
+	};
+}, 'withInspectorControl' );
+
+wp.hooks.addFilter(
+	'editor.BlockEdit',
+	'wp-smush/smush-data-control',
+	smushStatsControl
+);

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * CDN functionality.
+ *
+ * @since 3.0
+ */
+( function() {
+	'use strict';
+
+	WP_Smush.CDN = {
+		cdnEnableButton: document.getElementById( 'smush-enable-cdn' ),
+		cdnDisableButton: document.getElementById( 'smush-cancel-cdn' ),
+		cdnStatsBox: document.querySelector( '.smush-cdn-stats' ),
+
+		init() {
+			/**
+			 * Handle "Get Started" button click on disabled CDN page.
+			 */
+			if ( this.cdnEnableButton ) {
+				this.cdnEnableButton.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					e.currentTarget.classList.add( 'sui-button-onload' );
+					this.toggle_cdn( true );
+				} );
+			}
+
+			/**
+			 * Handle "Deactivate' button click on CDN page.
+			 */
+			if ( this.cdnDisableButton ) {
+				this.cdnDisableButton.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					e.currentTarget.classList.add( 'sui-button-onload' );
+
+					this.toggle_cdn( false );
+				} );
+			}
+
+			this.updateStatsBox();
+		},
+
+		/**
+		 * Toggle CDN.
+		 *
+		 * @since 3.0
+		 *
+		 * @param {boolean} enable
+		 */
+		toggle_cdn( enable ) {
+			const nonceField = document.getElementsByName(
+				'wp_smush_options_nonce'
+			);
+
+			const xhr = new XMLHttpRequest();
+			xhr.open( 'POST', ajaxurl + '?action=smush_toggle_cdn', true );
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					const res = JSON.parse( xhr.response );
+					if ( 'undefined' !== typeof res.success && res.success ) {
+						window.location.search = 'page=smush-cdn';
+					} else if ( 'undefined' !== typeof res.data.message ) {
+						WP_Smush.helpers.showErrorNotice( res.data.message );
+					}
+				} else {
+					WP_Smush.helpers.showErrorNotice( 'Request failed.  Returned status of ' + xhr.status );
+				}
+			};
+			xhr.send(
+				'param=' + enable + '&_ajax_nonce=' + nonceField[ 0 ].value
+			);
+		},
+
+		/**
+		 * Update the CDN stats box in summary meta box. Only fetch new data when on CDN page.
+		 *
+		 * @since 3.0
+		 */
+		updateStatsBox() {
+			if (
+				'undefined' === typeof this.cdnStatsBox ||
+				! this.cdnStatsBox
+			) {
+				return;
+			}
+
+			// Only fetch the new stats, when user is on CDN page.
+			if ( ! window.location.search.includes( 'page=smush-cdn' ) ) {
+				return;
+			}
+
+			this.toggleElements();
+
+			const xhr = new XMLHttpRequest();
+			xhr.open( 'POST', ajaxurl + '?action=get_cdn_stats', true );
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					const res = JSON.parse( xhr.response );
+					if ( 'undefined' !== typeof res.success && res.success ) {
+						this.toggleElements();
+					} else if ( 'undefined' !== typeof res.data.message ) {
+						WP_Smush.helpers.showErrorNotice( res.data.message );
+					}
+				} else {
+					WP_Smush.helpers.showErrorNotice( 'Request failed.  Returned status of ' + xhr.status );
+				}
+			};
+			xhr.send();
+		},
+
+		/**
+		 * Show/hide elements during status update in the updateStatsBox()
+		 *
+		 * @since 3.1  Moved out from updateStatsBox()
+		 */
+		toggleElements() {
+			const spinner = this.cdnStatsBox.querySelector(
+				'.sui-icon-loader'
+			);
+			const elements = this.cdnStatsBox.querySelectorAll(
+				'.wp-smush-stats > :not(.sui-icon-loader)'
+			);
+
+			for ( let i = 0; i < elements.length; i++ ) {
+				elements[ i ].classList.toggle( 'sui-hidden' );
+			}
+
+			spinner.classList.toggle( 'sui-hidden' );
+		},
+	};
+
+	WP_Smush.CDN.init();
+} )();

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * Directory scanner module that will Smush images in the Directory Smush modal.
+ *
+ * @since 2.8.1
+ *
+ * @param {string|number} totalSteps
+ * @param {string|number} currentStep
+ * @return {Object}  Scan object.
+ * @class
+ */
+const DirectoryScanner = ( totalSteps, currentStep ) => {
+	totalSteps = parseInt( totalSteps );
+	currentStep = parseInt( currentStep );
+
+	let cancelling = false,
+		failedItems = 0,
+		skippedItems = 0;
+
+	const obj = {
+		scan() {
+			const remainingSteps = totalSteps - currentStep;
+			if ( currentStep !== 0 ) {
+				// Scan started on a previous page load.
+				step( remainingSteps ).fail( this.showScanError );
+			} else {
+				jQuery
+					.post( ajaxurl, {
+						action: 'directory_smush_start',
+						_ajax_nonce: window.wp_smush_msgs.nonce
+					}, () =>
+						step( remainingSteps ).fail( this.showScanError )
+					)
+					.fail( this.showScanError );
+			}
+		},
+
+		cancel() {
+			cancelling = true;
+			return jQuery.post( ajaxurl, {
+				action: 'directory_smush_cancel',
+				_ajax_nonce: window.wp_smush_msgs.nonce
+			} );
+		},
+
+		getProgress() {
+			if ( cancelling ) {
+				return 0;
+			}
+			// O M G ... Logic at it's finest!
+			const remainingSteps = totalSteps - currentStep;
+			return Math.min(
+				Math.round(
+					( parseInt( totalSteps - remainingSteps ) * 100 ) /
+					totalSteps
+				),
+				99
+			);
+		},
+
+		onFinishStep( progress ) {
+			jQuery( '.wp-smush-progress-dialog .sui-progress-state-text' ).html(
+				currentStep -
+				failedItems +
+				'/' +
+				totalSteps +
+				' ' +
+				window.wp_smush_msgs.progress_smushed
+			);
+			WP_Smush.directory.updateProgressBar( progress );
+		},
+
+		onFinish() {
+			WP_Smush.directory.updateProgressBar( 100 );
+			window.location.href =
+				window.wp_smush_msgs.directory_url + '&scan=done';
+		},
+
+		/**
+		 * Displays an error when the scan request fails.
+		 *
+		 * @param {Object} res XHR object.
+		 */
+		showScanError( res ) {
+			const dialog = jQuery( '#wp-smush-progress-dialog' );
+
+			// Add the error class to show/hide elements in the dialog.
+			dialog
+				.removeClass( 'wp-smush-exceed-limit' )
+				.addClass( 'wp-smush-scan-error' );
+
+			// Add the error status and description to the error message.
+			dialog
+				.find( '#smush-scan-error' )
+				.text( `${ res.status } ${ res.statusText }` );
+
+			// Show/hide the 403 error specific instructions.
+			const forbiddenMessage = dialog.find( '.smush-403-error-message' );
+			if ( 403 !== res.status ) {
+				forbiddenMessage.addClass( 'sui-hidden' );
+			} else {
+				forbiddenMessage.removeClass( 'sui-hidden' );
+			}
+		},
+
+		limitReached() {
+			const dialog = jQuery( '#wp-smush-progress-dialog' );
+
+			dialog.addClass( 'wp-smush-exceed-limit' );
+			dialog
+				.find( '#cancel-directory-smush' )
+				.attr( 'data-tooltip', window.wp_smush_msgs.bulk_resume );
+			dialog
+				.find( '.sui-box-body .sui-icon-close' )
+				.removeClass( 'sui-icon-close' )
+				.addClass( 'sui-icon-play' );
+			dialog
+				.find( '#cancel-directory-smush' )
+				.attr( 'id', 'cancel-directory-smush-disabled' );
+		},
+
+		resume() {
+			const dialog = jQuery( '#wp-smush-progress-dialog' );
+			const resume = dialog.find( '#cancel-directory-smush-disabled' );
+
+			dialog.removeClass( 'wp-smush-exceed-limit' );
+			dialog
+				.find( '.sui-box-body .sui-icon-play' )
+				.removeClass( 'sui-icon-play' )
+				.addClass( 'sui-icon-close' );
+			resume.attr( 'data-tooltip', 'Cancel' );
+			resume.attr( 'id', 'cancel-directory-smush' );
+
+			obj.scan();
+		},
+	};
+
+	/**
+	 * Execute a scan step recursively
+	 *
+	 * Private to avoid overriding
+	 *
+	 * @param {number} remainingSteps
+	 */
+	const step = function( remainingSteps ) {
+		if ( remainingSteps >= 0 ) {
+			currentStep = totalSteps - remainingSteps;
+			return jQuery.post(
+				ajaxurl,
+				{
+					action: 'directory_smush_check_step',
+					_ajax_nonce: window.wp_smush_msgs.nonce,
+					step: currentStep,
+				},
+				( response ) => {
+					// We're good - continue on.
+					if (
+						'undefined' !== typeof response.success &&
+						response.success
+					) {
+						if (
+							'undefined' !== typeof response.data &&
+							'undefined' !== typeof response.data.skipped &&
+							true === response.data.skipped
+						) {
+							skippedItems++;
+						}
+
+						currentStep++;
+						remainingSteps = remainingSteps - 1;
+						obj.onFinishStep( obj.getProgress() );
+						step( remainingSteps ).fail( obj.showScanError );
+					} else if (
+						'undefined' !== typeof response.data.error &&
+						'dir_smush_limit_exceeded' === response.data.error
+					) {
+						// Limit reached. Stop.
+						obj.limitReached();
+					} else {
+						// Error? never mind, continue, but count them.
+						failedItems++;
+						currentStep++;
+						remainingSteps = remainingSteps - 1;
+						obj.onFinishStep( obj.getProgress() );
+						step( remainingSteps ).fail( obj.showScanError );
+					}
+				}
+			);
+		}
+		return jQuery.post(
+			ajaxurl,
+			{
+				action: 'directory_smush_finish',
+				_ajax_nonce: window.wp_smush_msgs.nonce,
+				items: totalSteps - ( failedItems + skippedItems ),
+				failed: failedItems,
+				skipped: skippedItems,
+			},
+			( response ) => obj.onFinish( response )
+		);
+	};
+
+	return obj;
+};
+
+export default DirectoryScanner;

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * Lazy loading functionality.
+ *
+ * @since 3.0
+ */
+( function() {
+	'use strict';
+
+	WP_Smush.Lazyload = {
+		lazyloadEnableButton: document.getElementById(
+			'smush-enable-lazyload'
+		),
+		lazyloadDisableButton: document.getElementById(
+			'smush-cancel-lazyload'
+		),
+
+		init() {
+			const self = this;
+
+			/**
+			 * Handle "Activate" button click on disabled Lazy load page.
+			 */
+			if ( this.lazyloadEnableButton ) {
+				this.lazyloadEnableButton.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					e.currentTarget.classList.add( 'sui-button-onload' );
+
+					this.toggle_lazy_load( true );
+				} );
+			}
+
+			/**
+			 * Handle "Deactivate' button click on Lazy load page.
+			 */
+			if ( this.lazyloadDisableButton ) {
+				this.lazyloadDisableButton.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					e.currentTarget.classList.add( 'sui-button-onload' );
+
+					this.toggle_lazy_load( false );
+				} );
+			}
+
+			/**
+			 * Handle "Remove icon" button click on Lazy load page.
+			 *
+			 * This removes the image from the upload placeholder.
+			 *
+			 * @since 3.2.2
+			 */
+			const removeSpinner = document.getElementById(
+				'smush-remove-spinner'
+			);
+			if ( removeSpinner ) {
+				removeSpinner.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					this.removeLoaderIcon();
+				} );
+			}
+			const removePlaceholder = document.getElementById(
+				'smush-remove-placeholder'
+			);
+			if ( removePlaceholder ) {
+				removePlaceholder.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					this.removeLoaderIcon( 'placeholder' );
+				} );
+			}
+
+			/**
+			 * Handle "Remove" icon click.
+			 *
+			 * This removes the select icon from the list (not same as above functions).
+			 *
+			 * @since 3.2.2
+			 */
+			const items = document.querySelectorAll( '.smush-ll-remove' );
+			if ( items && 0 < items.length ) {
+				items.forEach( function( el ) {
+					el.addEventListener( 'click', ( e ) => {
+						e.preventDefault();
+						e.target.closest( 'li' ).style.display = 'none';
+						self.remove(
+							e.target.dataset.id,
+							e.target.dataset.type
+						);
+					} );
+				} );
+			}
+
+			this.handlePredefinedPlaceholders();
+		},
+
+		/**
+		 * Handle background color changes for the two predefined placeholders.
+		 *
+		 * @since 3.7.1
+		 */
+		handlePredefinedPlaceholders() {
+			const pl1 = document.getElementById( 'placeholder-icon-1' );
+			if ( pl1 ) {
+				pl1.addEventListener( 'click', () => this.changeColor( '#F3F3F3' ) );
+			}
+
+			const pl2 = document.getElementById( 'placeholder-icon-2' );
+			if ( pl2 ) {
+				pl2.addEventListener( 'click', () => this.changeColor( '#333333' ) );
+			}
+		},
+
+		/**
+		 * Set color.
+		 *
+		 * @since 3.7.1
+		 * @param {string} color
+		 */
+		changeColor( color ) {
+			document.getElementById( 'smush-color-picker' ).value = color;
+			document.querySelector( '.sui-colorpicker-hex .sui-colorpicker-value > span > span' ).style.backgroundColor = color;
+			document.querySelector( '.sui-colorpicker-hex .sui-colorpicker-value > input' ).value = color;
+		},
+
+		/**
+		 * Toggle lazy loading.
+		 *
+		 * @since 3.2.0
+		 *
+		 * @param {string} enable
+		 */
+		toggle_lazy_load( enable ) {
+			const nonceField = document.getElementsByName(
+				'wp_smush_options_nonce'
+			);
+
+			const xhr = new XMLHttpRequest();
+			xhr.open(
+				'POST',
+				ajaxurl + '?action=smush_toggle_lazy_load',
+				true
+			);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.onload = () => {
+				if ( 200 === xhr.status ) {
+					const res = JSON.parse( xhr.response );
+					if ( 'undefined' !== typeof res.success && res.success ) {
+						window.location.search = 'page=smush-lazy-load';
+					} else if ( 'undefined' !== typeof res.data.message ) {
+						WP_Smush.helpers.showErrorNotice( res.data.message );
+						document.querySelector( '.sui-button-onload' ).classList.remove( 'sui-button-onload' );
+					}
+				} else {
+					WP_Smush.helpers.showErrorNotice( 'Request failed.  Returned status of ' + xhr.status );
+					document.querySelector( '.sui-button-onload' ).classList.remove( 'sui-button-onload' );
+				}
+			};
+			xhr.send(
+				'param=' + enable + '&_ajax_nonce=' + nonceField[ 0 ].value
+			);
+		},
+
+		/**
+		 * Add lazy load spinner icon.
+		 *
+		 * @since 3.2.2
+		 * @param {string} type  Accepts: spinner, placeholder.
+		 */
+		addLoaderIcon( type = 'spinner' ) {
+			let frame;
+
+			// If the media frame already exists, reopen it.
+			if ( frame ) {
+				frame.open();
+				return;
+			}
+
+			// Create a new media frame
+			frame = wp.media( {
+				title: 'Select or upload an icon',
+				button: {
+					text: 'Select icon',
+				},
+				multiple: false, // Set to true to allow multiple files to be selected
+			} );
+
+			// When an image is selected in the media frame...
+			frame.on( 'select', function() {
+				// Get media attachment details from the frame state
+				const attachment = frame
+					.state()
+					.get( 'selection' )
+					.first()
+					.toJSON();
+
+				// Send the attachment URL to our custom image input field.
+				const imageIcon = document.getElementById(
+					'smush-' + type + '-icon-preview'
+				);
+				imageIcon.style.backgroundImage =
+					'url("' + attachment.url + '")';
+				imageIcon.style.display = 'block';
+
+				// Send the attachment id to our hidden input
+				document
+					.getElementById( 'smush-' + type + '-icon-file' )
+					.setAttribute( 'value', attachment.id );
+
+				// Hide the add image link
+				document.getElementById(
+					'smush-upload-' + type
+				).style.display = 'none';
+
+				// Unhide the remove image link
+				const removeDiv = document.getElementById(
+					'smush-remove-' + type
+				);
+				removeDiv.querySelector( 'span' ).innerHTML =
+					attachment.filename;
+				removeDiv.style.display = 'block';
+			} );
+
+			// Finally, open the modal on click
+			frame.open();
+		},
+
+		/**
+		 * Remove lazy load spinner icon.
+		 *
+		 * @since 3.2.2
+		 * @param {string} type  Accepts: spinner, placeholder.
+		 */
+		removeLoaderIcon: ( type = 'spinner' ) => {
+			// Clear out the preview image
+			const imageIcon = document.getElementById(
+				'smush-' + type + '-icon-preview'
+			);
+			imageIcon.style.backgroundImage = '';
+			imageIcon.style.display = 'none';
+
+			// Un-hide the add image link
+			document.getElementById( 'smush-upload-' + type ).style.display =
+				'block';
+
+			// Hide the delete image link
+			document.getElementById( 'smush-remove-' + type ).style.display =
+				'none';
+
+			// Delete the image id from the hidden input
+			document
+				.getElementById( 'smush-' + type + '-icon-file' )
+				.setAttribute( 'value', '' );
+		},
+
+		/**
+		 * Remove item.
+		 *
+		 * @param {number} id    Image ID.
+		 * @param {string} type  Accepts: spinner, placeholder.
+		 */
+		remove: ( id, type = 'spinner' ) => {
+			const nonceField = document.getElementsByName(
+				'wp_smush_options_nonce'
+			);
+			const xhr = new XMLHttpRequest();
+			xhr.open( 'POST', ajaxurl + '?action=smush_remove_icon', true );
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.send(
+				'id=' +
+					id +
+					'&type=' +
+					type +
+					'&_ajax_nonce=' +
+					nonceField[ 0 ].value
+			);
+		},
+	};
+
+	WP_Smush.Lazyload.init();
+} )();

+/* global smush_vars */
+/* global _ */
+
+/**
+ * Adds a Smush Now button and displays stats in Media Attachment Details Screen
+ */
+(function ($, _) {
+	'use strict';
+
+	// Local reference to the WordPress media namespace.
+	const smushMedia = wp.media,
+		sharedTemplate =
+			"<span class='setting smush-stats' data-setting='smush'>" +
+			"<span class='name'><%= label %></span>" +
+			"<span class='value'><%= value %></span>" +
+			'</span>',
+		template = _.template(sharedTemplate);
+
+	/**
+	 * Create the template.
+	 *
+	 * @param {string} smushHTML
+	 * @return {Object} Template object
+	 */
+	const prepareTemplate = function (smushHTML) {
+		/**
+		 * @param {Array}  smush_vars.strings  Localization strings.
+		 * @param {Object} smush_vars          Object from wp_localize_script()
+		 */
+		return template({
+			label: smush_vars.strings.stats_label,
+			value: smushHTML,
+		});
+	};
+
+	if (
+		'undefined' !== typeof smushMedia.view &&
+		'undefined' !== typeof smushMedia.view.Attachment.Details.TwoColumn
+	) {
+		// Local instance of the Attachment Details TwoColumn used in the edit attachment modal view
+		const smushMediaTwoColumn =
+			smushMedia.view.Attachment.Details.TwoColumn;
+
+		/**
+		 * Add Smush details to attachment.
+		 *
+		 * A similar view to media.view.Attachment.Details
+		 * for use in the Edit Attachment modal.
+		 *
+		 * @see wp-includes/js/media-grid.js
+		 */
+		smushMedia.view.Attachment.Details.TwoColumn = smushMediaTwoColumn.extend(
+			{
+				initialize() {
+					smushMediaTwoColumn.prototype.initialize.apply(this, arguments);
+					this.listenTo(this.model, 'change:smush', this.render);
+				},
+
+				render() {
+					// Ensure that the main attachment fields are rendered.
+					smushMedia.view.Attachment.prototype.render.apply(
+						this,
+						arguments
+					);
+
+					const smushHTML = this.model.get('smush');
+					if (typeof smushHTML === 'undefined') {
+						return this;
+					}
+
+					this.model.fetch();
+
+					/**
+					 * Detach the views, append our custom fields, make sure that our data is fully updated
+					 * and re-render the updated view.
+					 */
+					this.views.detach();
+					this.$el
+						.find('.settings')
+						.append(prepareTemplate(smushHTML));
+					this.views.render();
+
+					return this;
+				},
+			}
+		);
+	}
+
+	// Local instance of the Attachment Details TwoColumn used in the edit attachment modal view
+	const smushAttachmentDetails = smushMedia.view.Attachment.Details;
+
+	/**
+	 * Add Smush details to attachment.
+	 */
+	smushMedia.view.Attachment.Details = smushAttachmentDetails.extend({
+		initialize() {
+			smushAttachmentDetails.prototype.initialize.apply(this, arguments);
+			this.listenTo(this.model, 'change:smush', this.render);
+		},
+
+		render() {
+			// Ensure that the main attachment fields are rendered.
+			smushMedia.view.Attachment.prototype.render.apply(this, arguments);
+
+			const smushHTML = this.model.get('smush');
+			if (typeof smushHTML === 'undefined') {
+				return this;
+			}
+
+			this.model.fetch();
+
+			/**
+			 * Detach the views, append our custom fields, make sure that our data is fully updated
+			 * and re-render the updated view.
+			 */
+			this.views.detach();
+			this.$el.append(prepareTemplate(smushHTML));
+
+			return this;
+		},
+	});
+
+	/**
+	 * Create a new MediaLibraryTaxonomyFilter we later will instantiate
+	 *
+	 * @since 3.0
+	 */
+	const MediaLibraryTaxonomyFilter = wp.media.view.AttachmentFilters.extend({
+		id: 'media-attachment-smush-filter',
+
+		createFilters() {
+			this.filters = {
+				all: {
+					text: smush_vars.strings.filter_all,
+					props: { stats: 'all' },
+					priority: 10,
+				},
+
+				unsmushed: {
+					text: smush_vars.strings.filter_not_processed,
+					props: { stats: 'unsmushed' },
+					priority: 20,
+				},
+
+				excluded: {
+					text: smush_vars.strings.filter_excl,
+					props: { stats: 'excluded' },
+					priority: 30,
+				},
+
+				failed: {
+					text: smush_vars.strings.filter_failed,
+					props: { stats: 'failed_processing' },
+					priority: 40,
+				},
+			};
+		},
+	});
+
+	/**
+	 * Extend and override wp.media.view.AttachmentsBrowser to include our new filter.
+	 *
+	 * @since 3.0
+	 */
+	const AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
+	wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
+		createToolbar() {
+			// Make sure to load the original toolbar
+			AttachmentsBrowser.prototype.createToolbar.call(this);
+			this.toolbar.set(
+				'MediaLibraryTaxonomyFilter',
+				new MediaLibraryTaxonomyFilter({
+					controller: this.controller,
+					model: this.collection.props,
+					priority: -75,
+				}).render()
+			);
+		},
+	});
+})(jQuery, _);

+/* global ajaxurl */
+/* global wp_smush_msgs */
+/* global WP_Smush */
+/* global SUI */
+
+( function( $ ) {
+	'use strict';
+
+	/**
+	 * Bulk compress page.
+	 */
+	$( 'form#smush-bulk-form' ).on( 'submit', function( e ) {
+		e.preventDefault();
+		$( '#save-settings-button' ).addClass( 'sui-button-onload' );
+		saveSettings( $( this ).serialize(), 'bulk' );
+		runReCheck();
+	} );
+
+	/**
+	 * Lazy load page.
+	 */
+	$( 'form#smush-lazy-load-form' ).on( 'submit', function( e ) {
+		e.preventDefault();
+		$( '#save-settings-button' ).addClass( 'sui-button-onload-text' );
+		saveSettings( $( this ).serialize(), 'lazy-load' );
+	} );
+
+	/**
+	 * CDN page.
+	 */
+	$( 'form#smush-cdn-form' ).on( 'submit', function( e ) {
+		e.preventDefault();
+		$( '#save-settings-button' ).addClass( 'sui-button-onload-text' );
+		saveSettings( $( this ).serialize(), 'cdn' );
+	} );
+
+	/**
+	 * Integrations page.
+	 */
+	$( 'form#smush-integrations-form' ).on( 'submit', function( e ) {
+		e.preventDefault();
+		$( '#save-settings-button' ).addClass( 'sui-button-onload-text' );
+		saveSettings( $( this ).serialize(), 'integrations' );
+	} );
+
+	/**
+	 * Settings page.
+	 */
+	$( 'form#smush-settings-form' ).on( 'submit', function( e ) {
+		e.preventDefault();
+		$( '#save-settings-button' ).addClass( 'sui-button-onload-text' );
+		saveSettings( $( this ).serialize(), 'settings' );
+	} );
+
+	/**
+	 * Save settings.
+	 *
+	 * @param {string} settings JSON string of settings.
+	 * @param {string} page     Settings page.
+	 */
+	function saveSettings( settings, page ) {
+		const xhr = new XMLHttpRequest();
+
+		xhr.open( 'POST', ajaxurl + '?action=smush_save_settings', true );
+		xhr.setRequestHeader(
+			'Content-type',
+			'application/x-www-form-urlencoded'
+		);
+
+		xhr.onload = () => {
+			$( '#save-settings-button' ).removeClass(
+				'sui-button-onload-text sui-button-onload'
+			);
+
+			if ( 200 === xhr.status ) {
+				const res = JSON.parse( xhr.response );
+				if ( 'undefined' !== typeof res.success && res.success ) {
+					showSuccessNotice( wp_smush_msgs.settingsUpdated );
+				} else if ( res.data && res.data.message ) {
+					WP_Smush.helpers.showErrorNotice( res.data.message );
+				} else {
+					WP_Smush.helpers.showErrorNotice( 'Request failed.' );
+				}
+			} else {
+				WP_Smush.helpers.showErrorNotice( 'Request failed. Returned status of ' + xhr.status );
+			}
+		};
+
+		xhr.send( 'page=' + page + '&' + settings + '&_ajax_nonce=' + wp_smush_msgs.nonce );
+	}
+
+	/**
+	 * Show successful update notice.
+	 *
+	 * @param {string} msg Notice message.
+	 */
+	function showSuccessNotice( msg ) {
+		const noticeMessage = `<p>${ msg }</p>`,
+			noticeOptions = {
+				type: 'success',
+				icon: 'check',
+			};
+
+		SUI.openNotice( 'wp-smush-ajax-notice', noticeMessage, noticeOptions );
+
+		const loadingButton = document.querySelector( '.sui-button-onload' );
+		if ( loadingButton ) {
+			loadingButton.classList.remove( 'sui-button-onload' );
+		}
+	}
+
+	/**
+	 * Re-check images from bulk smush and integrations pages.
+	 */
+	function runReCheck() {
+		$( '#save-settings-button' ).addClass( 'sui-button-onload' );
+
+		const param = {
+			action: 'scan_for_resmush',
+			wp_smush_options_nonce: $( '#wp_smush_options_nonce' ).val(),
+			type: 'media',
+		};
+
+		// Send ajax, Update Settings, And Check For resmush.
+		$.post( ajaxurl, $.param( param ) ).done( function() {
+			$( '#save-settings-button' ).removeClass( 'sui-button-onload' );
+		} );
+	}
+
+	/**
+	 * Parse remove data change.
+	 */
+	$( 'input[name=keep_data]' ).on( 'change', function( e ) {
+		const otherClass =
+			'keep_data-true' === e.target.id
+				? 'keep_data-false'
+				: 'keep_data-true';
+		e.target.parentNode.classList.add( 'active' );
+		document
+			.getElementById( otherClass )
+			.parentNode.classList.remove( 'active' );
+	} );
+
+	/**
+	 * Handle auto-detect checkbox toggle, to show/hide highlighting notice.
+	 */
+	$( 'input#detection' ).on( 'click', function() {
+		const noticeDiv = $( '.smush-highlighting-notice' );
+		const warningDiv = $( '.smush-highlighting-warning' );
+
+		// Setting enabled.
+		if ( $( this ).is( ':checked' ) ) {
+			// Highlighting is already active and setting not saved.
+			if ( noticeDiv.length > 0 ) {
+				noticeDiv.show();
+			} else {
+				warningDiv.show();
+			}
+		} else {
+			noticeDiv.hide();
+			warningDiv.hide();
+		}
+	} );
+}( jQuery ) );

+/* global WP_Smush */
+/* global ajaxurl */
+
+/**
+ * WebP functionality.
+ *
+ * @since 3.8.0
+ */
+
+(function () {
+	'use strict';
+
+	WP_Smush.WebP = {
+		nonceField: document.getElementsByName('wp_smush_options_nonce'),
+		toggleModuleButton: document.getElementById('smush-toggle-webp-button'),
+		recheckStatusButton: document.getElementById('smush-webp-recheck'),
+		recheckStatusLink: document.getElementById('smush-webp-recheck-link'),
+		showWizardButton: document.getElementById('smush-webp-toggle-wizard'),
+
+		init() {
+			this.maybeShowDeleteAllSuccessNotice();
+
+			/**
+			 * Handles the "Deactivate" and "Get Started" buttons on the WebP page.
+			 */
+			if (this.toggleModuleButton) {
+				this.toggleModuleButton.addEventListener('click', (e) =>
+					this.toggleWebp(e)
+				);
+			}
+
+			/**
+			 * Handle "RE-CHECK STATUS' button click on WebP page.
+			 */
+			if (this.recheckStatusButton) {
+				this.recheckStatusButton.addEventListener('click', (e) => {
+					e.preventDefault();
+					this.recheckStatus();
+				});
+			}
+
+			/**
+			 * Handle "RE-CHECK STATUS' link click on WebP page.
+			 */
+			if (this.recheckStatusLink) {
+				this.recheckStatusLink.addEventListener('click', (e) => {
+					e.preventDefault();
+					this.recheckStatus();
+				});
+			}
+
+			/**
+			 * Handles the "Delete WebP images" button.
+			 */
+			if (document.getElementById('wp-smush-webp-delete-all')) {
+				document
+					.getElementById('wp-smush-webp-delete-all')
+					.addEventListener('click', (e) => this.deleteAll(e));
+			}
+
+			if (this.showWizardButton) {
+				this.showWizardButton.addEventListener(
+					'click',
+					this.toggleWizard
+				);
+			}
+		},
+
+		/**
+		 * Toggle WebP module.
+		 *
+		 * @param {Event} e
+		 */
+		toggleWebp(e) {
+			e.preventDefault();
+
+			const button = e.currentTarget,
+				doEnable = 'enable' === button.dataset.action;
+
+			button.classList.add('sui-button-onload');
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', ajaxurl + '?action=smush_webp_toggle', true);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+
+			xhr.onload = () => {
+				const res = JSON.parse(xhr.response);
+
+				if (200 === xhr.status) {
+					if ('undefined' !== typeof res.success && res.success) {
+						const scanPromise = this.runScan();
+						scanPromise.onload = () => {
+							window.location.href =
+								window.wp_smush_msgs.localWebpURL;
+						};
+					} else if ('undefined' !== typeof res.data.message) {
+						this.showNotice(res.data.message);
+						button.classList.remove('sui-button-onload');
+					}
+				} else {
+					let message = window.wp_smush_msgs.generic_ajax_error;
+					if (res && 'undefined' !== typeof res.data.message) {
+						message = res.data.message;
+					}
+					this.showNotice(message);
+					button.classList.remove('sui-button-onload');
+				}
+			};
+
+			xhr.send(
+				'param=' + doEnable + '&_ajax_nonce=' + this.nonceField[0].value
+			);
+		},
+
+		/**
+		 * re-check server configuration for WebP.
+		 */
+		recheckStatus() {
+			this.recheckStatusButton.classList.add('sui-button-onload');
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', ajaxurl + '?action=smush_webp_get_status', true);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+			xhr.onload = () => {
+				this.recheckStatusButton.classList.remove('sui-button-onload');
+				let message = false;
+				const res = JSON.parse(xhr.response);
+				if (200 === xhr.status) {
+					const isConfigured = res.success ? '1' : '0';
+					if (
+						isConfigured !==
+						this.recheckStatusButton.dataset.isConfigured
+					) {
+						// Reload the page when the configuration status changed.
+						location.reload();
+					}
+				} else {
+					message = window.wp_smush_msgs.generic_ajax_error;
+				}
+
+				if (res && res.data) {
+					message = res.data;
+				}
+
+				if (message) {
+					this.showNotice(message);
+				}
+			};
+			xhr.send('_ajax_nonce=' + window.wp_smush_msgs.webp_nonce);
+		},
+
+		deleteAll(e) {
+			const button = e.currentTarget;
+			button.classList.add('sui-button-onload');
+
+			let message = false;
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', ajaxurl + '?action=smush_webp_delete_all', true);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+
+			xhr.onload = () => {
+				const res = JSON.parse(xhr.response);
+				if (200 === xhr.status) {
+					if ('undefined' !== typeof res.success && res.success) {
+						const scanPromise = this.runScan();
+						scanPromise.onload = () => {
+							location.search =
+								location.search + '&notice=webp-deleted';
+						};
+					} else {
+						message = window.wp_smush_msgs.generic_ajax_error;
+					}
+				} else {
+					message = window.wp_smush_msgs.generic_ajax_error;
+				}
+
+				if (res && res.data && res.data.message) {
+					message = res.data.message;
+				}
+
+				if (message) {
+					button.classList.remove('sui-button-onload');
+
+					const noticeMessage = `<p style="text-align: left;">${message}</p>`;
+					const noticeOptions = {
+						type: 'error',
+						icon: 'info',
+						autoclose: {
+							show: false,
+						},
+					};
+
+					window.SUI.openNotice(
+						'wp-smush-webp-delete-all-error-notice',
+						noticeMessage,
+						noticeOptions
+					);
+				}
+			};
+
+			xhr.send('_ajax_nonce=' + this.nonceField[0].value);
+		},
+
+		toggleWizard(e) {
+			e.currentTarget.classList.add('sui-button-onload');
+
+			const xhr = new XMLHttpRequest();
+			xhr.open(
+				'GET',
+				ajaxurl +
+					'?action=smush_toggle_webp_wizard&_ajax_nonce=' +
+					window.wp_smush_msgs.webp_nonce,
+				true
+			);
+			xhr.onload = () => location.reload();
+			xhr.send();
+		},
+
+		/**
+		 * Triggers the scanning of images for updating the images to re-smush.
+		 *
+		 * @since 3.8.0
+		 */
+		runScan() {
+			const xhr = new XMLHttpRequest(),
+				nonceField = document.getElementsByName(
+					'wp_smush_options_nonce'
+				);
+
+			xhr.open('POST', ajaxurl + '?action=scan_for_resmush', true);
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+
+			xhr.send('_ajax_nonce=' + nonceField[0].value);
+
+			return xhr;
+		},
+
+		/**
+		 * Show message (notice).
+		 *
+		 * @param {string} message
+		 * @param {string} type
+		 */
+		showNotice(message, type) {
+			if ('undefined' === typeof message) {
+				return;
+			}
+
+			const noticeMessage = `<p>${message}</p>`;
+			const noticeOptions = {
+				type: type || 'error',
+				icon: 'info',
+				dismiss: {
+					show: true,
+					label: window.wp_smush_msgs.noticeDismiss,
+					tooltip: window.wp_smush_msgs.noticeDismissTooltip,
+				},
+				autoclose: {
+					show: false,
+				},
+			};
+
+			window.SUI.openNotice(
+				'wp-smush-ajax-notice',
+				noticeMessage,
+				noticeOptions
+			);
+		},
+
+		/**
+		 * Show delete all webp success notice.
+		 */
+		maybeShowDeleteAllSuccessNotice() {
+			if (!document.getElementById('wp-smush-webp-delete-all-notice')) {
+				return;
+			}
+			const noticeMessage = `<p>${
+				document.getElementById('wp-smush-webp-delete-all-notice')
+					.dataset.message
+			}</p>`;
+
+			const noticeOptions = {
+				type: 'success',
+				icon: 'check-tick',
+				dismiss: {
+					show: true,
+				},
+			};
+
+			window.SUI.openNotice(
+				'wp-smush-webp-delete-all-notice',
+				noticeMessage,
+				noticeOptions
+			);
+		},
+	};
+
+	WP_Smush.WebP.init();
+})();

+/* global ajaxurl */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * SUI dependencies
+ */
+import { TutorialsList, TutorialsSlider } from '@wpmudev/shared-tutorials';
+
+import MixPanel from "./mixpanel"
+
+function hideTutorials() {
+	const xhr = new XMLHttpRequest();
+
+	xhr.open( 'POST', ajaxurl + '?action=smush_hide_tutorials', true );
+	xhr.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded' );
+
+	xhr.onload = () => {
+		if ( 200 === xhr.status ) {
+			const noticeMessage = `<p>${ window.wp_smush_msgs.tutorialsRemoved }</p>`,
+				noticeOptions = {
+					type: 'success',
+					icon: 'check',
+				};
+
+			window.SUI.openNotice(
+				'wp-smush-ajax-notice',
+				noticeMessage,
+				noticeOptions
+			);
+		}
+	};
+
+	xhr.send( '_ajax_nonce=' + window.wp_smush_msgs.nonce );
+}
+
+/**
+ * Render the "Tutorials List" component.
+ *
+ * @since 2.8.5
+ */
+domReady( function() {
+	// Tutorials section on Dashboard page.
+	const tutorialsDiv = document.getElementById( 'smush-dash-tutorials' );
+	if ( tutorialsDiv ) {
+		ReactDOM.render(
+			<TutorialsSlider
+				category="11228"
+				title={ window.smush_tutorials.tutorials }
+				viewAll={ window.smush_tutorials.tutorials_link }
+				onCloseClick={ hideTutorials }
+			/>,
+			tutorialsDiv
+		);
+	}
+
+	// Tutorials page.
+	const tutorialsPageBox = document.getElementById( 'smush-box-tutorials' );
+	if ( tutorialsPageBox ) {
+		ReactDOM.render(
+			<TutorialsList
+				category="11228"
+				title={ window.smush_tutorials.tutorials }
+				translate={ window.smush_tutorials.tutorials_strings }
+			/>,
+			tutorialsPageBox
+		);
+	}
+} );
+
+jQuery(function ($) {
+	$(document).on('click', '#smush-box-tutorials li > [role="link"], #smush-dash-tutorials li > [role="link"]', function () {
+		const $tutorial = $(this);
+		const isDashPage = !!$tutorial.closest('#smush-dash-tutorials').length;
+		const decodeHtml = (html) => {
+			const txt = document.createElement("textarea");
+			txt.innerHTML = html;
+			return txt.value;
+		};
+		const title = decodeHtml($tutorial.attr('title'));
+
+		(new MixPanel()).track('Tutorial Opened', {
+			'Tutorial Name': title,
+			'Triggered From': isDashPage ? 'Dashboard' : 'Tutorials Tab'
+		});
+	});
+});

+/* global ajaxurl */
+
+/**
+ * External dependencies
+ */
+import assign from 'lodash/assign';
+
+/**
+ * Wrapper function for ajax calls to WordPress.
+ *
+ * @since 3.12.0
+ */
+function SmushFetcher() {
+	/**
+	 * Request ajax with a promise.
+	 * Use FormData Object as data if you need to upload file
+	 *
+	 * @param {string}          action
+	 * @param {Object|FormData} data
+	 * @param {string}          method
+	 * @return {Promise<any>} Request results.
+	 */
+	function request(action, data = {}, method = 'POST') {
+		const args = {
+			url: ajaxurl,
+			method,
+			cache: false
+		};
+
+		if (data instanceof FormData) {
+			data.append('action', action);
+			data.append('_ajax_nonce', window.wp_smush_msgs.nonce);
+			args.contentType = false;
+			args.processData = false;
+		} else {
+			data._ajax_nonce = data._ajax_nonce || window.wp_smush_msgs.nonce;
+			data.action = action;
+		}
+		args.data = data;
+		return new Promise((resolve, reject) => {
+			jQuery.ajax(args).done(resolve).fail(reject);
+		}).then((response) => {
+			if (typeof response !== 'object') {
+				response = JSON.parse(response);
+			}
+			return response;
+		}).catch((error) => {
+			console.error('Error:', error);
+		});
+	}
+
+	const methods = {
+		/**
+		 * Manage ajax for background.
+		 */
+		background: {
+			/**
+			 * Start background process.
+			 */
+			start: () => {
+				return request('bulk_smush_start');
+			},
+
+			/**
+			 * Cancel background process.
+			 */
+			cancel: () => {
+				return request('bulk_smush_cancel');
+			},
+
+			/**
+			 * Initial State - Get stats on the first time.
+			 */
+			initState: () => {
+				return request('bulk_smush_get_status');
+			},
+
+			/**
+			 * Get stats.
+			 */
+			getStatus: () => {
+				return request('bulk_smush_get_status');
+			},
+
+			getStats: () => {
+				return request('bulk_smush_get_global_stats');
+			}
+		},
+		smush: {
+			/**
+			 * Sync stats.
+			 */
+			syncStats: ( data ) => {
+				data = data || {};
+				return request('get_stats', data);
+			},
+
+			/**
+             * Ignore All.
+             */
+			ignoreAll: ( type ) => {
+                return request('wp_smush_ignore_all_failed_items', {
+                    type: type,
+                });
+            },
+		},
+
+		/**
+		 * Manage ajax for other requests
+		 */
+		common: {
+			/**
+			 * Dismiss Notice.
+			 *
+			 * @param {string} dismissId Notification id.
+			 */
+			dismissNotice: (dismissId) => {
+				return request('smush_dismiss_notice', {
+					key: dismissId
+				});
+			},
+
+			/**
+			 * Hide the new features modal.
+			 *
+			 * @param {string} modalID Notification id.
+			 */
+			hideModal: (modalID) => request('hide_modal', {
+				modal_id: modalID,
+			}),
+
+			/**
+			 * Custom request.
+			 *
+			 * @param {Object} data
+			 */
+			request: (data) => data.action && request(data.action, data),
+		},
+	};
+
+	assign(this, methods);
+}
+
+const SmushAjax = new SmushFetcher();
+export default SmushAjax;
\ No newline at end of file

+/**
+ * External dependencies
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+const { __, sprintf } = wp.i18n;
+
+/**
+ * SUI dependencies
+ */
+import { Presets } from '@wpmudev/shared-presets';
+
+export const Configs = ({ isWidget }) => {
+	// TODO: Handle the html interpolation and translation better.
+	const proDescription = (
+		<>
+			{__(
+				'You can easily apply configs to multiple sites at once via ',
+				'wp-smushit'
+			)}
+			<a
+				href={window.smushReact.links.hubConfigs}
+				target="_blank"
+				rel="noreferrer"
+			>
+				{__('the Hub.')}
+			</a>
+		</>
+	);
+
+	const closeIcon = __('Close this dialog window', 'wp-smushit'),
+		cancelButton = __('Cancel', 'wp-smushit');
+
+	const lang = {
+		title: __('Preset Configs', 'wp-smushit'),
+		upload: __('Upload', 'wp-smushit'),
+		save: __('Save config', 'wp-smushit'),
+		loading: __('Updating the config list…', 'wp-smushit'),
+		emptyNotice: __(
+			'You don’t have any available config. Save preset configurations of Smush’s settings, then upload and apply them to your other sites in just a few clicks!',
+			'wp-smushit'
+		),
+		baseDescription: __(
+			'Use configs to save preset configurations of Smush’s settings, then upload and apply them to your other sites in just a few clicks!',
+			'wp-smushit'
+		),
+		proDescription,
+		syncWithHubText: __(
+			'Created or updated configs via the Hub?',
+			'wp-smushit'
+		),
+		syncWithHubButton: __('Check again', 'wp-smushit'),
+		apply: __('Apply', 'wp-smushit'),
+		download: __('Download', 'wp-smushit'),
+		edit: __('Name and Description', 'wp-smushit'),
+		delete: __('Delete', 'wp-smushit'),
+		notificationDismiss: __('Dismiss notice', 'wp-smushit'),
+		freeButtonLabel: __('Try The Hub', 'wp-smushit'),
+		defaultRequestError: sprintf(
+			/* translators: %s request status */
+			__(
+				'Request failed. Status: %s. Please reload the page and try again.',
+				'wp-smushit'
+			),
+			'{status}'
+		),
+		uploadActionSuccessMessage: sprintf(
+			/* translators: %s request status */
+			__(
+				'%s config has been uploaded successfully – you can now apply it to this site.',
+				'wp-smushit'
+			),
+			'{configName}'
+		),
+		uploadWrongPluginErrorMessage: sprintf(
+			/* translators: %s {pluginName} */
+			__(
+				'The uploaded file is not a %s Config. Please make sure the uploaded file is correct.',
+				'wp-smushit'
+			),
+			'{pluginName}'
+		),
+		applyAction: {
+			closeIcon,
+			cancelButton,
+			title: __('Apply Config', 'wp-smushit'),
+			description: sprintf(
+				/* translators: %s config name */
+				__(
+					'Are you sure you want to apply the %s config to this site? We recommend you have a backup available as your existing settings configuration will be overridden.',
+					'wp-smushit'
+				),
+				'{configName}'
+			),
+			actionButton: __('Apply', 'wp-smushit'),
+			successMessage: sprintf(
+				/* translators: %s. config name */
+				__('%s config has been applied successfully.', 'wp-smushit'),
+				'{configName}'
+			),
+		},
+		deleteAction: {
+			closeIcon,
+			cancelButton,
+			title: __('Delete Configuration File', 'wp-smushit'),
+			description: sprintf(
+				/* translators: %s config name */
+				__(
+					'Are you sure you want to delete %s? You will no longer be able to apply it to this or other connected sites.',
+					'wp-smushit'
+				),
+				'{configName}'
+			),
+			actionButton: __('Delete', 'wp-smushit'),
+		},
+		editAction: {
+			closeIcon,
+			cancelButton,
+			nameInput: __('Config name', 'wp-smushit'),
+			descriptionInput: __('Description', 'wp-smushit'),
+			emptyNameError: __('The config name is required', 'wp-smushit'),
+			actionButton: __('Save', 'wp-smushit'),
+			editTitle: __('Rename Config', 'wp-smushit'),
+			editDescription: __(
+				'Change your config name to something recognizable.',
+				'wp-smushit'
+			),
+			createTitle: __('Save Config', 'wp-smushit'),
+			createDescription: __(
+				'Save your current settings configuration. You’ll be able to then download and apply it to your other sites.',
+				'wp-smushit'
+			),
+			successMessage: sprintf(
+				/* translators: %s. config name */
+				__('%s config created successfully.', 'wp-smushit'),
+				'{configName}'
+			),
+		},
+		settingsLabels: {
+			bulk_smush: __('Bulk Smush', 'wp-smushit'),
+			integrations: __('Integrations', 'wp-smushit'),
+			lazy_load: __('Lazy Load', 'wp-smushit'),
+			cdn: __('CDN', 'wp-smushit'),
+			webp_mod: __('Local WebP', 'wp-smushit'),
+			settings: __('Settings', 'wp-smushit'),
+			networkwide: __('Subsite Controls', 'wp-smushit'),
+		},
+	};
+
+	return (
+		<Presets
+			isWidget={isWidget}
+			isPro={window.smushReact.isPro}
+			isWhitelabel={window.smushReact.hideBranding}
+			sourceLang={lang}
+			sourceUrls={window.smushReact.links}
+			requestsData={window.smushReact.requestsData}
+		/>
+	);
+};
+
+domReady(function () {
+	const configsPageBox = document.getElementById('smush-box-configs');
+	if (configsPageBox) {
+		ReactDOM.render(<Configs isWidget={false} />, configsPageBox);
+	}
+	const configsWidgetBox = document.getElementById('smush-widget-configs');
+	if (configsWidgetBox) {
+		ReactDOM.render(<Configs isWidget={true} />, configsWidgetBox);
+	}
+});

+/* global ajaxurl */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Internal dependencies
+ */
+import StepsBar from '../views/webp/steps-bar';
+import StepContent from '../views/webp/step-content';
+import FreeContent from '../views/webp/free-content';
+import StepFooter from '../views/webp/step-footer';
+
+export const WebpPage = ({ smushData }) => {
+	const [currentStep, setCurrentStep] = React.useState(
+		parseInt(smushData.startStep)
+	);
+
+	React.useEffect(() => {
+		if (2 === currentStep) {
+			window.SUI.suiCodeSnippet();
+		}
+	}, [currentStep]);
+
+	const [serverType, setServerType] = React.useState(
+		smushData.detectedServer
+	);
+	const [rulesMethod, setRulesMethod] = React.useState('automatic');
+	const [rulesError, setRulesError] = React.useState(false);
+
+	const makeRequest = (action, verb = 'GET') => {
+		return new Promise((resolve, reject) => {
+			const xhr = new XMLHttpRequest();
+			xhr.open(
+				verb,
+				`${ajaxurl}?action=${action}&_ajax_nonce=${smushData.nonce}`,
+				true
+			);
+
+			xhr.setRequestHeader(
+				'Content-type',
+				'application/x-www-form-urlencoded'
+			);
+
+			xhr.onload = () => {
+				if (xhr.status >= 200 && xhr.status < 300) {
+					resolve(JSON.parse(xhr.response));
+				} else {
+					reject(xhr);
+				}
+			};
+			xhr.onerror = () => reject(xhr);
+			xhr.send();
+		});
+	};
+
+	const stepContent = smushData.isPro ? (
+		<StepContent
+			currentStep={currentStep}
+			serverType={serverType}
+			rulesMethod={rulesMethod}
+			setRulesMethod={setRulesMethod}
+			rulesError={rulesError}
+			setServerType={setServerType}
+			smushData={smushData}
+			makeRequest={makeRequest}
+		/>
+	) : (
+		<FreeContent smushData={smushData} />
+	);
+
+	return (
+		<React.Fragment>
+			<div className="sui-box-body sui-no-padding">
+				<div className="sui-row-with-sidenav">
+					<StepsBar smushData={smushData} currentStep={currentStep} />
+					{stepContent}
+				</div>
+			</div>
+			{smushData.isPro && (
+				<StepFooter
+					currentStep={currentStep}
+					setCurrentStep={setCurrentStep}
+					serverType={serverType}
+					rulesMethod={rulesMethod}
+					setRulesError={setRulesError}
+					makeRequest={makeRequest}
+				/>
+			)}
+		</React.Fragment>
+	);
+};
+
+domReady(function () {
+	const webpPageBox = document.getElementById('smush-box-webp-wizard');
+	if (webpPageBox) {
+		ReactDOM.render(
+			<WebpPage smushData={window.smushReact} />,
+			webpPageBox
+		);
+	}
+});

+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+export default ({ smushData }) => {
+	return (
+		<div className="sui-box-body">
+			<div className="sui-message">
+				<img
+					className="sui-image"
+					src={smushData.urls.freeImg}
+					alt={__('Smush WebP', 'wp-smushit')}
+				/>
+
+				<div className="sui-message-content">
+					<p>
+						{__(
+							'Fix the "Serve images in next-gen format" Google PageSpeed recommendation by setting up this feature. Serve WebP versions of your images to supported browsers, and gracefully fall back on JPEGs and PNGs for browsers that don\'t support WebP.',
+							'wp-smushit'
+						)}
+					</p>
+
+					<ol className="sui-upsell-list">
+						<li>
+							<span
+								className="sui-icon-check sui-sm"
+								aria-hidden="true"
+							/>
+							{__(
+								'Add or automatically apply the rules to enable Local WebP feature.',
+								'wp-smushit'
+							)}
+						</li>
+						<li>
+							<span
+								className="sui-icon-check sui-sm"
+								aria-hidden="true"
+							/>
+							{__(
+								'Fix “Serve images in next-gen format" Google PageSpeed recommendation.',
+								'wp-smushit'
+							)}
+						</li>
+						<li>
+							<span
+								className="sui-icon-check sui-sm"
+								aria-hidden="true"
+							/>
+							{__(
+								'Serve WebP version of images in the browsers that support it and fall back to JPEGs and PNGs for non supported browsers.',
+								'wp-smushit'
+							)}
+						</li>
+					</ol>
+
+					<p className="sui-margin-top">
+						<a
+							href={smushData.urls.upsell}
+							className="sui-button sui-button-purple"
+							style={{ marginRight: '30px' }}
+							target="_blank"
+							rel="noreferrer"
+						>
+							{__('Try WebP for free', 'wp-smushit')}
+						</a>
+						<a
+							href={smushData.urls.webpDoc}
+							style={{ color: '#8D00B1' }}
+							target="_blank"
+							rel="noreferrer"
+						>
+							{__('Learn more', 'wp-smushit')}
+						</a>
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};

+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+export default ({
+	currentStep,
+	setCurrentStep,
+	serverType,
+	rulesMethod,
+	setRulesError,
+	makeRequest,
+}) => {
+	const genericRequestError = __(
+		'Something went wrong with the request.',
+		'wp-smushit'
+	);
+
+	const checkStatus = () => {
+		setRulesError(false);
+
+		makeRequest('smush_webp_get_status')
+			.then((res) => {
+				if (res.success) {
+					setCurrentStep(currentStep + 1);
+				} else {
+					setRulesError(res.data);
+				}
+			})
+			.catch(() => setRulesError(genericRequestError));
+	};
+
+	const applyRules = () => {
+		setRulesError(false);
+
+		makeRequest('smush_webp_apply_htaccess_rules')
+			.then((res) => {
+				if (res.success) {
+					return checkStatus();
+				}
+
+				setRulesError(res.data);
+			})
+			.catch(() => setRulesError(genericRequestError));
+	};
+
+	const hideWizard = (e) => {
+		e.currentTarget.classList.add(
+			'sui-button-onload',
+			'sui-button-onload-text'
+		);
+		makeRequest('smush_toggle_webp_wizard').then(() => location.reload());
+	};
+
+	// Markup stuff.
+	let buttonsLeft;
+
+	const quitButton = (
+		<button
+			type="button"
+			className="sui-button sui-button-ghost"
+			onClick={hideWizard}
+		>
+			<span className="sui-loading-text">
+				<span className="sui-icon-logout" aria-hidden="true"></span>
+				<span className="sui-hidden-xs">
+					{__('Quit setup', 'wp-smushit')}
+				</span>
+				<span className="sui-hidden-sm sui-hidden-md sui-hidden-lg">
+					{__('Quit', 'wp-smushit')}
+				</span>
+			</span>
+
+			<span
+				className="sui-icon-loader sui-loading"
+				aria-hidden="true"
+			></span>
+		</button>
+	);
+
+	if (1 !== currentStep) {
+		buttonsLeft = (
+			<button
+				type="button"
+				className="sui-button sui-button-compound sui-button-ghost"
+				onClick={() => setCurrentStep(currentStep - 1)}
+			>
+				<span className="sui-compound-desktop" aria-hidden="true">
+					<span className="sui-icon-arrow-left"></span>
+					{__('Previous', 'wp-smushit')}
+				</span>
+
+				<span className="sui-compound-mobile" aria-hidden="true">
+					<span className="sui-icon-arrow-left"></span>
+				</span>
+
+				<span className="sui-screen-reader-text">
+					{__('Previous', 'wp-smushit')}
+				</span>
+			</button>
+		);
+	}
+
+	const getButtonsRight = () => {
+		if (1 === currentStep) {
+			return (
+				<button
+					type="button"
+					className="sui-button sui-button-blue sui-button-icon-right"
+					onClick={() => setCurrentStep(currentStep + 1)}
+				>
+					{__('Next', 'wp-smushit')}
+					<span
+						className="sui-icon-arrow-right"
+						aria-hidden="true"
+					></span>
+				</button>
+			);
+		}
+
+		if (2 === currentStep) {
+			if ('apache' === serverType && 'automatic' === rulesMethod) {
+				return (
+					<button
+						type="button"
+						className="sui-button sui-button-blue"
+						onClick={applyRules}
+					>
+						{__('Apply rules', 'wp-smushit')}
+					</button>
+				);
+			}
+
+			return (
+				<button
+					type="button"
+					className="sui-button sui-button-blue"
+					onClick={checkStatus}
+				>
+					{__('Check status', 'wp-smushit')}
+				</button>
+			);
+		}
+
+		return (
+			<button
+				type="button"
+				className="sui-button sui-button-blue"
+				onClick={hideWizard}
+			>
+				<span className="sui-button-text-default">
+					{__('Finish', 'wp-smushit')}
+				</span>
+
+				<span className="sui-button-text-onload">
+					<span
+						className="sui-icon-loader sui-loading"
+						aria-hidden="true"
+					></span>
+					{__('Finishing setup…', 'wp-smushit')}
+				</span>
+			</button>
+		);
+	};
+
+	return (
+		<div className="sui-box-footer">
+			<div className="sui-actions-left">
+				{quitButton}
+				{buttonsLeft}
+			</div>
+			<div className="sui-actions-right">{getButtonsRight()}</div>
+		</div>
+	);
+};

+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+const { __ } = wp.i18n;
+
+export default ({ currentStep, smushData }) => {
+	const getStepClass = (step) => {
+		const stepClass = 'smush-wizard-bar-step';
+
+		if (!smushData.isPro) {
+			return stepClass + ' disabled';
+		}
+
+		if (step > currentStep) {
+			return stepClass;
+		}
+
+		return (
+			stepClass +
+			(step === currentStep ? ' current' : ' sui-tooltip done')
+		);
+	};
+
+	const getStepNumber = (step) => {
+		return currentStep > step ? (
+			<span className="sui-icon-check" aria-hidden="true"></span>
+		) : (
+			step
+		);
+	};
+
+	const steps = [
+		{ number: 1, title: __('Server Type', 'wp-smushit') },
+		{ number: 2, title: __('Add Rules', 'wp-smushit') },
+		{ number: 3, title: __('Finish Setup', 'wp-smushit') },
+	];
+
+	return (
+		<div className="sui-sidenav">
+			<span className="smush-wizard-bar-subtitle">
+				{__('Setup', 'wp-smushit')}
+			</span>
+			<div className="smush-sidenav-title">
+				<h4>{__('Local WebP', 'wp-smushit')}</h4>
+				{!smushData.isPro && (
+					<span className="sui-tag sui-tag-pro">
+						{__('Pro', 'wp-smushit')}
+					</span>
+				)}
+			</div>
+
+			<div className="smush-wizard-steps-container">
+				<svg
+					className="smush-svg-mobile"
+					focusable="false"
+					aria-hidden="true"
+				>
+					<line
+						x1="0"
+						x2="50%"
+						stroke={1 !== currentStep ? '#1ABC9C' : '#E6E6E6'}
+					/>
+					<line
+						x1="50%"
+						x2="100%"
+						stroke={3 === currentStep ? '#1ABC9C' : '#E6E6E6'}
+					/>
+				</svg>
+				<ul>
+					{steps.map((step) => (
+						<React.Fragment key={step.number}>
+							<li
+								className={getStepClass(step.number)}
+								data-tooltip={__(
+									'This stage is already completed.',
+									'wp-smushit'
+								)}
+							>
+								<div className="smush-wizard-bar-step-number">
+									{getStepNumber(step.number)}
+								</div>
+								{step.title}
+							</li>
+							{3 !== step.number && (
+								<svg
+									data={step.number}
+									data2={currentStep}
+									className="smush-svg-desktop"
+									focusable="false"
+									aria-hidden="true"
+								>
+									<line
+										y1="0"
+										y2="40px"
+										stroke={
+											step.number < currentStep
+												? '#1ABC9C'
+												: '#E6E6E6'
+										}
+									/>
+								</svg>
+							)}
+						</React.Fragment>
+					))}
+				</ul>
+			</div>
+		</div>
+	);
+};

+@include body-class(true) {
+    &.sui-color-accessible {
+        .smush-final-log .smush-bulk-error-row {
+            box-shadow: inset 2px 0 0 0 $accessible-dark;
+            .smush-bulk-image-data:before {
+                color: $accessible-dark;
+            }
+        }
+        // Bulk Smush Fancy Tree
+        ul.fancytree-container {
+            .fancytree-selected {
+                background-color: #F8F8F8;
+                span.fancytree-checkbox {
+                    border: 1px solid $accessible-dark;
+                    background-color: $accessible-dark;
+                }
+            }
+            span.fancytree-expander:before,
+            span.fancytree-icon:before,
+            span.fancytree-title {
+                color: $accessible-dark;
+            }
+        }
+        // CDN
+        .smush-filename-extension {
+            background-color: $accessible-dark;
+        }
+        // Check images button.
+        .sui-button {
+            &.smush-button-check-success:before {
+                color: $accessible-light;
+            }
+        }
+        // Smush submit note.
+        .smush-submit-note {
+            color: $accessible-dark;
+        }
+
+        // Hightlight lazyload spinner.
+        .sui-lazyload .sui-box-selector [name="animation[spinner-icon]"]:checked+span {
+            background-color: rgba(220,220,222, 0.7)!important;
+        }
+    }
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .sui-wrap .sui-toggle-slider {
+        -ms-high-contrast-adjust: none;
+    }
+}

+// This needs to be here.
+@import "modules/variables";
+
+// Share UI styles
+@import "~@wpmudev/shared-ui/scss/functions";
+@import "~@wpmudev/shared-ui/scss/colors";
+@import "~@wpmudev/shared-ui/scss/variables";
+$google-fonts-url: 'https://fonts.bunny.net/css?family=Roboto:400,500,700';
+@import "~@wpmudev/shared-ui/scss/mixins";
+@import "~@wpmudev/shared-ui/scss/accessibility";
+@import "~@wpmudev/shared-ui/scss/animations";
+@import "~@wpmudev/shared-ui/scss/typography";
+@import "~@wpmudev/shared-ui/scss/icons";
+@import "~@wpmudev/shared-ui/scss/buttons";
+@import "~@wpmudev/shared-ui/scss/toggles";
+@import "~@wpmudev/shared-ui/scss/boxes";
+@import "~@wpmudev/shared-ui/scss/box-settings";
+@import "~@wpmudev/shared-ui/scss/layout";
+@import "~@wpmudev/shared-ui/scss/notifications";
+@import "~@wpmudev/shared-ui/scss/header";
+@import "~@wpmudev/shared-ui/scss/summary";
+@import "~@wpmudev/shared-ui/scss/list";
+@import "~@wpmudev/shared-ui/scss/tooltips";
+@import "~@wpmudev/shared-ui/scss/select2";
+@import "~@wpmudev/shared-ui/scss/tags";
+@import "~@wpmudev/shared-ui/scss/forms";
+@import "~@wpmudev/shared-ui/scss/radio-checkbox";
+@import "~@wpmudev/shared-ui/scss/tabs";
+@import "~@wpmudev/shared-ui/scss/sidenav";
+@import "~@wpmudev/shared-ui/scss/dropdowns";
+@import "~@wpmudev/shared-ui/scss/scores";
+@import "~@wpmudev/shared-ui/scss/footer";
+@import "~@wpmudev/shared-ui/scss/progress-bars";
+@import "~@wpmudev/shared-ui/scss/modals";
+@import "~@wpmudev/shared-ui/scss/utility";
+@import "~@wpmudev/shared-ui/scss/wp-admin-notices";
+@import "~@wpmudev/shared-ui/scss/tables";
+@import "~@wpmudev/shared-ui/scss/accordions";
+// Used on lazy loading page (since 3.2.2).
+@import "~@wpmudev/shared-ui/scss/box-selectors";
+@import "~@wpmudev/shared-ui/scss/upload";
+@import "~@wpmudev/shared-ui/scss/_colorpickers.scss";
+// Upgrade page (since 3.2.3).
+@import "~@wpmudev/shared-ui/scss/upgrade-page";
+@import "~@wpmudev/shared-ui/scss/reviews";
+// Used on WebP page (since 3.8.0).
+@import "~@wpmudev/shared-ui/scss/_code-snippet.scss";
+// Upsells (since 3.9.1).
+@import "~@wpmudev/shared-ui/scss/upsells";
+
+// App styles
+@import "modules/admin";
+@import "modules/directory-smush";
+@import "modules/cdn";
+@import "modules/webp";
+
+// SUI Color Accessibility
+@import "~@wpmudev/shared-ui/scss/color-accessibility";
+@import "accessibility/color-accessibility";

+@import "variables";
+
+/**
+ * CDN styles
+ *
+ * @since 3.0
+ */
+
+@include body-class {
+
+    .sui-wrap {
+
+        .sui-box-settings-row .sui-box-settings-col-1 {
+            vertical-align: top;
+        }
+
+        &.wrap-smush-cdn {
+            .sui-block-content-center p {
+                max-width: 600px;
+                margin: 20px auto 30px;
+            }
+            .sui-box-header .sui-actions-right .sui-icon-info{
+                font-size: 16px;
+                position: relative;
+                top: 1.5px;
+            }
+        }
+
+        .sui-cdn {
+            form p:first-of-type {
+                margin-top: 0;
+            }
+        }
+        .wp-smush-stats {
+            display: flex;
+            align-items: center;
+            line-height: 0;
+
+            .sui-tooltip {
+                line-height: 10px;
+                margin-right: 10px;
+            }
+        }
+
+        /* Filename Extensions Icons */
+        .smush-filename-extension {
+            border-radius: 4px;
+            display: inline-block;
+            font-size: 9px;
+            font-weight: 600;
+            color: #fff;
+            text-transform: uppercase;
+            text-align: center;
+            line-height: 43px;
+            height: 30px;
+            margin: 0 5px 0 0;
+            width: 30px;
+
+            &.smush-extension-jpeg,
+            &.smush-extension-jpg { background-color: #F7E100; }
+            &.smush-extension-png { background-color: #FFB694; }
+            &.smush-extension-gif { background-color: #72D5D4; }
+            &.smush-extension-webp { background-color: #72ADD5; }
+            &.smush-extension-svg { background-color: #88D572; }
+            &.smush-extension-iframe {
+                background-color: #8772D5;
+                font-size: 7px;
+            }
+        }
+    }
+
+}

+/* ****************************************************************************
+ * MEDIA AREA SCSS FILE
+ */
+@import "~@wpmudev/shared-ui/scss/functions";
+@import "~@wpmudev/shared-ui/scss/colors";
+@import "~@wpmudev/shared-ui/scss/variables";
+// Override body class
+$sui-version: 'smush-media';
+$sui-wrap-class: false;
+@import "~@wpmudev/shared-ui/scss/mixins";
+@import "~@wpmudev/shared-ui/scss/tooltips";
+
+/* ****************************************************************************
+ * MEDIA AREA STYLES
+ */
+
+// Set column width.
+.manage-column.column-smushit {
+	width: 260px;
+}
+
+// Margin for buttons.
+.sui-smush-media {
+	.button {
+		margin-right: 5px;
+		&:last-of-type {
+			margin-right: 0;
+		}
+	}
+}
+
+// Smush button loading icon.
+#ngg-listimages,
+.column-smushit {
+	.spinner {
+		float: none;
+
+		&.visible {
+			visibility: visible;
+		}
+	}
+}
+.smush-status-links{
+	.smush-upgrade-link {
+		color: #8D00B1;
+		font-size: 12px;
+	}
+	.smush-ignore-utm,.smush-revert-utm{
+		display: block;
+		margin: 6px 0 4px;
+	}
+	a {
+		text-decoration: none;
+	}
+	span {
+		float: none !important;;
+	}
+	.smush-cdn-notice {
+		color: #50575E;
+		a {
+			color:#2271B1;
+			&:focus {
+				box-shadow: none;
+				opacity: 0.7;
+			}
+		}
+	}
+}
+.smush-status {
+	&.smush-warning,&.smush-ignored,&.smush-success{
+		padding-left:17px;
+		position: relative;
+		&:before{
+			content:"";
+			background: url('../images/icon-warning.png' ) no-repeat 0 0;
+			position: absolute;
+			width:12px;
+			height:12px;
+			background-size: contain;
+			left: 0;
+			top:3px;
+		}
+	}
+	&.smush-ignored{
+		&:before{
+			background-image: url('../images/icon-ignored.png' ) !important;
+		}
+	}
+	&.smush-success{
+		&:before{
+			background-image: url('../images/icon-success.png' ) !important;
+		}
+	}
+	.sui-icon-warning-media-lib {
+		margin-right:4px;
+		position:relative;
+		top:1px;
+	}	
+}
+.column-smushit .smush-status{
+	color:#50575E;
+}
+// Stats table.
+.sui-smush-media {
+	table.wp-smush-stats-holder {
+		width: 100%;
+		border: 1px solid #E6E6E6;
+		border-radius: 4px;
+		margin-top: 6px;
+		border-collapse: collapse;
+		border-spacing: 0;
+		thead {
+			th.smush-stats-header {
+				padding: 8px 10px;
+				border-bottom: 1px solid #E6E6E6 !important;
+				color: #32373D;
+				font-size: 12px;
+				font-weight: bold;
+				letter-spacing: -0.23px;
+				line-height: 16px;
+				text-align: left;
+			}
+		}
+		tr {
+			border: 1px solid #E6E6E6;
+		}
+		td {
+			overflow-wrap: break-word;
+			vertical-align: middle;
+			padding: 8px 10px;
+			color: #555555;
+			font-size: 11px;
+			letter-spacing: -0.21px;
+			line-height: 16px;
+			border-bottom: 1px solid #E6E6E6;
+			&:first-of-type {
+				max-width: 110px;
+				font-weight: 500;
+			}
+		}
+	}
+}
+
+// Override !important set from WordPress.
+#the-list {
+	.sui-smush-media {
+		thead {
+			th.smush-stats-header {
+				border-bottom: 1px solid #E6E6E6 !important;
+			}
+		}
+	}
+}
+
+// Responsive table for list mode.
+@media screen and (max-width: 1024px) {
+	.wp-list-table .smushit {
+		table.wp-smush-stats-holder {
+			th {
+				display: table-cell;
+				box-sizing: border-box;
+			}
+			tr td {
+				word-wrap: break-word;
+				display: table-cell !important;
+				&:first-child {
+					border-right: none;
+					box-sizing: border-box;
+				}
+				&:last-child {
+					box-sizing: border-box;
+					float: none;
+					overflow: visible;
+				}
+			}
+		}
+	}
+}
+
+// NextGen Integration.
+.iedit .wp-smush-action,
+.iedit .smush-stats-details {
+	font-size: 11px;
+}
+
+/*NextGen Gallery stats*/
+#ngg-listimages {
+	table.wp-smush-stats-holder {
+		table-layout: fixed;
+		border: 1px solid lightgray;
+		border-collapse: collapse;
+		width: 100%;
+		td,
+		th {
+			border: 1px solid #CECECE;
+		}
+	}
+	.column-7 {
+		width: 300px;
+	}
+	.spinner {
+		width: auto;
+		padding-left: 30px;
+	}
+}
+
+/** NextGen Gallery tr height, to show the progress bar properly for alternate rows **/
+.alternate.iedit {
+	height: 120px;
+}
+
+/** Allows to click on button, otherwise row-actions from NextGen interferes **/
+.wp-smush-nextgen-send {
+	position: relative;
+	z-index: 2;
+}

+/* ****************************************************************************
+ * MODULE: VARIABLES
+ */
+
+$font--path: "../fonts" !default;
+$img--path: "../images" !default;
+
+$sui-font-path: '~@wpmudev/shared-ui/dist/fonts/';
+
+$summary-image: '#{$img--path}/smush-graphic-dashboard-summary.svg';
+
+// Promo banners for free footer
+$cross-sell-1:       'hummingbird';
+$cross-sell-2:       'defender';
+$cross-sell-3:       'smartcrawl';
+
+$upgrade-image: '../../app/assets/images/hero@2x.png';
+$upgrade-image-mobile: '../../app/assets/images/hero.png';
\ No newline at end of file

+ /**
+ * Webp styles
+ *
+ * @since 3.8.0
+ */
+
+@include body-class(true) {
+
+	#smush-box-webp-webp {
+
+		.smush-webp-supported-browser {
+			height: 30px;
+			width: 30px;
+			padding: 5px;
+			margin-right: 10px;
+			border-radius: 4px;
+			background-color: #F2F2F2;
+			display: inline-block;
+
+			img {
+				height: 20px;
+				width: 20px;
+			}
+		}
+	}
+
+	#smush-box-webp-wizard {
+		.sui-row-with-sidenav {
+			margin-bottom: 0;
+
+			.sui-sidenav {
+				padding: 30px;
+				border-top-left-radius: $border-radius;
+				background-color: #F8F8F8;
+
+				.smush-wizard-bar-subtitle {
+					font-size: 11px;
+					line-height: 20px;
+					font-weight: 700;
+					color: #AAAAAA;
+					text-transform: uppercase;
+				}
+
+				.smush-sidenav-title {
+					display: flex;
+					align-items: center;
+					margin-bottom: 33px;
+
+					h4 {
+						margin: 0;
+						line-height: 20px;
+					}
+				}
+
+				.smush-wizard-steps-container {
+
+					ul {
+						margin: 0;
+
+						@include media(max-width, lg) {
+							display: flex;
+							flex-direction: row;
+							justify-content: space-between;
+						}
+					}
+
+					.smush-wizard-bar-step {
+						display: inline-block;
+						font-size: 13px;
+						color: #AAAAAA;
+						line-height: 22px;
+						font-weight: 500;
+						margin-bottom: 0;
+
+						.smush-wizard-bar-step-number {
+							display: inline-block;
+							margin-right: 10px;
+							text-align: center;
+							border-radius: 50%;
+							width: 22px;
+							height: 22px;
+							font-size: 11px;
+							background-color: #F2F2F2;
+							border: 1px solid #DDDDDD;
+
+							@include media(max-width, lg) {
+								display: block;
+								margin: 0 auto 5px auto;
+							}
+						}
+
+						&.disabled {
+							color: #DDDDDD;
+						}
+
+						&.current {
+							color: #333333;
+
+							.smush-wizard-bar-step-number {
+								background-color: #FFFFFF;
+								border-color: #333333;
+							}
+						}
+
+						&.done .smush-wizard-bar-step-number {
+							background-color: #1ABC9C;
+							border-color: #1ABC9C;
+
+							.sui-icon-check::before {
+								color: #FFFFFF;
+							}
+						}
+
+						@include media(min-width, lg) {
+							display: block;
+						}
+
+						@include media(max-width, lg) {
+							width: 70px;
+							text-align: center;
+						}
+					}
+
+					svg {
+
+						line {
+							stroke-width: 4px;
+						}
+
+						&.smush-svg-desktop {
+							height: 40px;
+							width: 22px;
+							margin-left: 10px;
+							display: none;
+
+							@include media(min-width, lg) {
+								display: block;
+							}
+						}
+
+						&.smush-svg-mobile {
+							width: 100%;
+							height: 4px;
+							display: block;
+							margin-bottom: -14px;
+							padding: 0 35px;
+
+							@include media(min-width, lg) {
+								display: none;
+							}
+						}
+					}
+				}
+
+				@include media(max-width, sm) {
+					padding: 20px;
+				}
+			}
+
+			.smush-wizard-steps-content-wrapper {
+				padding: 20px;
+
+				.smush-wizard-steps-content {
+					padding: 0 70px;
+					text-align: center;
+
+					&:first-child {
+						padding-top: 30px;
+					}
+
+					.smush-step-indicator {
+						font-size: 11px;
+						font-weight: 500;
+						color: #888888;
+					}
+
+					h2 {
+						margin: 0;
+					}
+
+					@include media(max-width, sm) {
+						padding: 0;
+					}
+				}
+
+				&.smush-wizard-step-1 {
+
+					.sui-box-selectors {
+						padding-left: 115px;
+						padding-right: 115px;
+						margin-bottom: 15px;
+					}
+				}
+
+				&.smush-wizard-step-2 {
+
+					.smush-wizard-rules-wrapper {
+						text-align: left;
+					}
+
+					.sui-tabs-menu {
+						justify-content: center;
+					}
+				}
+
+				@include media(min-width, sm) {
+					padding: 30px;
+				}
+			}
+		}
+	}
+}