dragbar 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +1 -0
  2. package/index.js +167 -0
  3. package/package.json +8 -0
package/README.md ADDED
@@ -0,0 +1 @@
1
+ # Drag To Resize
package/index.js ADDED
@@ -0,0 +1,167 @@
1
+ function reflowBox (el, factor=1.3) {
2
+ if (el.offsetWidth >= factor*el.offsetHeight) {
3
+ el.style.flexDirection = "row";
4
+ } else {
5
+ el.style.flexDirection = "column";
6
+ }
7
+ }
8
+
9
+ function dragBar (id, reverse, style = {}, reflow = {}) {
10
+ const dragbar = document.getElementById(id);
11
+ const prev = reverse ? dragbar.nextElementSibling : dragbar.previousElementSibling;
12
+ const next = reverse ? dragbar.previousElementSibling : dragbar.nextElementSibling;
13
+ const container = dragbar.parentNode;
14
+ const gap = window.getComputedStyle(container).rowGap;
15
+ const width = dragbar.getBoundingClientRect().width;
16
+ const containerWidth = container.getBoundingClientRect().width;
17
+ prev.style.minWidth = "100px";
18
+ prev.style.maxWidth = `calc(${containerWidth}px - 100px - ${width}px - ${gap === "normal" ? '0px' : gap} - ${gap === "normal" ? '0px' : gap})`;
19
+ let isDragging = false;
20
+ container.style.display = "flex";
21
+ prev.style.flex = "0 0 auto";
22
+ next.style.flex = "1 1 auto";
23
+ dragbar.textContent = ". . .";
24
+ dragbar.style.cursor = "ew-resize";
25
+ dragbar.style.display = "block";
26
+ dragbar.style.width = "8px";
27
+ dragbar.style.borderRadius = "16px";
28
+ dragbar.style.writingMode = "vertical-lr";
29
+ dragbar.style.textOrientation = "sideways";
30
+ dragbar.style.textAlign = "center";
31
+ dragbar.style.userSelect = "none";
32
+ dragbar.style.lineHeight = "1";
33
+ dragbar.style.boxSizing = "border-box";
34
+ dragbar.style.fontSize = "16px";
35
+ dragbar.style.flex = "0 0 auto";
36
+ dragbar.style.backgroundColor = "#37c";
37
+ dragbar.style.marginBottom = "1rem";
38
+ dragbar.style.marginTop = "1px";
39
+ dragbar.style.outline = "1px solid blue";
40
+ dragbar.style.color = "white";
41
+ Object.entries(style).forEach(a => dragbar.style[a[0]] = a[1]);
42
+ localStorage.setItem(id + 'InitDragbarWidth', container.offsetWidth/2);
43
+ if (localStorage.getItem(id + 'DragbarWidth') === null) {
44
+ localStorage.setItem(id + 'DragbarWidth', container.offsetWidth/2);
45
+ }
46
+ prev.style.width = localStorage.getItem(id + 'DragbarWidth') + "px";
47
+ reflow.forEach(a => reflowBox(a[0], a[1]));
48
+ dragbar.addEventListener('mousedown', function (e) {
49
+ if (Boolean(e.buttons & (1 << 0))) {
50
+ isDragging = true;
51
+ }
52
+ });
53
+ document.addEventListener('mousemove', function (e) {
54
+ if (!isDragging) {
55
+ return false;
56
+ }
57
+ setPos(e);
58
+ });
59
+ document.addEventListener('mouseup', function (e) {
60
+ isDragging = false;
61
+ localStorage.setItem(id + 'DragbarWidth', prev.offsetWidth);
62
+ });
63
+ function setPos(e) {
64
+ window.getSelection().empty();
65
+ const container = dragbar.parentNode;
66
+ const prev = reverse ? dragbar.nextElementSibling : dragbar.previousElementSibling;
67
+ const next = reverse ? dragbar.previousElementSibling : dragbar.nextElementSibling;
68
+ const gap = window.getComputedStyle(container).rowGap;
69
+ const containerOffsetLeft = container.offsetLeft;
70
+ const pointerRelativeXpos = e.clientX - containerOffsetLeft;
71
+ const halfWidth = dragbar.getBoundingClientRect().width/2;
72
+ const pxStr = `calc(${Math.max(0, pointerRelativeXpos - halfWidth)}px - ${gap === "normal" ? '0px' : gap})`;
73
+ prev.style.width = pxStr;
74
+ reflow.forEach(a => reflowBox(a[0], a[1]));
75
+ }
76
+ function resetBar() {
77
+ prev.style.width = localStorage.getItem(id + 'InitDragbarWidth') + "px";
78
+ localStorage.setItem(id + 'DragbarWidth', prev.offsetWidth);
79
+ }
80
+ }
81
+
82
+ function colDragbar (id, reverse, style={}, reflow = []) {
83
+ const dragbar = document.getElementById(id);
84
+ const prev = reverse ? dragbar.nextElementSibling : dragbar.previousElementSibling;
85
+ const next = reverse ? dragbar.previousElementSibling : dragbar.nextElementSibling;
86
+ const container = dragbar.parentNode;
87
+ const gap = window.getComputedStyle(container).columnGap;
88
+ const height = dragbar.getBoundingClientRect().height;
89
+ const containerHeight = container.getBoundingClientRect().height;
90
+ prev.style.minHeight = "50px";
91
+ prev.style.maxHeight = `calc(${containerHeight}px - 50px - ${height}px - ${gap === "normal" ? '0px' : gap} - ${gap === "normal" ? '0px' : gap})`;
92
+ let isDragging = false;
93
+ container.style.display = "flex";
94
+ prev.style.flex = "0 0 auto";
95
+ next.style.flex = "1 1 auto";
96
+ dragbar.textContent = ". . .";
97
+ dragbar.style.cursor = "ns-resize";
98
+ dragbar.style.display = "block";
99
+ dragbar.style.height = "8px";
100
+ dragbar.style.borderRadius = "16px";
101
+ dragbar.style.textAlign = "center";
102
+ dragbar.style.userSelect = "none";
103
+ dragbar.style.lineHeight = "0";
104
+ dragbar.style.boxSizing = "border-box";
105
+ dragbar.style.fontSize = "16px";
106
+ dragbar.style.flex = "0 0 auto";
107
+ dragbar.style.backgroundColor = "#37c";
108
+ dragbar.style.marginBottom = "1rem";
109
+ dragbar.style.marginTop = "1px";
110
+ dragbar.style.outline = "1px solid blue";
111
+ dragbar.style.color = "white";
112
+ Object.entries(style).forEach(a => dragbar.style[a[0]] = a[1]);
113
+ localStorage.setItem(id + 'InitDragbarHeight', container.offsetHeight/2);
114
+ if (localStorage.getItem(id + 'DragbarHeight') === null) {
115
+ localStorage.setItem(id + 'DragbarHeight', container.offsetHeight/2);
116
+ }
117
+ prev.style.height = localStorage.getItem(id + 'DragbarHeight') + "px";
118
+ reflow.forEach(a => reflowBox(a[0], a[1]));
119
+ dragbar.addEventListener('mousedown', function (e) {
120
+ if (Boolean(e.buttons & (1 << 0))) {
121
+ isDragging = true;
122
+ }
123
+ });
124
+ document.addEventListener('mousemove', function (e) {
125
+ if (!isDragging) {
126
+ return false;
127
+ }
128
+ setPos(e);
129
+ });
130
+ document.addEventListener('mouseup', function (e) {
131
+ isDragging = false;
132
+ localStorage.setItem(id + 'DragbarHeight', prev.offsetHeight);
133
+ });
134
+ function setPos(e) {
135
+ window.getSelection().empty();
136
+ const container = dragbar.parentNode;
137
+ const prev = reverse ? dragbar.nextElementSibling : dragbar.previousElementSibling;
138
+ const next = reverse ? dragbar.previousElementSibling : dragbar.nextElementSibling;
139
+ const gap = window.getComputedStyle(container).columnGap;
140
+ const containerOffsetTop = container.offsetTop;
141
+ const pointerRelativeYpos = e.clientY - containerOffsetTop;
142
+ const halfHeight = dragbar.getBoundingClientRect().height/2;
143
+ const pxStr = `calc(${Math.max(0, pointerRelativeYpos - halfHeight)}px - ${gap === "normal" ? '0px' : gap})`;
144
+ prev.style.height = pxStr;
145
+ reflow.forEach(a => reflowBox(a[0], a[1]));
146
+ }
147
+ function resetBar() {
148
+ prev.style.width = localStorage.getItem(id + 'InitDragbarWidth') + "px";
149
+ localStorage.setItem(id + 'DragbarWidth', prev.offsetWidth);
150
+ }
151
+ }
152
+
153
+ export default function runDragbar (options = {}) {
154
+ const id = options.id || "dragbar";
155
+ const dragbar = document.getElementById(id);
156
+ const parent = dragbar.parentNode;
157
+ const direction = window.getComputedStyle(parent).flexDirection;
158
+ if (direction === "column") {
159
+ colDragbar(id, false, options.style, options.reflow);
160
+ } else if (direction === "column-reverse") {
161
+ colDragbar(id, true, options.style, options.reflow);
162
+ } else if (direction === "row-reverse") {
163
+ dragBar(id, true, options.style, options.reflow);
164
+ } else {
165
+ dragBar(id, false, options.style, options.reflow);
166
+ }
167
+ }
package/package.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "name": "dragbar",
3
+ "version": "1.0.0",
4
+ "license": "ISC",
5
+ "author": "Jack Montfort",
6
+ "type": "module",
7
+ "main": "index.js"
8
+ }