382 lines
9.6 KiB
JavaScript
382 lines
9.6 KiB
JavaScript
|
|
console.log("---------------inside image_editor.js--------------");
|
|
const edit_image_button = document.getElementById('edit_image');
|
|
const image_id_field = document.getElementById('image_id');
|
|
const media_editor = document.getElementById('media_editor');
|
|
|
|
edit_image_button.addEventListener('click', () => {
|
|
const image_id = image_id_field.value;
|
|
|
|
//PLGNTLS_ajax("postid", image_id, 'image-editor')
|
|
const data_obj = {
|
|
'postid': image_id,
|
|
};
|
|
PLGNTLS_ajax(data_obj, 'image_editor_PLGNTLS')
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
console.log("data: ");
|
|
console.log(data);
|
|
media_editor.innerHTML = data.data.html;
|
|
})
|
|
.catch((error) => {
|
|
console.log("error: ");
|
|
console.log(error);
|
|
});
|
|
});
|
|
|
|
/*
|
|
open: function (e, t, i) { // t: nonce
|
|
this._view = i; // div: #media-editor-114
|
|
var a = c('#image-editor-' + e), // e: image id
|
|
o = c('#media-head-' + e),
|
|
r = c('#imgedit-open-btn-' + e),
|
|
s = r.siblings('.spinner');
|
|
if (!r.hasClass('button-activated')) return s.addClass('is-active'),
|
|
c.ajax({
|
|
url: ajaxurl,
|
|
type: 'post',
|
|
data: {
|
|
action: 'image-editor',
|
|
_ajax_nonce: t,
|
|
postid: e,
|
|
do : 'open'},
|
|
beforeSend: function () {
|
|
r.addClass('button-activated')
|
|
}
|
|
}).done(
|
|
function (t) {
|
|
var i;
|
|
'-1' === t &&
|
|
(
|
|
i = n('Could not load the preview image.'),
|
|
a.html(
|
|
'<div class="notice notice-error" tabindex="-1" role="alert"><p>' + i + '</p></div>'
|
|
)
|
|
),
|
|
t.data &&
|
|
t.data.html &&
|
|
a.html(t.data.html),
|
|
o.fadeOut(
|
|
'fast',
|
|
function () {
|
|
a.fadeIn(
|
|
'fast',
|
|
function () {
|
|
i &&
|
|
c(document).trigger('image-editor-ui-ready')
|
|
}
|
|
),
|
|
r.removeClass('button-activated'),
|
|
s.removeClass('is-active')
|
|
}
|
|
),
|
|
l.init(e)
|
|
}
|
|
) },
|
|
imgLoaded: function (t) {
|
|
var i = c('#image-preview-' + t),
|
|
e = c('#imgedit-crop-' + t);
|
|
void 0 === this.hold.sizer &&
|
|
this.init(t),
|
|
this.initCrop(t, i, e),
|
|
this.setCropSelection(
|
|
t,
|
|
{
|
|
x1: 0,
|
|
y1: 0,
|
|
x2: 0,
|
|
y2: 0,
|
|
width: i.innerWidth(),
|
|
height: i.innerHeight()
|
|
}
|
|
),
|
|
this.toggleEditor(t, 0, !0)
|
|
},
|
|
focusManager: function () {
|
|
setTimeout(
|
|
function () {
|
|
var t = c('.notice[role="alert"]');
|
|
(t = t.length ? t : c('.imgedit-wrap').find(':tabbable:first')).attr('tabindex', '-1').trigger('focus')
|
|
},
|
|
100
|
|
)
|
|
},
|
|
initCrop: function (a, t, i) {
|
|
var o = this,
|
|
r = c('#imgedit-sel-width-' + a),
|
|
s = c('#imgedit-sel-height-' + a),
|
|
n = c('#imgedit-start-x-' + a),
|
|
d = c('#imgedit-start-y-' + a),
|
|
t = c(t);
|
|
t.data('imgAreaSelect') ||
|
|
(
|
|
o.iasapi = t.imgAreaSelect({
|
|
parent: i,
|
|
instance: !0,
|
|
handles: !0,
|
|
keys: !0,
|
|
minWidth: 3,
|
|
minHeight: 3,
|
|
onInit: function (t) {
|
|
c(t).next().css('position', 'absolute').nextAll('.imgareaselect-outer').css('position', 'absolute'),
|
|
i.children().on(
|
|
'mousedown, touchstart',
|
|
function (t) {
|
|
var i,
|
|
e = !1;
|
|
t.shiftKey &&
|
|
(
|
|
t = o.iasapi.getSelection(),
|
|
i = o.getSelRatio(a),
|
|
e = t &&
|
|
t.width &&
|
|
t.height ? t.width + ':' + t.height : i
|
|
),
|
|
o.iasapi.setOptions({
|
|
aspectRatio: e
|
|
})
|
|
}
|
|
)
|
|
},
|
|
onSelectStart: function () {
|
|
l.setDisabled(c('#imgedit-crop-sel-' + a), 1),
|
|
l.setDisabled(c('.imgedit-crop-clear'), 1),
|
|
l.setDisabled(c('.imgedit-crop-apply'), 1)
|
|
},
|
|
onSelectEnd: function (t, i) {
|
|
l.setCropSelection(a, i),
|
|
c('#imgedit-crop > *').is(':visible') ||
|
|
l.toggleControls(c('.imgedit-crop.button'))
|
|
},
|
|
onSelectChange: function (t, i) {
|
|
var e = l.hold.sizer;
|
|
r.val(l.round(i.width / e)),
|
|
s.val(l.round(i.height / e)),
|
|
n.val(l.round(i.x1 / e)),
|
|
d.val(l.round(i.y1 / e))
|
|
}
|
|
})
|
|
)
|
|
},
|
|
setCropSelection: function (t, i) {
|
|
if (!(i = i || 0) || i.width < 3 && i.height < 3) return this.setDisabled(c('.imgedit-crop', '#imgedit-panel-' + t), 1),
|
|
this.setDisabled(c('#imgedit-crop-sel-' + t), 1),
|
|
c('#imgedit-sel-width-' + t).val(''),
|
|
c('#imgedit-sel-height-' + t).val(''),
|
|
c('#imgedit-start-x-' + t).val('0'),
|
|
c('#imgedit-start-y-' + t).val('0'),
|
|
c('#imgedit-selection-' + t).val(''),
|
|
!1;
|
|
i = {
|
|
x: i.x1,
|
|
y: i.y1,
|
|
w: i.width,
|
|
h: i.height
|
|
},
|
|
this.setDisabled(c('.imgedit-crop', '#imgedit-panel-' + t), 1),
|
|
c('#imgedit-selection-' + t).val(JSON.stringify(i))
|
|
},
|
|
close: function (t, i) {
|
|
if ((i = i || !1) && this.notsaved(t)) return !1;
|
|
this.iasapi = {},
|
|
this.hold = {},
|
|
this._view ? this._view.back() : c('#image-editor-' + t).fadeOut(
|
|
'fast',
|
|
function () {
|
|
c('#media-head-' + t).fadeIn(
|
|
'fast',
|
|
function () {
|
|
c('#imgedit-open-btn-' + t).trigger('focus')
|
|
}
|
|
),
|
|
c(this).empty()
|
|
}
|
|
)
|
|
},
|
|
notsaved: function (t) {
|
|
var i = c('#imgedit-history-' + t).val(),
|
|
i = '' !== i ? JSON.parse(i) : [];
|
|
return this.intval(c('#imgedit-undone-' + t).val()) < i.length &&
|
|
!confirm(c('#imgedit-leaving-' + t).text())
|
|
},
|
|
addStep: function (t, i, e) {
|
|
for (
|
|
var a = this,
|
|
o = c('#imgedit-history-' + i),
|
|
r = '' !== o.val() ? JSON.parse(o.val()) : [],
|
|
s = c('#imgedit-undone-' + i),
|
|
n = a.intval(s.val());
|
|
0 < n;
|
|
) r.pop(),
|
|
n--;
|
|
s.val(0),
|
|
r.push(t),
|
|
o.val(JSON.stringify(r)),
|
|
a.refreshEditor(
|
|
i,
|
|
e,
|
|
function () {
|
|
a.setDisabled(c('#image-undo-' + i), !0),
|
|
a.setDisabled(c('#image-redo-' + i), !1)
|
|
}
|
|
)
|
|
},
|
|
rotate: function (t, i, e, a) {
|
|
if (c(a).hasClass('disabled')) return !1;
|
|
this.closePopup(a),
|
|
this.addStep({
|
|
r: {
|
|
r: t,
|
|
fw: this.hold.h,
|
|
fh: this.hold.w
|
|
}
|
|
}, i, e)
|
|
},
|
|
flip: function (t, i, e, a) {
|
|
if (c(a).hasClass('disabled')) return !1;
|
|
this.closePopup(a),
|
|
this.addStep({
|
|
f: {
|
|
f: t,
|
|
fw: this.hold.w,
|
|
fh: this.hold.h
|
|
}
|
|
}, i, e)
|
|
},
|
|
crop: function (t, i, e) {
|
|
var a = c('#imgedit-selection-' + t).val(),
|
|
o = this.intval(c('#imgedit-sel-width-' + t).val()),
|
|
r = this.intval(c('#imgedit-sel-height-' + t).val());
|
|
if (c(e).hasClass('disabled') || '' === a) return !1;
|
|
0 < (a = JSON.parse(a)).w &&
|
|
0 < a.h &&
|
|
0 < o &&
|
|
0 < r &&
|
|
(a.fw = o, a.fh = r, this.addStep({
|
|
c: a
|
|
}, t, i)),
|
|
c('#imgedit-sel-width-' + t).val(''),
|
|
c('#imgedit-sel-height-' + t).val(''),
|
|
c('#imgedit-start-x-' + t).val('0'),
|
|
c('#imgedit-start-y-' + t).val('0')
|
|
},
|
|
undo: function (i, t) {
|
|
var e = this,
|
|
a = c('#image-undo-' + i),
|
|
o = c('#imgedit-undone-' + i),
|
|
r = e.intval(o.val()) + 1;
|
|
a.hasClass('disabled') ||
|
|
(
|
|
o.val(r),
|
|
e.refreshEditor(
|
|
i,
|
|
t,
|
|
function () {
|
|
var t = c('#imgedit-history-' + i),
|
|
t = '' !== t.val() ? JSON.parse(t.val()) : [];
|
|
e.setDisabled(c('#image-redo-' + i), !0),
|
|
e.setDisabled(a, r < t.length),
|
|
t.length === r &&
|
|
c('#image-redo-' + i).trigger('focus')
|
|
}
|
|
)
|
|
)
|
|
},
|
|
redo: function (t, i) {
|
|
var e = this,
|
|
a = c('#image-redo-' + t),
|
|
o = c('#imgedit-undone-' + t),
|
|
r = e.intval(o.val()) - 1;
|
|
a.hasClass('disabled') ||
|
|
(
|
|
o.val(r),
|
|
e.refreshEditor(
|
|
t,
|
|
i,
|
|
function () {
|
|
e.setDisabled(c('#image-undo-' + t), !0),
|
|
e.setDisabled(a, 0 < r),
|
|
0 == r &&
|
|
c('#image-undo-' + t).trigger('focus')
|
|
}
|
|
)
|
|
)
|
|
},
|
|
setNumSelection: function (t, i) {
|
|
var e = c('#imgedit-sel-width-' + t),
|
|
a = c('#imgedit-sel-height-' + t),
|
|
o = c('#imgedit-start-x-' + t),
|
|
r = c('#imgedit-start-y-' + t),
|
|
o = this.intval(o.val()),
|
|
r = this.intval(r.val()),
|
|
s = this.intval(e.val()),
|
|
n = this.intval(a.val()),
|
|
d = c('#image-preview-' + t),
|
|
l = d.height(),
|
|
d = d.width(),
|
|
h = this.hold.sizer,
|
|
g = this.iasapi;
|
|
if (!1 !== this.validateNumeric(i)) return s < 1 ? (e.val(''), !1) : n < 1 ? (a.val(''), !1) : void (
|
|
(s && n || o && r) &&
|
|
(i = g.getSelection()) &&
|
|
(
|
|
s = i.x1 + Math.round(s * h),
|
|
n = i.y1 + Math.round(n * h),
|
|
o = o === i.x1 ? i.x1 : Math.round(o * h),
|
|
i = r === i.y1 ? i.y1 : Math.round(r * h),
|
|
d < s &&
|
|
(o = 0, s = d, e.val(Math.round(s / h))),
|
|
l < n &&
|
|
(i = 0, n = l, a.val(Math.round(n / h))),
|
|
g.setSelection(o, i, s, n),
|
|
g.update(),
|
|
this.setCropSelection(t, g.getSelection())
|
|
)
|
|
)
|
|
},
|
|
round: function (t) {
|
|
var i;
|
|
return t = Math.round(t),
|
|
0.6 < this.hold.sizer ? t : '1' === (i = t.toString().slice( - 1)) ? t - 1 : '9' === i ? t + 1 : t
|
|
},
|
|
setRatioSelection: function (t, i, e) {
|
|
var a = this.intval(c('#imgedit-crop-width-' + t).val()),
|
|
o = this.intval(c('#imgedit-crop-height-' + t).val()),
|
|
r = c('#image-preview-' + t).height();
|
|
!1 === this.validateNumeric(e) ? this.iasapi.setOptions({
|
|
aspectRatio: null
|
|
}) : a &&
|
|
o &&
|
|
(
|
|
this.iasapi.setOptions({
|
|
aspectRatio: a + ':' + o
|
|
}),
|
|
e = this.iasapi.getSelection(!0)
|
|
) &&
|
|
(
|
|
r < (a = Math.ceil(e.y1 + (e.x2 - e.x1) / (a / o))) ? (
|
|
a = r,
|
|
o = n(
|
|
'Selected crop ratio exceeds the boundaries of the image. Try a different ratio.'
|
|
),
|
|
c('#imgedit-crop-' + t).prepend(
|
|
'<div class="notice notice-error" tabindex="-1" role="alert"><p>' + o + '</p></div>'
|
|
),
|
|
wp.a11y.speak(o, 'assertive'),
|
|
c(i ? '#imgedit-crop-height-' + t : '#imgedit-crop-width-' + t).val('')
|
|
) : void 0 !== (r = c('#imgedit-crop-' + t).find('.notice-error')) &&
|
|
r.remove(),
|
|
this.iasapi.setSelection(e.x1, e.y1, e.x2, a),
|
|
this.iasapi.update()
|
|
)
|
|
},
|
|
validateNumeric: function (t) {
|
|
if (!1 === this.intval(c(t).val())) return c(t).val(''),
|
|
!1
|
|
}
|
|
}
|
|
}(jQuery);
|
|
|
|
|
|
*/
|