toolbar: 'crop',
content: 'crop',
router: false,
+ canSkipCrop: false,
- canSkipCrop: false
+ // Default doCrop Ajax arguments to allow the Customizer (for example) to inject state.
+ doCropArgs: {}
},
activate: function() {
},
doCrop: function( attachment ) {
- return wp.ajax.post( 'custom-header-crop', {
- nonce: attachment.get('nonces').edit,
- id: attachment.get('id'),
- cropDetails: attachment.get('cropDetails')
- } );
+ return wp.ajax.post( 'custom-header-crop', _.extend(
+ {},
+ this.defaults.doCropArgs,
+ {
+ nonce: attachment.get( 'nonces' ).edit,
+ id: attachment.get( 'id' ),
+ cropDetails: attachment.get( 'cropDetails' )
+ }
+ ) );
}
});
CustomizeImageCropper = Controller.Cropper.extend({
doCrop: function( attachment ) {
var cropDetails = attachment.get( 'cropDetails' ),
- control = this.get( 'control' );
+ control = this.get( 'control' ),
+ ratio = cropDetails.width / cropDetails.height;
- cropDetails.dst_width = control.params.width;
- cropDetails.dst_height = control.params.height;
+ // Use crop measurements when flexible in both directions.
+ if ( control.params.flex_width && control.params.flex_height ) {
+ cropDetails.dst_width = cropDetails.width;
+ cropDetails.dst_height = cropDetails.height;
+
+ // Constrain flexible side based on image ratio and size of the fixed side.
+ } else {
+ cropDetails.dst_width = control.params.flex_width ? control.params.height * ratio : control.params.width;
+ cropDetails.dst_height = control.params.flex_height ? control.params.width / ratio : control.params.height;
+ }
return wp.ajax.post( 'crop-image', {
wp_customize: 'on',
AttachmentView: wp.media.view.Attachment.Library
});
- this.listenTo( this.controller, 'toggle:upload:attachment', _.bind( this.toggleUploader, this ) );
+ this.controller.on( 'toggle:upload:attachment', this.toggleUploader, this );
this.controller.on( 'edit:selection', this.editSelection );
this.createToolbar();
if ( this.options.sidebar ) {