# image-optimization/1.0.0/modules/optimization/assets/js/templates/details-view/index.js

Image Optimizer – Compress Images and Convert to WebP or AVIF, version 1.0.0. 155 lines.

- Page: https://pluginprobe.com/plugins/image-optimization/1.0.0/code/modules/optimization/assets/js/templates/details-view/index.js
- Raw: https://pluginprobe.com/plugins/image-optimization/1.0.0/raw/modules/optimization/assets/js/templates/details-view/index.js
- Modified: 2024-01-08T11:53:40+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/image-optimization/1.0.0/code/modules/optimization/assets/js/templates/details-view/index.js#L10-L20`.

```javascript
import { __ } from '@wordpress/i18n';
import { escapeHTML } from '@wordpress/escape-html';
import { formatFileSize } from '../../utils';

const notOptimizedTemplate = () => {
	return `
		<span class="setting image-optimizer-setting">
			<span class="name image-optimization-control__property">
				${ __( 'Status', 'image-optimizer' ) }:
			</span>

			<span class="image-optimization-control__property-value">
				${ __( 'Not optimized', 'image-optimizer' ) }
			</span>
		</span>

		<span class="setting image-optimizer-setting">
			<span class="name image-optimization-control__property"></span>

			<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
				<button type="button"
							class="button button-primary image-optimization-control__button image-optimization-control__button--optimize">
					${ __( 'Optimize now', 'image-optimizer' ) }
				</button>
			</span>
		</span>
	`;
};

const loadingTemplate = () => {
	return `
		<span class="setting image-optimizer-setting">
			<span class="name image-optimization-control__property">
				${ __( 'Status', 'image-optimizer' ) }:
			</span>

			<span class="image-optimization-control__property-value">
				${ __( 'In Progress', 'image-optimizer' ) }
			</span>
		</span>

		<span class="setting image-optimizer-setting">
			<span class="name image-optimization-control__property"></span>

			<span class="image-optimization-control__property-value image-optimization-control__property-value--spinner">
				<span class="spinner is-active"></span>
			</span>
		</span>
	`;
};

const errorTemplate = ( message ) => {
	return `
		<span class="setting image-optimizer-setting">
			<span class="name image-optimization-control__property">
				${ __( 'Status', 'image-optimizer' ) }:
			</span>

			<span class="image-optimization-control__property-value">
				${ __( 'Error', 'image-optimizer' ) }
			</span>
		</span>

		<span class="setting image-optimizer-setting">
			<span class="name image-optimization-control__property">
				${ __( 'Reason', 'image-optimizer' ) }:
			</span>

			<span class="image-optimization-control__property-value">
				${ escapeHTML( message ) }
			</span>
		</span>

		<span class="setting image-optimizer-setting">
			<span class="name image-optimization-control__property"></span>

			<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
				<button class="button button-secondary button-large button-link-delete image-optimization-control__button image-optimization-control__button--try-again"
							type="button">
					${ __( 'Try again', 'image-optimizer' ) }
				</button>
			</span>
		</span>
	`;
};

const successTemplate = ( data ) => {
	const absoluteValue = formatFileSize( data?.saved?.absolute, 1 );

	return `
		<span class="setting image-optimizer-setting">
			<span class="name image-optimization-control__property">
				${ __( 'Status', 'image-optimizer' ) }:
			</span>

			<span class="image-optimization-control__property-value">
				${ __( 'Optimized', 'image-optimizer' ) }
			</span>
		</span>

		<span class="setting image-optimizer-setting">
			<span class="name image-optimization-control__property">
				${ __( 'Image sizes optimized', 'image-optimizer' ) }:
			</span>

			<span class="image-optimization-control__property-value">
				${ data?.sizesOptimized }
			</span>
		</span>

		<span class="setting image-optimizer-setting">
			<span class="name image-optimization-control__property">
				${ __( 'Overall saving', 'image-optimizer' ) }:
			</span>

			<span class="image-optimization-control__property-value">
				${ data?.saved?.relative }% (${ absoluteValue })
			</span>
		</span>

		${ data?.canBeRestored ? `
			<span class="setting image-optimizer-setting">
				<span class="name image-optimization-control__property"></span>

				<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
					<button class="button button-link image-optimization-control__button image-optimization-control__button--reoptimize"
									type="button">
						${ __( 'Reoptimize', 'image-optimizer' ) }
					</button>
				</span>
			</span>

			<span class="setting image-optimizer-setting">
				<span class="name image-optimization-control__property"></span>

				<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
					<button class="button button-link image-optimization-control__button image-optimization-control__button--restore-original"
									type="button">
						${ __( 'Restore original', 'image-optimizer' ) }
					</button>
				</span>
			</span>
	` : '' }
	`;
};

const detailsViewTemplates = Object.freeze( {
	notOptimizedTemplate,
	loadingTemplate,
	errorTemplate,
	successTemplate,
} );

export default detailsViewTemplates;

```