@get-set/gs-sortable 0.0.36 → 0.0.37

package/README.md

@@ -1 +1,99 @@
-# Get-Set Sortable
+# Get-Set Sortable
+
+A drag-and-drop sortable grid plugin with column, row and grid layout support.  
+One codebase — builds both a **vanilla JS bundle** and a **React component**.  
+CSS is injected automatically — no stylesheet import needed.
+
+---
+
+## Build
+
+```bash
+npm install
+npm run build
+```
+
+| Command              | Output                           | Use for          |
+|----------------------|----------------------------------|------------------|
+| `npm run build`      | both outputs below               | everything       |
+| `npm run build:js`   | `dist-js/bundle.js`              | vanilla JS / CDN |
+| `npm run build:react`| `dist/components/GSSortable.js`  | React / npm      |
+
+---
+
+## Vanilla JS
+
+```html
+<script src="dist-js/bundle.js"></script>
+
+<div class="list">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</div>
+
+<script>
+  new GSSortable(document.querySelector('.list'), {
+    type: 'column',
+    gap: '10px',
+    afterSort: (items) => console.log('sorted', items),
+  });
+</script>
+```
+
+jQuery and `HTMLElement.prototype` shortcuts are also available:
+
+```js
+$('.list').GSSortable({ type: 'grid', count: 3 });
+document.querySelector('.list').GSSortable({ type: 'row' });
+```
+
+---
+
+## React
+
+CSS is injected automatically when the component mounts.
+
+```jsx
+import GSSortable from '@get-set/gs-sortable';
+
+<GSSortable type="column" gap="10px" afterSort={(items) => console.log(items)}>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</GSSortable>
+```
+
+### Cross-container drag (acceptFrom)
+
+```jsx
+<GSSortable reference="list-a" type="column">
+  <div>A1</div>
+  <div>A2</div>
+</GSSortable>
+
+<GSSortable reference="list-b" type="column" acceptFrom={['list-a']}>
+  <div>B1</div>
+  <div>B2</div>
+</GSSortable>
+```
+
+---
+
+## Parameters
+
+| Param           | Type                                | Default     | Description                                                  |
+|-----------------|-------------------------------------|-------------|--------------------------------------------------------------|
+| `reference`     | `string`                            | auto        | Unique key. Auto-generated if omitted.                       |
+| `type`          | `'column' \| 'row' \| 'grid'`       | `'column'`  | Layout direction.                                            |
+| `count`         | `number`                            | `3`         | Columns (grid mode only).                                    |
+| `gap`           | `string`                            | `''`        | CSS gap, e.g. `'10px'` or `'10px 20px'`.                    |
+| `handler`       | `string`                            | `''`        | CSS selector for drag handle inside each item.               |
+| `width`         | `string`                            | `'auto'`    | Item width override.                                         |
+| `takeClone`     | `boolean`                           | `false`     | Drag a clone; original stays in place.                       |
+| `allowOutOfBox` | `boolean`                           | `true`      | Allow dragging beyond container bounds.                      |
+| `acceptFrom`    | `string[]`                          | `[]`        | Reference keys of other instances that may drop items here.  |
+| `gsx`           | `object`                            | —           | Inline CSS-in-JS styles (React only).                        |
+| `responsive`    | `ResponsiveOption[]`                | `[]`        | Breakpoint overrides (sorted automatically).                 |
+| `beforeInit`    | `() => void`                        | —           | Callback before each layout calculation.                     |
+| `afterSort`     | `(items: NodeListOf<Element>) => void` | `() => {}` | Callback after a sort completes.                          |

package/actions/afterAllImagesLoad.ts

