1/**
  2 * Handle the site icon setting in options-general.php.
  3 *
  4 * @since 6.5.0
  5 * @output wp-admin/js/site-icon.js
  6 */
  7
  8/* global jQuery, wp */
  9
 10( function ( $ ) {
 11	var $chooseButton = $( '#choose-from-library-button' ),
 12		$iconPreview = $( '#site-icon-preview' ),
 13		$browserIconPreview = $( '#browser-icon-preview' ),
 14		$appIconPreview = $( '#app-icon-preview' ),
 15		$hiddenDataField = $( '#site_icon_hidden_field' ),
 16		$removeButton = $( '#js-remove-site-icon' ),
 17		frame;
 18
 19	/**
 20	 * Calculate image selection options based on the attachment dimensions.
 21	 *
 22	 * @since 6.5.0
 23	 *
 24	 * @param {Object} attachment The attachment object representing the image.
 25	 * @return {Object} The image selection options.
 26	 */
 27	function calculateImageSelectOptions( attachment ) {
 28		var realWidth = attachment.get( 'width' ),
 29			realHeight = attachment.get( 'height' ),
 30			xInit = 512,
 31			yInit = 512,
 32			ratio = xInit / yInit,
 33			xImg = xInit,
 34			yImg = yInit,
 35			x1,
 36			y1,
 37			imgSelectOptions;
 38
 39		if ( realWidth / realHeight > ratio ) {
 40			yInit = realHeight;
 41			xInit = yInit * ratio;
 42		} else {
 43			xInit = realWidth;
 44			yInit = xInit / ratio;
 45		}
 46
 47		x1 = ( realWidth - xInit ) / 2;
 48		y1 = ( realHeight - yInit ) / 2;
 49
 50		imgSelectOptions = {
 51			aspectRatio: xInit + ':' + yInit,
 52			handles: true,
 53			keys: true,
 54			instance: true,
 55			persistent: true,
 56			imageWidth: realWidth,
 57			imageHeight: realHeight,
 58			minWidth: xImg > xInit ? xInit : xImg,
 59			minHeight: yImg > yInit ? yInit : yImg,
 60			x1: x1,
 61			y1: y1,
 62			x2: xInit + x1,
 63			y2: yInit + y1,
 64		};
 65
 66		return imgSelectOptions;
 67	}
 68
 69	/**
 70	 * Initializes the media frame for selecting or cropping an image.
 71	 *
 72	 * @since 6.5.0
 73	 */
 74	$chooseButton.on( 'click', function () {
 75		var $el = $( this );
 76
 77		// Create the media frame.
 78		frame = wp.media( {
 79			button: {
 80				// Set the text of the button.
 81				text: $el.data( 'update' ),
 82
 83				// Don't close, we might need to crop.
 84				close: false,
 85			},
 86			states: [
 87				new wp.media.controller.Library( {
 88					title: $el.data( 'choose-text' ),
 89					library: wp.media.query( { type: 'image' } ),
 90					date: false,
 91					suggestedWidth: $el.data( 'size' ),
 92					suggestedHeight: $el.data( 'size' ),
 93				} ),
 94				new wp.media.controller.SiteIconCropper( {
 95					control: {
 96						params: {
 97							width: $el.data( 'size' ),
 98							height: $el.data( 'size' ),
 99						},
100					},
101					imgSelectOptions: calculateImageSelectOptions,
102				} ),
103			],
104		} );
105
106		frame.on( 'cropped', function ( attachment ) {
107			$hiddenDataField.val( attachment.id );
108			switchToUpdate( attachment );
109			frame.close();
110
111			// Start over with a frame that is so fresh and so clean clean.
112			frame = null;
113		} );
114
115		// When an image is selected, run a callback.
116		frame.on( 'select', function () {
117			// Grab the selected attachment.
118			var attachment = frame.state().get( 'selection' ).first();
119
120			if (
121				attachment.attributes.height === $el.data( 'size' ) &&
122				$el.data( 'size' ) === attachment.attributes.width
123			) {
124				switchToUpdate( attachment.attributes );
125				frame.close();
126
127				// Set the value of the hidden input to the attachment id.
128				$hiddenDataField.val( attachment.id );
129			} else {
130				frame.setState( 'cropper' );
131			}
132		} );
133
134		frame.open();
135	} );
136
137	/**
138	 * Update the UI when a site icon is selected.
139	 *
140	 * @since 6.5.0
141	 *
142	 * @param {array} attributes The attributes for the attachment.
143	 */
144	function switchToUpdate( attributes ) {
145		var i18nAppAlternativeString, i18nBrowserAlternativeString;
146
147		if ( attributes.alt ) {
148			i18nAppAlternativeString = wp.i18n.sprintf(
149				/* translators: %s: The selected image alt text. */
150				wp.i18n.__( 'App icon preview: Current image: %s' ),
151				attributes.alt
152			);
153			i18nBrowserAlternativeString = wp.i18n.sprintf(
154				/* translators: %s: The selected image alt text. */
155				wp.i18n.__( 'Browser icon preview: Current image: %s' ),
156				attributes.alt
157			);
158		} else {
159			i18nAppAlternativeString = wp.i18n.sprintf(
160				/* translators: %s: The selected image filename. */
161				wp.i18n.__(
162					'App icon preview: The current image has no alternative text. The file name is: %s'
163				),
164				attributes.filename
165			);
166			i18nBrowserAlternativeString = wp.i18n.sprintf(
167				/* translators: %s: The selected image filename. */
168				wp.i18n.__(
169					'Browser icon preview: The current image has no alternative text. The file name is: %s'
170				),
171				attributes.filename
172			);
173		}
174
175		// Set site-icon-img src and alternative text to app icon preview.
176		$appIconPreview.attr( {
177			src: attributes.url,
178			alt: i18nAppAlternativeString,
179		} );
180
181		// Set site-icon-img src and alternative text to browser preview.
182		$browserIconPreview.attr( {
183			src: attributes.url,
184			alt: i18nBrowserAlternativeString,
185		} );
186
187		// Remove hidden class from icon preview div and remove button.
188		$iconPreview.removeClass( 'hidden' );
189		$removeButton.removeClass( 'hidden' );
190
191		// Set the global CSS variable for --site-icon-url to the selected image URL.
192		document.documentElement.style.setProperty(
193			'--site-icon-url',
194			'url(' + attributes.url + ')'
195		);
196
197		// If the choose button is not in the update state, swap the classes.
198		if ( $chooseButton.attr( 'data-state' ) !== '1' ) {
199			$chooseButton.attr( {
200				class: $chooseButton.attr( 'data-alt-classes' ),
201				'data-alt-classes': $chooseButton.attr( 'class' ),
202				'data-state': '1',
203			} );
204		}
205
206		// Swap the text of the choose button.
207		$chooseButton.text( $chooseButton.attr( 'data-update-text' ) );
208	}
209
210	/**
211	 * Handles the click event of the remove button.
212	 *
213	 * @since 6.5.0
214	 */
215	$removeButton.on( 'click', function () {
216		$hiddenDataField.val( 'false' );
217		$( this ).toggleClass( 'hidden' );
218		$iconPreview.toggleClass( 'hidden' );
219		$browserIconPreview.attr( {
220			src: '',
221			alt: '',
222		} );
223		$appIconPreview.attr( {
224			src: '',
225			alt: '',
226		} );
227
228		/**
229		 * Resets state to the button, for correct visual style and state.
230		 * Updates the text of the button.
231		 * Sets focus state to the button.
232		 */
233		$chooseButton
234			.attr( {
235				class: $chooseButton.attr( 'data-alt-classes' ),
236				'data-alt-classes': $chooseButton.attr( 'class' ),
237				'data-state': '',
238			} )
239			.text( $chooseButton.attr( 'data-choose-text' ) )
240			.trigger( 'focus' );
241	} );
242} )( jQuery );
243