115 lines
3.4 KiB
JavaScript
115 lines
3.4 KiB
JavaScript
if ( typeof ( window.UM ) !== 'object' ) {
|
|
window.UM = {};
|
|
}
|
|
|
|
if ( typeof ( UM.frontend ) !== 'object' ) {
|
|
UM.frontend = {};
|
|
}
|
|
|
|
UM.frontend = {
|
|
cropper: {
|
|
/**
|
|
* @type ?Cropper
|
|
*/
|
|
obj: null,
|
|
init: function() {
|
|
let target_img = jQuery('.um-modal .um-single-image-preview img').first();
|
|
if ( ! target_img.length || '' === target_img.attr('src') ) {
|
|
return;
|
|
}
|
|
|
|
if ( UM.frontend.cropper.obj ) {
|
|
// If Cropper object exists then destroy before re-init.
|
|
UM.frontend.cropper.destroy();
|
|
}
|
|
|
|
var target_img_parent = jQuery('.um-modal .um-single-image-preview');
|
|
|
|
var crop_data = target_img.parent().data('crop');
|
|
var min_width = target_img.parent().data('min_width');
|
|
var min_height= target_img.parent().data('min_height');
|
|
var ratio = target_img.parent().data('ratio');
|
|
|
|
let singleUploadRatio = jQuery('.um-modal').find('#um_upload_single').data('ratio');
|
|
if ( singleUploadRatio ) {
|
|
let ratioSplit = singleUploadRatio.split(':');
|
|
ratio = ratioSplit[0];
|
|
}
|
|
|
|
var max_height = jQuery(window).height() - ( jQuery('.um-modal-footer a').height() + 20 ) - 50 - ( jQuery('.um-modal-header:visible').height() );
|
|
target_img.css({'height' : 'auto'});
|
|
target_img_parent.css({'height' : 'auto'});
|
|
if ( jQuery(window).height() <= 400 ) {
|
|
target_img_parent.css({ 'height': max_height +'px', 'max-height' : max_height + 'px' });
|
|
target_img.css({ 'height' : 'auto' });
|
|
} else {
|
|
target_img.css({ 'height': 'auto', 'max-height' : max_height + 'px' });
|
|
target_img_parent.css({ 'height': target_img.height(), 'max-height' : max_height + 'px' });
|
|
}
|
|
|
|
let opts;
|
|
if ( 'square' === crop_data ) {
|
|
opts = {
|
|
minWidth: min_width,
|
|
minHeight: min_height,
|
|
dragCrop: false,
|
|
aspectRatio: 1.0,
|
|
zoomable: false,
|
|
rotatable: false,
|
|
dashed: false,
|
|
scalable: false
|
|
};
|
|
} else if ( 'cover' === crop_data ) {
|
|
if ( Math.round( min_width / ratio ) > 0 ) {
|
|
min_height = Math.round( min_width / ratio )
|
|
}
|
|
opts = {
|
|
minWidth: min_width,
|
|
minHeight: min_height,
|
|
dragCrop: false,
|
|
aspectRatio: ratio,
|
|
zoomable: false,
|
|
rotatable: false,
|
|
dashed: false,
|
|
scalable: false
|
|
};
|
|
} else if ( 'user' === crop_data ) {
|
|
opts = {
|
|
minWidth: min_width,
|
|
minHeight: min_height,
|
|
dragCrop: true,
|
|
aspectRatio: "auto",
|
|
zoomable: false,
|
|
rotatable: false,
|
|
dashed: false,
|
|
scalable: false
|
|
};
|
|
}
|
|
|
|
if ( opts ) {
|
|
UM.frontend.cropper.obj = new Cropper(target_img[0], opts);
|
|
// The commented lines below are maybe unnecessary. Wait for feedback and probably permanently delete.
|
|
// jQuery('.um-single-image-preview img.lazyloaded').addClass('cropper-hidden').removeClass('lazyloaded');
|
|
// jQuery('.um-single-image-preview .cropper-container').append('<div class="um-clear"></div>');
|
|
}
|
|
},
|
|
destroy: function() {
|
|
if ( jQuery('.cropper-container').length > 0 && UM.frontend.cropper.obj ) {
|
|
UM.frontend.cropper.obj.destroy(); // destroy Cropper.JS method
|
|
UM.frontend.cropper.obj = null; // flush our own object
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
wp.hooks.addAction( 'um_remove_modal', 'um_common_frontend', function() {
|
|
UM.frontend.cropper.destroy();
|
|
});
|
|
|
|
wp.hooks.addAction( 'um_after_removing_preview', 'um_common_frontend', function() {
|
|
UM.frontend.cropper.destroy();
|
|
});
|
|
|
|
wp.hooks.addAction( 'um_window_resize', 'um_common_frontend', function() {
|
|
UM.frontend.cropper.destroy();
|
|
});
|