110 lines
3.3 KiB
JavaScript
110 lines
3.3 KiB
JavaScript
$(function () {
|
|
$('#avatar-js').on("change", () => {
|
|
const modal = new bootstrap.Modal(document.getElementById('dialog'));
|
|
modal.show();
|
|
|
|
preview_image_modal();
|
|
|
|
const panel = $('#crop_panel');
|
|
let m_pos;
|
|
let x_axis = true;
|
|
|
|
//add a listener to the document depending on where you tap in the box
|
|
panel.on("pointerdown", function(e) {
|
|
const BORDER_SIZE = 20;
|
|
|
|
if (e.offsetY >= (parseInt(panel.css('height')) - BORDER_SIZE)) {
|
|
m_pos = e.y;
|
|
x_axis = false;
|
|
document.addEventListener("pointermove", resize, false);
|
|
} else if (e.offsetX >= (parseInt(panel.css('width')) - BORDER_SIZE)) {
|
|
m_pos = e.x;
|
|
x_axis = true;
|
|
document.addEventListener("pointermove", resize, false);
|
|
} else {
|
|
pos3 = e.clientX;
|
|
pos4 = e.clientY;
|
|
document.addEventListener("pointermove", drag, false);
|
|
}
|
|
});
|
|
|
|
// remove listeners from the document when you stop pressing
|
|
document.addEventListener("pointerup", function () {
|
|
document.removeEventListener("pointermove", resize, false);
|
|
document.removeEventListener("pointermove", drag, false);
|
|
document.removeEventListener("pointermove", resize, false);
|
|
}, false);
|
|
|
|
// on submit take the parameters of the box to crop the avatar
|
|
$('#form_photo').on("submit", () => {
|
|
let total_width = parseInt(getComputedStyle(document.getElementById("container_crop")).width);
|
|
let photo_width = parseInt(getComputedStyle(document.getElementById("original_img")).width);
|
|
let left_displacement = total_width - photo_width;
|
|
|
|
$('#height_offset').val(parseInt(panel.css('top')) - 15);
|
|
$('#width_offset').val(parseInt(panel.css('left')) - 15 - (left_displacement/2));
|
|
$('#height_width').val(parseInt(panel.css('width')));
|
|
$('#original_width').val($('#original_img').width());
|
|
});
|
|
|
|
function resize(e) {
|
|
e = e || window.event;
|
|
e.preventDefault();
|
|
|
|
let mov = x_axis ? e.x : e.y;
|
|
const dx = m_pos - mov;
|
|
m_pos = mov;
|
|
|
|
if (can_change(panel, dx, false)) {
|
|
panel.width(panel.width() - dx);
|
|
panel.height(panel.width() - dx);
|
|
}
|
|
}
|
|
|
|
function drag(e) {
|
|
e = e || window.event;
|
|
e.preventDefault();
|
|
|
|
pos1 = pos3 - e.x;
|
|
pos2 = pos4 - e.y;
|
|
pos3 = e.x;
|
|
pos4 = e.y;
|
|
|
|
if (can_change(panel, pos1 + pos2, true)) {
|
|
panel.offset({
|
|
top: (panel.offset().top - pos2),
|
|
left: (panel.offset().left - pos1)
|
|
});
|
|
}
|
|
}
|
|
|
|
function can_change(el, mov, dragging) {
|
|
let canChange = true;
|
|
let pos = dragging ? [el.css('top'), el.css('left'), el.css('bottom'), el.css('right')] : [el.css('bottom'), el.css('right')];
|
|
|
|
pos.forEach((el, ix) => {
|
|
let next = dragging && (ix == 0 || ix == 1) ? parseInt(el) - mov : parseInt(el) + mov;
|
|
|
|
if (next < 14) canChange = false;
|
|
});
|
|
|
|
return canChange;
|
|
}
|
|
|
|
function preview_image_modal() {
|
|
var preview = document.querySelector('#original_img');
|
|
var file = document.querySelector('#avatar-js').files[0];
|
|
var reader = new FileReader();
|
|
|
|
reader.onloadend = function () {
|
|
preview.src = reader.result;
|
|
}
|
|
|
|
if (file)
|
|
reader.readAsDataURL(file);
|
|
else
|
|
preview.src = "";
|
|
}
|
|
});
|
|
});
|