dragbar 1.0.2 → 1.0.3

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 +6 -2
  2. package/index.js +120 -95
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -21,8 +21,8 @@ import dragbar from 'dragbar';
21
21
  //without bundler:
22
22
  import dragbar from './node_modules/dragbar/index.js';
23
23
 
24
- //assuming: <div id="bar"></div>
25
- dragbar({id: "bar"});
24
+ //assuming: <div id="dragbar"></div>
25
+ dragbar();
26
26
  ```
27
27
 
28
28
  ## Function Signature
@@ -48,3 +48,7 @@ reflow is to manage the reflow of any elements that get resized as a result of t
48
48
 
49
49
  For example: If the ratio provided is 2, then when width >= 2*height, flex-direction will be row, and when width < 2*height, flex-direction will be column.
50
50
  ```
51
+
52
+ ## Working Example
53
+
54
+ <https://stackblitz.com/edit/vitejs-vite-vnzsruaf?file=index.js>
package/index.js CHANGED
@@ -1,63 +1,70 @@
1
- function reflowBox (el, factor=1.3, reverse=false) {
2
- if (el.offsetWidth >= factor*el.offsetHeight) {
1
+ function reflowBox(el, factor = 1.3, reverse = false) {
2
+ if (el.offsetWidth >= factor * el.offsetHeight) {
3
3
  if (reverse) {
4
- el.style.flexDirection = "row-reverse";
4
+ el.style.flexDirection = 'row-reverse';
5
5
  } else {
6
- el.style.flexDirection = "row";
6
+ el.style.flexDirection = 'row';
7
7
  }
8
8
  } else {
9
9
  if (reverse) {
10
- el.style.flexDirection = "column-reverse";
10
+ el.style.flexDirection = 'column-reverse';
11
11
  } else {
12
- el.style.flexDirection = "column";
12
+ el.style.flexDirection = 'column';
13
13
  }
14
14
  }
15
15
  }
16
16
 
17
- function dragBar (id, reverse, style = {}, reflow = []) {
17
+ function dragBar(id, reverse, style = {}, reflow = []) {
18
18
  const dragbar = document.getElementById(id);
19
- const prev = reverse ? dragbar.nextElementSibling : dragbar.previousElementSibling;
20
- const next = reverse ? dragbar.previousElementSibling : dragbar.nextElementSibling;
19
+ const prev = reverse
20
+ ? dragbar.nextElementSibling
21
+ : dragbar.previousElementSibling;
22
+ const next = reverse
23
+ ? dragbar.previousElementSibling
24
+ : dragbar.nextElementSibling;
21
25
  const container = dragbar.parentNode;
22
26
  const gap = window.getComputedStyle(container).rowGap;
23
27
  const width = dragbar.getBoundingClientRect().width;
24
28
  const containerWidth = container.getBoundingClientRect().width;
25
- prev.style.minWidth = "100px";
26
- prev.style.maxWidth = `calc(${containerWidth}px - 100px - ${width}px - ${gap === "normal" ? '0px' : gap} - ${gap === "normal" ? '0px' : gap})`;
29
+ prev.style.minWidth = '100px';
30
+ prev.style.maxWidth = `calc(${containerWidth}px - 100px - ${width}px - ${gap === 'normal' ? '0px' : gap
31
+ } - ${gap === 'normal' ? '0px' : gap})`;
27
32
  let isDragging = false;
28
- container.style.display = "flex";
29
- prev.style.flex = "0 0 auto";
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";
36
- dragbar.textContent = ". . .";
37
- dragbar.style.cursor = "ew-resize";
38
- dragbar.style.display = "block";
39
- dragbar.style.width = "8px";
40
- dragbar.style.borderRadius = "16px";
41
- dragbar.style.writingMode = "vertical-lr";
42
- dragbar.style.textOrientation = "sideways";
43
- dragbar.style.textAlign = "center";
44
- dragbar.style.userSelect = "none";
45
- dragbar.style.lineHeight = "1";
46
- dragbar.style.boxSizing = "border-box";
47
- dragbar.style.fontSize = "16px";
48
- dragbar.style.flex = "0 0 auto";
49
- dragbar.style.backgroundColor = "#37c";
50
- dragbar.style.marginBottom = "1rem";
51
- dragbar.style.outlineOffset = "-1px";
52
- dragbar.style.outline = "1px solid blue";
53
- dragbar.style.color = "white";
54
- Object.entries(style).forEach(a => dragbar.style[a[0]] = a[1]);
55
- localStorage.setItem(id + 'InitDragbarWidth', container.offsetWidth/2);
33
+ container.style.display = 'flex';
34
+ prev.style.flex = '0 0 auto';
35
+ next.style.flex = '1 1 auto';
36
+ prev.style.overflow = 'auto';
37
+ next.style.overflow = 'auto';
38
+ prev.style.boxSizing = 'border-box';
39
+ next.style.boxSizing = 'border-box';
40
+ container.style.boxSizing = 'border-box';
41
+ dragbar.textContent = '· · ·';
42
+ dragbar.style.cursor = 'ew-resize';
43
+ dragbar.style.display = 'block';
44
+ dragbar.style.width = '8px';
45
+ dragbar.style.borderRadius = '16px';
46
+ dragbar.style.writingMode = 'vertical-lr';
47
+ dragbar.style.textOrientation = 'sideways';
48
+ dragbar.style.textAlign = 'center';
49
+ dragbar.style.userSelect = 'none';
50
+ dragbar.style.lineHeight = '8px';
51
+ dragbar.style.boxSizing = 'border-box';
52
+ dragbar.style.fontSize = '20px';
53
+ dragbar.style.flex = '0 0 auto';
54
+ dragbar.style.backgroundColor = '#37c';
55
+ dragbar.style.outlineOffset = '-1px';
56
+ dragbar.style.outline = '1px solid blue';
57
+ dragbar.style.color = 'white';
58
+ Object.entries(style).forEach((a) => (dragbar.style[a[0]] = a[1]));
59
+ localStorage.setItem(id + 'InitDragbarWidth', container.offsetWidth / 2);
56
60
  if (localStorage.getItem(id + 'DragbarWidth') === null) {
57
- localStorage.setItem(id + 'DragbarWidth', container.offsetWidth/2);
61
+ localStorage.setItem(id + 'DragbarWidth', container.offsetWidth / 2);
58
62
  }
59
- prev.style.width = localStorage.getItem(id + 'DragbarWidth') + "px";
60
- reflow.forEach(a => {a[0].style.display="flex";reflowBox(a[0], a[1]);});
63
+ prev.style.width = localStorage.getItem(id + 'DragbarWidth') + 'px';
64
+ reflow.forEach((a) => {
65
+ a[0].style.display = 'flex';
66
+ reflowBox(a[0], a[1]);
67
+ });
61
68
  dragbar.addEventListener('pointerdown', function (e) {
62
69
  if (Boolean(e.buttons & (1 << 0))) {
63
70
  isDragging = true;
@@ -76,63 +83,76 @@ function dragBar (id, reverse, style = {}, reflow = []) {
76
83
  function setPos(e) {
77
84
  window.getSelection().empty();
78
85
  const container = dragbar.parentNode;
79
- const prev = reverse ? dragbar.nextElementSibling : dragbar.previousElementSibling;
80
- const next = reverse ? dragbar.previousElementSibling : dragbar.nextElementSibling;
86
+ const prev = reverse
87
+ ? dragbar.nextElementSibling
88
+ : dragbar.previousElementSibling;
89
+ const next = reverse
90
+ ? dragbar.previousElementSibling
91
+ : dragbar.nextElementSibling;
81
92
  const gap = window.getComputedStyle(container).rowGap;
82
- const containerOffsetLeft = container.offsetLeft;
93
+ const containerOffsetLeft = prev.offsetLeft;
83
94
  const pointerRelativeXpos = e.clientX - containerOffsetLeft;
84
- const halfWidth = dragbar.getBoundingClientRect().width/2;
85
- const pxStr = `calc(${Math.max(0, pointerRelativeXpos - halfWidth)}px - ${gap === "normal" ? '0px' : gap})`;
95
+ const halfWidth = dragbar.getBoundingClientRect().width / 2;
96
+ const pxStr = `calc(${Math.max(0, pointerRelativeXpos - halfWidth)}px - ${gap === 'normal' ? '0px' : gap
97
+ })`;
86
98
  prev.style.width = pxStr;
87
- reflow.forEach(a => reflowBox(a[0], a[1]), reverse);
99
+ reflow.forEach((a) => reflowBox(a[0], a[1]), reverse);
88
100
  }
89
101
  function resetBar() {
90
- prev.style.width = localStorage.getItem(id + 'InitDragbarWidth') + "px";
102
+ prev.style.width = localStorage.getItem(id + 'InitDragbarWidth') + 'px';
91
103
  localStorage.setItem(id + 'DragbarWidth', prev.offsetWidth);
92
104
  }
93
105
  }
94
106
 
95
- function colDragbar (id, reverse, style={}, reflow = []) {
107
+ function colDragbar(id, reverse, style = {}, reflow = []) {
96
108
  const dragbar = document.getElementById(id);
97
- const prev = reverse ? dragbar.nextElementSibling : dragbar.previousElementSibling;
98
- const next = reverse ? dragbar.previousElementSibling : dragbar.nextElementSibling;
109
+ const prev = reverse
110
+ ? dragbar.nextElementSibling
111
+ : dragbar.previousElementSibling;
112
+ const next = reverse
113
+ ? dragbar.previousElementSibling
114
+ : dragbar.nextElementSibling;
99
115
  const container = dragbar.parentNode;
100
116
  const gap = window.getComputedStyle(container).columnGap;
101
117
  const height = dragbar.getBoundingClientRect().height;
102
118
  const containerHeight = container.getBoundingClientRect().height;
103
- prev.style.minHeight = "50px";
104
- prev.style.maxHeight = `calc(${containerHeight}px - 50px - ${height}px - ${gap === "normal" ? '0px' : gap} - ${gap === "normal" ? '0px' : gap})`;
119
+ prev.style.minHeight = '50px';
120
+ prev.style.maxHeight = `calc(${containerHeight}px - 50px - ${height}px - ${gap === 'normal' ? '0px' : gap
121
+ } - ${gap === 'normal' ? '0px' : gap})`;
105
122
  let isDragging = false;
106
- container.style.display = "flex";
107
- prev.style.flex = "0 0 auto";
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";
114
- dragbar.textContent = ". . .";
115
- dragbar.style.cursor = "ns-resize";
116
- dragbar.style.display = "block";
117
- dragbar.style.height = "8px";
118
- dragbar.style.borderRadius = "16px";
119
- dragbar.style.textAlign = "center";
120
- dragbar.style.userSelect = "none";
121
- dragbar.style.lineHeight = "0";
122
- dragbar.style.boxSizing = "border-box";
123
- dragbar.style.fontSize = "16px";
124
- dragbar.style.flex = "0 0 auto";
125
- dragbar.style.backgroundColor = "#37c";
126
- dragbar.style.outlineOffset = "-1px";
127
- dragbar.style.outline = "1px solid blue";
128
- dragbar.style.color = "white";
129
- Object.entries(style).forEach(a => dragbar.style[a[0]] = a[1]);
130
- localStorage.setItem(id + 'InitDragbarHeight', container.offsetHeight/2);
123
+ container.style.display = 'flex';
124
+ prev.style.flex = '0 0 auto';
125
+ next.style.flex = '1 1 auto';
126
+ prev.style.boxSizing = 'border-box';
127
+ next.style.boxSizing = 'border-box';
128
+ container.style.boxSizing = 'border-box';
129
+ prev.style.overflow = 'auto';
130
+ next.style.overflow = 'auto';
131
+ dragbar.textContent = '· · ·';
132
+ dragbar.style.cursor = 'ns-resize';
133
+ dragbar.style.display = 'block';
134
+ dragbar.style.height = '8px';
135
+ dragbar.style.borderRadius = '16px';
136
+ dragbar.style.textAlign = 'center';
137
+ dragbar.style.userSelect = 'none';
138
+ dragbar.style.lineHeight = '8px';
139
+ dragbar.style.boxSizing = 'border-box';
140
+ dragbar.style.fontSize = '20px';
141
+ dragbar.style.flex = '0 0 auto';
142
+ dragbar.style.backgroundColor = '#37c';
143
+ dragbar.style.outlineOffset = '-1px';
144
+ dragbar.style.outline = '1px solid blue';
145
+ dragbar.style.color = 'white';
146
+ Object.entries(style).forEach((a) => (dragbar.style[a[0]] = a[1]));
147
+ localStorage.setItem(id + 'InitDragbarHeight', container.offsetHeight / 2);
131
148
  if (localStorage.getItem(id + 'DragbarHeight') === null) {
132
- localStorage.setItem(id + 'DragbarHeight', container.offsetHeight/2);
149
+ localStorage.setItem(id + 'DragbarHeight', container.offsetHeight / 2);
133
150
  }
134
- prev.style.height = localStorage.getItem(id + 'DragbarHeight') + "px";
135
- reflow.forEach(a => {a[0].style.display="flex";reflowBox(a[0], a[1]);});
151
+ prev.style.height = localStorage.getItem(id + 'DragbarHeight') + 'px';
152
+ reflow.forEach((a) => {
153
+ a[0].style.display = 'flex';
154
+ reflowBox(a[0], a[1]);
155
+ });
136
156
  dragbar.addEventListener('pointerdown', function (e) {
137
157
  if (Boolean(e.buttons & (1 << 0))) {
138
158
  isDragging = true;
@@ -151,34 +171,39 @@ function colDragbar (id, reverse, style={}, reflow = []) {
151
171
  function setPos(e) {
152
172
  window.getSelection().empty();
153
173
  const container = dragbar.parentNode;
154
- const prev = reverse ? dragbar.nextElementSibling : dragbar.previousElementSibling;
155
- const next = reverse ? dragbar.previousElementSibling : dragbar.nextElementSibling;
174
+ const prev = reverse
175
+ ? dragbar.nextElementSibling
176
+ : dragbar.previousElementSibling;
177
+ const next = reverse
178
+ ? dragbar.previousElementSibling
179
+ : dragbar.nextElementSibling;
156
180
  const gap = window.getComputedStyle(container).columnGap;
157
- const containerOffsetTop = container.offsetTop;
181
+ const containerOffsetTop = prev.offsetTop;
158
182
  const pointerRelativeYpos = e.clientY - containerOffsetTop;
159
- const halfHeight = dragbar.getBoundingClientRect().height/2;
160
- const pxStr = `calc(${Math.max(0, pointerRelativeYpos - halfHeight)}px - ${gap === "normal" ? '0px' : gap})`;
183
+ const halfHeight = dragbar.getBoundingClientRect().height / 2;
184
+ const pxStr = `calc(${Math.max(0, pointerRelativeYpos - halfHeight)}px - ${gap === 'normal' ? '0px' : gap
185
+ })`;
161
186
  prev.style.height = pxStr;
162
- reflow.forEach(a => reflowBox(a[0], a[1], reverse));
187
+ reflow.forEach((a) => reflowBox(a[0], a[1], reverse));
163
188
  }
164
189
  function resetBar() {
165
- prev.style.width = localStorage.getItem(id + 'InitDragbarWidth') + "px";
190
+ prev.style.width = localStorage.getItem(id + 'InitDragbarWidth') + 'px';
166
191
  localStorage.setItem(id + 'DragbarWidth', prev.offsetWidth);
167
192
  }
168
193
  }
169
194
 
170
- export default function runDragbar (options = {}) {
171
- const id = options.id || "dragbar";
195
+ export default function runDragbar(options = {}) {
196
+ const id = options.id || 'dragbar';
172
197
  const dragbar = document.getElementById(id);
173
198
  const parent = dragbar.parentNode;
174
199
  const direction = window.getComputedStyle(parent).flexDirection;
175
- if (direction === "column") {
200
+ if (direction === 'column') {
176
201
  colDragbar(id, false, options.style, options.reflow);
177
- } else if (direction === "column-reverse") {
202
+ } else if (direction === 'column-reverse') {
178
203
  colDragbar(id, true, options.style, options.reflow);
179
- } else if (direction === "row-reverse") {
204
+ } else if (direction === 'row-reverse') {
180
205
  dragBar(id, true, options.style, options.reflow);
181
206
  } else {
182
207
  dragBar(id, false, options.style, options.reflow);
183
208
  }
184
- }
209
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dragbar",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "license": "ISC",
5
5
  "author": "Jack Montfort",
6
6
  "type": "module",