lewis.moe
Monorepo for Tangled
appview/pages: add script to create resizable panels
elements marked with `data-resizer` will now have a few event handlers
attached to them on load. when mouse operations take place on this
element, the target (`data-target`) is resized along the provided axis,
the width of the element can be no lesser than `data-min` and no greater
than `data-max`.
Signed-off-by: oppiliappan <me@oppi.li>
authored by
oppiliappan
and committed by
+113
appview/pages/templates/fragments/resizeable.html
+113
appview/pages/templates/fragments/resizeable.html
···
1
+
{{ define "fragments/resizable" }}
2
+
<script>
3
+
class ResizablePanel {
4
+
constructor(resizerElement) {
5
+
this.resizer = resizerElement;
6
+
this.isResizing = false;
7
+
this.type = resizerElement.dataset.resizer;
8
+
this.targetId = resizerElement.dataset.target;
9
+
this.target = document.getElementById(this.targetId);
10
+
this.min = parseInt(resizerElement.dataset.min) || 100;
11
+
this.max = parseInt(resizerElement.dataset.max) || Infinity;
12
+
13
+
this.direction = resizerElement.dataset.direction || 'before'; // 'before' or 'after'
14
+
15
+
this.handleMouseDown = this.handleMouseDown.bind(this);
16
+
this.handleMouseMove = this.handleMouseMove.bind(this);
17
+
this.handleMouseUp = this.handleMouseUp.bind(this);
18
+
19
+
this.init();
20
+
}
21
+
22
+
init() {
23
+
this.resizer.addEventListener('mousedown', this.handleMouseDown);
24
+
}
25
+
26
+
handleMouseDown(e) {
27
+
e.preventDefault();
28
+
this.isResizing = true;
29
+
this.resizer.classList.add('resizing');
30
+
document.body.style.cursor = this.type === 'vertical' ? 'col-resize' : 'row-resize';
31
+
document.body.style.userSelect = 'none';
32
+
33
+
this.startX = e.clientX;
34
+
this.startY = e.clientY;
35
+
this.startWidth = this.target.offsetWidth;
36
+
this.startHeight = this.target.offsetHeight;
37
+
38
+
document.addEventListener('mousemove', this.handleMouseMove);
39
+
document.addEventListener('mouseup', this.handleMouseUp);
40
+
}
41
+
42
+
handleMouseMove(e) {
43
+
if (!this.isResizing) return;
44
+
45
+
if (this.type === 'vertical') {
46
+
let newWidth;
47
+
48
+
if (this.direction === 'after') {
49
+
const deltaX = this.startX - e.clientX;
50
+
newWidth = this.startWidth + deltaX;
51
+
} else {
52
+
const deltaX = e.clientX - this.startX;
53
+
newWidth = this.startWidth + deltaX;
54
+
}
55
+
56
+
if (newWidth >= this.min && newWidth <= this.max) {
57
+
this.target.style.width = newWidth + 'px';
58
+
this.target.style.flexShrink = '0';
59
+
}
60
+
} else {
61
+
let newHeight;
62
+
63
+
if (this.direction === 'after') {
64
+
const deltaY = this.startY - e.clientY;
65
+
newHeight = this.startHeight + deltaY;
66
+
} else {
67
+
const deltaY = e.clientY - this.startY;
68
+
newHeight = this.startHeight + deltaY;
69
+
}
70
+
71
+
if (newHeight >= this.min && newHeight <= this.max) {
72
+
this.target.style.height = newHeight + 'px';
73
+
}
74
+
}
75
+
}
76
+
77
+
handleMouseUp() {
78
+
if (!this.isResizing) return;
79
+
80
+
this.isResizing = false;
81
+
this.resizer.classList.remove('resizing');
82
+
document.body.style.cursor = '';
83
+
document.body.style.userSelect = '';
84
+
85
+
document.removeEventListener('mousemove', this.handleMouseMove);
86
+
document.removeEventListener('mouseup', this.handleMouseUp);
87
+
}
88
+
89
+
destroy() {
90
+
this.resizer.removeEventListener('mousedown', this.handleMouseDown);
91
+
document.removeEventListener('mousemove', this.handleMouseMove);
92
+
document.removeEventListener('mouseup', this.handleMouseUp);
93
+
}
94
+
}
95
+
96
+
function initializeResizers() {
97
+
const resizers = document.querySelectorAll('[data-resizer]');
98
+
const instances = [];
99
+
100
+
resizers.forEach(resizer => {
101
+
instances.push(new ResizablePanel(resizer));
102
+
});
103
+
104
+
return instances;
105
+
}
106
+
107
+
if (document.readyState === 'loading') {
108
+
document.addEventListener('DOMContentLoaded', initializeResizers);
109
+
} else {
110
+
initializeResizers();
111
+
}
112
+
</script>
113
+
{{ end }}