@get-set/gs-sortable 0.0.36 → 0.0.37

package/actions/getCurrentParams.ts

@@ -0,0 +1,32 @@
+import _defaultParams from '../constants/defaultParams';
+import { Params } from '../types/params';
+
+const getCurrentParams = (params: Params): Params => {
+  const defaultParams: Params = { ..._defaultParams };
+  let finalParams: Params = {
+    ...defaultParams,
+    ...params,
+  };
+
+  if (finalParams.responsive && finalParams.responsive.length > 0) {
+    finalParams.responsive.sort((a, b) => b.windowSize - a.windowSize);
+  }
+
+  if (finalParams.responsive && finalParams.responsive.length > 0) {
+    const windowSize = window.innerWidth;
+    const availableResponsives = finalParams.responsive.filter(
+      (resp) => resp.windowSize >= windowSize,
+    );
+
+    availableResponsives.forEach((resp) => {
+      finalParams = {
+        ...finalParams,
+        ...resp.params,
+      };
+    });
+  }
+
+  return finalParams;
+};
+
+export default getCurrentParams;

package/actions/init.ts

@@ -0,0 +1,31 @@
+import constParams from '../constants/constParams';
+import calculate from './calculate';
+import initDraggable from './initDraggable';
+import { Ref } from '../types/ref';
+
+const init = (ref: Ref): void => {
+  const transition = `left ${constParams.animationSpeed}ms, top ${constParams.animationSpeed}ms, transform ${constParams.animationSpeed}ms`;
+
+  ref.grid.classList.add('gs-sortable-instance');
+  ref.grid.classList.add(`gs-sortable-${ref.currentParams.type}`);
+
+  // Disconnect any observers from a previous init/refresh cycle
+  ref.itemResizeObservers?.forEach((obs) => obs.disconnect());
+  ref.itemResizeObservers = [];
+
+  Array.from(ref.grid.children).forEach((el) => {
+    const element = el as HTMLElement;
+    element.classList.add('gs-sortable-item');
+    element.style.transition = transition;
+    element.style.position = 'absolute';
+
+    const obs = new ResizeObserver(() => calculate(ref));
+    obs.observe(element);
+    ref.itemResizeObservers!.push(obs);
+  });
+
+  ref.count = ref.grid.children.length;
+  initDraggable(ref);
+};
+
+export default init;

package/actions/initDraggable.ts

