dragbar 1.0.1 → 1.0.2

package/README.md

@@ -37,6 +37,14 @@ parameters:
 options: {
   id: string,
   style: Object,
-  reflow: [[el, ratio]]
+  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

@@ -57,7 +57,7 @@ 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]));
+  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;
@@ -132,7 +132,7 @@ 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], reverse));
+  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;

package/package.json

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