WordPress/wp-admin/js/site-icon.js

139 lines
4.2 KiB
JavaScript

(function($) {
var frame;
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;
}
$( function() {
// Build the choose from library frame.
$( '#choose-from-library-link' ).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' ),
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) {
$( '#site_icon_hidden_field' ).val(attachment.id);
switchToUpdate(attachment.url);
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 ) {
// Set the value of the hidden input to the attachment id.
$( '#site_icon_hidden_field').val(attachment.id);
switchToUpdate(attachment.attributes.url);
frame.close();
} else {
frame.setState( 'cropper' );
}
});
frame.open();
});
});
function switchToUpdate( url ){
// Set site-icon-img src to the url and remove the hidden class.
$( '#site-icon-preview').find('img').not('.browser-preview').each( function(i, img ){
$(img).attr('src', url );
});
$( '#site-icon-preview' ).removeClass( 'hidden' );
// Remove hidden class from remove.
$( '#js-remove-site-icon' ).removeClass( 'hidden' );
// If the button is not in the update state, swap the classes.
if( $( '#choose-from-library-link' ).attr( 'data-state' ) !== '1' ){
var classes = $( '#choose-from-library-link' ).attr( 'class' );
$( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr('data-alt-classes') );
$( '#choose-from-library-link' ).attr( 'data-alt-classes', classes );
$( '#choose-from-library-link' ).attr( 'data-state', '1' );
}
// swap the text of the button
$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-update-text' ) );
}
$( '#js-remove-site-icon' ).on( 'click', function() {
$( '#site_icon_hidden_field' ).val( 'false' );
$( '#site-icon-preview' ).toggleClass( 'hidden' );
$( this ).toggleClass( 'hidden' );
var classes = $( '#choose-from-library-link' ).attr( 'class' );
$( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr( 'data-alt-classes' ) );
$( '#choose-from-library-link' ).attr( 'data-alt-classes', classes );
// Swap the text of the button.
$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-choose-text' ) );
// Set the state of the button so it can be changed on new icon.
$( '#choose-from-library-link' ).attr( 'data-state', '');
});
}(jQuery));