138 lines
4.3 KiB
JavaScript
138 lines
4.3 KiB
JavaScript
const resize_photo_box = document.getElementById("resize_photo_box");
|
|
const image_dark_overlay = document.getElementById("image_dark_overlay");
|
|
|
|
// Drag handling
|
|
var startXOffset = 0,
|
|
startYOffset = 0;
|
|
|
|
function calculateOffsets() {
|
|
const yOffset = startYOffset + (currentY - y_start);
|
|
const xOffset = startXOffset + (currentX - x_start);
|
|
|
|
var top = image_height / 2 - yOffset - 175 - 5;
|
|
if (top > 0) top = 0;
|
|
|
|
var bottom = -(image_height / 2) - yOffset + 5 + 175;
|
|
if (bottom < 0) bottom = 0;
|
|
|
|
var left = image_width / 2 - xOffset - 175 - 5;
|
|
if (left > 0) left = 0;
|
|
|
|
var right = -(image_width / 2) - xOffset + 5 + 175;
|
|
if (right < 0) right = 0;
|
|
return { x: xOffset + left + right, y: yOffset + top + bottom };
|
|
}
|
|
|
|
function calculateBoxBoundsOnImage() {
|
|
offsets = calculateOffsets();
|
|
|
|
const x_overspill = image_width - 360;
|
|
const left_overspill = x_overspill / 2 - offsets.x;
|
|
// const right_overspill = x_overspill / 2 - offsets.y;
|
|
|
|
const y_overspill = image_height - 360;
|
|
const top_overspill = y_overspill / 2 - offsets.y;
|
|
|
|
return {
|
|
left: left_overspill + 5,
|
|
right: left_overspill + 5 + 350,
|
|
top: top_overspill + 5,
|
|
bottom: top_overspill + 350 + 5,
|
|
};
|
|
}
|
|
|
|
var mouseClicked = false;
|
|
resize_photo_box.addEventListener("mousemove", () => {
|
|
if (!mouseClicked) return;
|
|
|
|
offsets = calculateOffsets();
|
|
|
|
new_profile_image.style.setProperty("--x-offset", offsets.x + "px");
|
|
new_profile_image.style.setProperty("--y-offset", offsets.y + "px");
|
|
|
|
image_dark_overlay.style.setProperty("--x-offset", offsets.x + "px");
|
|
image_dark_overlay.style.setProperty("--y-offset", offsets.y + "px");
|
|
|
|
bounds = calculateBoxBoundsOnImage();
|
|
image_dark_overlay.style.setProperty("--left-edge", bounds.left + "px");
|
|
image_dark_overlay.style.setProperty("--right-edge", bounds.right + "px");
|
|
|
|
image_dark_overlay.style.setProperty("--top-edge", bounds.top + "px");
|
|
image_dark_overlay.style.setProperty("--bottom-edge", bounds.bottom + "px");
|
|
});
|
|
|
|
resize_photo_box.addEventListener("mousedown", () => {
|
|
x_start = currentX;
|
|
y_start = currentY;
|
|
mouseClicked = true;
|
|
set_cursor_state(CURSOR_GRABBING);
|
|
});
|
|
|
|
let unclickedMouse = false;
|
|
resize_photo_box.addEventListener("mouseup", () => {
|
|
if (!unclickedMouse) return;
|
|
unclickedMouse = false;
|
|
offsets = calculateOffsets();
|
|
|
|
startXOffset = offsets.x;
|
|
startYOffset = offsets.y;
|
|
});
|
|
|
|
document.body.addEventListener("mouseup", () => {
|
|
if (mouseClicked) unclickedMouse = true;
|
|
mouseClicked = false;
|
|
set_cursor_state(CURSOR_NORMAL);
|
|
});
|
|
|
|
// handle anchors
|
|
resize_anchors = document.getElementsByClassName("resize_anchor");
|
|
var handleBeingHeld = [false, false, false, false];
|
|
var startX, startY;
|
|
for (var i = 0; i < resize_anchors.length; i++) {
|
|
const index = i;
|
|
resize_anchors[index].addEventListener("mousedown", (e) => {
|
|
e.stopPropagation();
|
|
handleBeingHeld[index] = true;
|
|
startX = currentX;
|
|
startY = currentY;
|
|
});
|
|
|
|
document.body.addEventListener("mouseup", () => {
|
|
handleBeingHeld[index] = false;
|
|
resize_anchors[index].style.setProperty("--x-offset", "0px");
|
|
resize_anchors[index].style.setProperty("--y-offset", "0px");
|
|
resize_photo_box.style.setProperty("--size", "350px");
|
|
resize_photo_box.style.setProperty("--box-x-offset", "0px");
|
|
resize_photo_box.style.setProperty("--box-y-offset", "0px");
|
|
});
|
|
|
|
resize_anchors[i].style.setProperty("--x-offset", "0px");
|
|
resize_anchors[i].style.setProperty("--y-offset", "0px");
|
|
}
|
|
|
|
document.body.addEventListener("mousemove", () => {
|
|
for (var i = 0; i < handleBeingHeld.length; i++) {
|
|
if (!handleBeingHeld[i]) continue;
|
|
|
|
newX = Math.abs(startX - currentX);
|
|
newY = Math.abs(currentY - startY);
|
|
|
|
moveAmount = max(min(newX, newY), 0);
|
|
|
|
resize_anchors[i].style.setProperty("--x-offset", moveAmount + "px");
|
|
resize_anchors[i].style.setProperty("--y-offset", moveAmount + "px");
|
|
resize_photo_box.style.setProperty("--size", 350 - moveAmount + "px");
|
|
|
|
if (i == 0) {
|
|
resize_photo_box.style.setProperty("--box-x-offset", moveAmount + "px");
|
|
resize_photo_box.style.setProperty("--box-y-offset", moveAmount + "px");
|
|
}
|
|
if (i == 1) {
|
|
resize_photo_box.style.setProperty("--box-y-offset", moveAmount + "px");
|
|
}
|
|
if (i == 2) {
|
|
resize_photo_box.style.setProperty("--box-x-offset", moveAmount + "px");
|
|
}
|
|
}
|
|
});
|