влад
@@ -0,0 +1,875 @@
|
||||
/**
|
||||
* Drag-and-drop reorder for period recipe cards (#recipesList).
|
||||
* Drag starts from .recipe-drag-handle; uses the same API as arrow buttons.
|
||||
* Desktop: HTML5 DnD. Mobile: pointer reorder with card clone + insertion line.
|
||||
*/
|
||||
import { cloneTemplateInto } from "./recipe-skeleton.js";
|
||||
|
||||
const MOBILE_REORDER_MQ = "(max-width: 768px)";
|
||||
const POINTER_ACTIVATION_PX = { mobile: 10, desktop: 10 };
|
||||
const AUTO_SCROLL_EDGE_PX = 72;
|
||||
const AUTO_SCROLL_MAX_STEP = 28;
|
||||
const REORDER_TRACKING_BODY_CLASS = "recipe-list-reorder-tracking";
|
||||
|
||||
function isMobileReorderUi() {
|
||||
return globalThis.matchMedia?.(MOBILE_REORDER_MQ)?.matches ?? false;
|
||||
}
|
||||
|
||||
function activationThresholdPx() {
|
||||
return isMobileReorderUi() ? POINTER_ACTIVATION_PX.mobile : POINTER_ACTIVATION_PX.desktop;
|
||||
}
|
||||
|
||||
function transferBlocksReorder() {
|
||||
const listRoot = document.getElementById("recipesList");
|
||||
if (
|
||||
listRoot?.classList.contains("recipe-list-reorder-active") ||
|
||||
document.body.classList.contains("recipe-list-reorder-active")
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
document.body.classList.contains("recipe-mobile-transfer-armed") ||
|
||||
document.body.classList.contains("recipe-period-transfer-active")
|
||||
);
|
||||
}
|
||||
|
||||
function removeRecipeDragGhost() {
|
||||
const existing = document.getElementById("recipe-card-drag-ghost-root");
|
||||
if (existing?.parentNode) {
|
||||
existing.parentNode.removeChild(existing);
|
||||
}
|
||||
}
|
||||
|
||||
function removeInsertIndicator(listRoot) {
|
||||
listRoot?.querySelector(":scope > .recipe-card-insert-indicator")?.remove();
|
||||
}
|
||||
|
||||
function mountRecipeCardSkeletonInner(container) {
|
||||
if (!cloneTemplateInto(container, "recipe-card-skeleton-inner")) {
|
||||
container.innerHTML =
|
||||
'<div class="dashboard-skeleton-card-inner"><div class="dashboard-skeleton-bar"></div></div>';
|
||||
}
|
||||
}
|
||||
|
||||
function getRecipeListItems(listRoot) {
|
||||
return [...listRoot.querySelectorAll(":scope > .list-item[data-recipe-id]")];
|
||||
}
|
||||
|
||||
function resolveRawInsertIndexAtY(listRoot, clientY) {
|
||||
const items = getRecipeListItems(listRoot);
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const rect = items[i].getBoundingClientRect();
|
||||
if (clientY < rect.top + rect.height / 2) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return items.length;
|
||||
}
|
||||
|
||||
function resolveInsertIndexAtY(listRoot, clientY, draggingItem) {
|
||||
const items = getRecipeListItems(listRoot);
|
||||
if (!draggingItem) {
|
||||
return Math.max(0, Math.min(resolveRawInsertIndexAtY(listRoot, clientY), items.length));
|
||||
}
|
||||
|
||||
const fromIndex = items.indexOf(draggingItem);
|
||||
if (fromIndex < 0) return 0;
|
||||
|
||||
let toIndex = items.length;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i];
|
||||
if (item === draggingItem) continue;
|
||||
const rect = item.getBoundingClientRect();
|
||||
const inCard = clientY >= rect.top && clientY <= rect.bottom;
|
||||
|
||||
if (inCard && fromIndex > i) {
|
||||
toIndex = i;
|
||||
break;
|
||||
}
|
||||
if (inCard && fromIndex < i) {
|
||||
toIndex = clientY < rect.top + rect.height / 2 ? i : i + 1;
|
||||
break;
|
||||
}
|
||||
if (clientY < rect.top + rect.height / 2) {
|
||||
toIndex = i;
|
||||
break;
|
||||
}
|
||||
toIndex = i + 1;
|
||||
}
|
||||
|
||||
if (fromIndex < toIndex) {
|
||||
toIndex -= 1;
|
||||
}
|
||||
return Math.max(0, Math.min(toIndex, Math.max(0, items.length - 1)));
|
||||
}
|
||||
|
||||
function resolveReorderDropIndex(listRoot, dragEvent, draggingItem) {
|
||||
const items = getRecipeListItems(listRoot);
|
||||
const fromIndex = items.indexOf(draggingItem);
|
||||
if (fromIndex < 0) return null;
|
||||
|
||||
const toIndex = resolveInsertIndexAtY(listRoot, dragEvent.clientY, draggingItem);
|
||||
if (fromIndex === toIndex) return null;
|
||||
return { fromIndex, toIndex };
|
||||
}
|
||||
|
||||
function resolveTrackedReorderDropIndex(listRoot, draggingItem, dropToIndex) {
|
||||
const items = getRecipeListItems(listRoot);
|
||||
const fromIndex = items.indexOf(draggingItem);
|
||||
if (fromIndex < 0 || dropToIndex == null) return null;
|
||||
const toIndex = Math.max(0, Math.min(dropToIndex, Math.max(0, items.length - 1)));
|
||||
if (fromIndex === toIndex) return null;
|
||||
return { fromIndex, toIndex };
|
||||
}
|
||||
|
||||
function mountRecipeCardDragGhost(item, dragEvent) {
|
||||
removeRecipeDragGhost();
|
||||
const ghost = document.createElement("div");
|
||||
ghost.id = "recipe-card-drag-ghost-root";
|
||||
ghost.className = "recipe-card-drag-ghost";
|
||||
ghost.setAttribute("aria-hidden", "true");
|
||||
mountRecipeCardSkeletonInner(ghost);
|
||||
|
||||
const w = item.offsetWidth;
|
||||
ghost.style.cssText = [
|
||||
"position:fixed",
|
||||
"left:-10000px",
|
||||
"top:0",
|
||||
"width:" + Math.round(Math.min(Math.max(w, 200), 640)) + "px",
|
||||
"pointer-events:none",
|
||||
].join(";");
|
||||
|
||||
document.body.appendChild(ghost);
|
||||
void ghost.offsetWidth;
|
||||
|
||||
const rect = item.getBoundingClientRect();
|
||||
const ox = Math.max(0, Math.round(dragEvent.clientX - rect.left));
|
||||
const oy = Math.max(0, Math.round(dragEvent.clientY - rect.top));
|
||||
|
||||
try {
|
||||
dragEvent.dataTransfer.setDragImage(ghost, ox, oy);
|
||||
} catch (_) {
|
||||
/* старые движки без кастомного изображения */
|
||||
}
|
||||
}
|
||||
|
||||
function sanitizeDragGhostClone(node) {
|
||||
node.querySelectorAll("[data-action]").forEach((el) => el.removeAttribute("data-action"));
|
||||
node.querySelectorAll("button").forEach((btn) => {
|
||||
btn.disabled = true;
|
||||
btn.tabIndex = -1;
|
||||
});
|
||||
node.classList.remove("active", "recipe-card-drop-target");
|
||||
}
|
||||
|
||||
function mountPointerFollowGhost(item, clientX, clientY, grabOffsetX, grabOffsetY) {
|
||||
removeRecipeDragGhost();
|
||||
|
||||
if (isMobileReorderUi()) {
|
||||
const ghost = item.cloneNode(true);
|
||||
ghost.id = "recipe-card-drag-ghost-root";
|
||||
ghost.className = "list-item recipe-card-drag-ghost recipe-card-drag-ghost--card-clone";
|
||||
ghost.setAttribute("aria-hidden", "true");
|
||||
sanitizeDragGhostClone(ghost);
|
||||
const width = Math.round(Math.min(Math.max(item.offsetWidth, 200), window.innerWidth - 24));
|
||||
ghost.style.cssText = [
|
||||
"position:fixed",
|
||||
"left:0",
|
||||
"top:0",
|
||||
"width:" + width + "px",
|
||||
"margin:0",
|
||||
"transition:none",
|
||||
"transform:none",
|
||||
"z-index:1300",
|
||||
"pointer-events:none",
|
||||
].join(";");
|
||||
document.body.appendChild(ghost);
|
||||
positionPointerFollowGhost(ghost, clientX, clientY, grabOffsetX, grabOffsetY);
|
||||
return ghost;
|
||||
}
|
||||
|
||||
const ghost = document.createElement("div");
|
||||
ghost.id = "recipe-card-drag-ghost-root";
|
||||
ghost.className = "recipe-card-drag-ghost recipe-card-drag-ghost--follow";
|
||||
ghost.setAttribute("aria-hidden", "true");
|
||||
mountRecipeCardSkeletonInner(ghost);
|
||||
ghost.style.width = `${Math.round(Math.min(Math.max(item.offsetWidth, 200), 640))}px`;
|
||||
document.body.appendChild(ghost);
|
||||
positionPointerFollowGhost(ghost, clientX, clientY);
|
||||
return ghost;
|
||||
}
|
||||
|
||||
function positionPointerFollowGhost(ghost, clientX, clientY, grabOffsetX = null, grabOffsetY = null) {
|
||||
if (!ghost) return;
|
||||
if (grabOffsetX != null && grabOffsetY != null) {
|
||||
ghost.style.left = `${clientX - grabOffsetX}px`;
|
||||
ghost.style.top = `${clientY - grabOffsetY}px`;
|
||||
ghost.style.transform = "none";
|
||||
return;
|
||||
}
|
||||
ghost.style.left = `${clientX}px`;
|
||||
ghost.style.top = `${clientY}px`;
|
||||
ghost.style.transform = "translate(-50%, -50%)";
|
||||
}
|
||||
|
||||
function slotPickActive() {
|
||||
return Boolean(document.querySelector(".recipe-transfer-slot"));
|
||||
}
|
||||
|
||||
function clearDropTargets(listRoot) {
|
||||
listRoot.querySelectorAll(".list-item.recipe-card-drop-target").forEach((el) => {
|
||||
el.classList.remove("recipe-card-drop-target");
|
||||
});
|
||||
removeInsertIndicator(listRoot);
|
||||
}
|
||||
|
||||
function updateInsertIndicator(listRoot, draggingItem, clientY) {
|
||||
if (!isMobileReorderUi()) return;
|
||||
const items = getRecipeListItems(listRoot);
|
||||
if (!items.length) return;
|
||||
|
||||
let line = listRoot.querySelector(":scope > .recipe-card-insert-indicator");
|
||||
if (!line) {
|
||||
line = document.createElement("div");
|
||||
line.className = "recipe-card-insert-indicator";
|
||||
line.setAttribute("aria-hidden", "true");
|
||||
listRoot.appendChild(line);
|
||||
}
|
||||
|
||||
const insertIndex = resolveRawInsertIndexAtY(listRoot, clientY);
|
||||
let yInList;
|
||||
|
||||
if (insertIndex >= items.length) {
|
||||
const last = items[items.length - 1];
|
||||
yInList = last.offsetTop + last.offsetHeight + 6;
|
||||
} else {
|
||||
yInList = items[insertIndex].offsetTop - 4;
|
||||
}
|
||||
|
||||
line.style.top = `${yInList}px`;
|
||||
line.hidden = false;
|
||||
}
|
||||
|
||||
function highlightDropTarget(listRoot, draggingItem, clientY) {
|
||||
clearDropTargets(listRoot);
|
||||
if (isMobileReorderUi()) {
|
||||
updateInsertIndicator(listRoot, draggingItem, clientY);
|
||||
return;
|
||||
}
|
||||
const items = getRecipeListItems(listRoot);
|
||||
for (const item of items) {
|
||||
if (item === draggingItem) continue;
|
||||
const rect = item.getBoundingClientRect();
|
||||
if (clientY >= rect.top && clientY <= rect.bottom) {
|
||||
item.classList.add("recipe-card-drop-target");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function configureMobileDragHandles(listRoot) {
|
||||
if (!isMobileReorderUi()) return;
|
||||
listRoot.querySelectorAll(".recipe-drag-handle").forEach((handle) => {
|
||||
handle.setAttribute("draggable", "false");
|
||||
});
|
||||
}
|
||||
|
||||
function listCanScroll(listRoot) {
|
||||
return listRoot.scrollHeight > listRoot.clientHeight + 2;
|
||||
}
|
||||
|
||||
function getPageScrollElement() {
|
||||
return document.scrollingElement || document.documentElement;
|
||||
}
|
||||
|
||||
function pageCanScrollUp() {
|
||||
return getPageScrollElement().scrollTop > 0;
|
||||
}
|
||||
|
||||
function pageCanScrollDown() {
|
||||
const scrollEl = getPageScrollElement();
|
||||
return scrollEl.scrollTop + window.innerHeight < scrollEl.scrollHeight - 2;
|
||||
}
|
||||
|
||||
function ensureMobileEdgeScrollHints() {
|
||||
if (!isMobileReorderUi() || document.getElementById("recipe-reorder-edge-hints")) return;
|
||||
|
||||
const wrap = document.createElement("div");
|
||||
wrap.id = "recipe-reorder-edge-hints";
|
||||
wrap.className = "recipe-reorder-edge-hints";
|
||||
wrap.setAttribute("aria-hidden", "true");
|
||||
wrap.innerHTML =
|
||||
'<div class="recipe-reorder-edge-hint recipe-reorder-edge-hint--top">' +
|
||||
'<span class="recipe-list-scroll-zone-label"><i class="fas fa-chevron-up" aria-hidden="true"></i><span>К краю — вверх</span></span>' +
|
||||
"</div>" +
|
||||
'<div class="recipe-reorder-edge-hint recipe-reorder-edge-hint--bottom">' +
|
||||
'<span class="recipe-list-scroll-zone-label"><i class="fas fa-chevron-down" aria-hidden="true"></i><span>К краю — вниз</span></span>' +
|
||||
"</div>";
|
||||
document.body.appendChild(wrap);
|
||||
}
|
||||
|
||||
function updateMobileEdgeScrollHints(clientY) {
|
||||
if (!isMobileReorderUi()) return;
|
||||
const wrap = document.getElementById("recipe-reorder-edge-hints");
|
||||
if (!wrap) return;
|
||||
const vh = window.innerHeight;
|
||||
wrap.querySelector(".recipe-reorder-edge-hint--top")?.classList.toggle(
|
||||
"is-active",
|
||||
clientY < AUTO_SCROLL_EDGE_PX && pageCanScrollUp()
|
||||
);
|
||||
wrap.querySelector(".recipe-reorder-edge-hint--bottom")?.classList.toggle(
|
||||
"is-active",
|
||||
clientY > vh - AUTO_SCROLL_EDGE_PX && pageCanScrollDown()
|
||||
);
|
||||
}
|
||||
|
||||
function removeReorderUiChrome() {
|
||||
document.body.classList.remove(REORDER_TRACKING_BODY_CLASS);
|
||||
document.getElementById("recipe-reorder-edge-hints")?.remove();
|
||||
document.getElementById("recipe-reorder-floating-hint")?.remove();
|
||||
}
|
||||
|
||||
function showRecipeReorderHint() {
|
||||
if (!isMobileReorderUi() || document.getElementById("recipe-reorder-floating-hint")) return;
|
||||
|
||||
const hint = document.createElement("div");
|
||||
hint.id = "recipe-reorder-floating-hint";
|
||||
hint.className = "recipe-reorder-hint recipe-reorder-hint--floating";
|
||||
hint.setAttribute("role", "status");
|
||||
hint.textContent = "Перетащите вверх или вниз. К краю экрана — прокрутка списка.";
|
||||
document.body.appendChild(hint);
|
||||
requestAnimationFrame(() => hint.classList.add("is-visible"));
|
||||
globalThis.setTimeout(() => {
|
||||
hint.classList.remove("is-visible");
|
||||
globalThis.setTimeout(() => hint.remove(), 320);
|
||||
}, 3200);
|
||||
}
|
||||
|
||||
function autoScrollWindowAtEdge(clientY) {
|
||||
const vh = window.innerHeight;
|
||||
const scrollEl = getPageScrollElement();
|
||||
let delta = 0;
|
||||
|
||||
if (clientY < AUTO_SCROLL_EDGE_PX) {
|
||||
const speed = Math.min(
|
||||
AUTO_SCROLL_MAX_STEP,
|
||||
Math.ceil(((AUTO_SCROLL_EDGE_PX - Math.max(clientY, 0)) / AUTO_SCROLL_EDGE_PX) * AUTO_SCROLL_MAX_STEP)
|
||||
);
|
||||
delta = -Math.max(8, speed);
|
||||
} else if (clientY > vh - AUTO_SCROLL_EDGE_PX) {
|
||||
const distBottom = vh - clientY;
|
||||
const speed = Math.min(
|
||||
AUTO_SCROLL_MAX_STEP,
|
||||
Math.ceil(((AUTO_SCROLL_EDGE_PX - Math.max(distBottom, 0)) / AUTO_SCROLL_EDGE_PX) * AUTO_SCROLL_MAX_STEP)
|
||||
);
|
||||
delta = Math.max(8, speed);
|
||||
}
|
||||
|
||||
if (delta === 0) return false;
|
||||
const prev = scrollEl.scrollTop;
|
||||
scrollEl.scrollTop += delta;
|
||||
return scrollEl.scrollTop !== prev;
|
||||
}
|
||||
|
||||
function autoScrollRecipeList(listRoot, clientY) {
|
||||
if (!listCanScroll(listRoot)) return false;
|
||||
const rect = listRoot.getBoundingClientRect();
|
||||
const distTop = clientY - rect.top;
|
||||
const distBottom = rect.bottom - clientY;
|
||||
let delta = 0;
|
||||
|
||||
if (distTop < AUTO_SCROLL_EDGE_PX || clientY < rect.top) {
|
||||
const speed = Math.min(
|
||||
AUTO_SCROLL_MAX_STEP,
|
||||
Math.ceil(((AUTO_SCROLL_EDGE_PX - Math.max(distTop, 0)) / AUTO_SCROLL_EDGE_PX) * AUTO_SCROLL_MAX_STEP)
|
||||
);
|
||||
delta = -Math.max(8, speed);
|
||||
} else if (distBottom < AUTO_SCROLL_EDGE_PX || clientY > rect.bottom) {
|
||||
const speed = Math.min(
|
||||
AUTO_SCROLL_MAX_STEP,
|
||||
Math.ceil(((AUTO_SCROLL_EDGE_PX - Math.max(distBottom, 0)) / AUTO_SCROLL_EDGE_PX) * AUTO_SCROLL_MAX_STEP)
|
||||
);
|
||||
delta = Math.max(8, speed);
|
||||
}
|
||||
|
||||
if (delta === 0) return false;
|
||||
listRoot.scrollTop += delta;
|
||||
return true;
|
||||
}
|
||||
|
||||
function autoScrollDuringReorder(listRoot, clientY) {
|
||||
if (isMobileReorderUi()) {
|
||||
return autoScrollWindowAtEdge(clientY);
|
||||
}
|
||||
return autoScrollRecipeList(listRoot, clientY);
|
||||
}
|
||||
|
||||
function findTouchById(touchList, touchId) {
|
||||
for (let i = 0; i < touchList.length; i++) {
|
||||
if (touchList[i].identifier === touchId) {
|
||||
return touchList[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function attachMobileTouchReorder(listRoot, { moveRecipe, notyf }) {
|
||||
let touchDrag = null;
|
||||
let dropPending = false;
|
||||
let autoScrollRaf = null;
|
||||
let touchMoveListener = null;
|
||||
let touchEndListener = null;
|
||||
|
||||
const detachTouchListeners = () => {
|
||||
if (touchMoveListener) {
|
||||
document.removeEventListener("touchmove", touchMoveListener, true);
|
||||
touchMoveListener = null;
|
||||
}
|
||||
if (touchEndListener) {
|
||||
document.removeEventListener("touchend", touchEndListener, true);
|
||||
document.removeEventListener("touchcancel", touchEndListener, true);
|
||||
touchEndListener = null;
|
||||
}
|
||||
};
|
||||
|
||||
const stopAutoScroll = () => {
|
||||
if (autoScrollRaf != null) {
|
||||
cancelAnimationFrame(autoScrollRaf);
|
||||
autoScrollRaf = null;
|
||||
}
|
||||
};
|
||||
|
||||
const startAutoScroll = () => {
|
||||
stopAutoScroll();
|
||||
const tick = () => {
|
||||
if (!touchDrag?.active) {
|
||||
stopAutoScroll();
|
||||
return;
|
||||
}
|
||||
const y = touchDrag.lastY;
|
||||
autoScrollDuringReorder(listRoot, y);
|
||||
updateMobileEdgeScrollHints(y);
|
||||
highlightDropTarget(listRoot, touchDrag.item, y);
|
||||
touchDrag.dropToIndex = resolveInsertIndexAtY(listRoot, y, touchDrag.item);
|
||||
autoScrollRaf = requestAnimationFrame(tick);
|
||||
};
|
||||
autoScrollRaf = requestAnimationFrame(tick);
|
||||
};
|
||||
|
||||
const finishTouchDrag = () => {
|
||||
detachTouchListeners();
|
||||
stopAutoScroll();
|
||||
if (!touchDrag) return;
|
||||
touchDrag.item.classList.remove("recipe-card-dragging");
|
||||
listRoot.classList.remove("recipe-list-reorder-active");
|
||||
removeReorderUiChrome();
|
||||
touchDrag = null;
|
||||
clearDropTargets(listRoot);
|
||||
removeRecipeDragGhost();
|
||||
};
|
||||
|
||||
const activateTouchDrag = (touch) => {
|
||||
if (!touchDrag || touchDrag.active) return;
|
||||
touchDrag.active = true;
|
||||
touchDrag.item.classList.add("recipe-card-dragging");
|
||||
listRoot.classList.add("recipe-list-reorder-active");
|
||||
document.body.classList.add(REORDER_TRACKING_BODY_CLASS);
|
||||
listRoot.dispatchEvent(new CustomEvent("recipe-reorder-active", { bubbles: true }));
|
||||
ensureMobileEdgeScrollHints();
|
||||
showRecipeReorderHint();
|
||||
touchDrag.ghost = mountPointerFollowGhost(
|
||||
touchDrag.item,
|
||||
touch.clientX,
|
||||
touch.clientY,
|
||||
touchDrag.grabOffsetX,
|
||||
touchDrag.grabOffsetY
|
||||
);
|
||||
startAutoScroll();
|
||||
globalThis.navigator?.vibrate?.(8);
|
||||
};
|
||||
|
||||
const handleTouchMove = (e) => {
|
||||
if (!touchDrag) return;
|
||||
const touch = findTouchById(e.touches, touchDrag.touchId);
|
||||
if (!touch) return;
|
||||
|
||||
e.preventDefault();
|
||||
if (transferBlocksReorder()) {
|
||||
finishTouchDrag();
|
||||
return;
|
||||
}
|
||||
|
||||
touchDrag.lastY = touch.clientY;
|
||||
const dx = Math.abs(touch.clientX - touchDrag.startX);
|
||||
const dy = Math.abs(touch.clientY - touchDrag.startY);
|
||||
if (!touchDrag.active && dx + dy < activationThresholdPx()) return;
|
||||
|
||||
if (!touchDrag.active) {
|
||||
activateTouchDrag(touch);
|
||||
}
|
||||
|
||||
positionPointerFollowGhost(
|
||||
touchDrag.ghost,
|
||||
touch.clientX,
|
||||
touch.clientY,
|
||||
touchDrag.grabOffsetX,
|
||||
touchDrag.grabOffsetY
|
||||
);
|
||||
updateMobileEdgeScrollHints(touch.clientY);
|
||||
highlightDropTarget(listRoot, touchDrag.item, touch.clientY);
|
||||
touchDrag.dropToIndex = resolveInsertIndexAtY(listRoot, touch.clientY, touchDrag.item);
|
||||
};
|
||||
|
||||
const handleTouchEnd = (e) => {
|
||||
if (!touchDrag) return;
|
||||
const touch = findTouchById(e.changedTouches, touchDrag.touchId);
|
||||
if (!touch) return;
|
||||
|
||||
const { item, active, dropToIndex } = touchDrag;
|
||||
finishTouchDrag();
|
||||
|
||||
if (!active || dropPending) return;
|
||||
if (transferBlocksReorder() && slotPickActive()) return;
|
||||
|
||||
const indices =
|
||||
resolveReorderDropIndex(listRoot, touch, item) ||
|
||||
resolveTrackedReorderDropIndex(listRoot, item, dropToIndex);
|
||||
if (!indices) return;
|
||||
|
||||
void moveRecipe(item.dataset.recipeId, indices.fromIndex, indices.toIndex);
|
||||
};
|
||||
|
||||
listRoot.addEventListener("recipe-transfer-armed", () => {
|
||||
if (touchDrag?.active) {
|
||||
finishTouchDrag();
|
||||
} else if (touchDrag) {
|
||||
detachTouchListeners();
|
||||
removeReorderUiChrome();
|
||||
touchDrag = null;
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof MutationObserver !== "undefined") {
|
||||
const handleObserver = new MutationObserver(() => configureMobileDragHandles(listRoot));
|
||||
handleObserver.observe(listRoot, { childList: true });
|
||||
configureMobileDragHandles(listRoot);
|
||||
}
|
||||
|
||||
listRoot.addEventListener(
|
||||
"touchstart",
|
||||
(e) => {
|
||||
if (e.touches.length !== 1) return;
|
||||
if (transferBlocksReorder()) return;
|
||||
const handle = e.target.closest(".recipe-drag-handle");
|
||||
if (!handle || !listRoot.contains(handle)) return;
|
||||
const item = handle.closest(".list-item[data-recipe-id]");
|
||||
if (!item || item.dataset.index === undefined) return;
|
||||
|
||||
const touch = e.touches[0];
|
||||
const handleRect = handle.getBoundingClientRect();
|
||||
touchDrag = {
|
||||
item,
|
||||
touchId: touch.identifier,
|
||||
startX: touch.clientX,
|
||||
startY: touch.clientY,
|
||||
lastY: touch.clientY,
|
||||
grabOffsetX: touch.clientX - handleRect.left,
|
||||
grabOffsetY: touch.clientY - handleRect.top,
|
||||
active: false,
|
||||
ghost: null,
|
||||
dropToIndex: null,
|
||||
};
|
||||
e.stopPropagation();
|
||||
touchMoveListener = handleTouchMove;
|
||||
touchEndListener = handleTouchEnd;
|
||||
document.addEventListener("touchmove", touchMoveListener, { capture: true, passive: false });
|
||||
document.addEventListener("touchend", touchEndListener, { capture: true });
|
||||
document.addEventListener("touchcancel", touchEndListener, { capture: true });
|
||||
},
|
||||
{ capture: true, passive: true }
|
||||
);
|
||||
}
|
||||
|
||||
function attachPointerReorder(listRoot, { moveRecipe, notyf }) {
|
||||
if (isMobileReorderUi()) {
|
||||
attachMobileTouchReorder(listRoot, { moveRecipe, notyf });
|
||||
return;
|
||||
}
|
||||
|
||||
let pointerDrag = null;
|
||||
let dropPending = false;
|
||||
let autoScrollRaf = null;
|
||||
let documentDragMove = null;
|
||||
let documentDragEnd = null;
|
||||
|
||||
const detachDocumentDragListeners = () => {
|
||||
if (documentDragMove) {
|
||||
document.removeEventListener("pointermove", documentDragMove, true);
|
||||
documentDragMove = null;
|
||||
}
|
||||
if (documentDragEnd) {
|
||||
document.removeEventListener("pointerup", documentDragEnd, true);
|
||||
document.removeEventListener("pointercancel", documentDragEnd, true);
|
||||
documentDragEnd = null;
|
||||
}
|
||||
};
|
||||
|
||||
const stopAutoScroll = () => {
|
||||
if (autoScrollRaf != null) {
|
||||
cancelAnimationFrame(autoScrollRaf);
|
||||
autoScrollRaf = null;
|
||||
}
|
||||
};
|
||||
|
||||
const startAutoScroll = () => {
|
||||
stopAutoScroll();
|
||||
const tick = () => {
|
||||
if (!pointerDrag?.active) {
|
||||
stopAutoScroll();
|
||||
return;
|
||||
}
|
||||
const y = pointerDrag.lastY;
|
||||
autoScrollDuringReorder(listRoot, y);
|
||||
highlightDropTarget(listRoot, pointerDrag.item, y);
|
||||
pointerDrag.dropToIndex = resolveInsertIndexAtY(listRoot, y, pointerDrag.item);
|
||||
autoScrollRaf = requestAnimationFrame(tick);
|
||||
};
|
||||
autoScrollRaf = requestAnimationFrame(tick);
|
||||
};
|
||||
|
||||
const finishPointerDrag = () => {
|
||||
detachDocumentDragListeners();
|
||||
stopAutoScroll();
|
||||
if (!pointerDrag) return;
|
||||
pointerDrag.item.classList.remove("recipe-card-dragging");
|
||||
listRoot.classList.remove("recipe-list-reorder-active");
|
||||
removeReorderUiChrome();
|
||||
pointerDrag = null;
|
||||
clearDropTargets(listRoot);
|
||||
removeRecipeDragGhost();
|
||||
};
|
||||
|
||||
const isOverTransferHoverTarget = (clientX, clientY) => {
|
||||
const el = document.elementFromPoint(clientX, clientY);
|
||||
return !!(
|
||||
el?.closest("#periodsList .list-item[data-period-id]") ||
|
||||
el?.closest("#dispensersList .list-item[data-dispenser-id]")
|
||||
);
|
||||
};
|
||||
|
||||
const handlePointerMove = (e) => {
|
||||
if (!pointerDrag || e.pointerId !== pointerDrag.pointerId) return;
|
||||
if (transferBlocksReorder()) {
|
||||
finishPointerDrag();
|
||||
return;
|
||||
}
|
||||
if (!pointerDrag.active && isOverTransferHoverTarget(e.clientX, e.clientY)) {
|
||||
pointerDrag.lastY = e.clientY;
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
pointerDrag.lastY = e.clientY;
|
||||
const dx = Math.abs(e.clientX - pointerDrag.startX);
|
||||
const dy = Math.abs(e.clientY - pointerDrag.startY);
|
||||
if (!pointerDrag.active && dx + dy < activationThresholdPx()) return;
|
||||
|
||||
if (!pointerDrag.active) {
|
||||
pointerDrag.active = true;
|
||||
pointerDrag.item.classList.add("recipe-card-dragging");
|
||||
listRoot.classList.add("recipe-list-reorder-active");
|
||||
listRoot.dispatchEvent(new CustomEvent("recipe-reorder-active", { bubbles: true }));
|
||||
pointerDrag.ghost = mountPointerFollowGhost(
|
||||
pointerDrag.item,
|
||||
e.clientX,
|
||||
e.clientY,
|
||||
pointerDrag.grabOffsetX,
|
||||
pointerDrag.grabOffsetY
|
||||
);
|
||||
startAutoScroll();
|
||||
}
|
||||
|
||||
positionPointerFollowGhost(
|
||||
pointerDrag.ghost,
|
||||
e.clientX,
|
||||
e.clientY,
|
||||
pointerDrag.grabOffsetX,
|
||||
pointerDrag.grabOffsetY
|
||||
);
|
||||
updateMobileEdgeScrollHints(e.clientY);
|
||||
highlightDropTarget(listRoot, pointerDrag.item, e.clientY);
|
||||
pointerDrag.dropToIndex = resolveInsertIndexAtY(listRoot, e.clientY, pointerDrag.item);
|
||||
};
|
||||
|
||||
const onPointerEnd = (e) => {
|
||||
if (!pointerDrag || e.pointerId !== pointerDrag.pointerId) return;
|
||||
|
||||
const { item, active, dropToIndex } = pointerDrag;
|
||||
finishPointerDrag();
|
||||
|
||||
if (!active || dropPending) return;
|
||||
if (transferBlocksReorder() && slotPickActive()) return;
|
||||
|
||||
const indices =
|
||||
resolveReorderDropIndex(listRoot, e, item) ||
|
||||
resolveTrackedReorderDropIndex(listRoot, item, dropToIndex);
|
||||
if (!indices) return;
|
||||
|
||||
void moveRecipe(item.dataset.recipeId, indices.fromIndex, indices.toIndex);
|
||||
};
|
||||
|
||||
const attachDocumentDragListeners = () => {
|
||||
if (documentDragMove) return;
|
||||
documentDragMove = handlePointerMove;
|
||||
documentDragEnd = onPointerEnd;
|
||||
document.addEventListener("pointermove", documentDragMove, { capture: true, passive: false });
|
||||
document.addEventListener("pointerup", documentDragEnd, { capture: true });
|
||||
document.addEventListener("pointercancel", documentDragEnd, { capture: true });
|
||||
};
|
||||
|
||||
const cancelPointerDrag = () => {
|
||||
if (!pointerDrag) return;
|
||||
if (pointerDrag.active) return;
|
||||
finishPointerDrag();
|
||||
};
|
||||
|
||||
listRoot.addEventListener("recipe-list-drag-cancel", cancelPointerDrag);
|
||||
|
||||
listRoot.addEventListener("recipe-transfer-armed", () => {
|
||||
if (pointerDrag && !pointerDrag.active) {
|
||||
detachDocumentDragListeners();
|
||||
pointerDrag = null;
|
||||
} else if (pointerDrag?.active) {
|
||||
finishPointerDrag();
|
||||
}
|
||||
});
|
||||
|
||||
listRoot.addEventListener(
|
||||
"pointerdown",
|
||||
(e) => {
|
||||
if (e.pointerType === "mouse" && e.button !== 0) return;
|
||||
if (transferBlocksReorder()) return;
|
||||
const handle = e.target.closest(".recipe-drag-handle");
|
||||
if (!handle || !listRoot.contains(handle)) return;
|
||||
const item = handle.closest(".list-item[data-recipe-id]");
|
||||
if (!item || item.dataset.index === undefined) return;
|
||||
e.stopPropagation();
|
||||
|
||||
const handleRect = handle.getBoundingClientRect();
|
||||
pointerDrag = {
|
||||
item,
|
||||
pointerId: e.pointerId,
|
||||
startX: e.clientX,
|
||||
startY: e.clientY,
|
||||
lastY: e.clientY,
|
||||
grabOffsetX: e.clientX - handleRect.left,
|
||||
grabOffsetY: e.clientY - handleRect.top,
|
||||
active: false,
|
||||
ghost: null,
|
||||
dropToIndex: null,
|
||||
};
|
||||
attachDocumentDragListeners();
|
||||
},
|
||||
{ capture: true, passive: false }
|
||||
);
|
||||
}
|
||||
|
||||
export function attachRecipeListDragDrop(listRoot, { moveRecipe, notyf }) {
|
||||
if (!listRoot || typeof moveRecipe !== "function") return;
|
||||
|
||||
let draggingItem = null;
|
||||
let dropPending = false;
|
||||
|
||||
listRoot.addEventListener("dragstart", (e) => {
|
||||
if (isMobileReorderUi()) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (transferBlocksReorder()) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
const handle = e.target.closest(".recipe-drag-handle");
|
||||
if (!handle || !listRoot.contains(handle)) return;
|
||||
const item = handle.closest(".list-item[data-recipe-id]");
|
||||
if (!item || item.dataset.index === undefined) return;
|
||||
e.stopPropagation();
|
||||
draggingItem = item;
|
||||
item.classList.add("recipe-card-dragging");
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
e.dataTransfer.setData("text/plain", item.dataset.recipeId || "");
|
||||
mountRecipeCardDragGhost(item, e);
|
||||
});
|
||||
|
||||
listRoot.addEventListener("dragend", () => {
|
||||
removeRecipeDragGhost();
|
||||
if (draggingItem) {
|
||||
draggingItem.classList.remove("recipe-card-dragging");
|
||||
}
|
||||
draggingItem = null;
|
||||
dropPending = false;
|
||||
clearDropTargets(listRoot);
|
||||
});
|
||||
|
||||
listRoot.addEventListener("dragover", (e) => {
|
||||
if (!draggingItem) return;
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = "move";
|
||||
|
||||
const target = e.target.closest(".list-item[data-recipe-id]");
|
||||
clearDropTargets(listRoot);
|
||||
if (target && target !== draggingItem) {
|
||||
target.classList.add("recipe-card-drop-target");
|
||||
}
|
||||
});
|
||||
|
||||
listRoot.addEventListener("dragleave", (e) => {
|
||||
if (!listRoot.contains(e.relatedTarget)) {
|
||||
clearDropTargets(listRoot);
|
||||
}
|
||||
});
|
||||
|
||||
listRoot.addEventListener("drop", async (e) => {
|
||||
if (!draggingItem || dropPending) return;
|
||||
if (transferBlocksReorder() && slotPickActive()) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
clearDropTargets(listRoot);
|
||||
|
||||
const indices = resolveReorderDropIndex(listRoot, e, draggingItem);
|
||||
if (!indices) return;
|
||||
|
||||
void moveRecipe(draggingItem.dataset.recipeId, indices.fromIndex, indices.toIndex);
|
||||
});
|
||||
|
||||
const cancelHtml5Drag = () => {
|
||||
if (listRoot.classList.contains("recipe-list-reorder-active")) return;
|
||||
removeRecipeDragGhost();
|
||||
if (draggingItem) {
|
||||
draggingItem.classList.remove("recipe-card-dragging");
|
||||
draggingItem = null;
|
||||
}
|
||||
dropPending = false;
|
||||
clearDropTargets(listRoot);
|
||||
};
|
||||
|
||||
listRoot.addEventListener("recipe-list-drag-cancel", cancelHtml5Drag);
|
||||
|
||||
if (!listRoot.dataset.recipeDragCancelBound) {
|
||||
listRoot.dataset.recipeDragCancelBound = "1";
|
||||
document.addEventListener(
|
||||
"keydown",
|
||||
(e) => {
|
||||
if (e.key !== "Escape") return;
|
||||
cancelHtml5Drag();
|
||||
listRoot.dispatchEvent(
|
||||
new CustomEvent("recipe-list-drag-cancel", { bubbles: true })
|
||||
);
|
||||
},
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
attachPointerReorder(listRoot, { moveRecipe, notyf });
|
||||
}
|
||||
Reference in New Issue
Block a user