|
| 1 | +$(function () { |
| 2 | + $('#avatar-js').on("change", () => { |
| 3 | + $('#dialog').modal({ |
| 4 | + show: true |
| 5 | + }); |
| 6 | + |
| 7 | + preview_image_modal(); |
| 8 | + |
| 9 | + const panel = $('#crop_panel'); |
| 10 | + let m_pos; |
| 11 | + let x_axis = true; |
| 12 | + |
| 13 | + //add a listener to the document depending on where you tap in the box |
| 14 | + panel.on("pointerdown", function(e) { |
| 15 | + const BORDER_SIZE = 20; |
| 16 | + |
| 17 | + if (e.offsetY >= (parseInt(panel.css('height')) - BORDER_SIZE)) { |
| 18 | + m_pos = e.y; |
| 19 | + x_axis = false; |
| 20 | + document.addEventListener("pointermove", resize, false); |
| 21 | + } else if (e.offsetX >= (parseInt(panel.css('width')) - BORDER_SIZE)) { |
| 22 | + m_pos = e.x; |
| 23 | + x_axis = true; |
| 24 | + document.addEventListener("pointermove", resize, false); |
| 25 | + } else { |
| 26 | + pos3 = e.clientX; |
| 27 | + pos4 = e.clientY; |
| 28 | + document.addEventListener("pointermove", drag, false); |
| 29 | + } |
| 30 | + }); |
| 31 | + |
| 32 | + // remove listeners from the document when you stop pressing |
| 33 | + document.addEventListener("pointerup", function () { |
| 34 | + document.removeEventListener("pointermove", resize, false); |
| 35 | + document.removeEventListener("pointermove", drag, false); |
| 36 | + document.removeEventListener("pointermove", resize, false); |
| 37 | + }, false); |
| 38 | + |
| 39 | + // on submit take the parameters of the box to crop the avatar |
| 40 | + $('#form_photo').on("submit", () => { |
| 41 | + let total_width = parseInt(getComputedStyle(document.getElementById("containerCrop")).width); |
| 42 | + let photo_width = parseInt(getComputedStyle(document.getElementById("foto")).width); |
| 43 | + let left_displacement = total_width - photo_width; |
| 44 | + |
| 45 | + $('#height_offset').val(parseInt(panel.css('top')) - 15); |
| 46 | + $('#width_offset').val(parseInt(panel.css('left')) - 15 - (left_displacement/2)); |
| 47 | + $('#height_width').val(parseInt(panel.css('width'))); |
| 48 | + $('#original_width').val($('#foto').width()); |
| 49 | + }); |
| 50 | + |
| 51 | + function resize(e) { |
| 52 | + e = e || window.event; |
| 53 | + e.preventDefault(); |
| 54 | + |
| 55 | + let mov = x_axis ? e.x : e.y; |
| 56 | + const dx = m_pos - mov; |
| 57 | + m_pos = mov; |
| 58 | + |
| 59 | + if (can_change(panel, dx, false)) { |
| 60 | + panel.width(panel.width() - dx); |
| 61 | + panel.height(panel.width() - dx); |
| 62 | + } |
| 63 | + } |
| 64 | + |
| 65 | + function drag(e) { |
| 66 | + e = e || window.event; |
| 67 | + e.preventDefault(); |
| 68 | + |
| 69 | + pos1 = pos3 - e.x; |
| 70 | + pos2 = pos4 - e.y; |
| 71 | + pos3 = e.x; |
| 72 | + pos4 = e.y; |
| 73 | + |
| 74 | + if (can_change(panel, pos1 + pos2, true)) { |
| 75 | + panel.offset({ |
| 76 | + top: (panel.offset().top - pos2), |
| 77 | + left: (panel.offset().left - pos1) |
| 78 | + }); |
| 79 | + } |
| 80 | + } |
| 81 | + |
| 82 | + function can_change(el, mov, dragging) { |
| 83 | + let canChange = true; |
| 84 | + let pos = dragging ? [el.css('top'), el.css('left'), el.css('bottom'), el.css('right')] : [el.css('bottom'), el.css('right')]; |
| 85 | + |
| 86 | + pos.forEach((el, ix) => { |
| 87 | + let next = dragging && (ix == 0 || ix == 1) ? parseInt(el) - mov : parseInt(el) + mov; |
| 88 | + |
| 89 | + if (next < 14) canChange = false; |
| 90 | + }); |
| 91 | + |
| 92 | + return canChange; |
| 93 | + } |
| 94 | + |
| 95 | + function preview_image_modal() { |
| 96 | + var preview = document.querySelector('#foto'); |
| 97 | + var file = document.querySelector('#avatar-js').files[0]; |
| 98 | + var reader = new FileReader(); |
| 99 | + |
| 100 | + reader.onloadend = function () { |
| 101 | + preview.src = reader.result; |
| 102 | + } |
| 103 | + |
| 104 | + if (file) |
| 105 | + reader.readAsDataURL(file); |
| 106 | + else |
| 107 | + preview.src = ""; |
| 108 | + } |
| 109 | + }); |
| 110 | +}); |
0 commit comments