230500
This commit is contained in:
236
backup/wp/wp-admin/js/site-icon.js
Normal file
236
backup/wp/wp-admin/js/site-icon.js
Normal file
@@ -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 );
|
||||
Reference in New Issue
Block a user