@@ -0,0 +1,85 @@
+import constParams from '../constants/constParams';
+import { getOffsetFromWindow } from './general';
+import { Ref } from '../types/ref';
+
+const initDraggable = (ref: Ref): void => {
+  const params = ref.currentParams;
+  const $items = Array.from(ref.grid.children) as HTMLElement[];
+
+  $items.forEach(($el, index) => {
+    $el.onmousedown = null;
+    const handler = params.handler
+      ? $el.querySelector<HTMLElement>(params.handler)
+      : $el;
+
+    if (handler instanceof HTMLElement) {
+      handler.style.cursor = 'move';
+      handler.onmousedown = (e: MouseEvent) => {
+        if (!ref.isAdjusting) {
+          window.GSSortableConfigue!.overInItemRef = ref;
+          window.GSSortableConfigue!.takeFrom = ref;
+
+          const container = ref.grid;
+          const elStyles = getComputedStyle($el);
+          const containerStyles = getComputedStyle(container);
+          const paddingTop = parseFloat(containerStyles.paddingTop);
+          const paddingLeft = parseFloat(containerStyles.paddingLeft);
+          const top = parseFloat(elStyles.top);
+          const left = parseFloat(elStyles.left);
+          let $draggableEl = $el;
+          let placeholder: HTMLElement | undefined;
+
+          if (!params.takeClone) {
+            placeholder = document.createElement('div');
+            placeholder.classList.add('gs-sortable-placeholder');
+            placeholder.style.position = elStyles.position;
+            placeholder.style.transition = `left ${constParams.animationSpeed}ms, top ${constParams.animationSpeed}ms, transform ${constParams.animationSpeed}ms, opacity ${constParams.animationSpeed}ms`;
+            placeholder.style.width = `${$el.offsetWidth}px`;
+            placeholder.style.height = `${$el.offsetHeight}px`;
+            placeholder.style.top = `${top}px`;
+            placeholder.style.left = `${left}px`;
+            placeholder.style.border = elStyles.border;
+            placeholder.style.borderRadius = elStyles.borderRadius;
+            ref.grid.append(placeholder);
+          } else {
+            const $cloneEl = $el.cloneNode(true) as HTMLElement;
+            ref.grid.append($cloneEl);
+            $draggableEl = $cloneEl;
+          }
+
+          const elOffsetWindow = getOffsetFromWindow($el);
+          let translateX = !isNaN(left) ? left : 0;
+          let translateY = !isNaN(top) ? top : 0;
+
+          $draggableEl.style.transform = `translate(${translateX - paddingLeft}px, ${translateY - paddingTop}px)`;
+          $draggableEl.style.top = `${paddingTop}px`;
+          $draggableEl.style.left = `${paddingLeft}px`;
+
+          window.GSSortableConfigue!.draggableInfo = {
+            moved: false,
+            ref,
+            index,
+            $el: $draggableEl,
+            clientX: e.clientX,
+            clientY: e.clientY,
+            placeholder,
+            newLeft: left,
+            newTop: top,
+            fromLeft: (e.clientX - elOffsetWindow.left) / $el.offsetWidth,
+            fromTop: (e.clientY - elOffsetWindow.top) / $el.offsetHeight,
+          };
+
+          $draggableEl.classList.add('gs-sortable-item-inmove');
+          ref.grid.classList.add('gs-sortable-active');
+
+          const closestItem = ref.grid.closest('.gs-sortable-item');
+          if (closestItem) {
+            closestItem.classList.add('gs-sortable-item-active-parent');
+          }
+        }
+      };
+    }
+  });
+};
+
+export default initDraggable;

package/actions/initMouseMove.ts

