dragbar 1.0.0 → 1.0.2

package/README.md

@@ -1 +1,50 @@
-# Drag To Resize
+# Dragbar
+
+## Drag to resize
+
+Dragbar is a small client side utility for enabling users to resize adjacent elements.
+
+## Installation
+
+```bash
+npm install dragbar
+```
+
+or include it directly in your project if you’re not using a bundler.
+
+## Usage
+
+```javascript
+//with bundler:
+import dragbar from 'dragbar';
+
+//without bundler:
+import dragbar from './node_modules/dragbar/index.js';
+
+//assuming: <div id="bar"></div>
+dragbar({id: "bar"});
+```
+
+## Function Signature
+
+```ts
+dragbar(options: Object /*optional*/);
+```
+
+```text
+parameters:
+
+options: {
+  id: string,
+  style: Object,
+  reflow: [[el: Element, ratio: Number]]
+}
+
+id is the id of the dragbar element. Will default to "dragbar" if none provided.
+
+style is to override the default styles of the dragbar with your own. Supply a js style object.
+
+reflow is to manage the reflow of any elements that get resized as a result of the dragbar. You provide a list of elements and ratios, and for each one, whenever the dragbar position updates, the element will flip its flex-direction between column and row depending on the aspect ratio of the element compared to the ratio provided.
+
+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.
+```

package/index.js

