Image Optimizer – Compress Images and Convert to WebP or AVIF / 1.0.0

Image Optimizer – Compress Images and Convert to WebP or AVIF v1.0.0

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

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

155 lines 4.8 KB

Raw Download Zip

1	import { __ } from '@wordpress/i18n';
2	import { escapeHTML } from '@wordpress/escape-html';
3	import { formatFileSize } from '../../utils';
4
5	const notOptimizedTemplate = () => {
6	return `
7	<span class="setting image-optimizer-setting">
8	<span class="name image-optimization-control__property">
9	${ __( 'Status', 'image-optimizer' ) }:
10	</span>
11
12	<span class="image-optimization-control__property-value">
13	${ __( 'Not optimized', 'image-optimizer' ) }
14	</span>
15	</span>
16
17	<span class="setting image-optimizer-setting">
18	<span class="name image-optimization-control__property"></span>
19
20	<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
21	<button type="button"
22	class="button button-primary image-optimization-control__button image-optimization-control__button--optimize">
23	${ __( 'Optimize now', 'image-optimizer' ) }
24	</button>
25	</span>
26	</span>
27	`;
28	};
29
30	const loadingTemplate = () => {
31	return `
32	<span class="setting image-optimizer-setting">
33	<span class="name image-optimization-control__property">
34	${ __( 'Status', 'image-optimizer' ) }:
35	</span>
36
37	<span class="image-optimization-control__property-value">
38	${ __( 'In Progress', 'image-optimizer' ) }
39	</span>
40	</span>
41
42	<span class="setting image-optimizer-setting">
43	<span class="name image-optimization-control__property"></span>
44
45	<span class="image-optimization-control__property-value image-optimization-control__property-value--spinner">
46	<span class="spinner is-active"></span>
47	</span>
48	</span>
49	`;
50	};
51
52	const errorTemplate = ( message ) => {
53	return `
54	<span class="setting image-optimizer-setting">
55	<span class="name image-optimization-control__property">
56	${ __( 'Status', 'image-optimizer' ) }:
57	</span>
58
59	<span class="image-optimization-control__property-value">
60	${ __( 'Error', 'image-optimizer' ) }
61	</span>
62	</span>
63
64	<span class="setting image-optimizer-setting">
65	<span class="name image-optimization-control__property">
66	${ __( 'Reason', 'image-optimizer' ) }:
67	</span>
68
69	<span class="image-optimization-control__property-value">
70	${ escapeHTML( message ) }
71	</span>
72	</span>
73
74	<span class="setting image-optimizer-setting">
75	<span class="name image-optimization-control__property"></span>
76
77	<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
78	<button class="button button-secondary button-large button-link-delete image-optimization-control__button image-optimization-control__button--try-again"
79	type="button">
80	${ __( 'Try again', 'image-optimizer' ) }
81	</button>
82	</span>
83	</span>
84	`;
85	};
86
87	const successTemplate = ( data ) => {
88	const absoluteValue = formatFileSize( data?.saved?.absolute, 1 );
89
90	return `
91	<span class="setting image-optimizer-setting">
92	<span class="name image-optimization-control__property">
93	${ __( 'Status', 'image-optimizer' ) }:
94	</span>
95
96	<span class="image-optimization-control__property-value">
97	${ __( 'Optimized', 'image-optimizer' ) }
98	</span>
99	</span>
100
101	<span class="setting image-optimizer-setting">
102	<span class="name image-optimization-control__property">
103	${ __( 'Image sizes optimized', 'image-optimizer' ) }:
104	</span>
105
106	<span class="image-optimization-control__property-value">
107	${ data?.sizesOptimized }
108	</span>
109	</span>
110
111	<span class="setting image-optimizer-setting">
112	<span class="name image-optimization-control__property">
113	${ __( 'Overall saving', 'image-optimizer' ) }:
114	</span>
115
116	<span class="image-optimization-control__property-value">
117	${ data?.saved?.relative }% (${ absoluteValue })
118	</span>
119	</span>
120
121	${ data?.canBeRestored ? `
122	<span class="setting image-optimizer-setting">
123	<span class="name image-optimization-control__property"></span>
124
125	<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
126	<button class="button button-link image-optimization-control__button image-optimization-control__button--reoptimize"
127	type="button">
128	${ __( 'Reoptimize', 'image-optimizer' ) }
129	</button>
130	</span>
131	</span>
132
133	<span class="setting image-optimizer-setting">
134	<span class="name image-optimization-control__property"></span>
135
136	<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
137	<button class="button button-link image-optimization-control__button image-optimization-control__button--restore-original"
138	type="button">
139	${ __( 'Restore original', 'image-optimizer' ) }
140	</button>
141	</span>
142	</span>
143	` : '' }
144	`;
145	};
146
147	const detailsViewTemplates = Object.freeze( {
148	notOptimizedTemplate,
149	loadingTemplate,
150	errorTemplate,
151	successTemplate,
152	} );
153
154	export default detailsViewTemplates;
155