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

Image Optimizer – Compress Images and Convert to WebP or AVIF v1.5.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.5.0, at modules/optimization/assets/js/templates/details-view/index.js

169 lines 5.4 KB

Raw Download Zip

1	import { __ } from '@wordpress/i18n';
2	import { escapeHTML } from '@wordpress/escape-html';
3	import { formatFileSize } from '../../utils';
4	import { UPGRADE_LINK } from '../../constants';
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 ) => {
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	${ imagesLeft === 0
80	? `<a class="button button-secondary button-large image-optimization-control__button"
81	href="${ UPGRADE_LINK }"
82	target="_blank" rel="noopener noreferrer">
83	${ __( 'Upgrade', 'image-optimization' ) }
84	</a>
85	` : `
86	<button class="button button-secondary button-large button-link-delete image-optimization-control__button image-optimization-control__button--try-again"
87	type="button">
88	${ __( 'Try again', 'image-optimization' ) }
89	</button>` }
90	</span>
91	</span>
92	`;
93	};
94
95	const optimizedTemplate = ( data ) => {
96	const absoluteValue = formatFileSize( data?.saved?.absolute, 1 );
97
98	return `
99	<span class="setting image-optimization-setting">
100	<span class="name image-optimization-control__property">
101	${ __( 'Status', 'image-optimization' ) }:
102	</span>
103
104	<span class="image-optimization-control__property-value">
105	${ __( 'Optimized', 'image-optimization' ) }
106	</span>
107	</span>
108
109	<span class="setting image-optimization-setting">
110	<span class="name image-optimization-control__property">
111	${ __( 'Image sizes optimized', 'image-optimization' ) }:
112	</span>
113
114	<span class="image-optimization-control__property-value">
115	${ data?.sizesOptimized }
116	</span>
117	</span>
118
119	<span class="setting image-optimization-setting">
120	${ data?.saved?.absolute !== 0
121	? `<span class="name image-optimization-control__property">
122	${ __( 'Overall saving', 'image-optimization' ) }:
123	</span>
124
125	<span class="image-optimization-control__property-value">
126	${ data?.saved?.relative }% (${ absoluteValue })
127	</span>`
128	: `<span class="name image-optimization-control__property"></span>
129
130	<span class="image-optimization-control__property-value">
131	${ __( 'Image is fully optimized', 'image-optimization' ) }
132	</span>` }
133	</span>
134
135	<span class="setting image-optimization-setting">
136	<span class="name image-optimization-control__property"></span>
137
138	<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
139	<button class="button button-link image-optimization-control__button image-optimization-control__button--reoptimize"
140	type="button">
141	${ __( 'Reoptimize', 'image-optimization' ) }
142	</button>
143	</span>
144	</span>
145
146	${ data?.canBeRestored ? `
147	<span class="setting image-optimization-setting">
148	<span class="name image-optimization-control__property"></span>
149
150	<span class="image-optimization-control__property-value image-optimization-control__property-value--button">
151	<button class="button button-link image-optimization-control__button image-optimization-control__button--restore-original"
152	type="button">
153	${ __( 'Restore original', 'image-optimization' ) }
154	</button>
155	</span>
156	</span>
157	` : '' }
158	`;
159	};
160
161	const detailsViewTemplates = Object.freeze( {
162	notOptimizedTemplate,
163	loadingTemplate,
164	errorTemplate,
165	optimizedTemplate,
166	} );
167
168	export default detailsViewTemplates;
169