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

Image Optimizer – Compress Images and Convert to WebP or AVIF, version 1.5.0. 86 lines.

- Page: https://pluginprobe.com/plugins/image-optimization/1.5.0/code/modules/optimization/assets/js/classes/extend-views.js
- Raw: https://pluginprobe.com/plugins/image-optimization/1.5.0/raw/modules/optimization/assets/js/classes/extend-views.js
- Modified: 2024-01-08T11:53:40+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/image-optimization/1.5.0/code/modules/optimization/assets/js/classes/extend-views.js#L10-L20`.

```javascript
class ExtendViews {
	constructor() {
		this.init();
	}

	init() {
		this.extendAttachmentDetails();
		this.extendAttachmentDetailsTwoColumn();
	}

	// #tmpl-attachment-details
	extendAttachmentDetails() {
		if ( ! wp?.media?.view?.Attachment?.Details ) {
			return;
		}

		wp.media.view.Attachment.Details = wp.media.view.Attachment.Details.extend( {
			template( view ) {
				const html = wp.media.template( 'attachment-details' )( view );

				if ( this.model.attributes.type !== 'image' ) {
					return html;
				}

				const content = document.createElement( 'div' );
				content.innerHTML = html;

				const optimizationControl = this.getOptimizationControlHTML( view.compat.item );

				if ( ! optimizationControl ) {
					return content.innerHTML;
				}

				content.innerHTML += optimizationControl;

				return content.innerHTML;
			},
			getOptimizationControlHTML( compatData ) {
				const tempElement = document.createElement( 'div' );
				tempElement.innerHTML = compatData;

				return tempElement.querySelector( 'input[name*="[image_optimization_modal]"]' )?.value;
			},
		} );
	}

	// #tmpl-attachment-details-two-column
	extendAttachmentDetailsTwoColumn() {
		if ( ! wp?.media?.view?.Attachment?.Details?.TwoColumn ) {
			return;
		}

		wp.media.view.Attachment.Details.TwoColumn = wp.media.view.Attachment.Details.TwoColumn.extend( {
			template( view ) {
				const html = wp.media.template( 'attachment-details-two-column' )( view );

				if ( this.model.attributes.type !== 'image' ) {
					return html;
				}

				const content = document.createElement( 'div' );
				content.innerHTML = html;

				const optimizationControl = this.getOptimizationControlHTML( view.compat.item );

				if ( ! optimizationControl ) {
					return content.innerHTML;
				}

				const settings = content.querySelector( '.settings' );
				settings.innerHTML += optimizationControl;

				return content.innerHTML;
			},
			getOptimizationControlHTML( compatData ) {
				const tempElement = document.createElement( 'div' );
				tempElement.innerHTML = compatData;

				return tempElement.querySelector( 'input[name*="[image_optimization_modal]"]' )?.value;
			},
		} );
	}
}

export default ExtendViews;

```