"use strict";
var wcuf_cropper_popup;
var wcuf_cropper_js;
var wcuf_crop_is_multiple_file_upload;
var wcuf_crop_event_to_propagate;
var wcuf_crop_curr_file;
var wcuf_crop_curr_upload_id;
var wcuf_crop_curr_rotation;
var wcuf_cropped_image_width;
var wcuf_cropped_image_height;
var wcuf_cropper_autoadjust;
var wcuf_cropper_enable_ratio_usage;
var wcuf_crop_file_unique_id;
var wcuf_crop_enable_compression=false;
var wcuf_user_can_resize=false;
var wcuf_crop_compression_quality=1;
var wcuf_crop_coordinates={};
jQuery(document).ready(function(){
jQuery(document).on('click', '.wcuf_single_crop_button', wcuf_crop_single_file_when_multiple_uploading);
jQuery(document).on('click', '#wcuf_crop_cancel_button', wcuf_close_popup_dialog);
jQuery(document).on('click', '.wcuf_crop_manipulation_button', wcuf_crop_manipulate_image);
jQuery(document).on('click', '#wcuf_crop_save_button', wcuf_crop_save_and_close);
jQuery(document).on('click', '#wcuf_crop_landascape', wcuf_rotate_crop_area);
jQuery(document).on('click', '#wcuf_crop_portrait', wcuf_rotate_crop_area);
jQuery(document).on('click', '.mfp-close', wcuf_close_cropper_modal);
});
function wcuf_show_cropper_on_file_selection(id, event){
wcuf_crop_is_multiple_file_upload=false;
const file_unique_id=jQuery(event.currentTarget).data('file-unique-id');
wcuf_crop_file_unique_id=file_unique_id;
wcuf_crop_event_to_propagate=event;
wcuf_crop_event_to_propagate.file_id=id,
wcuf_crop_event_to_propagate.file_unique_id=file_unique_id,
wcuf_crop_event_to_propagate.file_index=0;
wcuf_crop_event_to_propagate.disable_auto_upload=wcuf_crop_event_to_propagate.hasOwnProperty('disable_auto_upload')&&wcuf_crop_event_to_propagate;
wcuf_crop_init_vars(id, event.target.files[0]);
wcuf_crop_init_popup();
return false
}
function wcuf_crop_single_file_when_multiple_uploading(event){
wcuf_crop_is_multiple_file_upload=true;
event.preventDefault();
event.stopImmediatePropagation();
const file_id=jQuery(event.currentTarget).data('id');
const file_unique_id=jQuery(event.currentTarget).data('file-unique-id');
wcuf_crop_file_unique_id=file_unique_id;
let file_index=-1;
for(let i=0; i < wcuf_multiple_files_queues[file_id].length; i++)
if(wcuf_multiple_files_queues[file_id][i].unique_id==file_unique_id)
file_index=i;
if(file_index < 0)
return false;
wcuf_crop_event_to_propagate={target: {files:[wcuf_multiple_files_queues[file_id][file_index]]},
file_id: file_id,
file_unique_id: file_unique_id,
file_index: file_index};
wcuf_crop_init_vars(file_id, wcuf_multiple_files_queues[file_id][file_index]);
wcuf_crop_init_popup()
return false
}
function wcuf_crop_init_vars(id, file_ref){
wcuf_crop_coordinates[id]=wcuf_crop_coordinates[id]||{};
wcuf_crop_curr_rotation=0;
wcuf_crop_curr_upload_id=id;
wcuf_crop_curr_file=file_ref;
wcuf_manage_crop_actions_ui(true);
jQuery('#wcuf_crop_status').html("");
}
function wcuf_crop_init_popup(){
jQuery("#wcuf_cropper_popup").css({'display':'block'});
wcuf_cropper_popup=jQuery.magnificPopup.open({
items: {
src: '#wcuf_cropper_popup'
},
type: 'inline',
closeOnBgClick: false,
enableEscapeKey: false,
closeOnContentClick: false,
callbacks: {
open: function(){
wcuf_crop_load_image_data()
},
close: wcuf_on_cropper_popup_closed
}});
wcuf_cropper_popup=jQuery.magnificPopup.instance;
}
function wcuf_crop_load_image_data(){
var reader=new FileReader();
reader.onload=function(e){
var image_loaded_result=wcuf_dataURItoBlob(e.target.result);
if(image_loaded_result.type=="image/jpeg"||image_loaded_result.type=="image/png"){
wcuf_init_cropper(e.target.result);
}}
reader.readAsDataURL(wcuf_crop_curr_file);
}
function wcuf_init_cropper(image_data_base64){
var image_holder=document.getElementById("wcuf_image_to_crop");
image_holder.src=image_data_base64;
wcuf_cropped_image_width=jQuery("#wcuf_upload_field_"+wcuf_crop_curr_upload_id).data('cropped-width');
wcuf_cropped_image_height=jQuery("#wcuf_upload_field_"+wcuf_crop_curr_upload_id).data('cropped-height');
wcuf_cropper_autoadjust=jQuery("#wcuf_upload_field_"+wcuf_crop_curr_upload_id).data('cropper-autoadjust')&&wcuf_cropped_image_width!=wcuf_cropped_image_height;
wcuf_cropper_enable_ratio_usage=jQuery("#wcuf_upload_field_"+wcuf_crop_curr_upload_id).data('cropper-enable-ratio')==1;
wcuf_crop_enable_compression=jQuery("#wcuf_upload_field_"+wcuf_crop_curr_upload_id).data('cropper-compress-image') ? true:false;
wcuf_crop_compression_quality=jQuery("#wcuf_upload_field_"+wcuf_crop_curr_upload_id).data('cropper-compression-quality');
wcuf_user_can_resize=jQuery("#wcuf_upload_field_"+wcuf_crop_curr_upload_id).data('cropper-allow-resize');
var image_fit_canvas=jQuery("#wcuf_upload_field_"+wcuf_crop_curr_upload_id).data('cropper-image-fit-canvas') ? true:false;
var shape=jQuery("#wcuf_upload_field_"+wcuf_crop_curr_upload_id).data('crop-area-shape');
if(wcuf_cropped_image_height/wcuf_cropped_image_width==1)
jQuery('#wcuf_crop_landascape, #wcuf_crop_portrait').hide();
if(wcuf_cropper_js)
wcuf_cropper_js.destroy();
wcuf_cropper_js=new Cropper(image_holder, {
autoCropArea: 1,
autoCrop: true,
cropBoxMovable: true,
restore:false,
viewMode: image_fit_canvas ? 3:2,
aspectRatio: wcuf_cropped_image_width&&wcuf_cropped_image_width ? 1:null,
cropBoxResizable: wcuf_user_can_resize,
dragMode: wcuf_user_can_resize ? 'crop':'move',
zoomable: wcuf_options.disable_zoom_controller=="false",
zoomOnTouch: wcuf_options.disable_zoom_controller=="false",
zoomOnWheel: wcuf_options.disable_zoom_controller=="false",
ready: function (e){
wcuf_crop_adjust_area();
},
close: function(e){
wcuf_close_popup_dialog(e);
}});
}
function wcuf_close_cropper_modal(event){
wcuf_close_popup_dialog(event);
}
function wcuf_rotate_crop_area(event){
var mode=jQuery(event.currentTarget).data("mode");
var min=wcuf_cropped_image_width > wcuf_cropped_image_height ? wcuf_cropped_image_height:wcuf_cropped_image_width;
var max=wcuf_cropped_image_width > wcuf_cropped_image_height ? wcuf_cropped_image_width:wcuf_cropped_image_height;
wcuf_cropper_js.setAspectRatio(mode=="landscape" ? max/min:min/max);
}
function wcuf_crop_adjust_area(){
var img_data=wcuf_cropper_js.getImageData();
var cropper_area_width=wcuf_cropped_image_width;
var cropper_area_height=wcuf_cropped_image_height;
var adjust_crop_area=false;
var selected_ratio=cropper_area_width/cropper_area_height;
if(cropper_area_width&&cropper_area_height)
adjust_crop_area=true;
if(wcuf_cropper_enable_ratio_usage){
if(selected_ratio > 1){
cropper_area_width=img_data.naturalWidth;
cropper_area_height=img_data.naturalWidth / selected_ratio;
}
else if(selected_ratio==1){
cropper_area_width=img_data.naturalWidth > img_data.naturalHeight ? img_data.naturalHeight:img_data.naturalWidth;
cropper_area_height=cropper_area_width;
}else{
cropper_area_width=img_data.naturalHeight * selected_ratio;
cropper_area_height=img_data.naturalHeight;
}
adjust_crop_area=true;
}
if(wcuf_cropper_autoadjust){
var current_image_width=wcuf_options.crop_rotation_method!='server_side'&&(Math.abs(wcuf_crop_curr_rotation)==90||Math.abs(wcuf_crop_curr_rotation)==270) ? img_data.naturalHeight:img_data.naturalWidth;
var current_image_height=wcuf_options.crop_rotation_method!='server_side'&&(Math.abs(wcuf_crop_curr_rotation)==90||Math.abs(wcuf_crop_curr_rotation)==270) ? img_data.naturalWidth:img_data.naturalHeight;
var maintain=(current_image_width/current_image_height <=1&&cropper_area_width/cropper_area_height <=1) ||
(current_image_width/current_image_height > 1&&cropper_area_width/cropper_area_height > 1);
if(!maintain){
var tmp=cropper_area_width;
cropper_area_width=cropper_area_height;
cropper_area_height=tmp;
adjust_crop_area=true;
}
selected_ratio=cropper_area_width/cropper_area_height;
}
if(adjust_crop_area)
wcuf_cropper_js.setAspectRatio(selected_ratio);
}
function wcuf_center_crop_area(){
var container_data=wcuf_cropper_js.getContainerData();
var croparea_data=wcuf_cropper_js.getCropBoxData();
var image_data=wcuf_cropper_js.getImageData();
var canvas_data=wcuf_cropper_js.getData();
var left=croparea_data.left + ((image_data.width/2) - (croparea_data.width/2));
var top=((image_data.height/2) - (croparea_data.height/2));
if((Math.abs(canvas_data.rotate)==90||Math.abs(canvas_data.rotate)==270)){
var left=croparea_data.left + ((image_data.height/2) - (croparea_data.height/2));
var top=croparea_data.height + ((image_data.left/2) - (croparea_data.left/2));
}
wcuf_cropper_js.setCropBoxData({
left:left,
top:top,
width:croparea_data.width,
height:croparea_data.height,
});
}
function wcuf_crop_manipulate_image(event){
event.preventDefault();
event.stopImmediatePropagation();
var action=jQuery(event.currentTarget).data('action');
var param=jQuery(event.currentTarget).data('param');
switch(action){
case 'rotate':
wcuf_crop_curr_rotation -=param;
wcuf_crop_curr_rotation=Math.abs(wcuf_crop_curr_rotation)==360 ? 0:wcuf_crop_curr_rotation;
if(wcuf_options.crop_rotation_method=='server_side')
wcuf_crop_upload_image_for_rotatation(param);
else
{
wcuf_cropper_js.rotate(param);
wcuf_crop_adjust_area();
}
break;
case 'zoom': wcuf_cropper_js.zoom(param);
break;
}
return false
}
function wcuf_crop_upload_image_for_rotatation(degrees){
var xhr=new XMLHttpRequest();
if(!xhr.upload)
return;
wcuf_manage_crop_actions_ui(false);
xhr.onreadystatechange=function(event){
if(xhr.readyState==4){
jQuery('#wcuf_crop_status').html(xhr.status==200 ? wcuf_success_msg:wcuf_failure_msg);
if(xhr.status==200){
wcuf_manage_crop_actions_ui(true);
wcuf_init_cropper(event.target.response);
}}
};
var a=function(event){
jQuery('#wcuf_crop_remote_processing_upload_bar').css('width', event.pc+"%");
jQuery('#wcuf_crop_rotating_upload_percent').html(event.pc + "%");
};
var b=function(event){
var formData=new FormData();
formData.append('action', 'wcuf_rotate_image');
formData.append('degrees', wcuf_crop_curr_rotation);
formData.append('session_id', event.session_id);
formData.append('file_name', event.file_name);
xhr.open("POST", wcuf_ajaxurl, true);
xhr.send(formData);
};
var multiple_file_uploader=new Van_MultipleFileUploader({files: [wcuf_crop_curr_file], on_progess_callback: a, on_single_file_upload_complete_callback:b, security:wcuf_options.security});
multiple_file_uploader.continueUploading();
}
function wcuf_crop_save_and_close(event){
jQuery("#wcuf_single_crop_button_"+wcuf_crop_file_unique_id).remove();
wcuf_manage_crop_actions_ui(false);
if(wcuf_options.crop_method=='server_side'){
wcuf_crop_via_server_and_save();
return;
}
wcuf_crop_coordinates[wcuf_crop_event_to_propagate.file_id][wcuf_crop_event_to_propagate.file_index]=wcuf_crop_coordinates[wcuf_crop_event_to_propagate.file_id][wcuf_crop_event_to_propagate.file_index]||{};
wcuf_crop_coordinates[wcuf_crop_event_to_propagate.file_id][wcuf_crop_event_to_propagate.file_index]=wcuf_cropper_js.getData();
var cropped_data=wcuf_cropper_js.getCroppedCanvas(!wcuf_cropper_enable_ratio_usage ? { width: wcuf_cropped_image_width, height: wcuf_cropped_image_height}:{});
cropped_data.toBlob(function(blob){
new Compressor(blob,
{
quality: wcuf_crop_enable_compression ? wcuf_crop_compression_quality:1,
success(result){
wcuf_crop_set_image_data(result, wcuf_crop_event_to_propagate.target.files[0].name);
wcuf_close_popup_dialog(event);
},
error(err){
console.log("WooCommerce Upload Files: no compression performed");
console.log(err.message);
wcuf_crop_set_image_data(blob,wcuf_crop_event_to_propagate.target.files[0].name);
wcuf_close_popup_dialog(event);
}});
});
}
function wcuf_crop_set_image_data(blob, name){
blob.name=wcuf_crop_event_to_propagate.target.files[0].name;
wcuf_crop_event_to_propagate.blob=blob;
wcuf_end_cropping_process();
}
function wcuf_crop_via_server_and_save(){
wcuf_manage_crop_actions_ui(false);
var xhr=new XMLHttpRequest();
xhr.responseType='blob';
if(!xhr.upload)
return;
xhr.onreadystatechange=function(event){
if(xhr.readyState==4){
jQuery('#wcuf_status').html(xhr.status==200 ? wcuf_success_msg:wcuf_failure_msg);
if(xhr.status==200){
wcuf_crop_set_image_data(event.target.response, wcuf_crop_event_to_propagate.target.files[0].name);
wcuf_close_popup_dialog(event);
}}
};
var a=function(event){
jQuery('#wcuf_crop_rotating_upload_bar').css('width', event.pc+"%");
jQuery('#wcuf_crop_rotating_upload_percent').html(event.pc + "%");
};
var b=function(event){
var crop_data=wcuf_cropper_js.getData()
var formData=new FormData();
formData.append('action', 'wcuf_crop_image');
formData.append('width', crop_data.width);
formData.append('height', crop_data.height);
formData.append('startX', crop_data.x);
formData.append('startY', crop_data.y);
formData.append('ratio_usage', wcuf_cropper_enable_ratio_usage ? "true":"false");
formData.append('final_width', wcuf_cropped_image_width==0 ? crop_data.width:wcuf_cropped_image_width);
formData.append('final_height', wcuf_cropped_image_height==0 ? crop_data.height:wcuf_cropped_image_height);
formData.append('quality', wcuf_crop_enable_compression ? wcuf_crop_compression_quality:1);
formData.append('degree', wcuf_crop_curr_rotation);
formData.append('session_id', event.session_id);
formData.append('file_name', event.file_name);
xhr.open("POST", wcuf_ajaxurl, true);
xhr.send(formData);
};
var multiple_file_uploader=new Van_MultipleFileUploader({files: [wcuf_crop_curr_file], on_progess_callback: a, on_single_file_upload_complete_callback:b, security:wcuf_options.security});
multiple_file_uploader.continueUploading();
return false;
}
function wcuf_end_cropping_process(){
if(wcuf_crop_is_multiple_file_upload)
wcuf_on_crop_performed_during_multiple_upload(wcuf_crop_event_to_propagate);
else if(!wcuf_crop_event_to_propagate.disable_auto_upload)
wcuf_backgroud_file_upload(wcuf_crop_event_to_propagate);
}
function wcuf_on_crop_performed_during_multiple_upload(event){
const file_id=event.file_id;
let file_index=-1;
const file_unique_id=event.file_unique_id;
const file_preview_name="#wcuf_single_image_preview_"+file_unique_id;
for(let i=0; i < wcuf_multiple_files_queues[file_id].length; i++)
if(wcuf_multiple_files_queues[file_id][i].unique_id==file_unique_id)
file_index=i;
if(file_index < 0)
return;
jQuery('#wcuf_single_file_in_multiple_list_'+file_unique_id).removeClass('wcuf_mandatory_crop');
jQuery(file_preview_name).attr('src',   URL.createObjectURL(event.blob));
const quantity=wcuf_multiple_files_queues[file_id][file_index].quantity;
const file_name=wcuf_multiple_files_queues[file_id][file_index].name;
const type=wcuf_multiple_files_queues[file_id][file_index].type;
wcuf_multiple_files_queues[file_id][file_index]=event.blob;
wcuf_multiple_files_queues[file_id][file_index].quantity=quantity;
wcuf_multiple_files_queues[file_id][file_index].is_cropped=true;
wcuf_multiple_files_queues[file_id][file_index].file_unique_id=file_unique_id;
wcuf_multiple_files_queues[file_id][file_index].unique_id=file_unique_id;
wcuf_multiple_files_mandatory_crop[file_id][file_index]=false;
}
function wcuf_manage_crop_actions_ui(show){
if(show){
jQuery("#wcuf_crop_container").css('opacity',"1");
jQuery("#wcuf_crop_container").css('pointer-events',"all");
jQuery("#wcuf_crop_container_actions").fadeIn();
jQuery("#wcuf_crop_upload_image_for_rotating_status_box").fadeOut();
jQuery('#wcuf_crop_remote_processing_upload_bar').css('width', "0%");
}else{
jQuery("#wcuf_crop_container_actions").fadeOut();
jQuery("#wcuf_crop_container").css('opacity',"0.5");
jQuery("#wcuf_crop_container").css('pointer-events',"none");
jQuery("#wcuf_crop_upload_image_for_rotating_status_box").fadeIn();
wcuf_ui_set_bar_background();
jQuery('#wcuf_crop_remote_processing_upload_bar').css('width', "0%");
}}
function wcuf_close_popup_dialog(event){
event.preventDefault();
event.stopImmediatePropagation();
if(!wcuf_cropper_js)
return;
var id=wcuf_crop_event_to_propagate.file_id;
var is_multiple=jQuery("#wcuf_upload_field_"+id).data('is-multiple-files');
if(!is_multiple)
jQuery("#wcuf_upload_field_"+id).val("");
wcuf_cropper_popup.close();
wcuf_on_cropper_popup_closed();
return false;
}
function wcuf_on_cropper_popup_closed(){
wcuf_manage_crop_actions_ui(true);
var image_holder=document.getElementById("wcuf_image_to_crop");
image_holder.src="";
wcuf_cropper_js.destroy();
}
function wcuf_dataURItoBlob(dataURI){
var byteString;
if(dataURI.split(',')[0].indexOf('base64') >=0)
byteString=atob(dataURI.split(',')[1]);
else
byteString=unescape(dataURI.split(',')[1]);
var mimeString=dataURI.split(',')[0].split(':')[1].split(';')[0];
var ia=new Uint8Array(byteString.length);
for (var i=0; i < byteString.length; i++){
ia[i]=byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
};