@@ -0,0 +1,36 @@
+import calculate from './calculate';
+import { Ref } from '../types/ref';
+
+const afterAllImagesLoad = (ref: Ref): void => {
+  const $images = [...ref.grid.querySelectorAll<HTMLImageElement>('img')];
+  const count = $images.length;
+
+  if (count > 0) {
+    let alreadyLoaded = 0;
+    $images.forEach((img) => {
+      if (img.complete) {
+        alreadyLoaded++;
+        if (alreadyLoaded === count) {
+          setTimeout(() => calculate(ref), 500);
+        }
+      } else {
+        img.onload = () => {
+          alreadyLoaded++;
+          if (alreadyLoaded === count) {
+            setTimeout(() => calculate(ref), 500);
+          }
+        };
+        img.onerror = () => {
+          alreadyLoaded++;
+          if (alreadyLoaded === count) {
+            setTimeout(() => calculate(ref), 500);
+          }
+        };
+      }
+    });
+  } else {
+    setTimeout(() => calculate(ref), 500);
+  }
+};
+
+export default afterAllImagesLoad;

package/actions/calculate.ts

@@ -0,0 +1,155 @@
+import types from '../constants/types';
+import { Ref } from '../types/ref';
+
+const calculate = (ref: Ref): void => {
+  const params = ref.currentParams;
+
+  if (typeof params.beforeInit === 'function') {
+    params.beforeInit();
+  }
+
+  const $items = Array.from(ref.grid.children).filter(
+    (x) => !(x as HTMLElement).classList.contains('gs-sortable-item-inmove'),
+  ) as HTMLElement[];
+  const itemsCount = $items.length;
+
+  ref.grid.style.position = 'relative';
+  if (params.gap !== '') {
+    ref.grid.style.gap = params.gap!;
+  }
+
+  const gridStyles = getComputedStyle(ref.grid);
+  const cssGap = gridStyles.gap;
+  let gapX = 0;
+  let gapY = 0;
+
+  if (cssGap) {
+    const [cssGapYValue, cssGapXValue] = cssGap.includes(' ')
+      ? cssGap.split(' ')
+      : [cssGap, cssGap];
+
+    const gapYSize = parseInt(cssGapYValue);
+    const gapXSize = parseInt(cssGapXValue);
+    if (!Number.isNaN(gapYSize)) gapY = gapYSize;
+    if (!Number.isNaN(gapXSize)) gapX = gapXSize;
+  }
+
+  const borderBottomWidth = parseFloat(gridStyles.borderBottomWidth);
+  const borderTopWidth = parseFloat(gridStyles.borderTopWidth);
+  const borderLeftWidth = parseFloat(gridStyles.borderLeftWidth);
+  const borderRightWidth = parseFloat(gridStyles.borderRightWidth);
+  const containerPT = parseFloat(gridStyles.paddingTop);
+  const containerPR = parseFloat(gridStyles.paddingRight);
+  const containerPB = parseFloat(gridStyles.paddingBottom);
+  const containerPL = parseFloat(gridStyles.paddingLeft);
+
+  const containerWidth = ref.grid.clientWidth - containerPR - containerPL;
+  let itemWidth = 0;
+  let strItemWidth = 'max-content';
+
+  if (params.type === types.grid) {
+    itemWidth = (containerWidth - (params.count! - 1) * gapX) / params.count!;
+    strItemWidth = `${itemWidth}px`;
+  } else if (params.type === types.column) {
+    itemWidth = containerWidth;
+    strItemWidth = `${itemWidth}px`;
+  }
+  ref.itemWidth = strItemWidth;
+
+  let currentLeft = containerPL;
+  let currentTop = containerPT;
+  let currentHeight =
+    containerPT + containerPB + borderBottomWidth + borderTopWidth;
+  let currentWidth =
+    containerPL + containerPR + borderLeftWidth + borderRightWidth;
+  let maxHeight = 0;
+
+  $items.forEach((el) => {
+    if (
+      params.type !== types.row ||
+      !el.classList.contains('gs-sortable-placeholder')
+    ) {
+      el.style.width = strItemWidth;
+    }
+  });
+
+  ref.uiData = {
+    containerPT,
+    containerPR,
+    containerPB,
+    containerPL,
+    containerWidth,
+    currentHeight,
+    currentWidth,
+    itemWidth,
+    gapX,
+    gapY,
+  };
+
+  let colHeight = 0;
+
+  $items.forEach((el, index) => {
+    const height = el.offsetHeight;
+    const width = el.offsetWidth;
+
+    if (params.type === types.column) {
+      el.style.left = `${containerPL}px`;
+      if (currentTop === containerPT) {
+        el.style.top = `${containerPT}px`;
+        currentTop += height;
+        currentHeight += height;
+      } else {
+        el.style.top = `${currentTop + gapY}px`;
+        currentTop += gapY + height;
+        currentHeight += height + gapY;
+      }
+    } else if (params.type === types.row) {
+      el.style.top = `${containerPT}px`;
+      if (currentLeft === containerPL) {
+        el.style.left = `${containerPL}px`;
+        currentLeft += width;
+        currentWidth += width;
+      } else {
+        el.style.left = `${currentLeft + gapX}px`;
+        currentLeft += gapX + width;
+        currentWidth += width + gapX;
+      }
+      if (height > maxHeight) {
+        maxHeight = height;
+      }
+    } else if (params.type === types.grid) {
+      const left =
+        index % params.count! === 0
+          ? containerPL
+          : containerPL + (index % params.count!) * (itemWidth + gapX);
+      const top = currentTop;
+
+      if (height > colHeight) {
+        colHeight = height;
+      }
+      if (
+        index % params.count! === params.count! - 1 ||
+        index === itemsCount - 1
+      ) {
+        if (top === containerPT) {
+          currentHeight += colHeight;
+        } else {
+          currentHeight += colHeight + gapY;
+        }
+        currentTop += colHeight + gapY;
+        colHeight = 0;
+      }
+
+      el.style.left = `${left}px`;
+      el.style.top = `${top}px`;
+    }
+  });
+
+  ref.grid.style.height = `${currentHeight}px`;
+  if (params.type === types.row) {
+    ref.grid.style.height = `${currentHeight + maxHeight}px`;
+    ref.grid.style.width = `${currentWidth}px`;
+  }
+};
+
+export default calculate;

