Merging upstream version 6.5+dfsg1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 236 insertions, 0 deletions

diff --git a/wp-admin/js/site-icon.js b/wp-admin/js/site-icon.js
new file mode 100644
index 0000000..d032d89
--- /dev/null
+++ b/wp-admin/js/site-icon.js
@@ -0,0 +1,236 @@
+/**
+ * Handle the site icon setting in options-general.php.
+ *
+ * @since 6.5.0
+ * @output wp-admin/js/site-icon.js
+ */
+
+/* global jQuery, wp */
+
+( function ( $ ) {
+	var $chooseButton = $( '#choose-from-library-button' ),
+		$iconPreview = $( '#site-icon-preview' ),
+		$browserIconPreview = $( '#browser-icon-preview' ),
+		$appIconPreview = $( '#app-icon-preview' ),
+		$hiddenDataField = $( '#site_icon_hidden_field' ),
+		$removeButton = $( '#js-remove-site-icon' ),
+		frame;
+
+	/**
+	 * Calculate image selection options based on the attachment dimensions.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param {Object} attachment The attachment object representing the image.
+	 * @return {Object} The image selection options.
+	 */
+	function calculateImageSelectOptions( attachment ) {
+		var realWidth = attachment.get( 'width' ),
+			realHeight = attachment.get( 'height' ),
+			xInit = 512,
+			yInit = 512,
+			ratio = xInit / yInit,
+			xImg = xInit,
+			yImg = yInit,
+			x1,
+			y1,
+			imgSelectOptions;
+
+		if ( realWidth / realHeight > ratio ) {
+			yInit = realHeight;
+			xInit = yInit * ratio;
+		} else {
+			xInit = realWidth;
+			yInit = xInit / ratio;
+		}
+
+		x1 = ( realWidth - xInit ) / 2;
+		y1 = ( realHeight - yInit ) / 2;
+
+		imgSelectOptions = {
+			aspectRatio: xInit + ':' + yInit,
+			handles: true,
+			keys: true,
+			instance: true,
+			persistent: true,
+			imageWidth: realWidth,
+			imageHeight: realHeight,
+			minWidth: xImg > xInit ? xInit : xImg,
+			minHeight: yImg > yInit ? yInit : yImg,
+			x1: x1,
+			y1: y1,
+			x2: xInit + x1,
+			y2: yInit + y1,
+		};
+
+		return imgSelectOptions;
+	}
+
+	/**
+	 * Initializes the media frame for selecting or cropping an image.
+	 *
+	 * @since 6.5.0
+	 */
+	$chooseButton.on( 'click', function () {
+		var $el = $( this );
+
+		// Create the media frame.
+		frame = wp.media( {
+			button: {
+				// Set the text of the button.
+				text: $el.data( 'update' ),
+
+				// Don't close, we might need to crop.
+				close: false,
+			},
+			states: [
+				new wp.media.controller.Library( {
+					title: $el.data( 'choose-text' ),
+					library: wp.media.query( { type: 'image' } ),
+					date: false,
+					suggestedWidth: $el.data( 'size' ),
+					suggestedHeight: $el.data( 'size' ),
+				} ),
+				new wp.media.controller.SiteIconCropper( {
+					control: {
+						params: {
+							width: $el.data( 'size' ),
+							height: $el.data( 'size' ),
+						},
+					},
+					imgSelectOptions: calculateImageSelectOptions,
+				} ),
+			],
+		} );
+
+		frame.on( 'cropped', function ( attachment ) {
+			$hiddenDataField.val( attachment.id );
+			switchToUpdate( attachment );
+			frame.close();
+
+			// Start over with a frame that is so fresh and so clean clean.
+			frame = null;
+		} );
+
+		// When an image is selected, run a callback.
+		frame.on( 'select', function () {
+			// Grab the selected attachment.
+			var attachment = frame.state().get( 'selection' ).first();
+
+			if (
+				attachment.attributes.height === $el.data( 'size' ) &&
+				$el.data( 'size' ) === attachment.attributes.width
+			) {
+				switchToUpdate( attachment.attributes );
+				frame.close();
+
+				// Set the value of the hidden input to the attachment id.
+				$hiddenDataField.val( attachment.id );
+			} else {
+				frame.setState( 'cropper' );
+			}
+		} );
+
+		frame.open();
+	} );
+
+	/**
+	 * Update the UI when a site icon is selected.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param {array} attributes The attributes for the attachment.
+	 */
+	function switchToUpdate( attributes ) {
+		var i18nAppAlternativeString, i18nBrowserAlternativeString;
+
+		if ( attributes.alt ) {
+			i18nAppAlternativeString = wp.i18n.sprintf(
+				/* translators: %s: The selected image alt text. */
+				wp.i18n.__( 'App icon preview: Current image: %s' ),
+				attributes.alt
+			);
+			i18nBrowserAlternativeString = wp.i18n.sprintf(
+				/* translators: %s: The selected image alt text. */
+				wp.i18n.__( 'Browser icon preview: Current image: %s' ),
+				attributes.alt
+			);
+		} else {
+			i18nAppAlternativeString = wp.i18n.sprintf(
+				/* translators: %s: The selected image filename. */
+				wp.i18n.__(
+					'App icon preview: The current image has no alternative text. The file name is: %s'
+				),
+				attributes.filename
+			);
+			i18nBrowserAlternativeString = wp.i18n.sprintf(
+				/* translators: %s: The selected image filename. */
+				wp.i18n.__(
+					'Browser icon preview: The current image has no alternative text. The file name is: %s'
+				),
+				attributes.filename
+			);
+		}
+
+		// Set site-icon-img src and alternative text to app icon preview.
+		$appIconPreview.attr( {
+			src: attributes.url,
+			alt: i18nAppAlternativeString,
+		} );
+
+		// Set site-icon-img src and alternative text to browser preview.
+		$browserIconPreview.attr( {
+			src: attributes.url,
+			alt: i18nBrowserAlternativeString,
+		} );
+
+		// Remove hidden class from icon preview div and remove button.
+		$iconPreview.removeClass( 'hidden' );
+		$removeButton.removeClass( 'hidden' );
+
+		// If the choose button is not in the update state, swap the classes.
+		if ( $chooseButton.attr( 'data-state' ) !== '1' ) {
+			$chooseButton.attr( {
+				class: $chooseButton.attr( 'data-alt-classes' ),
+				'data-alt-classes': $chooseButton.attr( 'class' ),
+				'data-state': '1',
+			} );
+		}
+
+		// Swap the text of the choose button.
+		$chooseButton.text( $chooseButton.attr( 'data-update-text' ) );
+	}
+
+	/**
+	 * Handles the click event of the remove button.
+	 *
+	 * @since 6.5.0
+	 */
+	$removeButton.on( 'click', function () {
+		$hiddenDataField.val( 'false' );
+		$( this ).toggleClass( 'hidden' );
+		$iconPreview.toggleClass( 'hidden' );
+		$browserIconPreview.attr( {
+			src: '',
+			alt: '',
+		} );
+		$appIconPreview.attr( {
+			src: '',
+			alt: '',
+		} );
+
+		/**
+		 * Resets state to the button, for correct visual style and state.
+		 * Updates the text of the button.
+		 * Sets focus state to the button.
+		 */
+		$chooseButton
+			.attr( {
+				class: $chooseButton.attr( 'data-alt-classes' ),
+				'data-alt-classes': $chooseButton.attr( 'class' ),
+				'data-state': '',
+			} )
+			.text( $chooseButton.attr( 'data-choose-text' ) )
+			.trigger( 'focus' );
+	} );
+} )( jQuery );