/**
|
* DragHandler.js
|
* Generic drag and drop controller for mouse and touch via Pointer Events API
|
*/
|
class DragHandler {
|
constructor(config) {
|
this.draggableSelector = config.draggableSelector;
|
this.dropTargetSelector = config.dropTargetSelector;
|
this.getItemId = config.getItemId;
|
this.getSelectedItems = config.getSelectedItems;
|
this.validateDrop = config.validateDrop;
|
this.onDrop = config.onDrop;
|
|
this.handleSelector = config.handleSelector || null;
|
this.ignoreSelector = config.ignoreSelector || 'input, button, label, select, textarea, a';
|
this.onDragStart = config.onDragStart || null;
|
this.onDragEnd = config.onDragEnd || null;
|
|
this.previewElement = config.previewElement || 'img, video, .icon';
|
|
this.previewOptions = {
|
offset: { x: -30, y: -40 },
|
showCount: true,
|
...config.previewOptions
|
};
|
|
this.dragThreshold = {
|
time: 90, // ms to hold before drag starts
|
distance: 5 // px of movement allowed during hold
|
};
|
|
this.state = this.getInitialState();
|
|
this.onPointerDown = this.handlePointerDown.bind(this);
|
this.onPointerMove = this.handlePointerMove.bind(this);
|
this.onPointerUp = this.handlePointerUp.bind(this);
|
this.onPointerCancel = this.handlePointerCancel.bind(this);
|
|
this.init();
|
}
|
|
getInitialState() {
|
return {
|
active: false,
|
itemIds: [],
|
startPos: null,
|
currentPos: null,
|
targetElement: null,
|
previewElement: null,
|
startTime: null,
|
holdTimer: null,
|
pointerId: null,
|
pointerTarget: null
|
};
|
}
|
|
init() {
|
document.addEventListener('pointerdown', this.onPointerDown);
|
}
|
|
handlePointerDown(e) {
|
if (this.shouldIgnoreElement(e.target)) return;
|
|
const draggableElement = e.target.closest(this.draggableSelector);
|
if (!draggableElement) return;
|
|
if (this.handleSelector) {
|
const handle = e.target.closest(this.handleSelector);
|
if (!handle || !draggableElement.contains(handle)) return;
|
}
|
|
const itemId = this.getItemId(draggableElement);
|
if (!itemId) return;
|
|
const selectedItems = this.getSelectedItems(draggableElement);
|
const itemIds = selectedItems.includes(itemId) ? selectedItems : [itemId];
|
|
e.preventDefault();
|
|
this.state = {
|
active: false,
|
itemIds: itemIds,
|
startPos: { x: e.clientX, y: e.clientY },
|
currentPos: { x: e.clientX, y: e.clientY },
|
targetElement: null,
|
previewElement: null,
|
startTime: Date.now(),
|
holdTimer: null,
|
draggableElement: draggableElement,
|
pointerId: e.pointerId,
|
pointerTarget: draggableElement
|
};
|
|
|
document.addEventListener('pointermove', this.onPointerMove);
|
document.addEventListener('pointerup', this.onPointerUp);
|
document.addEventListener('pointercancel', this.onPointerCancel);
|
|
this.state.holdTimer = setTimeout(() => {
|
if (this.state && !this.state.active) {
|
this.startDrag();
|
}
|
}, this.dragThreshold.time);
|
}
|
|
startDrag() {
|
// Don't start if already cancelled
|
if (!this.state || this.state.active) return;
|
|
this.state.holdTimer = null;
|
this.state.active = true;
|
|
if (this.state.pointerTarget && this.state.pointerId !== null) {
|
try {
|
this.state.pointerTarget.setPointerCapture(this.state.pointerId);
|
} catch (e) {
|
console.warn('Could not capture pointer:', e);
|
}
|
}
|
|
this.state.previewElement = this.createPreview(
|
this.state.draggableElement,
|
this.state.itemIds
|
);
|
|
|
this.applyDraggingState(true);
|
this.updatePreview();
|
|
if (this.onDragStart) {
|
this.onDragStart(this.state.itemIds, this.state.draggableElement);
|
}
|
|
if (window.jvbA11y) {
|
const message = this.state.itemIds.length > 1
|
? `Started dragging ${this.state.itemIds.length} items`
|
: 'Started dragging item';
|
window.jvbA11y.announce(message);
|
}
|
}
|
|
handlePointerMove(e) {
|
if (!this.state) return;
|
|
this.state.currentPos = { x: e.clientX, y: e.clientY };
|
|
// Check if we've moved beyond threshold before timer expires
|
if (!this.state.active && this.state.holdTimer) {
|
const dx = e.clientX - this.state.startPos.x;
|
const dy = e.clientY - this.state.startPos.y;
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
// If moved significantly while waiting, start drag immediately
|
if (distance > this.dragThreshold.distance * 2) {
|
clearTimeout(this.state.holdTimer);
|
this.startDrag();
|
}
|
}
|
|
if (!this.state.active) return;
|
e.preventDefault();
|
|
this.updatePreview();
|
|
const elementUnderPointer = document.elementFromPoint(e.clientX, e.clientY);
|
const dropTarget = this.findDropTarget(elementUnderPointer);
|
|
if (dropTarget !== this.state.targetElement) {
|
this.clearTargetHighlight();
|
this.state.targetElement = dropTarget;
|
|
if (dropTarget && this.validateDrop(this.state.itemIds, dropTarget)) {
|
this.highlightTarget(dropTarget);
|
}
|
}
|
}
|
|
handlePointerUp(e) {
|
if (!this.state) return;
|
|
// If timer still running, this was a quick click - cancel drag and allow click
|
if (this.state.holdTimer && !this.state.active) {
|
this.cancelDragStart();
|
return;
|
}
|
|
// Only process drop if drag was actually active
|
if (!this.state.active) {
|
this.cleanup();
|
return;
|
}
|
|
document.removeEventListener('pointermove', this.onPointerMove);
|
document.removeEventListener('pointerup', this.onPointerUp);
|
document.removeEventListener('pointercancel', this.onPointerCancel);
|
|
const { itemIds, targetElement } = this.state;
|
let success = false;
|
|
if (targetElement && this.validateDrop(itemIds, targetElement)) {
|
this.onDrop(itemIds, targetElement);
|
success = true;
|
}
|
|
this.cleanup();
|
|
if (this.onDragEnd) {
|
this.onDragEnd(itemIds, success);
|
}
|
|
if (window.jvbA11y) {
|
const message = success
|
? (itemIds.length > 1 ? `Moved ${itemIds.length} items` : 'Item moved')
|
: 'Drag cancelled';
|
window.jvbA11y.announce(message);
|
}
|
}
|
|
handlePointerCancel(e) {
|
if (!this.state) return;
|
|
document.removeEventListener('pointermove', this.onPointerMove);
|
document.removeEventListener('pointerup', this.onPointerUp);
|
document.removeEventListener('pointercancel', this.onPointerCancel);
|
|
// Clear timer if still running
|
if (this.state.holdTimer) {
|
clearTimeout(this.state.holdTimer);
|
this.state.holdTimer = null;
|
}
|
|
this.cleanup();
|
|
if (window.jvbA11y) {
|
window.jvbA11y.announce('Drag cancelled');
|
}
|
}
|
|
cancelDragStart() {
|
if (this.state && this.state.holdTimer) {
|
clearTimeout(this.state.holdTimer);
|
this.state.holdTimer = null;
|
}
|
|
document.removeEventListener('pointermove', this.onPointerMove);
|
document.removeEventListener('pointerup', this.onPointerUp);
|
document.removeEventListener('pointercancel', this.onPointerCancel);
|
|
this.cleanup();
|
}
|
|
createPreview(draggableElement, itemIds) {
|
let preview = window.getTemplate('dragPreview');
|
if (!preview) {
|
preview = this.createPreviewElement();
|
}
|
|
let itemsContainer = preview.querySelector('.drag-items');
|
|
let wrapperTemplate = itemsContainer.querySelector('.drag-item');
|
itemIds.forEach((id, index) => {
|
let itemElement = this.findElementByItemId(id);
|
if (itemElement) {
|
let previewPart = itemElement.querySelector(this.previewElement)?.cloneNode(true);
|
if (previewPart) {
|
let wrapper = wrapperTemplate.cloneNode(true);
|
wrapper.appendChild(previewPart);
|
itemsContainer.append(wrapper);
|
}
|
}
|
});
|
wrapperTemplate.remove();
|
|
let countBadge = preview.querySelector('.drag-count');
|
if (countBadge) {
|
countBadge.textContent = '{' + itemIds.length + '}';
|
countBadge.hidden = itemIds.length <= 1;
|
}
|
|
document.body.appendChild(preview);
|
return preview;
|
}
|
|
createPreviewElement() {
|
const preview = document.createElement('div');
|
preview.className = 'drag-preview';
|
let items = preview.cloneNode(true);
|
let count = preview.cloneNode(true);
|
let item = preview.cloneNode(true);
|
item.className = 'drag-item';
|
items.className = 'drag-items';
|
items.append(item);
|
count.className = 'drag-count';
|
|
preview.append(items);
|
preview.append(count);
|
return preview;
|
}
|
|
updatePreview() {
|
if (!this.state.previewElement || !this.state.currentPos) return;
|
|
this.state.previewElement.style.left = `${this.state.currentPos.x + this.previewOptions.offset.x}px`;
|
this.state.previewElement.style.top = `${this.state.currentPos.y + this.previewOptions.offset.y}px`;
|
}
|
|
findDropTarget(element) {
|
if (!element) return null;
|
return element.closest(this.dropTargetSelector);
|
}
|
|
highlightTarget(target) {
|
if (!target) return;
|
|
target.classList.add('dragover');
|
|
if (this.state.isMultiDrag) {
|
target.classList.add('multi-drop');
|
target.setAttribute('data-item-count', this.state.itemIds.length);
|
}
|
|
if (navigator.vibrate) {
|
const pattern = this.state.isMultiDrag ? [25, 10, 25] : [25];
|
navigator.vibrate(pattern);
|
}
|
}
|
|
clearTargetHighlight() {
|
document.querySelectorAll('.dragover').forEach(el => {
|
el.classList.remove('dragover', 'multi-drop');
|
el.removeAttribute('data-item-count');
|
});
|
}
|
|
applyDraggingState(isDragging) {
|
this.state.itemIds.forEach(id => {
|
const element = this.findElementByItemId(id);
|
if (element) {
|
element.classList.toggle('dragging', isDragging);
|
}
|
});
|
}
|
|
findElementByItemId(itemId) {
|
// Try the actual selector pattern first
|
const elements = document.querySelectorAll(this.draggableSelector);
|
for (const el of elements) {
|
if (this.getItemId(el) === itemId) {
|
return el;
|
}
|
}
|
return null;
|
}
|
|
shouldIgnoreElement(element) {
|
return (element.matches(this.ignoreSelector));
|
}
|
|
cleanup() {
|
if (this.state && this.state.holdTimer) {
|
clearTimeout(this.state.holdTimer);
|
}
|
|
if (this.state && this.state.pointerTarget && this.state.pointerId !== null) {
|
try {
|
this.state.pointerTarget.releasePointerCapture(this.state.pointerId);
|
} catch (e) {
|
// Pointer may have been auto-released
|
}
|
}
|
|
this.clearTargetHighlight();
|
this.applyDraggingState(false);
|
|
if (this.state && this.state.previewElement) {
|
this.state.previewElement.remove();
|
}
|
|
this.state = this.getInitialState();
|
}
|
|
destroy() {
|
this.cleanup();
|
|
document.removeEventListener('pointerdown', this.onPointerDown);
|
document.removeEventListener('pointermove', this.onPointerMove);
|
document.removeEventListener('pointerup', this.onPointerUp);
|
document.removeEventListener('pointercancel', this.onPointerCancel);
|
}
|
}
|
|
window.jvbDragHandler = DragHandler;
|
