← All changes | modules/optimization/assets/js/templates/meta-box/index.js +43 -33 1.0.0 → trunk View file →

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