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

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

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.7.4, at modules/optimization/assets/js/templates/details-view/index.js

165 lines 5.2 KB

Raw Download Zip

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