dragbar 1.0.0 → 1.0.1
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.
- package/README.md +42 -1
- package/index.js +33 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,42 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Dragbar
|
|
2
|
+
|
|
3
|
+
## Drag to resize
|
|
4
|
+
|
|
5
|
+
Dragbar is a small client side utility for enabling users to resize adjacent elements.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install dragbar
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
or include it directly in your project if you’re not using a bundler.
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```javascript
|
|
18
|
+
//with bundler:
|
|
19
|
+
import dragbar from 'dragbar';
|
|
20
|
+
|
|
21
|
+
//without bundler:
|
|
22
|
+
import dragbar from './node_modules/dragbar/index.js';
|
|
23
|
+
|
|
24
|
+
//assuming: <div id="bar"></div>
|
|
25
|
+
dragbar({id: "bar"});
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Function Signature
|
|
29
|
+
|
|
30
|
+
```ts
|
|
31
|
+
dragbar(options: Object /*optional*/);
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
```text
|
|
35
|
+
parameters:
|
|
36
|
+
|
|
37
|
+
options: {
|
|
38
|
+
id: string,
|
|
39
|
+
style: Object,
|
|
40
|
+
reflow: [[el, ratio]]
|
|
41
|
+
}
|
|
42
|
+
```
|
package/index.js
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
|
-
function reflowBox (el, factor=1.3) {
|
|
1
|
+
function reflowBox (el, factor=1.3, reverse=false) {
|
|
2
2
|
if (el.offsetWidth >= factor*el.offsetHeight) {
|
|
3
|
-
|
|
3
|
+
if (reverse) {
|
|
4
|
+
el.style.flexDirection = "row-reverse";
|
|
5
|
+
} else {
|
|
6
|
+
el.style.flexDirection = "row";
|
|
7
|
+
}
|
|
4
8
|
} else {
|
|
5
|
-
|
|
9
|
+
if (reverse) {
|
|
10
|
+
el.style.flexDirection = "column-reverse";
|
|
11
|
+
} else {
|
|
12
|
+
el.style.flexDirection = "column";
|
|
13
|
+
}
|
|
6
14
|
}
|
|
7
15
|
}
|
|
8
16
|
|
|
9
|
-
function dragBar (id, reverse, style = {}, reflow =
|
|
17
|
+
function dragBar (id, reverse, style = {}, reflow = []) {
|
|
10
18
|
const dragbar = document.getElementById(id);
|
|
11
19
|
const prev = reverse ? dragbar.nextElementSibling : dragbar.previousElementSibling;
|
|
12
20
|
const next = reverse ? dragbar.previousElementSibling : dragbar.nextElementSibling;
|
|
@@ -20,6 +28,11 @@ function dragBar (id, reverse, style = {}, reflow = {}) {
|
|
|
20
28
|
container.style.display = "flex";
|
|
21
29
|
prev.style.flex = "0 0 auto";
|
|
22
30
|
next.style.flex = "1 1 auto";
|
|
31
|
+
prev.style.overflow = "auto";
|
|
32
|
+
next.style.overflow = "auto";
|
|
33
|
+
prev.style.boxSizing = "border-box";
|
|
34
|
+
next.style.boxSizing = "border-box";
|
|
35
|
+
container.style.boxSizing = "border-box";
|
|
23
36
|
dragbar.textContent = ". . .";
|
|
24
37
|
dragbar.style.cursor = "ew-resize";
|
|
25
38
|
dragbar.style.display = "block";
|
|
@@ -35,7 +48,7 @@ function dragBar (id, reverse, style = {}, reflow = {}) {
|
|
|
35
48
|
dragbar.style.flex = "0 0 auto";
|
|
36
49
|
dragbar.style.backgroundColor = "#37c";
|
|
37
50
|
dragbar.style.marginBottom = "1rem";
|
|
38
|
-
dragbar.style.
|
|
51
|
+
dragbar.style.outlineOffset = "-1px";
|
|
39
52
|
dragbar.style.outline = "1px solid blue";
|
|
40
53
|
dragbar.style.color = "white";
|
|
41
54
|
Object.entries(style).forEach(a => dragbar.style[a[0]] = a[1]);
|
|
@@ -45,18 +58,18 @@ function dragBar (id, reverse, style = {}, reflow = {}) {
|
|
|
45
58
|
}
|
|
46
59
|
prev.style.width = localStorage.getItem(id + 'DragbarWidth') + "px";
|
|
47
60
|
reflow.forEach(a => reflowBox(a[0], a[1]));
|
|
48
|
-
dragbar.addEventListener('
|
|
61
|
+
dragbar.addEventListener('pointerdown', function (e) {
|
|
49
62
|
if (Boolean(e.buttons & (1 << 0))) {
|
|
50
63
|
isDragging = true;
|
|
51
64
|
}
|
|
52
65
|
});
|
|
53
|
-
document.addEventListener('
|
|
66
|
+
document.addEventListener('pointermove', function (e) {
|
|
54
67
|
if (!isDragging) {
|
|
55
68
|
return false;
|
|
56
69
|
}
|
|
57
70
|
setPos(e);
|
|
58
71
|
});
|
|
59
|
-
document.addEventListener('
|
|
72
|
+
document.addEventListener('pointerup', function (e) {
|
|
60
73
|
isDragging = false;
|
|
61
74
|
localStorage.setItem(id + 'DragbarWidth', prev.offsetWidth);
|
|
62
75
|
});
|
|
@@ -71,7 +84,7 @@ function dragBar (id, reverse, style = {}, reflow = {}) {
|
|
|
71
84
|
const halfWidth = dragbar.getBoundingClientRect().width/2;
|
|
72
85
|
const pxStr = `calc(${Math.max(0, pointerRelativeXpos - halfWidth)}px - ${gap === "normal" ? '0px' : gap})`;
|
|
73
86
|
prev.style.width = pxStr;
|
|
74
|
-
reflow.forEach(a => reflowBox(a[0], a[1]));
|
|
87
|
+
reflow.forEach(a => reflowBox(a[0], a[1]), reverse);
|
|
75
88
|
}
|
|
76
89
|
function resetBar() {
|
|
77
90
|
prev.style.width = localStorage.getItem(id + 'InitDragbarWidth') + "px";
|
|
@@ -93,6 +106,11 @@ function colDragbar (id, reverse, style={}, reflow = []) {
|
|
|
93
106
|
container.style.display = "flex";
|
|
94
107
|
prev.style.flex = "0 0 auto";
|
|
95
108
|
next.style.flex = "1 1 auto";
|
|
109
|
+
prev.style.boxSizing = "border-box";
|
|
110
|
+
next.style.boxSizing = "border-box";
|
|
111
|
+
container.style.boxSizing = "border-box";
|
|
112
|
+
prev.style.overflow = "auto";
|
|
113
|
+
next.style.overflow = "auto";
|
|
96
114
|
dragbar.textContent = ". . .";
|
|
97
115
|
dragbar.style.cursor = "ns-resize";
|
|
98
116
|
dragbar.style.display = "block";
|
|
@@ -105,8 +123,7 @@ function colDragbar (id, reverse, style={}, reflow = []) {
|
|
|
105
123
|
dragbar.style.fontSize = "16px";
|
|
106
124
|
dragbar.style.flex = "0 0 auto";
|
|
107
125
|
dragbar.style.backgroundColor = "#37c";
|
|
108
|
-
dragbar.style.
|
|
109
|
-
dragbar.style.marginTop = "1px";
|
|
126
|
+
dragbar.style.outlineOffset = "-1px";
|
|
110
127
|
dragbar.style.outline = "1px solid blue";
|
|
111
128
|
dragbar.style.color = "white";
|
|
112
129
|
Object.entries(style).forEach(a => dragbar.style[a[0]] = a[1]);
|
|
@@ -115,19 +132,19 @@ function colDragbar (id, reverse, style={}, reflow = []) {
|
|
|
115
132
|
localStorage.setItem(id + 'DragbarHeight', container.offsetHeight/2);
|
|
116
133
|
}
|
|
117
134
|
prev.style.height = localStorage.getItem(id + 'DragbarHeight') + "px";
|
|
118
|
-
reflow.forEach(a => reflowBox(a[0], a[1]));
|
|
119
|
-
dragbar.addEventListener('
|
|
135
|
+
reflow.forEach(a => reflowBox(a[0], a[1], reverse));
|
|
136
|
+
dragbar.addEventListener('pointerdown', function (e) {
|
|
120
137
|
if (Boolean(e.buttons & (1 << 0))) {
|
|
121
138
|
isDragging = true;
|
|
122
139
|
}
|
|
123
140
|
});
|
|
124
|
-
document.addEventListener('
|
|
141
|
+
document.addEventListener('pointermove', function (e) {
|
|
125
142
|
if (!isDragging) {
|
|
126
143
|
return false;
|
|
127
144
|
}
|
|
128
145
|
setPos(e);
|
|
129
146
|
});
|
|
130
|
-
document.addEventListener('
|
|
147
|
+
document.addEventListener('pointerup', function (e) {
|
|
131
148
|
isDragging = false;
|
|
132
149
|
localStorage.setItem(id + 'DragbarHeight', prev.offsetHeight);
|
|
133
150
|
});
|
|
@@ -142,7 +159,7 @@ function colDragbar (id, reverse, style={}, reflow = []) {
|
|
|
142
159
|
const halfHeight = dragbar.getBoundingClientRect().height/2;
|
|
143
160
|
const pxStr = `calc(${Math.max(0, pointerRelativeYpos - halfHeight)}px - ${gap === "normal" ? '0px' : gap})`;
|
|
144
161
|
prev.style.height = pxStr;
|
|
145
|
-
reflow.forEach(a => reflowBox(a[0], a[1]));
|
|
162
|
+
reflow.forEach(a => reflowBox(a[0], a[1], reverse));
|
|
146
163
|
}
|
|
147
164
|
function resetBar() {
|
|
148
165
|
prev.style.width = localStorage.getItem(id + 'InitDragbarWidth') + "px";
|