← All changes | modules/optimization/assets/js/control.js +69 -5 1.0.1 → 1.7.7 View file →

		@@ -4,25 +4,43 @@
4	4	import API from './classes/api';
5	5	import ControlSync from './classes/control/control-sync';
6	6	import ControlStates from './classes/control/control-states';
7	7	import ControlMeta from './classes/control/control-meta';
	8	+import OptimizationDetails from './classes/optimization-details';
8	9
9	10	class OptimizationControl {
10	11	constructor() {
	12	+ this.controlSyncRequestInProgress = false;
	13	+
11	14	this.init();
	15	+
	16	+ this.controlSync = new ControlSync();
12	17	}
13	18
14	19	init() {
15	20	this.initEventListeners();
16	21
17		- const controlSync = new ControlSync();
18		- setInterval( () => controlSync.run(), 5000 );
	22	+ setInterval( () => this.runStatusCheckLoop(), 5000 );
19	23	}
20	24
	25	+ async runStatusCheckLoop() {
	26	+ if ( this.controlSyncRequestInProgress ) {
	27	+ return;
	28	+ }
	29	+
	30	+ this.controlSyncRequestInProgress = true;
	31	+
	32	+ await this.controlSync.run();
	33	+
	34	+ this.controlSyncRequestInProgress = false;
	35	+ }
	36	+
21	37	initEventListeners() {
22	38	document.addEventListener( 'click', ( e ) => this.handleOptimizeButtonClick( e ) );
23	39	document.addEventListener( 'click', ( e ) => this.handleReoptimizeButtonClick( e ) );
24	40	document.addEventListener( 'click', ( e ) => this.handleRestoreButtonClick( e ) );
	41	+ document.addEventListener( 'click', ( e ) => this.handleOptimizationDetailsOpen( e ) );
	42	+ document.addEventListener( 'click', ( e ) => this.handleOptimizationDetailsClick( e ) );
25	43	}
26	44
27	45	async handleOptimizeButtonClick( e ) {
28	46	if ( ! e.target.closest( `${ SELECTORS.optimizeButtonSelector }, ${ SELECTORS.tryAgainOptimizeButtonSelector }` ) ) {
		@@ -28,9 +46,9 @@
28	46	if ( ! e.target.closest( `${ SELECTORS.optimizeButtonSelector }, ${ SELECTORS.tryAgainOptimizeButtonSelector }` ) ) {
29	47	return;
30	48	}
31	49
32		- speak( __( 'Optimization is in progress', 'image-optimizer' ), 'assertive' );
	50	+ speak( __( 'Optimization is in progress', 'image-optimization' ), 'assertive' );
33	51
34	52	const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
35	53	const states = new ControlStates( controlWrapper );
36	54
		@@ -36,8 +54,10 @@
36	54
37	55	states.renderLoading( 'optimize' );
38	56
39	57	try {
	58	+ controlWrapper.dataset.isFrozen = true;
	59	+
40	60	await API.optimizeSingleImage( {
41	61	imageId: new ControlMeta( controlWrapper ).getImageId(),
42	62	reoptimize: false,
43	63	} );
		@@ -50,9 +70,9 @@
50	70	if ( ! e.target.closest( `${ SELECTORS.reoptimizeButtonSelector }, ${ SELECTORS.tryAgainReoptimizeButtonSelector }` ) ) {
51	71	return;
52	72	}
53	73
54		- speak( __( 'Reoptimizing is in progress', 'image-optimizer' ), 'assertive' );
	74	+ speak( __( 'Reoptimizing is in progress', 'image-optimization' ), 'assertive' );
55	75
56	76	const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
57	77	const states = new ControlStates( controlWrapper );
58	78
		@@ -58,8 +78,10 @@
58	78
59	79	states.renderLoading( 'reoptimize' );
60	80
61	81	try {
	82	+ controlWrapper.dataset.isFrozen = true;
	83	+
62	84	await API.optimizeSingleImage( {
63	85	imageId: new ControlMeta( controlWrapper ).getImageId(),
64	86	reoptimize: true,
65	87	} );
		@@ -72,9 +94,9 @@
72	94	if ( ! e.target.closest( `${ SELECTORS.restoreButtonSelector }, ${ SELECTORS.tryAgainRestoreButtonSelector }` ) ) {
73	95	return;
74	96	}
75	97
76		- speak( __( 'Image restoring is in progress', 'image-optimizer' ), 'assertive' );
	98	+ speak( __( 'Image restoring is in progress', 'image-optimization' ), 'assertive' );
77	99
78	100	const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
79	101	const states = new ControlStates( controlWrapper );
80	102
		@@ -80,12 +102,54 @@
80	102
81	103	states.renderLoading( 'restore' );
82	104
83	105	try {
	106	+ controlWrapper.dataset.isFrozen = true;
	107	+
84	108	await API.restoreSingleImage( new ControlMeta( controlWrapper ).getImageId() );
85	109	} catch ( error ) {
86	110	states.renderError( error );
87	111	}
	112	+ }
	113	+
	114	+ async handleOptimizationDetailsOpen( e ) {
	115	+ if ( ! e.target.closest( `${ SELECTORS.optimizationDetailsButtonSelector }` ) ) {
	116	+ return;
	117	+ }
	118	+
	119	+ const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
	120	+ const imageId = new ControlMeta( controlWrapper ).getImageId();
	121	+
	122	+ try {
	123	+ OptimizationDetails.initModal();
	124	+ OptimizationDetails.renderLoading();
	125	+
	126	+ const details = await API.getOptimizationDetails( imageId );
	127	+
	128	+ OptimizationDetails.openModal();
	129	+ OptimizationDetails.renderData( imageId, details );
	130	+ } catch ( error ) {
	131	+ OptimizationDetails.openModal();
	132	+ OptimizationDetails.renderError( error.message );
	133	+ }
	134	+ }
	135	+
	136	+ async handleOptimizationDetailsClick( e ) {
	137	+ if ( ! e.target.closest( `${ SELECTORS.optimizationDetailsOptimizeButtonSelector }` ) ) {
	138	+ return;
	139	+ }
	140	+
	141	+ const imageId = parseInt( e.target.dataset?.imageId, 10 );
	142	+
	143	+ await API.optimizeSingleImage( { imageId } );
	144	+
	145	+ const controlWrapper = document.querySelector( `.image-optimization-control[data-image-optimization-image-id="${ imageId }"]` );
	146	+
	147	+ if ( controlWrapper ) {
	148	+ new ControlStates( controlWrapper ).renderLoading( 'optimize' );
	149	+ }
	150	+
	151	+ OptimizationDetails.closeModal();
88	152	}
89	153	}
90	154
91	155	export default OptimizationControl;