Image Optimization – Compress Images and Convert to WebP or AVIF / 1.6.6

Image Optimization – Compress Images and Convert to WebP or AVIF v1.6.6

image-optimization / modules / optimization / assets / js / templates / optimization-details / index.js

index.js in Image Optimization – Compress Images and Convert to WebP or AVIF 1.6.6, at modules/optimization/assets/js/templates/optimization-details/index.js

156 lines 3.7 KB

Raw Download Zip

1	import { __, sprintf } from '@wordpress/i18n';
2	import { formatFileSize } from '../../utils';
3
4	const header = () => {
5	return `
6	<div>
7	<table class="wp-list-table widefat striped image-optimization-details-table">
8	<thead>
9	<tr>
10	<th>${ __( 'Size Name', 'image-optimization' ) }</th>
11	<th>${ __( 'Image Size', 'image-optimization' ) }</th>
12	<th>${ __( 'Savings', 'image-optimization' ) }</th>
13	<th></th>
14	</tr>
15	</thead>
16
17	<tbody>
18	`;
19	};
20
21	const footer = ( data ) => {
22	const totalSize = sprintf(
23	// Translators: %s - total file size
24	__( 'Total: %s', 'image-optimization' ),
25	formatFileSize( data?.total ),
26	);
27
28	return `
29	</tbody>
30	</table>
31
32	<p>
33	<b>
34	${ totalSize }
35	</b>
36	</p>
37	</div>
38	`;
39	};
40
41	const rowStart = ( data ) => {
42	return `
43	<tr>
44	<td class="image-optimization-details-table__size-name"><b>${ data.size_name }</b></td>
45	<td class="image-optimization-details-table__size">${ formatFileSize( data.file_size ) }</td>
46	`;
47	};
48
49	const rowEnd = () => {
50	return '</tr>';
51	};
52
53	const optimizedChunk = ( data ) => {
54	const optimizationStats = sprintf(
55	// Translators: %1$s: Optimization percentage, %2$ file size decrease
56	__( 'Reduced by %1$s%% (%2$s)', 'image-optimization' ),
57	data.saved.relative,
58	formatFileSize( data.saved.absolute ),
59	);
60
61	const croppingStats = data.new_dimensions ? sprintf(
62	// Translators: %1$s: Width, %2$ height
63	__( 'Resized to %1$s(w) x %2$s(h)', 'image-optimization' ),
64	data.new_dimensions.width,
65	data.new_dimensions.height,
66	) : '';
67
68	return `
69	<td class="image-optimization-details-table__status">
70	<span class="image-optimization-details-table__property">
71	${ optimizationStats }
72	</span>
73
74	<span class="image-optimization-details-table__property">
75	${ croppingStats }
76	</span>
77	</td>
78
79	<td class="image-optimization-details-table__action"></td>
80	`;
81	};
82
83	const notOptimizedChunk = ( data ) => {
84	return `
85	<td class="image-optimization-details-table__status">
86	<span class="image-optimization-details-table__property">
87	${ __( 'Not optimized', 'image-optimization' ) }
88	</span>
89	</td>
90
91	<td class="image-optimization-details-table__action">
92	<button type="button"
93	class="button button-primary image-optimization-details-table__optimization-button"
94	data-image-id="${ data.imageId }">
95	${ __( 'Optimize', 'image-optimization' ) }
96	</button>
97	</td>
98	`;
99	};
100
101	const notFoundChunk = () => {
102	return `
103	<td class="image-optimization-details-table__status">
104	<span class="image-optimization-details-table__property image-optimization-details-table__property--error">
105	${ __( 'File is missing', 'image-optimization' ) }
106	</span>
107	</td>
108
109	<td class="image-optimization-details-table__action"></td>
110	`;
111	};
112
113	const tooLargeChunk = () => {
114	const message = sprintf(
115	// Translators: %s - max file size
116	__( 'File is too large. Max size is %s', 'image-optimization' ),
117	formatFileSize( window?.imageOptimizerUserData?.maxFileSize ),
118	);
119
120	return `
121	<td class="image-optimization-details-table__status">
122	<span class="image-optimization-details-table__property">
123	${ message }
124	</span>
125	</td>
126
127	<td class="image-optimization-details-table__action">
128	<a class="button button-primary button-large"
129	href="https://go.elementor.com/io-panel-upgrade/"
130	target="_blank" rel="noopener noreferrer">
131	${ __( 'Upgrade', 'image-optimization' ) }
132	</a>
133	</td>
134	`;
135	};
136
137	const error = ( data ) => {
138	return `
139	<span class="image-optimization-details-table__error">${ data.message }</span>
140	`;
141	};
142
143	const optimizationDetailsTemplate = Object.freeze( {
144	header,
145	footer,
146	rowStart,
147	rowEnd,
148	optimizedChunk,
149	notOptimizedChunk,
150	notFoundChunk,
151	tooLargeChunk,
152	error,
153	} );
154
155	export default optimizationDetailsTemplate;
156