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

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

image-optimization / modules / optimization / assets / js / classes / optimization-details.js

optimization-details.js in Image Optimizer – Compress Images and Convert to WebP or AVIF 1.7.7, at modules/optimization/assets/js/classes/optimization-details.js

150 lines 3.2 KB

Raw Download Zip

1	/* global tb_show, tb_click, tb_remove */
2
3	import { __ } from '@wordpress/i18n';
4	import { SELECTORS } from '../constants';
5	import optimizationDetailsTemplate from '../templates/optimization-details';
6
7	const MODAL_WIDTH = 700;
8	const MODAL_HEIGHT = 500;
9
10	/**
11	* @class
12	*
13	* Contains methods to work with the optimization details modal.
14	* It fully relies on the ThickBox API.
15	*/
16	class OptimizationDetails {
17	/**
18	* Checks if the modal template element exists on the page.
19	* @return {boolean} Returns true if the modal template element exists, returns false otherwise.
20	*/
21	static modalTemplateExists() {
22	return !! document.getElementById( SELECTORS.optimizationDetailsModalId );
23	}
24
25	/**
26	* Creates a basic template element to render inside a modal.
27	*/
28	static initModal() {
29	if ( OptimizationDetails.modalTemplateExists() ) {
30	return;
31	}
32
33	const container = document.createElement( 'div' );
34
35	container.id = SELECTORS.optimizationDetailsWrapperId;
36	container.style = 'display:none;';
37	container.innerHTML = `<div id="${ SELECTORS.optimizationDetailsModalId }"></div>`;
38
39	document.body.appendChild( container );
40	}
41
42	/**
43	* Opens a modal and removes the template element.
44	*/
45	static openModal() {
46	tb_show(
47	__( 'Optimization Details', 'image-optimization' ),
48	`#TB_inline?width=${ MODAL_WIDTH }&height=${ MODAL_HEIGHT }&inlineId=${ SELECTORS.optimizationDetailsWrapperId }`,
49	);
50
51	document
52	.getElementById( SELECTORS.optimizationDetailsWrapperId )
53	?.remove();
54	}
55
56	/**
57	* Closes the modal.
58	*/
59	static closeModal() {
60	tb_remove();
61	}
62
63	/**
64	* Renders an error message.
65	*
66	* @param {string} message
67	*
68	* @return {boolean} Returns false if modal container not found.
69	*/
70	static renderError( message ) {
71	const container = document.getElementById( SELECTORS.optimizationDetailsModalId );
72
73	if ( ! container ) {
74	return false;
75	}
76
77	const { error } = optimizationDetailsTemplate;
78
79	container.innerHTML = error( { message } );
80
81	return true;
82	}
83
84	/**
85	* Shows a default ThickBox loader.
86	*/
87	static renderLoading() {
88	tb_click();
89	}
90
91	/**
92	* Renders the modal content.
93	*
94	* @param {number} imageId
95	* @param {{total: number, sizes: Array}} optimizationDetails
96	*
97	* @return {boolean} Returns false if modal container not found.
98	*/
99	static renderData( imageId, optimizationDetails ) {
100	const container = document.getElementById( SELECTORS.optimizationDetailsModalId );
101
102	if ( ! container ) {
103	return false;
104	}
105
106	const {
107	header,
108	footer,
109	rowStart,
110	rowEnd,
111	optimizedChunk,
112	notOptimizedChunk,
113	notFoundChunk,
114	tooLargeChunk,
115	} = optimizationDetailsTemplate;
116
117	let html = header();
118
119	optimizationDetails?.sizes.forEach( ( size ) => {
120	html += rowStart( size );
121
122	if ( 'optimized' === size.status ) {
123	html += optimizedChunk( size );
124	}
125
126	if ( 'not-optimized' === size.status ) {
127	html += notOptimizedChunk( { imageId } );
128	}
129
130	if ( 'file-not-found' === size.status ) {
131	html += notFoundChunk();
132	}
133
134	if ( 'file-too-large' === size.status ) {
135	html += tooLargeChunk();
136	}
137
138	html += rowEnd();
139	} );
140
141	html += footer( optimizationDetails );
142
143	container.innerHTML = html;
144
145	return true;
146	}
147	}
148
149	export default OptimizationDetails;
150