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

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

image-optimization / modules / optimization / assets / js / classes / extend-views.js

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

86 lines 2.1 KB

Raw Download Zip

1	class ExtendViews {
2	constructor() {
3	this.init();
4	}
5
6	init() {
7	this.extendAttachmentDetails();
8	this.extendAttachmentDetailsTwoColumn();
9	}
10
11	// #tmpl-attachment-details
12	extendAttachmentDetails() {
13	if ( ! wp?.media?.view?.Attachment?.Details ) {
14	return;
15	}
16
17	wp.media.view.Attachment.Details = wp.media.view.Attachment.Details.extend( {
18	template( view ) {
19	const html = wp.media.template( 'attachment-details' )( view );
20
21	if ( this.model.attributes.type !== 'image' ) {
22	return html;
23	}
24
25	const content = document.createElement( 'div' );
26	content.innerHTML = html;
27
28	const optimizationControl = this.getOptimizationControlHTML( view.compat.item );
29
30	if ( ! optimizationControl ) {
31	return content.innerHTML;
32	}
33
34	content.innerHTML += optimizationControl;
35
36	return content.innerHTML;
37	},
38	getOptimizationControlHTML( compatData ) {
39	const tempElement = document.createElement( 'div' );
40	tempElement.innerHTML = compatData;
41
42	return tempElement.querySelector( 'input[name*="[image_optimization_modal]"]' )?.value;
43	},
44	} );
45	}
46
47	// #tmpl-attachment-details-two-column
48	extendAttachmentDetailsTwoColumn() {
49	if ( ! wp?.media?.view?.Attachment?.Details?.TwoColumn ) {
50	return;
51	}
52
53	wp.media.view.Attachment.Details.TwoColumn = wp.media.view.Attachment.Details.TwoColumn.extend( {
54	template( view ) {
55	const html = wp.media.template( 'attachment-details-two-column' )( view );
56
57	if ( this.model.attributes.type !== 'image' ) {
58	return html;
59	}
60
61	const content = document.createElement( 'div' );
62	content.innerHTML = html;
63
64	const optimizationControl = this.getOptimizationControlHTML( view.compat.item );
65
66	if ( ! optimizationControl ) {
67	return content.innerHTML;
68	}
69
70	const settings = content.querySelector( '.settings' );
71	settings.innerHTML += optimizationControl;
72
73	return content.innerHTML;
74	},
75	getOptimizationControlHTML( compatData ) {
76	const tempElement = document.createElement( 'div' );
77	tempElement.innerHTML = compatData;
78
79	return tempElement.querySelector( 'input[name*="[image_optimization_modal]"]' )?.value;
80	},
81	} );
82	}
83	}
84
85	export default ExtendViews;
86