Unlisted
Script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
console.log("resizing script loaded!");
if (typeof Deno === "undefined") {
const resizable = function(resizer) {
const direction = resizer.getAttribute("data-direction") || "horizontal";
const prevSibling = resizer.previousElementSibling;
const nextSibling = resizer.nextElementSibling;
let x = 0;
let y = 0;
let prevSiblingHeight = 0;
let prevSiblingWidth = 0;
const mouseDownHandler = function(e) {
const parent = e.currentTarget.parentElement;
const direction = parent.getAttribute("data-direction") || "horizontal";
console.log("Resizing direction:", direction);
x = e.clientX;
y = e.clientY;
const rect = prevSibling.getBoundingClientRect();
prevSiblingHeight = rect.height;
prevSiblingWidth = rect.width;
document.addEventListener("mousemove", mouseMoveHandler);
document.addEventListener("mouseup", mouseUpHandler);
};
const mouseMoveHandler = function(e) {
const dx = e.clientX - x;
const dy = e.clientY - y;
switch (direction) {
case "vertical":
const h = ((prevSiblingHeight + dy) * 100)
/ resizer.parentNode.getBoundingClientRect().height;
prevSibling.style.height = `${h}%`;
break;
case "horizontal":
default:
const w = ((prevSiblingWidth + dx) * 100)
/ resizer.parentNode.getBoundingClientRect().width;
prevSibling.style.width = `${w}%`;
break;
}
const cursor = direction === "horizontal" ? "col-resize" : "row-resize";
resizer.style.cursor = cursor;
document.body.style.cursor = cursor;
prevSibling.style.userSelect = "none";
prevSibling.style.pointerEvents = "none";
nextSibling.style.userSelect = "none";
nextSibling.style.pointerEvents = "none";
};
const mouseUpHandler = function() {
resizer.style.removeProperty("cursor");
document.body.style.removeProperty("cursor");
prevSibling.style.removeProperty("user-select");
prevSibling.style.removeProperty("pointer-events");
nextSibling.style.removeProperty("user-select");
nextSibling.style.removeProperty("pointer-events");
document.removeEventListener("mousemove", mouseMoveHandler);
document.removeEventListener("mouseup", mouseUpHandler);
};
resizer
.querySelector(".handle")
.addEventListener("mousedown", mouseDownHandler);
};
document.querySelectorAll(".resizer").forEach(function(ele) {
resizable(ele);
});
}
export const resizeScript = undefined;
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
February 19, 2024