@@ -0,0 +1,120 @@
+import { getOffsetFromWindow, getTranslateCoord } from './general';
+import checkItemInContainer from './checkItemInContainer';
+import calculate from './calculate';
+import constParams from '../constants/constParams';
+import calculateOnSort from './calculateOnSort';
+import { Ref, DraggableInfo } from '../types/ref';
+
+const initMouseMove = (event: MouseEvent): void => {
+  const info = window.GSSortableConfigue?.draggableInfo as DraggableInfo | undefined;
+
+  if (info !== undefined) {
+    info.moved = true;
+
+    const allRefs: Ref[] = [];
+    if (window.GSSortableConfigue!.takeFrom !== undefined) {
+      allRefs.push(window.GSSortableConfigue!.takeFrom);
+    }
+    window.GSSortableConfigue!.references.forEach((item) => {
+      if (
+        item.ref.currentParams.acceptFrom!.includes(
+          window.GSSortableConfigue!.takeFrom!.currentParams.reference,
+        )
+      ) {
+        allRefs.push(item.ref);
+      }
+    });
+
+    let findedRef = '';
+    allRefs.forEach((item) => {
+      if (checkItemInContainer(item.grid as HTMLElement, info.$el)) {
+        findedRef = item.currentParams.reference;
+      }
+    });
+
+    if (findedRef !== '') {
+      const newRef = window.GSSortableConfigue!.instance(findedRef);
+      if (
+        newRef !== undefined &&
+        info.ref.currentParams.reference !== newRef.currentParams.reference
+      ) {
+        const placeholder = document.querySelector('.gs-sortable-placeholder');
+        if (placeholder != null) {
+          placeholder.remove();
+          calculate(window.GSSortableConfigue!.overInItemRef as Ref);
+        }
+        window.GSSortableConfigue!.overInItemRef = newRef;
+        info.$el.style.width = window.GSSortableConfigue!.overInItemRef.itemWidth!;
+
+        const newWidth = info.$el.clientWidth;
+        const newHeight = info.$el.clientHeight;
+        const newContainerOffset = getOffsetFromWindow(
+          window.GSSortableConfigue!.takeFrom!.grid as HTMLElement,
+        );
+
+        const translateY = event.clientY - newContainerOffset.top - newHeight * info.fromTop;
+        const translateX = event.clientX - newContainerOffset.left - newWidth * info.fromLeft;
+
+        const elStyles = getComputedStyle(info.$el);
+        const top = parseFloat(elStyles.top);
+        const left = parseFloat(elStyles.left);
+
+        if (!window.GSSortableConfigue!.overInItemRef.currentParams.takeClone) {
+          const newPlaceholder = document.createElement('div');
+          newPlaceholder.classList.add('gs-sortable-placeholder');
+          newPlaceholder.style.position = elStyles.position;
+          info.$el.style.transform = `translate(${translateX}px, ${translateY}px)`;
+          newPlaceholder.style.transition = `left ${constParams.animationSpeed}ms, top ${constParams.animationSpeed}ms, transform ${constParams.animationSpeed}ms, opacity ${constParams.animationSpeed}ms`;
+          newPlaceholder.style.top = `${top}px`;
+          newPlaceholder.style.left = `${left}px`;
+          newPlaceholder.style.border = elStyles.border;
+          newPlaceholder.style.borderRadius = elStyles.borderRadius;
+          info.placeholder = newPlaceholder;
+          info.ref = newRef;
+          newPlaceholder.style.width = `${info.$el.offsetWidth}px`;
+          newPlaceholder.style.height = `${info.$el.offsetHeight}px`;
+          newRef.grid.append(newPlaceholder);
+          calculate(newRef);
+          return;
+        } else {
+          info.ref = newRef;
+        }
+      }
+    }
+
+    const params = info.ref.currentParams;
+    const $el = info.$el;
+    const containerStyles = getComputedStyle(info.ref.grid);
+    const paddingLeft = parseFloat(containerStyles.paddingLeft);
+    const paddingTop = parseFloat(containerStyles.paddingTop);
+    const paddingRight = parseFloat(containerStyles.paddingRight);
+    const paddingBottom = parseFloat(containerStyles.paddingBottom);
+    const containerInnerHeight = info.ref.grid.clientHeight - paddingTop - paddingBottom;
+    const containerInnerWidth = info.ref.grid.clientWidth - paddingLeft - paddingRight;
+
+    const moveX = event.clientX - info.clientX;
+    const moveY = event.clientY - info.clientY;
+    const coord = getTranslateCoord($el);
+    info.clientX = event.clientX;
+    info.clientY = event.clientY;
+
+    let translateX = moveX + coord.x;
+    let translateY = moveY + coord.y;
+
+    if (!params.allowOutOfBox) {
+      translateX = Math.min(Math.max(translateX, 0), containerInnerWidth - $el.offsetWidth);
+      translateY = Math.min(Math.max(translateY, 0), containerInnerHeight - $el.offsetHeight);
+    }
+
+    $el.style.transform = `translate(${translateX}px, ${translateY}px)`;
+
+    if (findedRef !== '') {
+      calculateOnSort(window.GSSortableConfigue!.overInItemRef as Ref);
+    }
+  }
+
+  window.scrollY = document.documentElement.scrollTop;
+  window.scrollX = document.documentElement.scrollLeft;
+};
+
+export default initMouseMove;

package/actions/initScroll.ts

@@ -0,0 +1,21 @@
+import { getTranslateCoord } from './general';
+
+const initScroll = (): void => {
+  const info = window.GSSortableConfigue?.draggableInfo;
+
+  if (info !== undefined) {
+    const coord = getTranslateCoord(info.$el);
+    const scrollY = document.documentElement.scrollTop;
+    const scrollX = document.documentElement.scrollLeft;
+
+    const translateX = coord.x + (scrollX - (window.scrollX || 0));
+    const translateY = coord.y + (scrollY - (window.scrollY || 0));
+
+    window.scrollY = scrollY;
+    window.scrollX = scrollX;
+
+    info.$el.style.transform = `translate(${translateX}px, ${translateY}px)`;
+  }
+};
+
+export default initScroll;

package/actions/initSortEnd.ts

