WordPress/wp-admin/js/site-icon-crop.js
Konstantin Obenland cd7a40bdc7 Site Icon: Improve responsiveness for small screen devices.
Using Jcrop's `trueSize` argument also allows us to get rid of all that behind
the scenes temp image creating and back and forth calculating of image sizes.

Props tyxla for initial patch.
See #16434.


Built from https://develop.svn.wordpress.org/trunk@33053


git-svn-id: http://core.svn.wordpress.org/trunk@33024 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-07-02 21:16:24 +00:00

53 lines
1.6 KiB
JavaScript

/* global wpSiteIconCropData, jQuery */
(function($) {
var jcrop_api = {},
siteIconCrop = {
updateCoords : function ( coords ) {
$( '#crop-x' ).val( coords.x );
$( '#crop-y' ).val( coords.y );
$( '#crop-width' ).val( coords.w );
$( '#crop-height' ).val( coords.h );
siteIconCrop.showPreview( coords );
},
showPreview : function( coords ){
var rx = 64 / coords.w,
ry = 64 / coords.h,
preview_rx = 16 / coords.w,
preview_ry = 16 / coords.h;
$( '#preview-homeicon' ).css({
width: Math.round(rx * wpSiteIconCropData.width ) + 'px',
height: Math.round(ry * wpSiteIconCropData.height ) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
$( '#preview-favicon' ).css({
width: Math.round( preview_rx * wpSiteIconCropData.width ) + 'px',
height: Math.round( preview_ry * wpSiteIconCropData.height ) + 'px',
marginLeft: '-' + Math.round( preview_rx * coords.x ) + 'px',
marginTop: '-' + Math.floor( preview_ry* coords.y ) + 'px'
});
},
ready: function() {
jcrop_api = $.Jcrop( '#crop-image' );
jcrop_api.setOptions({
bgColor: 'transparent',
aspectRatio: 1,
onSelect: siteIconCrop.updateCoords,
onChange: siteIconCrop.updateCoords,
trueSize: [ wpSiteIconCropData.width, wpSiteIconCropData.height ],
minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ]
});
jcrop_api.animateTo([wpSiteIconCropData.init_x, wpSiteIconCropData.init_y, wpSiteIconCropData.init_size, wpSiteIconCropData.init_size]);
}
};
siteIconCrop.ready();
})(jQuery);