PluginProbe
Comments Extra Fields For Post,Pages and CPT / 4.4
Comments Extra Fields For Post,Pages and CPT v4.4
trunk 1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 2.2 2.3 4.0 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 5.0 5.1 5.2
wp-comment-fields / js / file-upload.js

file-upload.js in Comments Extra Fields For Post,Pages and CPT 4.4, at js/file-upload.js

633 lines 23.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * file upload js
3 * @since 8.4
4 **/
5
6 var isCartBlock = false;
7 var upload_instance = Array();
8 var file_count = Array();
9 var $filelist_DIV = Array();
10 var wpcomment_file_progress = '';
11 var featherEditor = '';
12 var uploaderInstances = {};
13 var Cropped_Data_Captured = false;
14
15 jQuery(function($) {
16
17 // If cropper input found in fields
18 // if (wpcomment_get_field_meta_by_type('cropper').length > 0) {
19
20 // var wc_cart_form = $('form.cart');
21 // $(wc_cart_form).on('submit', function(e) {
22
23 // // e.preventDefault();
24 // var cropper_fields = wpcomment_get_field_meta_by_type('cropper');
25 // $.each(cropper_fields, function(i, cropper) {
26
27 // if (cropper.legacy_cropper !== undefined) return;
28
29 // var cropper_name = cropper.data_name;
30 // wpcomment_generate_cropper_data_for_cart(cropper.data_name);
31
32 // });
33 // });
34 // }
35
36 $(document).on('wpcomment_image_ready', function(e) {
37
38 var image_url = e.image_url;
39 var image_id = e.image.id;
40 var data_name = e.data_name;
41 var input_type = e.input_type;
42
43 if (input_type === 'cropper') {
44
45 field_meta = wpcomment_get_field_meta_by_id(data_name);
46 // console.log('wp-comment-fields',field_meta)
47 if (field_meta.legacy_cropper === undefined) {
48 wpcomment_show_cropped_preview(data_name, image_url, image_id);
49 // hiding the filelist-{data_name} when preview enabled
50 $(`#filelist-${data_name}`).hide();
51 // hide the file upload area too
52 $(`.wpcomment-file-container`).hide();
53 // also hide the crop ratio if only one option is provided
54 if( $(`#crop-size-${data_name} option`).length === 1){
55 $(`#crop-size-${data_name}`).hide();
56 }
57 }
58 }
59
60 // moving modal to body end
61 $('.wpcomment-modals').appendTo('body');
62 });
63
64 // On file removed
65 $(document).on('wpcomment_uploaded_file_removed', function(e) {
66
67 var field_name = e.field_name;
68 // var fileid = e.fileid;
69
70 wpcomment_reset_cropping_preview(field_name);
71
72 });
73
74
75 // Croppie update size
76 $('.wpcomment-croppie-preview').on('change', '.wpcomment-cropping-size', function(e) {
77
78 var data_name = $(this).data('field_name');
79 var cropp_preview_container = jQuery(".wpcomment-croppie-wrapper-" + data_name);
80 var v_width = $('option:selected', this).data('width');
81 var v_height = $('option:selected', this).data('height');
82
83 cropp_preview_container.find('.croppie-container').each(function(i, croppie_dom) {
84
85 var image_id = jQuery(croppie_dom).attr('data-image_id');
86 $(croppie_dom).croppie('destroy');
87 var viewport = { 'width': v_width, 'height': v_height };
88 wpcomment_set_croppie_options(data_name, viewport, image_id);
89 });
90
91 });
92
93 // Deleting File
94 $(".wpcomment-wrapper").on('click', '.u_i_c_tools_del', function(e) {
95 e.preventDefault();
96
97 var del_message = wpcomment_file_vars.delete_file_msg;
98 var a = confirm(del_message);
99 if (a) {
100 // it is removing from uploader instance
101 var fileid = $(this).closest('.wpcomment-file-wrapper').attr("data-fileid");
102 var file_data_name = $(this).closest('div.wpcomment-field-wrapper').attr("data-data_name");
103 // console.log(fileid);
104 file_count[file_data_name] = 0;
105
106 upload_instance[file_data_name].removeFile(fileid);
107
108 var filename = $('input:checkbox[name="wpcomment[fields][' + file_data_name + '][' + fileid + '][org]"]').val();
109
110 // it is removing physically if uploaded
111 $("#u_i_c_" + fileid).find('img').attr('src', wpcomment_file_vars.plugin_url + '/images/loading.gif');
112
113 // console.log('filename wpcomment[fields][<?php echo ]$args['id']?>['+fileid+']');
114 var data = { action: 'wpcomment_delete_file', file_name: filename, 'wpcomment_nonce': wpcomment_file_vars.wpcomment_file_delete_nonce };
115
116 $.post(wpcomment_file_vars.ajaxurl, data, function(resp) {
117 alert(resp);
118 $("#u_i_c_" + fileid).hide(500).remove();
119
120 // it is removing for input Holder
121 $('input:checkbox[name="wpcomment[fields][' + file_data_name + '][' + fileid + '][org]"]').remove();
122
123 // Removing file container
124 $(this).closest('.u_i_c_box').remove();
125
126 // Removing cropper dom
127 if ($(".wpcomment-croppie-preview-" + fileid).length > 0) {
128 $(".wpcomment-croppie-preview-" + fileid).remove();
129 }
130
131 // Trigger
132 $.event.trigger({
133 type: "wpcomment_uploaded_file_removed",
134 field_name: file_data_name,
135 fileid: fileid,
136 time: new Date()
137 });
138
139 file_count[file_data_name] -= 1;
140 });
141 }
142 });
143
144 $.each(wpcomment_input_vars.field_meta, function(index, file_input) {
145
146
147 if (file_input.type === 'file' || file_input.type === 'cropper') {
148
149 var file_data_name = file_input.data_name;
150
151 wpcomment_setup_file_upload_input(file_input);
152 }
153
154 }); // $.each(wpcomment_file_vars
155
156
157 }); // jQuery(function($){});
158
159 // generate thumbbox
160 function add_thumb_box(file, $filelist_DIV) {
161
162 var inner_html = '<div class="u_i_c_thumb"><div class="progress_bar"><span class="progress_bar_runner"></span><span class="progress_bar_number">(' + plupload.formatSize(file.size) + ')<span></div></div>';
163 inner_html += '<div class="u_i_c_name"><strong>' + file.name + '</strong></div>';
164
165 jQuery('<div />', {
166 'id': 'u_i_c_' + file.id,
167 'class': 'uk-text-center wpcomment-file-wrapper',
168 'data-fileid': file.id,
169 'html': inner_html,
170
171 }).appendTo($filelist_DIV);
172
173 // clearfix
174 // 1- removing last clearfix first
175 $filelist_DIV.find('.u_i_c_box_clearfix').remove();
176
177 jQuery('<div />', {
178 'class': 'u_i_c_box_clearfix',
179 }).appendTo($filelist_DIV);
180
181 }
182
183
184 // save croped/edited photo
185 function save_edited_photo(img_id, photo_url) {
186
187 //console.log(img_id);
188
189 //setting new image width to 75
190 jQuery('#' + img_id).attr('width', 75);
191
192 //disabling add to cart button for a while
193 jQuery('form.cart').block({
194 message: null,
195 overlayCSS: {
196 background: "#fff",
197 opacity: .6
198 }
199 });
200 var post_data = {
201 action: 'wpcomment_save_edited_photo',
202 image_url: photo_url,
203 filename: jQuery('#' + img_id).attr('data-filename')
204 };
205
206 jQuery.post(wpcomment_file_vars.ajaxurl, post_data, function(resp) {
207
208 //console.log( resp );
209 jQuery('form.cart').unblock();
210
211 });
212 }
213
214 // Cropping image with Croppie
215 function wpcomment_show_cropped_preview(file_name, image_url, image_id) {
216
217 var cropp_preview_container = jQuery(".wpcomment-croppie-wrapper-" + file_name);
218 // Enable size option
219 cropp_preview_container.find('.wpcomment-cropping-size').prop('disabled', false);
220 cropp_preview_container.find('.wpcomment-cropping-size').show();
221
222 var croppie_container = jQuery('<div/>')
223 .addClass('wpcomment-croppie-preview-' + image_id)
224 .attr('data-image_id', image_id)
225 .appendTo(cropp_preview_container);
226
227 var change_image = jQuery('<a/>')
228 .addClass('btn ' + image_id)
229 .attr('href', '#')
230 .html('Change image')
231 .appendTo(cropp_preview_container)
232 .click(function(e){
233 e.preventDefault();
234 location.reload();
235 });
236
237
238 // $filelist_DIV[file_name]['croppie'] = cropp_preview_container.find('.wpcomment-croppie-preview');
239
240 jQuery(croppie_container).on('update.croppie', function(ev, cropData) {
241 // console.log(cropData);
242 // croppie_container.croppie('result', 'rawcanvas').then(function(canvas) {
243 // console.log(canvas);
244
245 wpcomment_generate_cropper_data_for_cart(file_name);
246
247 jQuery.event.trigger({
248 type: 'wpcomment_croppie_update',
249 img_id: image_id,
250 croppie_obj: croppie_container,
251 crop_data: cropData,
252 dataname: file_name,
253 time: new Date()
254 });
255
256 });
257
258 $filelist_DIV[file_name]['croppie'][image_id] = croppie_container;
259 $filelist_DIV[file_name]['image_id'] = image_id;
260 $filelist_DIV[file_name]['image_url'] = image_url;
261
262 var viewport = undefined;
263 wpcomment_set_croppie_options(file_name, viewport, image_id);
264 }
265
266 function wpcomment_set_croppie_options(file_name, viewport, image_id) {
267
268 var croppie_options = wpcomment_file_vars.croppie_options;
269 jQuery.each(croppie_options, function(field_name, option) {
270
271 if (file_name === field_name) {
272
273 option.url = $filelist_DIV[file_name]['image_url'];
274 if (viewport !== undefined) {
275 viewport.type = option.viewport.type;
276 option.viewport = viewport;
277 }
278
279 // console.log($filelist_DIV[file_name]['croppie'][image_id]);
280 $filelist_DIV[file_name]['croppie'][image_id].croppie(option);
281 }
282 });
283 }
284
285 // Reset cropping when image removed
286 function wpcomment_reset_cropping_preview(file_name) {
287
288 var cropp_preview_container = jQuery(".wpcomment-croppie-wrapper-" + file_name);
289 // Reseting preview DOM
290 cropp_preview_container.find('.wpcomment-croppie-preview').html('');
291 }
292
293 // Attach FILE API with DOM
294 function wpcomment_setup_file_upload_input(file_input) {
295
296 var file_data_name = file_input.data_name;
297
298 file_count[file_data_name] = 0;
299 $filelist_DIV[file_data_name] = jQuery('#filelist-' + file_data_name);
300
301
302 if (upload_instance[file_data_name] !== undefined) {
303 upload_instance[file_data_name].destroy();
304 }
305 // console.log('file_input.img_dimension_error', file_input.img_dimension_error);
306
307 // Energy pack
308 var bar = document.getElementById(`wpcomment-progressbar-${file_data_name}`) || undefined;
309
310 var wpcomment_file_data = {
311 'action': 'wpcomment_upload_file',
312 'data_name': file_data_name,
313 'wpcomment_nonce': wpcomment_file_vars.wpcomment_file_upload_nonce,
314 'product_id': wpcomment_file_vars.product_id,
315 }
316
317 var img_dim_errormsg = 'Please upload correct image dimension';
318 if (file_input.img_dimension_error) {
319 img_dim_errormsg = file_input.img_dimension_error;
320 }
321
322 // console.log('running file', upload_instance[file_data_name]);
323
324 upload_instance[file_data_name] = new plupload.Uploader({
325 runtimes: wpcomment_file_vars.plupload_runtime,
326 browse_button: 'selectfiles-' + file_data_name, // you can pass in id...
327 container: 'wpcomment-file-container-' + file_data_name, // ... or DOM Element itself
328 drop_element: 'wpcomment-file-container-' + file_data_name,
329 url: wpcomment_file_vars.ajaxurl,
330 multipart_params: wpcomment_file_data,
331 max_file_size: file_input.file_size,
332 max_file_count: parseInt(file_input.files_allowed),
333 unique_names: wpcomment_file_vars.enable_file_rename,
334 chunk_size: '1mb',
335
336 filters: {
337 mime_types: [
338 { title: "Filetypes", extensions: file_input.file_types }
339 ]
340 },
341
342 init: {
343 PostInit: function() {
344
345 // $filelist_DIV[file_data_name].html('');
346
347 /*$('#uploadfiles-'+file_data_name).bind('click', function() {
348 upload_instance[file_data_name].start();
349 return false;
350 });*/
351 },
352
353 FilesAdded: function(up, files) {
354
355 // Adding progress bar
356 var file_pb = jQuery('<div/>')
357 .addClass('progress')
358 .appendTo($filelist_DIV[file_data_name]);
359 var file_pb_runner = jQuery('<div/>')
360 .addClass('progress-bar')
361 .attr('role', 'progressbar')
362 .attr('aria-valuenow', 0)
363 .attr('aria-valuemin', 0)
364 .attr('aria-valuemax', 100)
365 .css('height', '15px')
366 .css('width', 0)
367 .appendTo(file_pb);
368
369 var files_added = files.length;
370 var max_count_error = false;
371
372 // console.log('image w bac', files);
373 // plupload.each(files, function(file, i) {
374 // var img = new mOxie.Image;
375 // img.onload = function() {
376 // var img_height = this.height;
377 // var img_width = this.width;
378 // // if ((img_height >= 1024 || img_height <= 1100) && (img_width >= 750 || img_width <= 800)) {
379 // if ((img_width >= parseFloat(file_input.max_img_w) || img_width <= parseFloat(file_input.min_img_w))) {
380 // alert("Height and Width must not exceed 1100*800.");
381 // return false;
382 // }
383 // console.log('image h', parseFloat(file_input.max_img_w));
384 // // access image size here using this.width and this.height
385 // };
386 // img.load(file.getSource());
387 // });
388
389 if ((file_count[file_data_name] + files_added) > upload_instance[file_data_name].settings.max_file_count) {
390 alert(upload_instance[file_data_name].settings.max_file_count + wpcomment_file_vars.mesage_max_files_limit);
391 }
392 else {
393
394 plupload.each(files, function(file) {
395 if (file.type.indexOf("image") !== -1) {
396
397 var img = new mOxie.Image;
398 img.onload = function() {
399
400 var img_height = this.height;
401 var img_width = this.width;
402
403 let aspect_ratio = Math.max(img_width, img_height) / Math.min(img_width, img_height);
404
405 if (img_width >= parseFloat(file_input.max_img_w) || img_width <= parseFloat(file_input.min_img_w)) {
406 upload_instance[file_data_name].stop();
407 upload_instance[file_data_name].removeFile(file);
408 alert(img_dim_errormsg);
409 }
410 else if (img_height >= parseFloat(file_input.max_img_h) || img_height <= parseFloat(file_input.min_img_h)) {
411 upload_instance[file_data_name].stop();
412 upload_instance[file_data_name].removeFile(file);
413 alert(img_dim_errormsg);
414 }
415 else {
416 file_count[file_data_name]++;
417 // Code to add pending file details, if you want
418 add_thumb_box(file, $filelist_DIV[file_data_name], up);
419 setTimeout('upload_instance[\'' + file_data_name + '\'].start()', 100);
420 }
421 };
422 img.load(file.getSource());
423 }
424 else {
425 file_count[file_data_name]++;
426 // Code to add pending file details, if you want
427 add_thumb_box(file, $filelist_DIV[file_data_name], up);
428 setTimeout('upload_instance[\'' + file_data_name + '\'].start()', 100);
429 }
430
431
432 // Energy pack
433 if (bar !== undefined) {
434 bar.removeAttribute('hidden');
435 bar.max = file.size;
436 bar.value = file.loaded;
437 }
438 });
439 }
440
441
442 },
443
444 FileUploaded: function(up, file, info) {
445
446
447 var obj_resp = jQuery.parseJSON(info.response);
448
449 if (obj_resp.file_name === 'ThumbNotFound') {
450
451 upload_instance[file_data_name].removeFile(file.id);
452 jQuery("#u_i_c_" + file.id).hide(500).remove();
453 file_count[file_data_name]--;
454
455 alert('There is some error please try again');
456 return;
457
458 }
459 else if (obj_resp.status == 'error') {
460
461 upload_instance[file_data_name].removeFile(file.id);
462
463 jQuery("#u_i_c_" + file.id).hide(500).remove();
464
465 file_count[file_data_name]--;
466 alert(obj_resp.message);
467 return;
468 };
469
470 var img_w = obj_resp.file_w
471 var img_h = obj_resp.file_h
472
473 // if (img_w > parseFloat(file_input.max_img_w)) {
474
475 // upload_instance[file_data_name].removeFile(file.id);
476
477 // jQuery("#u_i_c_" + file.id).hide(500).remove();
478
479 // file_count[file_data_name]--;
480 // alert('Image Dimension Error');
481 // jQuery('form.cart').unblock();
482 // return;
483 // }
484
485 var file_thumb = '';
486
487 /*if( file_input.file_cost != "" ) {
488 jQuery('input[name="woo_file_cost"]').val( file_input.file_cost );
489 }*/
490
491 $filelist_DIV[file_data_name].find('#u_i_c_' + file.id).html(obj_resp.html)
492 .trigger({
493 type: "wpcomment_image_ready",
494 image: file,
495 data_name: file_data_name,
496 input_type: file_input.type,
497 image_url: obj_resp.file_url,
498 image_resp: obj_resp,
499 time: new Date()
500 });
501
502
503 // checking if uploaded file is thumb
504 ext = obj_resp.file_name.substring(obj_resp.file_name.lastIndexOf('.') + 1);
505 ext = ext.toLowerCase();
506
507 if (ext == 'png' || ext == 'gif' || ext == 'jpg' || ext == 'jpeg') {
508
509
510 var file_full = wpcomment_file_vars.file_upload_path + obj_resp.file_name;
511 // thumb thickbox only shown if it is image
512 $filelist_DIV[file_data_name]
513 .find('#u_i_c_' + file.id)
514 .find('.u_i_c_thumb')
515 .append('<div style="display:none" id="u_i_c_big' + file.id + '"><img src="' + file_full + '" /></div>');
516
517 // Aviary editing tools
518 if (file_input.photo_editing === 'on' && wpcomment_file_vars.aviary_api_key !== '') {
519 var editing_tools = file_input.editing_tools;
520 $filelist_DIV[file_data_name]
521 .find('#u_i_c_' + file.id)
522 .find('.u_i_c_tools_edit')
523 .append('<a onclick="return (\'thumb_' + file.id + '\', \'' + file_full + '\', \'' + obj_resp.file_name + '\', \'' + editing_tools + '\')" href="javascript:;" title="Edit"><img width="15" src="' + wpcomment_file_vars.plugin_url + '/images/edit.png" /></a>');
524 }
525
526 is_image = true;
527 }
528 else {
529 file_thumb = wpcomment_file_vars.plugin_url + '/images/file.png';
530 $filelist_DIV[file_data_name].find('#u_i_c_' + file.id)
531 .find('.u_i_c_thumb')
532 .html('<img src="' + file_thumb + '" id="thumb_' + file.id + '" />')
533 is_image = false;
534 }
535
536 // adding checkbox input to Hold uploaded file name as array
537 var file_container = $filelist_DIV[file_data_name].find('#u_i_c_' + file.id);
538 var input_class = 'wpcomment-input'
539 input_class += file_input.required === 'on' ? ' wpcomment-required' : '';
540 var fileCheck = jQuery('<input checked="checked" name="wpcomment[fields][' + file_data_name + '][' + file.id + '][org]" type="checkbox"/>')
541 .attr('data-price', file_input.file_cost)
542 .attr('data-label', obj_resp.file_name)
543 .attr('data-data_name', file_input.data_name)
544 .attr('data-title', file_input.title)
545 .attr('data-onetime', file_input.onetime)
546 .val(obj_resp.file_name)
547 .css('display', 'none')
548 .addClass('wpcomment-file-cb-' + file_data_name)
549 .addClass('wpcomment-file-cb')
550 .addClass(input_class)
551 .appendTo(file_container)
552 .trigger('change');
553
554
555
556 // Removing progressbar
557 $filelist_DIV[file_data_name].find('.progress').remove();
558
559 if (bar !== undefined) {
560 setTimeout(function() {
561 bar.setAttribute('hidden', 'hidden');
562 }, 1000);
563 bar.max = file.size;
564 bar.value = file.loaded;
565 }
566
567 // Trigger
568 jQuery.event.trigger({
569 type: "wpcomment_file_uploaded",
570 file: file,
571 file_meta: file_input,
572 file_resp: obj_resp,
573 time: new Date()
574 });
575 },
576
577 UploadProgress: function(up, file) {
578
579 // Energy pack
580 if (bar !== undefined) {
581 bar.max = file.size;
582 bar.value = file.loaded;
583 }
584
585 $filelist_DIV[file_data_name].find('.progress-bar').css('width', file.percent + '%');
586
587 },
588
589 Error: function(up, err) {
590 //document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
591 alert("\nError #" + err.code + ": " + err.message);
592 }
593 }
594
595
596 });
597
598 // console.log('running file', upload_instance[file_data_name]);
599 upload_instance[file_data_name].init();
600 uploaderInstances[file_data_name] = upload_instance[file_data_name];
601 }
602
603 function gcd(a, b) {
604 return (b == 0) ? a : gcd(b, a % b);
605 }
606
607 // Generate Cropped image data for cart
608 function wpcomment_generate_cropper_data_for_cart(field_name) {
609
610 var cropp_preview_container = jQuery(".wpcomment-croppie-wrapper-" + field_name);
611
612 cropp_preview_container.find('.croppie-container').each(function(i, croppie_dom) {
613
614 var image_id = jQuery(croppie_dom).attr('data-image_id');
615 jQuery(croppie_dom).croppie('result', {
616 type: 'rawcanvas',
617 // size: { width: 300, height: 300 },
618 size: 'original',
619 format: 'png'
620 }).then(function(canvas) {
621 var image_url = canvas.toDataURL();
622 console.log(image_url);
623 // remove first
624 jQuery(`input[name="wpcomment[fields][${field_name}][${image_id}][cropped]"`).remove();
625
626 var fileCheck = jQuery('<input checked="checked" name="wpcomment[fields][' + field_name + '][' + image_id + '][cropped]" type="checkbox"/>')
627 .val(image_url)
628 .css('display', 'none')
629 .appendTo($filelist_DIV[field_name]);
630
631 });
632 });
633 }