package/actions/calculateOnSort.ts

@@ -0,0 +1,270 @@
+import types from '../constants/types';
+import { getOffsetFromWindow } from './general';
+import { Ref, DraggableInfo } from '../types/ref';
+
+const calculateOnSort = (ref: Ref): void => {
+  const params = ref.currentParams;
+  if (!params.takeClone) {
+    const $items = Array.from(ref.grid.children) as HTMLElement[];
+    const itemsCount = $items.filter(
+      (x) => !x.classList.contains('gs-sortable-item-inmove'),
+    ).length;
+
+    const info = window.GSSortableConfigue!.draggableInfo as DraggableInfo;
+    let {
+      containerPT,
+      containerPL,
+      currentHeight,
+      currentWidth,
+      itemWidth,
+      gapX,
+      gapY,
+    } = ref.uiData!;
+
+    let currentLeft = containerPL;
+    let currentTop = containerPT;
+    let maxHeight = 0;
+
+    let placeholderSeted = info === undefined;
+    let inProcessEl: { height: number; width: number; top: number; left: number } | undefined;
+
+    const containerCoord = getOffsetFromWindow(info?.ref.grid!);
+    if (info !== undefined) {
+      const $el = info.$el;
+      const elCoord = getOffsetFromWindow($el);
+      inProcessEl = {
+        height: $el.offsetHeight,
+        width: $el.offsetWidth,
+        top: elCoord.top - containerCoord.top,
+        left: elCoord.left - containerCoord.left,
+      };
+    }
+
+    let plIndex = info?.index ?? 0;
+    let colHeight = 0;
+    let itIndex = 0;
+
+    // Pass 1 — find where the placeholder should land
+    $items.forEach((el) => {
+      if (!el.classList.contains('gs-sortable-item-inmove')) {
+        const height = el.offsetHeight;
+        const width = el.offsetWidth;
+
+        if (params.type === types.column) {
+          if (!placeholderSeted) {
+            const placeholderTop =
+              currentTop === containerPT ? containerPT : currentTop + gapY;
+            const placeholderLeft = containerPL;
+            if (
+              Math.abs(placeholderTop - inProcessEl!.top) < inProcessEl!.height / 2 &&
+              Math.abs(placeholderLeft - inProcessEl!.left) < inProcessEl!.width / 2
+            ) {
+              info!.newTop = placeholderTop;
+              info!.newLeft = placeholderLeft;
+              placeholderSeted = true;
+              plIndex = itIndex;
+            }
+          }
+          if (!el.classList.contains('gs-sortable-placeholder')) {
+            if (currentTop === containerPT) {
+              currentTop = containerPT + height;
+              currentHeight += height;
+            } else {
+              currentTop = currentTop + gapY + height;
+              currentHeight += height + gapY;
+            }
+          }
+        } else if (params.type === types.row) {
+          if (!placeholderSeted) {
+            const placeholderLeft =
+              currentLeft === containerPL ? containerPL : currentLeft + gapX;
+            const placeholderTop = containerPT;
+            if (
+              Math.abs(placeholderTop - inProcessEl!.top) < inProcessEl!.height / 2 &&
+              Math.abs(placeholderLeft - inProcessEl!.left) < inProcessEl!.width / 2
+            ) {
+              info!.newTop = placeholderTop;
+              info!.newLeft = placeholderLeft;
+              placeholderSeted = true;
+              plIndex = itIndex;
+            }
+          }
+          if (!el.classList.contains('gs-sortable-placeholder')) {
+            if (currentLeft === containerPL) {
+              currentLeft = containerPL + width;
+              currentWidth += width;
+            } else {
+              currentLeft = currentLeft + gapX + width;
+              currentWidth += width + gapX;
+            }
+            if (height > maxHeight) maxHeight = height;
+          }
+        } else if (params.type === types.grid) {
+          const placeholderLeft =
+            itIndex % params.count! === 0
+              ? containerPL
+              : containerPL + (itIndex % params.count!) * (itemWidth + gapX);
+          const placeholderTop = currentTop;
+          if (
+            Math.abs(placeholderTop - inProcessEl!.top) < inProcessEl!.height / 2 &&
+            Math.abs(placeholderLeft - inProcessEl!.left) < inProcessEl!.width / 2
+          ) {
+            info!.newTop = placeholderTop;
+            info!.newLeft = placeholderLeft;
+            placeholderSeted = true;
+            plIndex = itIndex;
+          }
+          if (!el.classList.contains('gs-sortable-placeholder')) {
+            const top = currentTop;
+            if (height > colHeight) colHeight = height;
+            if (
+              itIndex % params.count! === params.count! - 1 ||
+              itIndex === itemsCount - 1
+            ) {
+              if (top === containerPT) {
+                currentHeight += colHeight;
+              } else {
+                currentHeight += colHeight + gapY;
+              }
+              currentTop += colHeight + gapY;
+              colHeight = 0;
+            }
+          }
+        }
+        itIndex += 1;
+      }
+    });
+
+    // Pass 2 — reposition everything including the placeholder
+    {
+      info!.index = plIndex;
+      ({
+        containerPT,
+        containerPL,
+        currentHeight,
+        currentWidth,
+        itemWidth,
+        gapX,
+        gapY,
+      } = ref.uiData!);
+
+      currentLeft = containerPL;
+      currentTop = containerPT;
+      itIndex = 0;
+
+      $items.forEach((el) => {
+        if (!el.classList.contains('gs-sortable-item-inmove')) {
+          const height = el.offsetHeight;
+          const width = el.offsetWidth;
+
+          if (params.type === types.column) {
+            if (itIndex === plIndex) {
+              info!.placeholder!.style.left = `${containerPL}px`;
+              info!.newLeft = containerPL;
+              if (currentTop === containerPT) {
+                info!.newTop = containerPT;
+                info!.placeholder!.style.top = `${containerPT}px`;
+                currentTop = containerPT + inProcessEl!.height;
+              } else {
+                info!.newTop = currentTop + gapY;
+                info!.placeholder!.style.top = `${currentTop + gapY}px`;
+                currentTop = currentTop + gapY + inProcessEl!.height;
+              }
+            }
+            if (!el.classList.contains('gs-sortable-placeholder')) {
+              el.style.left = `${containerPL}px`;
+              if (currentTop === containerPT) {
+                el.style.top = `${containerPT}px`;
+                currentTop = containerPT + height;
+                currentHeight += height;
+              } else {
+                el.style.top = `${currentTop + gapY}px`;
+                currentTop = currentTop + gapY + height;
+                currentHeight += height + gapY;
+              }
+            }
+          } else if (params.type === types.row) {
+            if (itIndex === plIndex) {
+              info!.placeholder!.style.top = `${containerPT}px`;
+              info!.newTop = containerPT;
+              if (currentLeft === containerPL) {
+                info!.newLeft = containerPL;
+                info!.placeholder!.style.left = `${containerPL}px`;
+                currentLeft = containerPL + inProcessEl!.width;
+              } else {
+                info!.newLeft = currentLeft + gapX;
+                info!.placeholder!.style.left = `${currentLeft + gapX}px`;
+                currentLeft = currentLeft + gapX + inProcessEl!.width;
+              }
+            }
+            if (!el.classList.contains('gs-sortable-placeholder')) {
+              el.style.top = `${containerPT}px`;
+              if (currentLeft === containerPL) {
+                el.style.left = `${containerPL}px`;
+                currentLeft = containerPL + width;
+                currentWidth += width;
+              } else {
+                el.style.left = `${currentLeft + gapX}px`;
+                currentLeft = currentLeft + gapX + width;
+                currentWidth += width + gapX;
+              }
+            }
+          } else if (params.type === types.grid) {
+            if (itIndex === plIndex) {
+              const left =
+                itIndex % params.count! === 0
+                  ? containerPL
+                  : containerPL + (itIndex % params.count!) * (itemWidth + gapX);
+              const top = currentTop;
+              if (inProcessEl!.height > colHeight) colHeight = inProcessEl!.height;
+              if (
+                itIndex % params.count! === params.count! - 1 ||
+                itIndex === itemsCount - 1
+              ) {
+                if (top === containerPT) {
+                  currentHeight += colHeight;
+                } else {
+                  currentHeight += colHeight + gapY;
+                }
+                currentTop += colHeight + gapY;
+                colHeight = 0;
+                ref.grid.style.height = `${currentHeight}px`;
+              }
+              itIndex += 1;
+              info!.newTop = top;
+              info!.newLeft = left;
+              info!.placeholder!.style.left = `${left}px`;
+              info!.placeholder!.style.top = `${top}px`;
+            }
+            if (!el.classList.contains('gs-sortable-placeholder')) {
+              const left =
+                itIndex % params.count! === 0
+                  ? containerPL
+                  : containerPL + (itIndex % params.count!) * (itemWidth + gapX);
+              const top = currentTop;
+              if (height > colHeight) colHeight = height;
+              if (
+                itIndex % params.count! === params.count! - 1 ||
+                itIndex === itemsCount - 1
+              ) {
+                if (top === containerPT) {
+                  currentHeight += colHeight;
+                } else {
+                  currentHeight += colHeight + gapY;
+                }
+                currentTop += colHeight + gapY;
+                colHeight = 0;
+                ref.grid.style.height = `${currentHeight}px`;
+              }
+              el.style.left = `${left}px`;
+              el.style.top = `${top}px`;
+            }
+          }
+          itIndex += 1;
+        }
+      });
+    }
+  }
+};
+
+export default calculateOnSort;