@@ -0,0 +1,87 @@
+import constParams from '../constants/constParams';
+import calculate from './calculate';
+import { getOffsetFromBody, moveChildToIndex } from './general';
+import { Ref } from '../types/ref';
+
+const initSortEnd = (_event: MouseEvent): void => {
+  if (window.GSSortableConfigue?.draggableInfo === undefined) return;
+
+  // Capture all needed values before clearing the global — prevents a second
+  // mousedown during the animation from reading stale isAdjusting state.
+  const draggableInfo = window.GSSortableConfigue.draggableInfo;
+  const { $el, ref, placeholder, moved, newTop, newLeft, index } = draggableInfo;
+  const takeFrom = window.GSSortableConfigue.takeFrom!;
+
+  // Clear global immediately so new drags are not blocked
+  window.GSSortableConfigue.draggableInfo = undefined;
+
+  if (moved) {
+    let containerDifX = 0;
+    let containerDifY = 0;
+
+    if (ref.currentParams.reference !== takeFrom.currentParams.reference) {
+      const fromCoord = getOffsetFromBody(takeFrom.grid as HTMLElement);
+      const toCoord = getOffsetFromBody(ref.grid as HTMLElement);
+      containerDifY = toCoord.top - fromCoord.top;
+      containerDifX = toCoord.left - fromCoord.left;
+    }
+
+    ref.isAdjusting = true;
+
+    $el.classList.remove('gs-sortable-item-inmove');
+    ref.grid.classList.remove('gs-sortable-active');
+
+    const activeParent = ref.grid.closest('.gs-sortable-item-active-parent');
+    if (activeParent) {
+      activeParent.classList.remove('gs-sortable-item-active-parent');
+    }
+
+    $el.classList.add('gs-sortable-item-adjusting');
+
+    $el.style.top = `${newTop + containerDifY}px`;
+    $el.style.left = `${newLeft + containerDifX}px`;
+    $el.style.removeProperty('transform');
+
+    setTimeout(() => {
+      $el.classList.remove('gs-sortable-item-adjusting');
+
+      if (
+        ref.currentParams.reference === takeFrom.currentParams.reference &&
+        takeFrom.currentParams.takeClone
+      ) {
+        $el.remove();
+      } else {
+        if (index !== undefined) {
+          moveChildToIndex(ref.grid as HTMLElement, $el, index);
+        }
+      }
+
+      placeholder?.remove();
+
+      if (ref.currentParams.reference !== takeFrom.currentParams.reference) {
+        takeFrom.currentParams.afterSort?.(
+          takeFrom.grid.querySelectorAll('.gs-sortable-item'),
+        );
+        ref.currentParams.afterSort?.(
+          ref.grid.querySelectorAll('.gs-sortable-item'),
+        );
+        takeFrom.refresh();
+        ref.refresh();
+      } else {
+        calculate(ref);
+        ref.currentParams.afterSort?.(
+          ref.grid.querySelectorAll('.gs-sortable-item'),
+        );
+      }
+
+      ref.isAdjusting = false;
+    }, constParams.animationSpeed);
+  } else {
+    $el.style.top = `${newTop}px`;
+    $el.style.left = `${newLeft}px`;
+    $el.style.removeProperty('transform');
+    placeholder?.remove();
+  }
+};
+
+export default initSortEnd;

