move some stuff to a new JS file
This commit is contained in:
@@ -178,11 +178,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/javascript/cursor.js" type="text/javascript"></script>
|
||||
<script
|
||||
src="/static/javascript/resize_photo_dialouge.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
const button = document.getElementById("edit_picture_button");
|
||||
const fileInput = document.getElementById("file_input");
|
||||
const confirm_change = document.getElementById("confirm_change");
|
||||
const resize_photo_box = document.getElementById("resize_photo_box");
|
||||
const new_profile_image = document.getElementById("new_profile_image");
|
||||
|
||||
button.addEventListener("click", () => {
|
||||
@@ -190,8 +195,6 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/static/javascript/cursor.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var currentPreviewURL = null,
|
||||
image = null,
|
||||
@@ -261,59 +264,6 @@
|
||||
img.src = image;
|
||||
currentPreviewURL = image;
|
||||
});
|
||||
|
||||
var startXOffset = 0,
|
||||
startYOffset = 0;
|
||||
|
||||
function calculateOffsets() {
|
||||
const yOffset = startYOffset + (currentY - y_start);
|
||||
const xOffset = startXOffset + (currentX - x_start);
|
||||
|
||||
var top = bitmap.height / 2 - yOffset - 175;
|
||||
if (top > 0) top = 0;
|
||||
|
||||
var bottom = -(bitmap.height / 2) - yOffset + 10 + 175;
|
||||
if (bottom < 0) bottom = 0;
|
||||
|
||||
var left = bitmap.width / 2 - xOffset - 175;
|
||||
if (left > 0) left = 0;
|
||||
|
||||
var right = -(bitmap.width / 2) - xOffset + 10 + 175;
|
||||
if (right < 0) right = 0;
|
||||
return { x: xOffset + left + right, y: yOffset + top + bottom };
|
||||
}
|
||||
|
||||
var mouseClicked = false;
|
||||
resize_photo_box.addEventListener("mousemove", () => {
|
||||
if (!mouseClicked) return;
|
||||
|
||||
offsets = calculateOffsets();
|
||||
|
||||
y_top = new_profile_image.style.setProperty(
|
||||
"--x-offset",
|
||||
offsets.x + "px",
|
||||
);
|
||||
new_profile_image.style.setProperty("--y-offset", offsets.y + "px");
|
||||
});
|
||||
|
||||
resize_photo_box.addEventListener("mousedown", () => {
|
||||
x_start = currentX;
|
||||
y_start = currentY;
|
||||
mouseClicked = true;
|
||||
set_cursor_state(CURSOR_GRABBING);
|
||||
});
|
||||
|
||||
resize_photo_box.addEventListener("mouseup", () => {
|
||||
offsets = calculateOffsets();
|
||||
|
||||
startXOffset = offsets.x;
|
||||
startYOffset = offsets.y;
|
||||
});
|
||||
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
mouseClicked = false;
|
||||
set_cursor_state(CURSOR_NORMAL);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/static/error/error.js" type="text/javascript"></script>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
const resize_photo_box = document.getElementById("resize_photo_box");
|
||||
|
||||
// Drag handling
|
||||
var startXOffset = 0,
|
||||
startYOffset = 0;
|
||||
|
||||
function calculateOffsets() {
|
||||
const yOffset = startYOffset + (currentY - y_start);
|
||||
const xOffset = startXOffset + (currentX - x_start);
|
||||
|
||||
var top = bitmap.height / 2 - yOffset - 175;
|
||||
if (top > 0) top = 0;
|
||||
|
||||
var bottom = -(bitmap.height / 2) - yOffset + 10 + 175;
|
||||
if (bottom < 0) bottom = 0;
|
||||
|
||||
var left = bitmap.width / 2 - xOffset - 175;
|
||||
if (left > 0) left = 0;
|
||||
|
||||
var right = -(bitmap.width / 2) - xOffset + 10 + 175;
|
||||
if (right < 0) right = 0;
|
||||
return { x: xOffset + left + right, y: yOffset + top + bottom };
|
||||
}
|
||||
|
||||
var mouseClicked = false;
|
||||
resize_photo_box.addEventListener("mousemove", () => {
|
||||
if (!mouseClicked) return;
|
||||
|
||||
offsets = calculateOffsets();
|
||||
|
||||
y_top = new_profile_image.style.setProperty("--x-offset", offsets.x + "px");
|
||||
new_profile_image.style.setProperty("--y-offset", offsets.y + "px");
|
||||
});
|
||||
|
||||
resize_photo_box.addEventListener("mousedown", () => {
|
||||
x_start = currentX;
|
||||
y_start = currentY;
|
||||
mouseClicked = true;
|
||||
set_cursor_state(CURSOR_GRABBING);
|
||||
});
|
||||
|
||||
resize_photo_box.addEventListener("mouseup", () => {
|
||||
offsets = calculateOffsets();
|
||||
|
||||
startXOffset = offsets.x;
|
||||
startYOffset = offsets.y;
|
||||
});
|
||||
|
||||
document.body.addEventListener("mouseup", () => {
|
||||
mouseClicked = false;
|
||||
set_cursor_state(CURSOR_NORMAL);
|
||||
});
|
||||
Reference in New Issue
Block a user