remove_bg.js
4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
jQuery(document).ready(function ($) {
// Init
$('input[type=radio][name=background_type]').on('change', backgroundInputs);
$('#bg_transparency').on('input', transparancyOptions);
backgroundInputs(); // init initial
transparancyOptions();
$('.replace_type.wrapper input').on('change', function () {
$('#replace_image_button').prop('disabled', 'disabled');
});
// Remove bg click
$('#remove_background_button').on('click', () => {
const method = 'POST'
const url = emrObject.ajax_url;
// const image = emrObject.base_url;
const nonce = emrObject.nonce;
const attachment_id = $('input[name="ID"]').val();
const action = 'emr_remove_background';
const bgType = $('input[type=radio][name="background_type"]:checked').val();
const cLvl = $('input[type=radio][name="compression_level"]:checked').val();
let background = {
type: "transparent"
}
background = {
type: bgType,
color: $('#bg_color').val(),
transparency: $('#bg_transparency').val()
}
$.ajax({
method,
url,
data: {
action,
nonce,
attachment_id,
background,
compression_level : cLvl
},
beforeSend: function () {
$('html, body').animate({
scrollTop: $(".emr_upload_form").offset().top
}, 1000);
$('input[type=radio][name=background_type]').attr('disabled', 'disabled');
$('input[type=radio][name=compression_level]').attr('disabled', 'disabled');
$('#remove_background_button').attr('disabled', 'disabled');
$('h1.response').remove();
$('#overlay').css('visibility', 'visible');
var preview = $('.image_placeholder').last();
preview.find('img').remove();
// $('#preview-area').hide();
},
success: function (response) {
var preview = $('.image_placeholder').last();
if (response.success) {
$('#overlay').css('visibility', 'hidden');
preview.find('img').remove();
preview.removeClass('is_image not_image is_document');
$('#replace_image_button').prop('disabled', false);
var img = new Image();
img.src = response.image;
img.setAttribute('style', 'height: inherit;');
preview.prepend(img);
// preview.removeClass('not_image');
preview.addClass('is_image');
$('input[name="key"]').val(response.key);
$('input[type=radio][name=background_type]').attr('disabled', false);
$('input[type=radio][name=compression_level]').attr('disabled', false);
$('#remove_background_button').attr('disabled', false);
var badBg = document.getElementById('bad-background-link');
var href = badBg.dataset.link;
href = href.replace('{url}', response.url);
href = href.replace('{settings}', response.settings);
badBg.setAttribute('href', href);
badBg.style.visibility = 'visible';
/* $('#removed_image').html(`
<div class="img-comp-container">
<div class="img-comp-img">
<img src="${image}" width="${width}" height="${height}" />
</div>
</div>
`); */
// initComparisons();
}else{
preview.prepend(`<h1 class='response'>${response.message}</h1>`);
$('#remove_background_button').attr('disabled', false)
$('input[type=radio][name=background_type]').attr('disabled', false)
$('input[type=radio][name=compression_level]').attr('disabled', false)
$('#overlay').css('visibility', 'hidden');
//$('#preview-area').show();
}
}
})
});
function backgroundInputs () {
const bgInputs = $('#solid_selecter');
var input = $('input[type=radio][name=background_type]:checked');
if (input.val() === 'solid') {
bgInputs.show();
} else {
bgInputs.hide();
}
};
$('#bg_display_picker').on('input', function () {
$('#color_range').html($(this).val());
$('#bg_color').val($(this).val());
});
function transparancyOptions() {
$('#transparency_range').html($('#bg_transparency').val());
};
});