package/actions/checkItemInContainer.ts

@@ -0,0 +1,22 @@
+import { getOffsetFromWindow } from './general';
+
+const checkItemInContainer = (grid: HTMLElement, el: HTMLElement): boolean => {
+  const gridOffset = getOffsetFromWindow(grid);
+  const elOffset = getOffsetFromWindow(el);
+
+  const offsetTopFromGrid = elOffset.top - gridOffset.top;
+  const offsetLeftFromGrid = elOffset.left - gridOffset.left;
+  const elHeight = el.offsetHeight;
+  const elWidth = el.offsetWidth;
+  const gridHeight = grid.offsetHeight;
+  const gridWidth = grid.offsetWidth;
+
+  return (
+    offsetTopFromGrid >= (-1 * elHeight) / 2 &&
+    offsetLeftFromGrid >= (-1 * elWidth) / 2 &&
+    offsetTopFromGrid <= gridHeight - elHeight / 2 &&
+    offsetLeftFromGrid <= gridWidth - elWidth / 2
+  );
+};
+
+export default checkItemInContainer;

package/actions/destroy.ts

@@ -0,0 +1,30 @@
+import types from '../constants/types';
+import { Ref } from '../types/ref';
+
+const destroy = (ref: Ref): void => {
+  // Disconnect per-item resize observers to prevent leaks
+  ref.itemResizeObservers?.forEach((obs) => obs.disconnect());
+  ref.itemResizeObservers = [];
+
+  ref.grid.classList.remove('gs-sortable-instance');
+  ref.grid.classList.remove(`gs-sortable-${ref.currentParams.type}`);
+  ref.grid.style.removeProperty('position');
+  ref.grid.style.removeProperty('gap');
+  ref.grid.style.removeProperty('height');
+
+  if (ref.currentParams.type === types.row) {
+    ref.grid.style.removeProperty('width');
+  }
+
+  Array.from(ref.grid.children).forEach((el) => {
+    const element = el as HTMLElement;
+    element.classList.remove('gs-sortable-item');
+    element.style.removeProperty('position');
+    element.style.removeProperty('width');
+    element.style.removeProperty('left');
+    element.style.removeProperty('top');
+    element.style.removeProperty('transition');
+  });
+};
+
+export default destroy;