@@ -1,12 +1,20 @@
-function reflowBox (el, factor=1.3) {
+function reflowBox (el, factor=1.3, reverse=false) {
   if (el.offsetWidth >= factor*el.offsetHeight) {
-    el.style.flexDirection = "row";
+    if (reverse) {
+      el.style.flexDirection = "row-reverse";
+    } else {
+      el.style.flexDirection = "row";
+    }
   } else {
-    el.style.flexDirection = "column";
+    if (reverse) {
+      el.style.flexDirection = "column-reverse";
+    } else {
+      el.style.flexDirection = "column";
+    }
   }
 }
 
-function dragBar (id, reverse, style = {}, reflow = {}) {
+function dragBar (id, reverse, style = {}, reflow = []) {
   const dragbar = document.getElementById(id);
   const prev = reverse ? dragbar.nextElementSibling : dragbar.previousElementSibling;
   const next = reverse ? dragbar.previousElementSibling : dragbar.nextElementSibling;
@@ -20,6 +28,11 @@ function dragBar (id, reverse, style = {}, reflow = {}) {
   container.style.display = "flex";
   prev.style.flex = "0 0 auto";
   next.style.flex = "1 1 auto";
+  prev.style.overflow = "auto";
+  next.style.overflow = "auto";
+  prev.style.boxSizing = "border-box";
+  next.style.boxSizing = "border-box";
+  container.style.boxSizing = "border-box";
   dragbar.textContent = ". . .";
   dragbar.style.cursor = "ew-resize";
   dragbar.style.display = "block";
@@ -35,7 +48,7 @@ function dragBar (id, reverse, style = {}, reflow = {}) {
   dragbar.style.flex = "0 0 auto";
   dragbar.style.backgroundColor = "#37c";
   dragbar.style.marginBottom = "1rem";
-  dragbar.style.marginTop = "1px";
+  dragbar.style.outlineOffset = "-1px";
   dragbar.style.outline = "1px solid blue";
   dragbar.style.color = "white";
   Object.entries(style).forEach(a => dragbar.style[a[0]] = a[1]);
@@ -44,19 +57,19 @@ function dragBar (id, reverse, style = {}, reflow = {}) {
     localStorage.setItem(id + 'DragbarWidth', container.offsetWidth/2);
   }
   prev.style.width = localStorage.getItem(id + 'DragbarWidth') + "px";
-  reflow.forEach(a => reflowBox(a[0], a[1]));
-  dragbar.addEventListener('mousedown', function (e) {
+  reflow.forEach(a => {a[0].style.display="flex";reflowBox(a[0], a[1]);});
+  dragbar.addEventListener('pointerdown', function (e) {
     if (Boolean(e.buttons & (1 << 0))) {
       isDragging = true;
     }
   });
-  document.addEventListener('mousemove', function (e) {
+  document.addEventListener('pointermove', function (e) {
     if (!isDragging) {
       return false;
     }
     setPos(e);
   });
-  document.addEventListener('mouseup', function (e) {
+  document.addEventListener('pointerup', function (e) {
     isDragging = false;
     localStorage.setItem(id + 'DragbarWidth', prev.offsetWidth);
   });
@@ -71,7 +84,7 @@ function dragBar (id, reverse, style = {}, reflow = {}) {
     const halfWidth = dragbar.getBoundingClientRect().width/2;
     const pxStr = `calc(${Math.max(0, pointerRelativeXpos - halfWidth)}px - ${gap === "normal" ? '0px' : gap})`;
     prev.style.width = pxStr;
-    reflow.forEach(a => reflowBox(a[0], a[1]));
+    reflow.forEach(a => reflowBox(a[0], a[1]), reverse);
   }
   function resetBar() {
     prev.style.width = localStorage.getItem(id + 'InitDragbarWidth') + "px";
@@ -93,6 +106,11 @@ function colDragbar (id, reverse, style={}, reflow = []) {
   container.style.display = "flex";
   prev.style.flex = "0 0 auto";
   next.style.flex = "1 1 auto";
+  prev.style.boxSizing = "border-box";
+  next.style.boxSizing = "border-box";
+  container.style.boxSizing = "border-box";
+  prev.style.overflow = "auto";
+  next.style.overflow = "auto";
   dragbar.textContent = ". . .";
   dragbar.style.cursor = "ns-resize";
   dragbar.style.display = "block";
@@ -105,8 +123,7 @@ function colDragbar (id, reverse, style={}, reflow = []) {
   dragbar.style.fontSize = "16px";
   dragbar.style.flex = "0 0 auto";
   dragbar.style.backgroundColor = "#37c";
-  dragbar.style.marginBottom = "1rem";
-  dragbar.style.marginTop = "1px";
+  dragbar.style.outlineOffset = "-1px";
   dragbar.style.outline = "1px solid blue";
   dragbar.style.color = "white";
   Object.entries(style).forEach(a => dragbar.style[a[0]] = a[1]);
@@ -115,19 +132,19 @@ function colDragbar (id, reverse, style={}, reflow = []) {
     localStorage.setItem(id + 'DragbarHeight', container.offsetHeight/2);
   }
   prev.style.height = localStorage.getItem(id + 'DragbarHeight') + "px";
-  reflow.forEach(a => reflowBox(a[0], a[1]));
-  dragbar.addEventListener('mousedown', function (e) {
+  reflow.forEach(a => {a[0].style.display="flex";reflowBox(a[0], a[1]);});
+  dragbar.addEventListener('pointerdown', function (e) {
     if (Boolean(e.buttons & (1 << 0))) {
       isDragging = true;
     }
   });
-  document.addEventListener('mousemove', function (e) {
+  document.addEventListener('pointermove', function (e) {
     if (!isDragging) {
       return false;
     }
     setPos(e);
   });
-  document.addEventListener('mouseup', function (e) {
+  document.addEventListener('pointerup', function (e) {
     isDragging = false;
     localStorage.setItem(id + 'DragbarHeight', prev.offsetHeight);
   });
@@ -142,7 +159,7 @@ function colDragbar (id, reverse, style={}, reflow = []) {
     const halfHeight = dragbar.getBoundingClientRect().height/2;
     const pxStr = `calc(${Math.max(0, pointerRelativeYpos - halfHeight)}px - ${gap === "normal" ? '0px' : gap})`;
     prev.style.height = pxStr;
-    reflow.forEach(a => reflowBox(a[0], a[1]));
+    reflow.forEach(a => reflowBox(a[0], a[1], reverse));
   }
   function resetBar() {
     prev.style.width = localStorage.getItem(id + 'InitDragbarWidth') + "px";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragbar",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "ISC",
   "author": "Jack Montfort",
   "type": "module",