package/components/GSSortable.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useRef, useState, ReactNode, CSSProperties } from 'react';
+import getCurrentParams from '../actions/getCurrentParams';
+import init from '../actions/init';
+import destroy from '../actions/destroy';
+import afterAllImagesLoad from '../actions/afterAllImagesLoad';
+import defaultParams from '../constants/defaultParams';
+import initMouseMove from '../actions/initMouseMove';
+import initSortEnd from '../actions/initSortEnd';
+import initScroll from '../actions/initScroll';
+import {
+  NewGuid,
+  convertScssToCss,
+  injectCssToHead,
+  removeCssFromHead,
+} from '../helpers/uihelpers';
+import cssContent from './styles/GSSortableCSS';
+import { Params } from '../types/params';
+import { Ref } from '../types/ref';
+
+export interface GSSortableProps extends Params {
+  children?: ReactNode;
+}
+
+const GSSortable: React.FC<GSSortableProps> = ({ children, ...rest }) => {
+  const params: Partial<Params> = { ...rest };
+  const [componentKey, setComponentKey] = useState<string | null>(null);
+  const gridRef = useRef<HTMLDivElement | null>(null);
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    if (componentKey != null) {
+      // Inject CSS once — no external import needed by the consumer
+      const styleId = 'gs-sortable-styles';
+      if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = cssContent;
+        document.head.appendChild(style);
+      }
+
+      // Initialise global registry and window event listeners once
+      if (typeof window.GSSortableConfigue === 'undefined') {
+        window.GSSortableConfigue = {
+          references: [],
+          instance: (ref: string) => {
+            if (ref) {
+              const instance = window.GSSortableConfigue?.references.find(
+                (x) => x.key === ref,
+              );
+              if (instance) return instance.ref;
+            }
+          },
+        };
+        window.addEventListener('mousemove', (e) => initMouseMove(e));
+        window.addEventListener('mouseup', (e) => initSortEnd(e));
+        window.addEventListener('scroll', () => initScroll());
+      }
+
+      if (
+        window.GSSortableConfigue.references.find(
+          (x) => x.key === componentKey,
+        ) === undefined
+      ) {
+        const currentParams = getCurrentParams({
+          ...params,
+          reference: componentKey,
+        } as Params);
+
+        window.GSSortableConfigue.references.push({
+          key: componentKey,
+          ref: {
+            isAdjusting: false,
+            grid: gridRef.current!,
+            currentParams: { ...currentParams, reference: componentKey },
+            itemResizeObservers: [],
+            destroy: () => {
+              destroy(window.GSSortableConfigue?.instance(componentKey)!);
+            },
+            refresh: () => {
+              const ref = window.GSSortableConfigue?.instance(componentKey)!;
+              destroy(ref);
+              init(ref);
+            },
+          },
+        });
+
+        const currentRef = window.GSSortableConfigue.references.find(
+          (x) => x.key === componentKey,
+        )?.ref;
+
+        if (params.gsx && currentRef) {
+          const scss: Record<string, CSSProperties> = {};
+          scss[`[data-key='${componentKey}']`] = { ...params.gsx };
+          const style = convertScssToCss(scss);
+          injectCssToHead(style, componentKey);
+        }
+
+        if (currentRef) {
+          init(currentRef);
+          afterAllImagesLoad(currentRef);
+          initializedRef.current = true;
+        }
+      }
+
+      return () => {
+        const ref = window.GSSortableConfigue?.instance(componentKey);
+        if (ref) {
+          ref.itemResizeObservers?.forEach((obs) => obs.disconnect());
+          ref.itemResizeObservers = [];
+        }
+        if (window.GSSortableConfigue) {
+          window.GSSortableConfigue.references =
+            window.GSSortableConfigue.references.filter(
+              (x) => x.key !== componentKey,
+            );
+        }
+        removeCssFromHead(componentKey);
+      };
+    }
+  }, [componentKey]);
+
+  // Re-init when children change (items added/removed) — but only after first init
+  useEffect(() => {
+    if (componentKey != null && initializedRef.current) {
+      const ref = window.GSSortableConfigue?.instance(componentKey);
+      if (ref) {
+        destroy(ref);
+        init(ref);
+        afterAllImagesLoad(ref);
+      }
+    }
+  }, [children]);
+
+  useEffect(() => {
+    setComponentKey(params.reference || NewGuid());
+  }, []);
+
+  return (
+    <>
+      {componentKey != null ? (
+        <div
+          className={`gs-sortable-instance gs-sortable-${params.type ?? 'column'} ${
+            rest.className || ''
+          }`}
+          ref={gridRef}
+          data-key={componentKey}
+          {...Object.fromEntries(
+            Object.entries(rest).filter(([key]) => !(key in defaultParams)),
+          )}
+        >
+          {children}
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+GSSortable.displayName = 'GSSortable';
+
+export default GSSortable;

package/components/styles/GSSortable.css

@@ -0,0 +1,39 @@
+.gs-sortable-instance {
+  box-sizing: border-box;
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+  transition: 0.4s;
+  z-index: 1;
+}
+.gs-sortable-instance.gs-sortable-active {
+  z-index: 2;
+}
+.gs-sortable-instance * {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+}
+.gs-sortable-instance .gs-sortable-placeholder {
+  position: absolute;
+  background-color: #f1f1f1;
+  border: 1px solid;
+  z-index: 1;
+}
+.gs-sortable-instance .gs-sortable-item {
+  z-index: 2;
+}
+.gs-sortable-instance .gs-sortable-item.gs-sortable-item-active-parent {
+  z-index: 3;
+}
+.gs-sortable-instance .gs-sortable-item-inmove {
+  transition: none !important;
+  z-index: 99999;
+}
+.gs-sortable-instance .gs-sortable-item-addjusting {
+  z-index: 99999;
+}
+.gs-sortable-instance.gs-sortable-row .gs-sortable-item {
+  width: -moz-max-content;
+  width: max-content;
+}/*# sourceMappingURL=GSSortable.css.map */

package/components/styles/GSSortable.scss

@@ -0,0 +1,38 @@
+.gs-sortable-instance {
+  box-sizing: border-box;
+  user-select: none !important;
+  transition: 0.4s;
+  z-index: 1;
+  &.gs-sortable-active {
+    z-index: 2;
+  }
+
+  * {
+    user-select: none !important;
+  }
+  .gs-sortable-placeholder {
+    position: absolute;
+    background-color: #f1f1f1;
+    border: 1px solid;
+    z-index: 1;
+  }
+  .gs-sortable-item {
+    z-index: 2;
+    &.gs-sortable-item-active-parent {
+      z-index: 3;
+    }
+  }
+  .gs-sortable-item-inmove {
+    //transition: width 0.2s, height 0.2s !important;
+    transition: none !important;
+    z-index: 99999;
+  }
+  .gs-sortable-item-addjusting {
+    z-index: 99999;
+  }
+  &.gs-sortable-row {
+    .gs-sortable-item {
+      width: max-content;
+    }
+  }
+}

package/components/styles/GSSortableCSS.ts

@@ -0,0 +1,41 @@
+export default `
+.gs-sortable-instance {
+  box-sizing: border-box;
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+  transition: 0.4s;
+  z-index: 1;
+}
+.gs-sortable-instance.gs-sortable-active {
+  z-index: 2;
+}
+.gs-sortable-instance * {
+  -webkit-user-select: none !important;
+     -moz-user-select: none !important;
+          user-select: none !important;
+}
+.gs-sortable-instance .gs-sortable-placeholder {
+  position: absolute;
+  background-color: #f1f1f1;
+  border: 1px solid;
+  z-index: 1;
+}
+.gs-sortable-instance .gs-sortable-item {
+  z-index: 2;
+}
+.gs-sortable-instance .gs-sortable-item.gs-sortable-item-active-parent {
+  z-index: 3;
+}
+.gs-sortable-instance .gs-sortable-item-inmove {
+  transition: none !important;
+  z-index: 99999;
+}
+.gs-sortable-instance .gs-sortable-item-addjusting {
+  z-index: 99999;
+}
+.gs-sortable-instance.gs-sortable-row .gs-sortable-item {
+  width: -moz-max-content;
+  width: max-content;
+}/*# sourceMappingURL=GSSortable.css.map */
+`;

package/constants/constParams.ts

@@ -0,0 +1,5 @@
+const constParams = {
+  animationSpeed: 400,
+} as const;
+
+export default Object.freeze(constParams);

package/constants/defaultParams.ts

@@ -0,0 +1,20 @@
+import types from './types';
+import { Params } from '../types/params';
+
+const defaultParams: Params = {
+  acceptFrom: [],
+  className: '',
+  takeClone: false,
+  reference: '',
+  count: 3,
+  gap: '',
+  gsx: undefined,
+  handler: '',
+  width: 'auto',
+  type: types.column,
+  allowOutOfBox: true,
+  responsive: [],
+  afterSort: () => {},
+};
+
+export default Object.freeze(defaultParams);