package/actions/general.ts

@@ -0,0 +1,72 @@
+export const getTranslateCoord = (element: HTMLElement): { x: number; y: number } => {
+  const style = window.getComputedStyle(element);
+  const matrix = new DOMMatrix(style.transform);
+  return {
+    x: matrix.e,
+    y: matrix.f,
+  };
+};
+
+export const getOffsetFromBody = (el: HTMLElement | null): { top: number; left: number } => {
+  let top = 0, left = 0;
+
+  while (el && el !== document.body) {
+    top += el.offsetTop || 0;
+    left += el.offsetLeft || 0;
+
+    const transform = window.getComputedStyle(el).transform;
+    if (transform !== 'none') {
+      const matrix = new DOMMatrix(transform);
+      top += matrix.m42 || 0;
+      left += matrix.m41 || 0;
+    }
+
+    el = el.offsetParent as HTMLElement | null;
+  }
+
+  top += document.body.scrollTop || document.documentElement.scrollTop || 0;
+  left += document.body.scrollLeft || document.documentElement.scrollLeft || 0;
+
+  return { top, left };
+};
+
+export const getOffsetFromWindow = (el: HTMLElement | null): { top: number; left: number } => {
+  let top = 0, left = 0;
+
+  while (el) {
+    top += el.offsetTop || 0;
+    left += el.offsetLeft || 0;
+
+    const transform = window.getComputedStyle(el).transform;
+    if (transform !== 'none') {
+      const matrix = new DOMMatrix(transform);
+      top += matrix.m42 || 0;
+      left += matrix.m41 || 0;
+    }
+
+    el = el.offsetParent as HTMLElement | null;
+  }
+
+  top -= window.scrollY || 0;
+  left -= window.scrollX || 0;
+
+  return { top, left };
+};
+
+export const moveChildToIndex = (
+  parent: HTMLElement,
+  child: HTMLElement,
+  newIndex: number,
+): void => {
+  const children = Array.from(parent.children) as HTMLElement[];
+  const oldIndex = children.indexOf(child);
+
+  if (oldIndex !== newIndex) {
+    newIndex = Math.max(0, Math.min(newIndex, children.length - 1));
+    if (newIndex > oldIndex && oldIndex !== -1) {
+      parent.insertBefore(child, children[newIndex].nextSibling);
+    } else {
+      parent.insertBefore(child, children[newIndex]);
+    }
+  }
+};