@bquery/bquery 1.7.0 → 1.8.1

package/src/dnd/sortable.ts

@@ -1,307 +1,307 @@
-/**
- * Sortable list with animated reordering via pointer events.
- *
- * Makes children of a container sortable by dragging. Items are
- * rearranged in the DOM with optional CSS animation.
- *
- * @module bquery/dnd
- */
-
-import type { SortEventData, SortableHandle, SortableOptions } from './types';
-
-/**
- * Gets the sortable items within a container.
- * @internal
- */
-const getItems = (container: HTMLElement, selector: string): HTMLElement[] => {
-  return Array.from(container.querySelectorAll(selector)) as HTMLElement[];
-};
-
-/**
- * Finds the closest sortable item to a given Y (or X) position.
- * @internal
- */
-const getClosestItem = (
-  items: HTMLElement[],
-  clientPos: number,
-  axis: 'x' | 'y',
-  dragged: HTMLElement
-): { element: HTMLElement; index: number } | null => {
-  let closest: { element: HTMLElement; index: number; distance: number } | null = null;
-
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i];
-    if (item === dragged) continue;
-
-    const rect = item.getBoundingClientRect();
-    const mid = axis === 'y' ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
-    const distance = clientPos - mid;
-
-    if (
-      closest === null ||
-      (distance < 0 && distance > closest.distance) ||
-      (closest.distance >= 0 && distance < 0 && Math.abs(distance) < Math.abs(closest.distance))
-    ) {
-      // Find the item we're just before
-      if (distance < 0) {
-        closest = { element: item, index: i, distance };
-      }
-    }
-  }
-
-  return closest ? { element: closest.element, index: closest.index } : null;
-};
-
-/**
- * Makes the children of a container sortable by dragging.
- *
- * Features:
- * - Pointer event based (touch + mouse)
- * - Animated reordering with configurable duration
- * - Axis constraint (vertical or horizontal)
- * - Optional drag handle
- * - Placeholder element during sort
- * - Callbacks: `onSortStart`, `onSortMove`, `onSortEnd`
- *
- * @param container - The container element whose children will be sortable
- * @param options - Configuration options
- * @returns A handle with `destroy()`, `disable()`, and `enable()` methods
- *
- * @example
- * ```ts
- * import { sortable } from '@bquery/bquery/dnd';
- *
- * const handle = sortable(document.querySelector('#list'), {
- *   items: 'li',
- *   axis: 'y',
- *   animationDuration: 200,
- *   onSortEnd: ({ oldIndex, newIndex }) => {
- *     console.log(`Moved from ${oldIndex} to ${newIndex}`);
- *   },
- * });
- *
- * // Later:
- * handle.destroy();
- * ```
- */
-export const sortable = (container: HTMLElement, options: SortableOptions = {}): SortableHandle => {
-  const {
-    items: itemSelector = ':scope > *',
-    axis = 'y',
-    handle,
-    placeholderClass = 'bq-sort-placeholder',
-    sortingClass = 'bq-sorting',
-    animationDuration = 200,
-    onSortStart,
-    onSortMove,
-    onSortEnd,
-  } = options;
-
-  let enabled = !options.disabled;
-  let isDragging = false;
-  let dragItem: HTMLElement | null = null;
-  let placeholder: HTMLElement | null = null;
-  let startIndex = -1;
-  let startPointerY = 0;
-  let startPointerX = 0;
-  let itemStartTop = 0;
-  let itemStartLeft = 0;
-
-  const createEventData = (item: HTMLElement, oldIdx: number, newIdx: number): SortEventData => ({
-    container,
-    item,
-    oldIndex: oldIdx,
-    newIndex: newIdx,
-  });
-
-  const onPointerDown = (e: PointerEvent): void => {
-    if (!enabled) return;
-
-    const target = e.target as HTMLElement;
-
-    // Find the item being dragged
-    const items = getItems(container, itemSelector);
-    let item: HTMLElement | null = null;
-
-    for (const it of items) {
-      if (it.contains(target)) {
-        item = it;
-        break;
-      }
-    }
-
-    if (!item) return;
-
-    // Check handle constraint
-    if (handle && !target.closest(handle)) return;
-
-    e.preventDefault();
-
-    isDragging = true;
-    dragItem = item;
-    startIndex = items.indexOf(item);
-    startPointerY = e.clientY;
-    startPointerX = e.clientX;
-
-    const rect = item.getBoundingClientRect();
-    itemStartTop = rect.top;
-    itemStartLeft = rect.left;
-
-    // Create placeholder
-    placeholder = document.createElement('div');
-    placeholder.classList.add(placeholderClass);
-    placeholder.style.width = `${rect.width}px`;
-    placeholder.style.height = `${rect.height}px`;
-    placeholder.style.boxSizing = 'border-box';
-
-    // Style the dragged item
-    item.classList.add(sortingClass);
-    item.style.position = 'fixed';
-    item.style.width = `${rect.width}px`;
-    item.style.height = `${rect.height}px`;
-    item.style.left = `${rect.left}px`;
-    item.style.top = `${rect.top}px`;
-    item.style.zIndex = '999999';
-    item.style.pointerEvents = 'none';
-    item.style.margin = '0';
-
-    // Insert placeholder where the item was
-    item.parentNode?.insertBefore(placeholder, item);
-
-    container.setPointerCapture(e.pointerId);
-
-    onSortStart?.(createEventData(item, startIndex, startIndex));
-  };
-
-  const onPointerMove = (e: PointerEvent): void => {
-    if (!isDragging || !dragItem || !placeholder) return;
-
-    e.preventDefault();
-
-    const deltaX = e.clientX - startPointerX;
-    const deltaY = e.clientY - startPointerY;
-
-    // Move the dragged item
-    if (axis === 'y') {
-      dragItem.style.top = `${itemStartTop + deltaY}px`;
-    } else {
-      dragItem.style.left = `${itemStartLeft + deltaX}px`;
-    }
-
-    // Find the closest item to determine insertion point
-    const items = getItems(container, itemSelector);
-    const clientPos = axis === 'y' ? e.clientY : e.clientX;
-    const closest = getClosestItem(items, clientPos, axis, dragItem);
-
-    if (closest) {
-      // Move placeholder before the closest element
-      container.insertBefore(placeholder, closest.element);
-    } else {
-      // Append to end
-      container.appendChild(placeholder);
-    }
-
-    const currentIndex = Array.from(container.children).indexOf(placeholder);
-    onSortMove?.(createEventData(dragItem, startIndex, currentIndex));
-  };
-
-  const onPointerUp = (e: PointerEvent): void => {
-    if (!isDragging || !dragItem || !placeholder) return;
-
-    isDragging = false;
-    const draggedItem = dragItem;
-
-    // Get final index
-    const newIndex = Array.from(container.children).indexOf(placeholder);
-
-    // Animate the item back to the placeholder position
-    const placeholderRect = placeholder.getBoundingClientRect();
-    const itemRect = draggedItem.getBoundingClientRect();
-
-    if (animationDuration > 0) {
-      const deltaX = placeholderRect.left - itemRect.left;
-      const deltaY = placeholderRect.top - itemRect.top;
-
-      draggedItem.style.transition = `transform ${animationDuration}ms ease`;
-      draggedItem.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
-
-      let finalized = false;
-      let timeoutId: number | null = null;
-      const finalize = (): void => {
-        if (finalized) return;
-        finalized = true;
-        if (timeoutId !== null) {
-          window.clearTimeout(timeoutId);
-          timeoutId = null;
-        }
-        resetDragItem();
-        onSortEnd?.(createEventData(draggedItem, startIndex, newIndex));
-      };
-      timeoutId = window.setTimeout(() => {
-        finalize();
-      }, animationDuration + 50);
-
-      draggedItem.addEventListener('transitionend', finalize, { once: true });
-    } else {
-      resetDragItem();
-      onSortEnd?.(createEventData(draggedItem, startIndex, newIndex));
-    }
-
-    container.releasePointerCapture(e.pointerId);
-  };
-
-  const resetDragItem = (): void => {
-    if (!dragItem || !placeholder) return;
-
-    // Insert the real item where the placeholder is
-    placeholder.parentNode?.insertBefore(dragItem, placeholder);
-    placeholder.remove();
-    placeholder = null;
-
-    // Reset styles
-    dragItem.classList.remove(sortingClass);
-    dragItem.style.position = '';
-    dragItem.style.width = '';
-    dragItem.style.height = '';
-    dragItem.style.left = '';
-    dragItem.style.top = '';
-    dragItem.style.zIndex = '';
-    dragItem.style.pointerEvents = '';
-    dragItem.style.margin = '';
-    dragItem.style.transition = '';
-    dragItem.style.transform = '';
-
-    dragItem = null;
-  };
-
-  container.addEventListener('pointerdown', onPointerDown);
-  container.addEventListener('pointermove', onPointerMove);
-  container.addEventListener('pointerup', onPointerUp);
-  container.addEventListener('pointercancel', onPointerUp);
-
-  // Prevent default touch behavior on container
-  container.style.touchAction = 'none';
-
-  return {
-    destroy: () => {
-      container.removeEventListener('pointerdown', onPointerDown);
-      container.removeEventListener('pointermove', onPointerMove);
-      container.removeEventListener('pointerup', onPointerUp);
-      container.removeEventListener('pointercancel', onPointerUp);
-      container.style.touchAction = '';
-
-      if (isDragging) {
-        resetDragItem();
-      }
-    },
-    disable: () => {
-      enabled = false;
-    },
-    enable: () => {
-      enabled = true;
-    },
-    get enabled() {
-      return enabled;
-    },
-  };
-};
+/**
+ * Sortable list with animated reordering via pointer events.
+ *
+ * Makes children of a container sortable by dragging. Items are
+ * rearranged in the DOM with optional CSS animation.
+ *
+ * @module bquery/dnd
+ */
+
+import type { SortEventData, SortableHandle, SortableOptions } from './types';
+
+/**
+ * Gets the sortable items within a container.
+ * @internal
+ */
+const getItems = (container: HTMLElement, selector: string): HTMLElement[] => {
+  return Array.from(container.querySelectorAll(selector)) as HTMLElement[];
+};
+
+/**
+ * Finds the closest sortable item to a given Y (or X) position.
+ * @internal
+ */
+const getClosestItem = (
+  items: HTMLElement[],
+  clientPos: number,
+  axis: 'x' | 'y',
+  dragged: HTMLElement
+): { element: HTMLElement; index: number } | null => {
+  let closest: { element: HTMLElement; index: number; distance: number } | null = null;
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item === dragged) continue;
+
+    const rect = item.getBoundingClientRect();
+    const mid = axis === 'y' ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+    const distance = clientPos - mid;
+
+    if (
+      closest === null ||
+      (distance < 0 && distance > closest.distance) ||
+      (closest.distance >= 0 && distance < 0 && Math.abs(distance) < Math.abs(closest.distance))
+    ) {
+      // Find the item we're just before
+      if (distance < 0) {
+        closest = { element: item, index: i, distance };
+      }
+    }
+  }
+
+  return closest ? { element: closest.element, index: closest.index } : null;
+};
+
+/**
+ * Makes the children of a container sortable by dragging.
+ *
+ * Features:
+ * - Pointer event based (touch + mouse)
+ * - Animated reordering with configurable duration
+ * - Axis constraint (vertical or horizontal)
+ * - Optional drag handle
+ * - Placeholder element during sort
+ * - Callbacks: `onSortStart`, `onSortMove`, `onSortEnd`
+ *
+ * @param container - The container element whose children will be sortable
+ * @param options - Configuration options
+ * @returns A handle with `destroy()`, `disable()`, and `enable()` methods
+ *
+ * @example
+ * ```ts
+ * import { sortable } from '@bquery/bquery/dnd';
+ *
+ * const handle = sortable(document.querySelector('#list'), {
+ *   items: 'li',
+ *   axis: 'y',
+ *   animationDuration: 200,
+ *   onSortEnd: ({ oldIndex, newIndex }) => {
+ *     console.log(`Moved from ${oldIndex} to ${newIndex}`);
+ *   },
+ * });
+ *
+ * // Later:
+ * handle.destroy();
+ * ```
+ */
+export const sortable = (container: HTMLElement, options: SortableOptions = {}): SortableHandle => {
+  const {
+    items: itemSelector = ':scope > *',
+    axis = 'y',
+    handle,
+    placeholderClass = 'bq-sort-placeholder',
+    sortingClass = 'bq-sorting',
+    animationDuration = 200,
+    onSortStart,
+    onSortMove,
+    onSortEnd,
+  } = options;
+
+  let enabled = !options.disabled;
+  let isDragging = false;
+  let dragItem: HTMLElement | null = null;
+  let placeholder: HTMLElement | null = null;
+  let startIndex = -1;
+  let startPointerY = 0;
+  let startPointerX = 0;
+  let itemStartTop = 0;
+  let itemStartLeft = 0;
+
+  const createEventData = (item: HTMLElement, oldIdx: number, newIdx: number): SortEventData => ({
+    container,
+    item,
+    oldIndex: oldIdx,
+    newIndex: newIdx,
+  });
+
+  const onPointerDown = (e: PointerEvent): void => {
+    if (!enabled) return;
+
+    const target = e.target as HTMLElement;
+
+    // Find the item being dragged
+    const items = getItems(container, itemSelector);
+    let item: HTMLElement | null = null;
+
+    for (const it of items) {
+      if (it.contains(target)) {
+        item = it;
+        break;
+      }
+    }
+
+    if (!item) return;
+
+    // Check handle constraint
+    if (handle && !target.closest(handle)) return;
+
+    e.preventDefault();
+
+    isDragging = true;
+    dragItem = item;
+    startIndex = items.indexOf(item);
+    startPointerY = e.clientY;
+    startPointerX = e.clientX;
+
+    const rect = item.getBoundingClientRect();
+    itemStartTop = rect.top;
+    itemStartLeft = rect.left;
+
+    // Create placeholder
+    placeholder = document.createElement('div');
+    placeholder.classList.add(placeholderClass);
+    placeholder.style.width = `${rect.width}px`;
+    placeholder.style.height = `${rect.height}px`;
+    placeholder.style.boxSizing = 'border-box';
+
+    // Style the dragged item
+    item.classList.add(sortingClass);
+    item.style.position = 'fixed';
+    item.style.width = `${rect.width}px`;
+    item.style.height = `${rect.height}px`;
+    item.style.left = `${rect.left}px`;
+    item.style.top = `${rect.top}px`;
+    item.style.zIndex = '999999';
+    item.style.pointerEvents = 'none';
+    item.style.margin = '0';
+
+    // Insert placeholder where the item was
+    item.parentNode?.insertBefore(placeholder, item);
+
+    container.setPointerCapture(e.pointerId);
+
+    onSortStart?.(createEventData(item, startIndex, startIndex));
+  };
+
+  const onPointerMove = (e: PointerEvent): void => {
+    if (!isDragging || !dragItem || !placeholder) return;
+
+    e.preventDefault();
+
+    const deltaX = e.clientX - startPointerX;
+    const deltaY = e.clientY - startPointerY;
+
+    // Move the dragged item
+    if (axis === 'y') {
+      dragItem.style.top = `${itemStartTop + deltaY}px`;
+    } else {
+      dragItem.style.left = `${itemStartLeft + deltaX}px`;
+    }
+
+    // Find the closest item to determine insertion point
+    const items = getItems(container, itemSelector);
+    const clientPos = axis === 'y' ? e.clientY : e.clientX;
+    const closest = getClosestItem(items, clientPos, axis, dragItem);
+
+    if (closest) {
+      // Move placeholder before the closest element
+      container.insertBefore(placeholder, closest.element);
+    } else {
+      // Append to end
+      container.appendChild(placeholder);
+    }
+
+    const currentIndex = Array.from(container.children).indexOf(placeholder);
+    onSortMove?.(createEventData(dragItem, startIndex, currentIndex));
+  };
+
+  const onPointerUp = (e: PointerEvent): void => {
+    if (!isDragging || !dragItem || !placeholder) return;
+
+    isDragging = false;
+    const draggedItem = dragItem;
+
+    // Get final index
+    const newIndex = Array.from(container.children).indexOf(placeholder);
+
+    // Animate the item back to the placeholder position
+    const placeholderRect = placeholder.getBoundingClientRect();
+    const itemRect = draggedItem.getBoundingClientRect();
+
+    if (animationDuration > 0) {
+      const deltaX = placeholderRect.left - itemRect.left;
+      const deltaY = placeholderRect.top - itemRect.top;
+
+      draggedItem.style.transition = `transform ${animationDuration}ms ease`;
+      draggedItem.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+
+      let finalized = false;
+      let timeoutId: number | null = null;
+      const finalize = (): void => {
+        if (finalized) return;
+        finalized = true;
+        if (timeoutId !== null) {
+          window.clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+        resetDragItem();
+        onSortEnd?.(createEventData(draggedItem, startIndex, newIndex));
+      };
+      timeoutId = window.setTimeout(() => {
+        finalize();
+      }, animationDuration + 50);
+
+      draggedItem.addEventListener('transitionend', finalize, { once: true });
+    } else {
+      resetDragItem();
+      onSortEnd?.(createEventData(draggedItem, startIndex, newIndex));
+    }
+
+    container.releasePointerCapture(e.pointerId);
+  };
+
+  const resetDragItem = (): void => {
+    if (!dragItem || !placeholder) return;
+
+    // Insert the real item where the placeholder is
+    placeholder.parentNode?.insertBefore(dragItem, placeholder);
+    placeholder.remove();
+    placeholder = null;
+
+    // Reset styles
+    dragItem.classList.remove(sortingClass);
+    dragItem.style.position = '';
+    dragItem.style.width = '';
+    dragItem.style.height = '';
+    dragItem.style.left = '';
+    dragItem.style.top = '';
+    dragItem.style.zIndex = '';
+    dragItem.style.pointerEvents = '';
+    dragItem.style.margin = '';
+    dragItem.style.transition = '';
+    dragItem.style.transform = '';
+
+    dragItem = null;
+  };
+
+  container.addEventListener('pointerdown', onPointerDown);
+  container.addEventListener('pointermove', onPointerMove);
+  container.addEventListener('pointerup', onPointerUp);
+  container.addEventListener('pointercancel', onPointerUp);
+
+  // Prevent default touch behavior on container
+  container.style.touchAction = 'none';
+
+  return {
+    destroy: () => {
+      container.removeEventListener('pointerdown', onPointerDown);
+      container.removeEventListener('pointermove', onPointerMove);
+      container.removeEventListener('pointerup', onPointerUp);
+      container.removeEventListener('pointercancel', onPointerUp);
+      container.style.touchAction = '';
+
+      if (isDragging) {
+        resetDragItem();
+      }
+    },
+    disable: () => {
+      enabled = false;
+    },
+    enable: () => {
+      enabled = true;
+    },
+    get enabled() {
+      return enabled;
+    },
+  };
+};