diff --git a/dist/swapy.d.ts b/dist/swapy.d.ts new file mode 100644 index 0000000..07b20e9 --- /dev/null +++ b/dist/swapy.d.ts @@ -0,0 +1,101 @@ +export declare type AnimationType = 'dynamic' | 'spring' | 'none'; + +export declare type BeforeSwapEvent = { + fromSlot: string; + toSlot: string; + draggingItem: string; + swapWithItem: string; +}; + +export declare type BeforeSwapHandler = (event: BeforeSwapEvent) => boolean; + +export declare type Config = { + animation: AnimationType; + enabled: boolean; + swapMode: 'hover' | 'drop'; + dragOnHold: boolean; + autoScrollOnDrag: boolean; + dragAxis: DragAxis; + manualSwap: boolean; +}; + +export declare function createSwapy(container: HTMLElement, config?: Partial): Swapy; + +declare type DragAxis = 'x' | 'y' | 'both'; + +declare function dynamicSwapy(swapy: Swapy | null, items: Array, idField: keyof Item, slotItemMap: SlotItemMapArray, setSlotItemMap: (slotItemMap: SlotItemMapArray) => void, removeItemOnly?: boolean): void; + +export declare function getClosestScrollableContainer(element: HTMLElement): HTMLElement | Window; + +declare function initSlotItemMap(items: Array, idField: keyof Item): SlotItemMapArray; + +export declare type SlotItemMap = { + asObject: SlotItemMapObject; + asMap: SlotItemMapMap; + asArray: SlotItemMapArray; +}; + +export declare type SlotItemMapArray = Array<{ + slot: string; + item: string; +}>; + +export declare type SlotItemMapMap = Map; + +export declare type SlotItemMapObject = Record; + +declare type SlottedItems = Array<{ + slotId: string; + itemId: string; + item: Item | null; +}>; + +export declare type SwapEndEvent = { + slotItemMap: SlotItemMap; + hasChanged: boolean; +}; + +export declare type SwapEndEventHandler = (event: SwapEndEvent) => void; + +export declare type SwapEvent = { + oldSlotItemMap: SlotItemMap; + newSlotItemMap: SlotItemMap; + fromSlot: string; + toSlot: string; + draggingItem: string; + swappedWithItem: string; +}; + +export declare type SwapEventHandler = (event: SwapEvent) => void; + +export declare type SwapStartEvent = { + slotItemMap: SlotItemMap; + draggingItem: string; + fromSlot: string; +}; + +export declare type SwapStartEventHandler = (event: SwapStartEvent) => void; + +export declare interface Swapy { + enable(enabled: boolean): void; + onSwapStart(handler: SwapStartEventHandler): void; + onSwap(handler: SwapEventHandler): void; + onSwapEnd(handler: SwapEndEventHandler): void; + onBeforeSwap(handler: BeforeSwapHandler): void; + slotItemMap(): SlotItemMap; + update(): void; + destroy(): void; +} + +declare function toSlottedItems(items: Array, idField: keyof Item, slotItemMap: SlotItemMapArray): SlottedItems; + +export declare namespace utils { + export { + toSlottedItems, + initSlotItemMap, + dynamicSwapy, + SlottedItems + } +} + +export { } diff --git a/dist/swapy.js b/dist/swapy.js new file mode 100644 index 0000000..7f8a772 --- /dev/null +++ b/dist/swapy.js @@ -0,0 +1,1191 @@ +function rt(t) { + return typeof t == "object" && t !== null && "x" in t && "y" in t && "unit" in t && typeof t.unit == "string" && typeof t.x == "object" && typeof t.y == "object" && "topLeft" in t.x && "topRight" in t.x && "bottomRight" in t.x && "bottomLeft" in t.x && "topLeft" in t.y && "topRight" in t.y && "bottomRight" in t.y && "bottomLeft" in t.y; +} +function gt(t) { + var h; + const e = t.match(/(\d+(?:\.\d+)?)(px|%)/g); + if (!e) + return { + x: { topLeft: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 }, + y: { topLeft: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 }, + unit: "px" + }; + const n = e.map((s) => { + const [c, f, m] = s.match(/(\d+(?:\.\d+)?)(px|%)/) ?? []; + return { value: parseFloat(f), unit: m }; + }), o = ((h = n[0]) == null ? void 0 : h.unit) || "px"; + if (n.some((s) => s.unit !== o)) + throw new Error("Inconsistent units in border-radius string."); + const [l, i, d, u] = n.map((s) => s.value), a = { + topLeft: l ?? 0, + topRight: i ?? l ?? 0, + bottomRight: d ?? l ?? 0, + bottomLeft: u ?? i ?? l ?? 0 + }; + return { + x: { ...a }, + y: { ...a }, + unit: o + }; +} +function ht({ x: t, y: e, unit: n }, o, l) { + if (n === "px") { + const i = { + topLeft: t.topLeft / o, + topRight: t.topRight / o, + bottomLeft: t.bottomLeft / o, + bottomRight: t.bottomRight / o + }, d = { + topLeft: e.topLeft / l, + topRight: e.topRight / l, + bottomLeft: e.bottomLeft / l, + bottomRight: e.bottomRight / l + }; + return { x: i, y: d, unit: "px" }; + } else if (n === "%") + return { x: t, y: e, unit: "%" }; + return { x: t, y: e, unit: n }; +} +function z(t) { + return ` + ${t.x.topLeft}${t.unit} ${t.x.topRight}${t.unit} ${t.x.bottomRight}${t.unit} ${t.x.bottomLeft}${t.unit} + / + ${t.y.topLeft}${t.unit} ${t.y.topRight}${t.unit} ${t.y.bottomRight}${t.unit} ${t.y.bottomLeft}${t.unit} + `; +} +function it(t) { + return t.x.topLeft === 0 && t.x.topRight === 0 && t.x.bottomRight === 0 && t.x.bottomLeft === 0 && t.y.topLeft === 0 && t.y.topRight === 0 && t.y.bottomRight === 0 && t.y.bottomLeft === 0; +} +function at(t) { + return typeof t == "object" && "x" in t && "y" in t; +} +function R(t, e) { + return { x: t, y: e }; +} +function xt(t, e) { + return R(t.x + e.x, t.y + e.y); +} +function vt(t, e) { + return R(t.x - e.x, t.y - e.y); +} +function It(t, e) { + return R(t.x * e, t.y * e); +} +function C(t, e, n) { + return t + (e - t) * n; +} +function At(t, e, n) { + return xt(t, It(vt(e, t), n)); +} +function pt(t, e, n) { + return { + x: { + topLeft: C(t.x.topLeft, e.x.topLeft, n), + topRight: C(t.x.topRight, e.x.topRight, n), + bottomRight: C(t.x.bottomRight, e.x.bottomRight, n), + bottomLeft: C(t.x.bottomLeft, e.x.bottomLeft, n) + }, + y: { + topLeft: C(t.y.topLeft, e.y.topLeft, n), + topRight: C(t.y.topRight, e.y.topRight, n), + bottomRight: C(t.y.bottomRight, e.y.bottomRight, n), + bottomLeft: C(t.y.bottomLeft, e.y.bottomLeft, n) + }, + unit: t.unit + }; +} +function Et(t, e, n) { + return W((n - t) / (e - t), 0, 1); +} +function V(t, e, n, o, l) { + return C(n, o, Et(t, e, l)); +} +function W(t, e, n) { + return Math.min(Math.max(t, e), n); +} +const Xt = { + duration: 350, + easing: (t) => t +}; +function yt(t, e, n, o) { + let l = !1; + const i = () => { + l = !0; + }, d = { ...Xt, ...o }; + let u; + function a(h) { + u === void 0 && (u = h); + const s = h - u, c = W(s / d.duration, 0, 1), f = Object.keys(t), m = Object.keys(e); + if (!f.every((g) => m.includes(g))) { + console.error("animate Error: `from` keys are different than `to`"); + return; + } + const v = {}; + f.forEach((g) => { + typeof t[g] == "number" && typeof e[g] == "number" ? v[g] = C( + t[g], + e[g], + d.easing(c) + ) : rt(t[g]) && rt(e[g]) ? v[g] = pt( + t[g], + e[g], + d.easing(c) + ) : at(t[g]) && at(e[g]) && (v[g] = At( + t[g], + e[g], + d.easing(c) + )); + }), n(v, c >= 1, c), c < 1 && !l && requestAnimationFrame(a); + } + return requestAnimationFrame(a), i; +} +const Tt = { + startDelay: 0 +}; +function Dt(t, e) { + const n = { ...Tt, ...e }; + let o = t.el(), l = !1, i = null, d = null, u = null, a = null, h = 0, s = 0, c = 0, f = 0, m = 0, v = 0, g = 0, T = 0, r = 0, I = 0, E = null, p; + o.addEventListener("pointerdown", w), document.body.addEventListener("pointerup", x), document.body.addEventListener("pointermove", X), document.body.addEventListener("touchmove", D, { passive: !1 }); + function w(y) { + if (l || !y.isPrimary) return; + n.startDelay > 0 ? (u == null || u({ el: y.target }), p = setTimeout(() => { + B(); + }, n.startDelay)) : B(); + function B() { + E = y.target, y.preventDefault(); + const L = t.boundingRect(), q = t.layoutRect(); + m = q.x, v = q.y, c = L.x - m, f = L.y - v, h = y.clientX - c, s = y.clientY - f, g = y.clientX, T = y.clientY, r = (y.clientX - L.x) / L.width, I = (y.clientY - L.y) / L.height, l = !0, X(y); + } + } + function A() { + const y = t.layoutRect(); + h -= m - y.x, s -= v - y.y, m = y.x, v = y.y; + } + function x(y) { + if (!l) { + p && (clearTimeout(p), p = null, a == null || a({ el: y.target })); + return; + } + if (!y.isPrimary) return; + l = !1; + const B = y.clientX - g, L = y.clientY - T; + d == null || d({ + x: c, + y: f, + pointerX: y.clientX, + pointerY: y.clientY, + width: B, + height: L, + relativeX: r, + relativeY: I, + el: E + }), E = null; + } + function X(y) { + if (!l) { + p && (clearTimeout(p), p = null, a == null || a({ el: y.target })); + return; + } + if (!y.isPrimary) return; + y.preventDefault(); + const B = y.clientX - g, L = y.clientY - T, q = c = y.clientX - h, U = f = y.clientY - s; + i == null || i({ + width: B, + height: L, + x: q, + y: U, + pointerX: y.clientX, + pointerY: y.clientY, + relativeX: r, + relativeY: I, + el: E + }); + } + function D(y) { + if (!l) return !0; + y.preventDefault(); + } + function M(y) { + i = y; + } + function H(y) { + d = y; + } + function _(y) { + u = y; + } + function P(y) { + a = y; + } + function $() { + o.removeEventListener("pointerdown", w), o = t.el(), o.addEventListener("pointerdown", w); + } + function N() { + t.el().removeEventListener("pointerdown", w), document.body.removeEventListener("pointerup", x), document.body.removeEventListener("pointermove", X), document.body.removeEventListener("touchmove", D), i = null, d = null, u = null, a = null; + } + return { + onDrag: M, + onDrop: H, + onHold: _, + onRelease: P, + onElementUpdate: $, + destroy: N, + readjust: A + }; +} +function Mt(t) { + return 1 + 2.70158 * Math.pow(t - 1, 3) + 1.70158 * Math.pow(t - 1, 2); +} +function bt(t) { + return 1 - Math.pow(1 - t, 3); +} +function k(t) { + return { + x: t.x, + y: t.y, + width: t.width, + height: t.height + }; +} +function Z(t) { + let e = t, n = 0, o = 0; + for (; e; ) + n += e.offsetTop, o += e.offsetLeft, e = e.offsetParent; + return { + x: o, + y: n, + width: t.offsetWidth, + height: t.offsetHeight + }; +} +function st(t, e) { + return t.x >= e.x && t.x <= e.x + e.width && t.y >= e.y && t.y <= e.y + e.height; +} +function Lt(t) { + let e = t, n = 0, o = 0; + for (; e; ) { + const l = (i) => { + const d = getComputedStyle(i); + return /(auto|scroll)/.test( + d.overflow + d.overflowY + d.overflowX + ); + }; + if (e === document.body) { + o += window.scrollX, n += window.scrollY; + break; + } + l(e) && (o += e.scrollLeft, n += e.scrollTop), e = e.parentElement; + } + return { x: o, y: n }; +} +function K(t) { + let e = "unread", n, o, l, i, d, u, a, h, s, c, f; + function m() { + n = t.currentTransform(), o = t.boundingRect(), l = Lt(t.el()), f = ct(t.el()).map(({ parent: I, children: E }) => ({ + parent: { + el: I, + initialRect: k(I.getBoundingClientRect()) + }, + children: E.map((p) => { + const w = p; + return w.originalBorderRadius || (w.originalBorderRadius = getComputedStyle(p).borderRadius), { + el: p, + borderRadius: gt(w.originalBorderRadius), + initialRect: k(p.getBoundingClientRect()) + }; + }) + })), e = "readInitial"; + } + function v() { + if (e !== "readInitial") + throw new Error( + "FlipView: Cannot read final values before reading initial values" + ); + s = t.layoutRect(), u = o.width / s.width, a = o.height / s.height, i = o.x - s.x - n.dragX + l.x, d = o.y - s.y - n.dragY + l.y, h = ht( + t.borderRadius(), + u, + a + ); + const r = ct(t.el()); + f = f.map( + ({ parent: E, children: p }, w) => { + const A = r[w].parent; + return { + parent: { + ...E, + el: A, + finalRect: Z(A) + }, + children: p.map((x, X) => { + const D = r[w].children[X]; + let M = Z(D); + return D.hasAttribute("data-swapy-text") && (M = { + ...M, + width: x.initialRect.width, + height: x.initialRect.height + }), { + ...x, + el: D, + finalRect: M + }; + }) + }; + } + ); + const I = { + translateX: i, + translateY: d, + scaleX: u, + scaleY: a + }; + t.el().style.transformOrigin = "0 0", t.el().style.borderRadius = z( + h + ), t.setTransform(I), c = [], f.forEach(({ parent: E, children: p }) => { + const w = p.map( + ({ el: A, initialRect: x, finalRect: X, borderRadius: D }) => Yt( + A, + x, + X, + D, + E.initialRect, + E.finalRect + ) + ); + c.push(...w); + }), e = "readFinal"; + } + function g() { + if (e !== "readFinal") + throw new Error("FlipView: Cannot get transition values before reading"); + return { + from: { + width: o.width, + height: o.height, + translate: R(i, d), + scale: R(u, a), + borderRadius: h + }, + to: { + width: s.width, + height: s.height, + translate: R(0, 0), + scale: R(1, 1), + borderRadius: t.borderRadius() + } + }; + } + function T() { + if (e !== "readFinal") + throw new Error( + "FlipView: Cannot get children transition values before reading" + ); + return c; + } + return { + readInitial: m, + readFinalAndReverse: v, + transitionValues: g, + childrenTransitionData: T + }; +} +function Yt(t, e, n, o, l, i) { + t.style.transformOrigin = "0 0"; + const d = l.width / i.width, u = l.height / i.height, a = e.width / n.width, h = e.height / n.height, s = ht( + o, + a, + h + ), c = e.x - l.x, f = n.x - i.x, m = e.y - l.y, v = n.y - i.y, g = (c - f * d) / d, T = (m - v * u) / u; + return t.style.transform = `translate(${g}px, ${T}px) scale(${a / d}, ${h / u})`, t.style.borderRadius = z(s), { + el: t, + fromTranslate: R(g, T), + fromScale: R(a, h), + fromBorderRadius: s, + toBorderRadius: o, + parentScale: { x: d, y: u } + }; +} +function ct(t) { + const e = []; + function n(o) { + const l = Array.from(o.children); + l.length > 0 && (e.push({ + parent: o, + children: l + }), l.forEach((i) => n(i))); + } + return n(t), e; +} +function mt(t) { + const e = []; + let n = t, o = { + dragX: 0, + dragY: 0, + translateX: 0, + translateY: 0, + scaleX: 1, + scaleY: 1 + }; + const l = gt( + window.getComputedStyle(n).borderRadius + ), i = { + el: () => n, + setTransform: d, + clearTransform: u, + currentTransform: () => o, + borderRadius: () => l, + layoutRect: () => Z(n), + boundingRect: () => k(n.getBoundingClientRect()), + usePlugin: h, + destroy: s, + updateElement: c + }; + function d(f) { + o = { ...o, ...f }, a(); + } + function u() { + o = { + dragX: 0, + dragY: 0, + translateX: 0, + translateY: 0, + scaleX: 1, + scaleY: 1 + }, a(); + } + function a() { + const { dragX: f, dragY: m, translateX: v, translateY: g, scaleX: T, scaleY: r } = o; + f === 0 && m === 0 && v === 0 && g === 0 && T === 1 && r === 1 ? n.style.transform = "" : n.style.transform = `translate(${f + v}px, ${m + g}px) scale(${T}, ${r})`; + } + function h(f, m) { + const v = f(i, m); + return e.push(v), v; + } + function s() { + e.forEach((f) => f.destroy()); + } + function c(f) { + if (!f) return; + const m = n.style.cssText; + n = f, n.style.cssText = m, e.forEach((v) => v.onElementUpdate()); + } + return i; +} +function Ct(t, e, n) { + return n.map((o) => ({ + slotId: o.slot, + itemId: o.item, + item: o.item === "" ? null : t.find((l) => o.item === l[e]) + })); +} +function Rt(t, e) { + return t.map((n) => ({ + item: n[e], + slot: n[e] + })); +} +function Ht(t, e, n, o, l, i = !1) { + const d = e.filter( + (h) => !o.some((s) => s.item === h[n]) + ).map((h) => ({ + slot: h[n], + item: h[n] + })); + let u; + i ? u = o.map((h) => e.some((s) => s[n] === h.item) ? h : { slot: h.slot, item: "" }) : u = o.filter( + (h) => e.some((s) => s[n] === h.item) || !h.item + ); + const a = [ + ...u, + ...d + ]; + l(a), (d.length > 0 || u.length !== o.length) && requestAnimationFrame(() => { + t == null || t.update(); + }); +} +const jt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + dynamicSwapy: Ht, + initSlotItemMap: Rt, + toSlottedItems: Ct +}, Symbol.toStringTag, { value: "Module" })), $t = { + animation: "dynamic", + enabled: !0, + swapMode: "hover", + dragOnHold: !1, + autoScrollOnDrag: !1, + dragAxis: "both", + manualSwap: !1 +}; +function wt(t) { + switch (t) { + case "dynamic": + return { easing: bt, duration: 300 }; + case "spring": + return { easing: Mt, duration: 350 }; + case "none": + return { easing: (e) => e, duration: 1 }; + } +} +function Wt(t, e) { + const n = { ...$t, ...e }, o = Bt({ slots: [], items: [], config: n }); + let l = [], i = []; + d(); + function d() { + if (!Nt(t)) + throw new Error( + "Cannot create a Swapy instance because your HTML structure is invalid. Fix all above errors and then try!" + ); + l = Array.from(t.querySelectorAll("[data-swapy-slot]")).map( + (r) => Ot(r, o) + ), o.setSlots(l), i = Array.from(t.querySelectorAll("[data-swapy-item]")).map( + (r) => _t(r, o) + ), o.setItems(i), o.syncSlotItemMap(), i.forEach((r) => { + r.onDrag(({ pointerX: I, pointerY: E }) => { + a(); + let p = !1; + l.forEach((w) => { + const A = w.rect(); + st({ x: I, y: E }, A) && (p = !0, w.isHighlighted() || w.highlight()); + }), !p && o.config().swapMode === "drop" && r.slot().highlight(), n.swapMode === "hover" && u(r, { pointerX: I, pointerY: E }); + }), r.onDrop(({ pointerX: I, pointerY: E }) => { + h(), n.swapMode === "drop" && u(r, { pointerX: I, pointerY: E }); + }), r.onHold(() => { + a(); + }), r.onRelease(() => { + h(); + }); + }); + } + function u(r, { pointerX: I, pointerY: E }) { + l.forEach((p) => { + const w = p.rect(); + if (st({ x: I, y: E }, w)) { + if (r.id() === p.itemId()) return; + o.config().swapMode === "hover" && r.setContinuousDrag(!0); + const A = r.slot(), x = p.item(); + if (!o.eventHandlers().onBeforeSwap({ + fromSlot: A.id(), + toSlot: p.id(), + draggingItem: r.id(), + swapWithItem: (x == null ? void 0 : x.id()) || "" + })) + return; + if (o.config().manualSwap) { + const X = structuredClone(o.slotItemMap()); + o.swapItems(r, p); + const D = o.slotItemMap(), M = K(r.view()); + M.readInitial(); + const H = x ? K(x.view()) : null; + H == null || H.readInitial(); + let _ = 0, P = 0; + const $ = Q( + r.view().el() + ); + $ instanceof Window ? (_ = $.scrollY, P = $.scrollX) : (_ = $.scrollTop, P = $.scrollLeft), o.eventHandlers().onSwap({ + oldSlotItemMap: X, + newSlotItemMap: D, + fromSlot: A.id(), + toSlot: p.id(), + draggingItem: r.id(), + swappedWithItem: (x == null ? void 0 : x.id()) || "" + }), requestAnimationFrame(() => { + const N = t.querySelectorAll("[data-swapy-item]"); + o.items().forEach((y) => { + const B = Array.from(N).find( + (L) => L.dataset.swapyItem === y.id() + ); + y.view().updateElement(B); + }), o.syncSlotItemMap(), M.readFinalAndReverse(), H == null || H.readFinalAndReverse(), J(r, M), x && H && J(x, H), $.scrollTo({ + left: P, + top: _ + }); + }); + } else { + let X = 0, D = 0; + const M = Q( + r.view().el() + ); + M instanceof Window ? (X = M.scrollY, D = M.scrollX) : (X = M.scrollTop, D = M.scrollLeft), ft(r, p, !0), x && ft(x, A), M.scrollTo({ + left: D, + top: X + }); + const H = o.slotItemMap(); + o.syncSlotItemMap(); + const _ = o.slotItemMap(); + o.eventHandlers().onSwap({ + oldSlotItemMap: H, + newSlotItemMap: _, + fromSlot: A.id(), + toSlot: p.id(), + draggingItem: r.id(), + swappedWithItem: (x == null ? void 0 : x.id()) || "" + }); + } + } + }); + } + function a() { + t.querySelectorAll("img").forEach((r) => { + r.style.pointerEvents = "none"; + }), t.style.userSelect = "none", t.style.webkitUserSelect = "none"; + } + function h() { + t.querySelectorAll("img").forEach((r) => { + r.style.pointerEvents = ""; + }), t.style.userSelect = "", t.style.webkitUserSelect = ""; + } + function s(r) { + o.config().enabled = r; + } + function c(r) { + o.eventHandlers().onSwapStart = r; + } + function f(r) { + o.eventHandlers().onSwap = r; + } + function m(r) { + o.eventHandlers().onSwapEnd = r; + } + function v(r) { + o.eventHandlers().onBeforeSwap = r; + } + function g() { + T(), requestAnimationFrame(() => { + d(); + }); + } + function T() { + i.forEach((r) => r.destroy()), l.forEach((r) => r.destroy()), o.destroy(), i = [], l = []; + } + return { + enable: s, + slotItemMap: () => o.slotItemMap(), + onSwapStart: c, + onSwap: f, + onSwapEnd: m, + onBeforeSwap: v, + update: g, + destroy: T + }; +} +function Bt({ + slots: t, + items: e, + config: n +}) { + const o = { + slots: t, + items: e, + config: n, + slotItemMap: { asObject: {}, asMap: /* @__PURE__ */ new Map(), asArray: [] }, + zIndexCount: 1, + eventHandlers: { + onSwapStart: () => { + }, + onSwap: () => { + }, + onSwapEnd: () => { + }, + onBeforeSwap: () => !0 + }, + scrollOffsetWhileDragging: { x: 0, y: 0 }, + scrollHandler: null + }; + let l = { + ...o + }; + const i = (c) => { + var f; + (f = l.scrollHandler) == null || f.call(l, c); + }; + window.addEventListener("scroll", i); + function d(c) { + return l.slots.find((f) => f.id() === c); + } + function u(c) { + return l.items.find((f) => f.id() === c); + } + function a() { + const c = {}, f = /* @__PURE__ */ new Map(), m = []; + l.slots.forEach((v) => { + var r; + const g = v.id(), T = ((r = v.item()) == null ? void 0 : r.id()) || ""; + c[g] = T, f.set(g, T), m.push({ slot: g, item: T }); + }), l.slotItemMap = { asObject: c, asMap: f, asArray: m }; + } + function h(c, f) { + var p; + const m = l.slotItemMap, v = c.id(), g = ((p = f.item()) == null ? void 0 : p.id()) || "", T = f.id(), r = c.slot().id(); + m.asObject[T] = v, m.asObject[r] = g, m.asMap.set(T, v), m.asMap.set(r, g); + const I = m.asArray.findIndex( + (w) => w.slot === T + ), E = m.asArray.findIndex( + (w) => w.slot === r + ); + m.asArray[I].item = v, m.asArray[E].item = g; + } + function s() { + window.removeEventListener("scroll", i), l = { ...o }; + } + return { + slots: () => l.slots, + items: () => l.items, + config: () => n, + setItems: (c) => l.items = c, + setSlots: (c) => l.slots = c, + slotById: d, + itemById: u, + zIndex: (c = !1) => c ? ++l.zIndexCount : l.zIndexCount, + resetZIndex: () => { + l.zIndexCount = 1; + }, + eventHandlers: () => l.eventHandlers, + syncSlotItemMap: a, + slotItemMap: () => l.slotItemMap, + onScroll: (c) => { + l.scrollHandler = c; + }, + swapItems: h, + destroy: s + }; +} +function Ot(t, e) { + const n = mt(t); + function o() { + return n.el().dataset.swapySlot; + } + function l() { + const s = n.el().children[0]; + return (s == null ? void 0 : s.dataset.swapyItem) || null; + } + function i() { + return k(n.el().getBoundingClientRect()); + } + function d() { + const s = n.el().children[0]; + if (s) + return e.itemById(s.dataset.swapyItem); + } + function u() { + e.slots().forEach((s) => { + s.view().el().removeAttribute("data-swapy-highlighted"); + }); + } + function a() { + u(), n.el().setAttribute("data-swapy-highlighted", ""); + } + function h() { + } + return { + id: o, + view: () => n, + itemId: l, + rect: i, + item: d, + highlight: a, + unhighlightAllSlots: u, + isHighlighted: () => n.el().hasAttribute("data-swapy-highlighted"), + destroy: h + }; +} +function _t(t, e) { + const n = mt(t), o = {}; + let l = null, i = null, d = !1, u = !0, a; + const h = Pt(); + let s = () => { + }, c = () => { + }, f = () => { + }, m = () => { + }; + const { onDrag: v, onDrop: g, onHold: T, onRelease: r } = n.usePlugin(Dt, { + startDelay: e.config().dragOnHold ? 400 : 0 + }), I = R(0, 0), E = R(0, 0), p = R(0, 0), w = R(0, 0); + let A = null, x = null; + T((S) => { + e.config().enabled && (N() && !$(S.el) || L() && B(S.el) || f == null || f(S)); + }), r((S) => { + e.config().enabled && (N() && !$(S.el) || L() && B(S.el) || m == null || m(S)); + }); + function X(S) { + var Y; + q(), G().highlight(), (Y = o.drop) == null || Y.call(o), e.slots().forEach((O) => { + const F = O.view().boundingRect(); + O.view().el().style.width = `${F.width}px`, O.view().el().style.flexShrink = "0", O.view().el().style.height = `${F.height}px`; + }); + const b = e.slotItemMap(); + e.eventHandlers().onSwapStart({ + draggingItem: tt(), + fromSlot: et(), + slotItemMap: b + }), i = b, n.el().style.position = "relative", n.el().style.zIndex = `${e.zIndex(!0)}`, A = Q(S.el), e.config().autoScrollOnDrag && (l = Ft( + A, + e.config().dragAxis + ), l.updatePointer({ + x: S.pointerX, + y: S.pointerY + })), I.x = window.scrollX, I.y = window.scrollY, p.x = 0, p.y = 0, A instanceof HTMLElement && (E.x = A.scrollLeft, E.y = A.scrollTop, x = () => { + w.x = A.scrollLeft - E.x, w.y = A.scrollTop - E.y, n.setTransform({ + dragX: ((a == null ? void 0 : a.width) || 0) + p.x + w.x, + dragY: ((a == null ? void 0 : a.height) || 0) + p.y + w.y + }); + }, A.addEventListener("scroll", x)), e.onScroll(() => { + p.x = window.scrollX - I.x, p.y = window.scrollY - I.y; + const O = w.x || 0, F = w.y || 0; + n.setTransform({ + dragX: ((a == null ? void 0 : a.width) || 0) + p.x + O, + dragY: ((a == null ? void 0 : a.height) || 0) + p.y + F + }); + }); + } + v((S) => { + var b; + if (e.config().enabled) { + if (!d) { + if (N() && !$(S.el) || L() && B(S.el)) + return; + X(S); + } + d = !0, l && l.updatePointer({ + x: S.pointerX, + y: S.pointerY + }), a = S, (b = o.drop) == null || b.call(o), h(() => { + n.el().style.position = "relative"; + const Y = S.width + p.x + w.x, O = S.height + p.y + w.y; + e.config().dragAxis === "y" ? n.setTransform({ + dragY: O + }) : e.config().dragAxis === "x" ? n.setTransform({ + dragX: Y + }) : n.setTransform({ + dragX: Y, + dragY: O + }), s == null || s(S); + }); + } + }), g((S) => { + if (!d) return; + U(), d = !1, u = !1, a = null, A && (A.removeEventListener("scroll", x), x = null), A = null, w.x = 0, w.y = 0, p.x = 0, p.y = 0, l && (l.destroy(), l = null), G().unhighlightAllSlots(), c == null || c(S), e.eventHandlers().onSwapEnd({ + slotItemMap: e.slotItemMap(), + hasChanged: i != null && i.asMap ? !qt( + i == null ? void 0 : i.asMap, + e.slotItemMap().asMap + ) : !1 + }), i = null, e.onScroll(null), e.slots().forEach((Y) => { + Y.view().el().style.width = "", Y.view().el().style.flexShrink = "", Y.view().el().style.height = ""; + }), e.config().manualSwap && e.config().swapMode === "drop" ? requestAnimationFrame(b) : b(); + function b() { + const Y = n.currentTransform(), O = Y.dragX + Y.translateX, F = Y.dragY + Y.translateY; + o.drop = yt( + { translate: R(O, F) }, + { translate: R(0, 0) }, + ({ translate: nt }, ot) => { + ot ? d || (n.clearTransform(), n.el().style.transformOrigin = "") : n.setTransform({ + dragX: 0, + dragY: 0, + translateX: nt.x, + translateY: nt.y + }), ot && (e.items().forEach((lt) => { + lt.isDragging() || (lt.view().el().style.zIndex = ""); + }), e.resetZIndex(), n.el().style.position = "", u = !0); + }, + wt(e.config().animation) + ); + } + }); + function D(S) { + s = S; + } + function M(S) { + c = S; + } + function H(S) { + f = S; + } + function _(S) { + m = S; + } + function P() { + return n.el().querySelector("[data-swapy-handle]"); + } + function $(S) { + const b = P(); + return b ? b === S || b.contains(S) : !1; + } + function N() { + return P() !== null; + } + function y() { + return Array.from(n.el().querySelectorAll("[data-swapy-no-drag]")); + } + function B(S) { + const b = y(); + return !b || b.length === 0 ? !1 : b.includes(S) || b.some((Y) => Y.contains(S)); + } + function L() { + return y().length > 0; + } + function q() { + n.el().setAttribute("data-swapy-dragging", ""); + } + function U() { + n.el().removeAttribute("data-swapy-dragging"); + } + function St() { + s = null, c = null, f = null, m = null, a = null, i = null, l && (l.destroy(), l = null), A && x && A.removeEventListener("scroll", x), n.destroy(); + } + function tt() { + return n.el().dataset.swapyItem; + } + function G() { + return e.slotById(n.el().parentElement.dataset.swapySlot); + } + function et() { + return n.el().parentElement.dataset.swapySlot; + } + return { + id: tt, + view: () => n, + slot: G, + slotId: et, + onDrag: D, + onDrop: M, + onHold: H, + onRelease: _, + destroy: St, + isDragging: () => d, + cancelAnimation: () => o, + dragEvent: () => a, + store: () => e, + continuousDrag: () => u, + setContinuousDrag: (S) => u = S + }; +} +function ft(t, e, n = !1) { + if (n) { + const l = e.item(); + l && (e.view().el().style.position = "relative", l.view().el().style.position = "absolute"); + } else { + const l = t.slot(); + l.view().el().style.position = "", t.view().el().style.position = ""; + } + if (!t) + return; + const o = K(t.view()); + o.readInitial(), e.view().el().appendChild(t.view().el()), o.readFinalAndReverse(), J(t, o); +} +function Pt() { + let t = !1; + return (e) => { + t || (t = !0, requestAnimationFrame(() => { + e(), t = !1; + })); + }; +} +function J(t, e) { + var u, a, h, s; + (a = (u = t.cancelAnimation()).moveToSlot) == null || a.call(u), (s = (h = t.cancelAnimation()).drop) == null || s.call(h); + const n = wt(t.store().config().animation), o = e.transitionValues(); + let l = t.view().currentTransform(), i = 0, d = !1; + t.cancelAnimation().moveToSlot = yt( + { + translate: o.from.translate, + scale: o.from.scale, + borderRadius: o.from.borderRadius + }, + { + translate: o.to.translate, + scale: o.to.scale, + borderRadius: o.to.borderRadius + }, + ({ translate: c, scale: f, borderRadius: m }, v, g) => { + if (t.isDragging()) { + i !== 0 && (d = !0); + const r = t.dragEvent().relativeX, I = t.dragEvent().relativeY; + t.continuousDrag() ? t.view().setTransform({ + translateX: C( + l.translateX, + l.translateX + (o.from.width - o.to.width) * r, + n.easing(g - i) + ), + translateY: C( + l.translateY, + l.translateY + (o.from.height - o.to.height) * I, + n.easing(g - i) + ), + scaleX: f.x, + scaleY: f.y + }) : t.view().setTransform({ scaleX: f.x, scaleY: f.y }); + } else + l = t.view().currentTransform(), i = g, d ? t.view().setTransform({ + scaleX: f.x, + scaleY: f.y + }) : t.view().setTransform({ + dragX: 0, + dragY: 0, + translateX: c.x, + translateY: c.y, + scaleX: f.x, + scaleY: f.y + }); + const T = e.childrenTransitionData(); + T.forEach( + ({ + el: r, + fromTranslate: I, + fromScale: E, + fromBorderRadius: p, + toBorderRadius: w, + parentScale: A + }) => { + const x = C( + A.x, + 1, + n.easing(g) + ), X = C( + A.y, + 1, + n.easing(g) + ); + r.style.transform = `translate(${I.x + (0 - I.x / x) * n.easing(g)}px, ${I.y + (0 - I.y / X) * n.easing(g)}px) scale(${C( + E.x / x, + 1 / x, + n.easing(g) + )}, ${C( + E.y / X, + 1 / X, + n.easing(g) + )})`, it(p) || (r.style.borderRadius = z( + pt( + p, + w, + n.easing(g) + ) + )); + } + ), it(m) || (t.view().el().style.borderRadius = z(m)), v && (t.isDragging() || (t.view().el().style.transformOrigin = "", t.view().clearTransform()), t.view().el().style.borderRadius = "", T.forEach(({ el: r }) => { + r.style.transform = "", r.style.transformOrigin = "", r.style.borderRadius = ""; + })); + }, + n + ); +} +function j(...t) { + console.error("Swapy Error:", ...t); +} +function Nt(t) { + const e = t; + let n = !0; + const o = e.querySelectorAll("[data-swapy-slot]"); + e || (j("container passed to createSwapy() is undefined or null"), n = !1), o.forEach((u) => { + const a = u, h = a.dataset.swapySlot, s = a.children, c = s[0]; + (!h || h.length === 0) && (j(a, "does not contain a slotId using data-swapy-slot"), n = !1), s.length > 1 && (j("slot:", `"${h}"`, "cannot contain more than one element"), n = !1), c && (!c.dataset.swapyItem || c.dataset.swapyItem.length === 0) && (j( + "slot", + `"${h}"`, + "does not contain an element with an item id using data-swapy-item" + ), n = !1); + }); + const l = Array.from(o).map( + (u) => u.dataset.swapySlot + ), i = e.querySelectorAll("[data-swapy-item]"), d = Array.from(i).map( + (u) => u.dataset.swapyItem + ); + if (ut(l)) { + const u = dt(l); + j( + "your container has duplicate slot ids", + `(${u.join(", ")})` + ), n = !1; + } + if (ut(d)) { + const u = dt(d); + j( + "your container has duplicate item ids", + `(${u.join(", ")})` + ), n = !1; + } + return n; +} +function ut(t) { + return new Set(t).size !== t.length; +} +function dt(t) { + const e = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(); + for (const o of t) + e.has(o) ? n.add(o) : e.add(o); + return Array.from(n); +} +function qt(t, e) { + if (t.size !== e.size) return !1; + for (const [n, o] of t) + if (e.get(n) !== o) return !1; + return !0; +} +function Q(t) { + let e = t; + for (; e; ) { + const n = window.getComputedStyle(e), o = n.overflowY, l = n.overflowX; + if ((o === "auto" || o === "scroll") && e.scrollHeight > e.clientHeight || (l === "auto" || l === "scroll") && e.scrollWidth > e.clientWidth) + return e; + e = e.parentElement; + } + return window; +} +function Ft(t, e) { + let l = !1, i, d = 0, u = 0, a = 0, h = 0, s = 0, c = 0, f = null; + t instanceof HTMLElement ? (i = k(t.getBoundingClientRect()), d = t.scrollHeight - i.height, u = t.scrollWidth - i.width) : (i = { + x: 0, + y: 0, + width: window.innerWidth, + height: window.innerHeight + }, d = document.documentElement.scrollHeight - window.innerHeight, u = document.documentElement.scrollWidth - window.innerWidth); + function m() { + t instanceof HTMLElement ? (a = t.scrollTop, h = t.scrollLeft) : (a = window.scrollY, h = window.scrollX); + } + function v(r) { + l = !1; + const I = i.y, E = i.y + i.height, p = i.x, w = i.x + i.width, A = Math.abs(I - r.y) < Math.abs(E - r.y), x = Math.abs(p - r.x) < Math.abs(w - r.x); + if (m(), e !== "x") + if (A) { + const X = I - r.y; + if (X >= -100) { + const D = W(X, -100, 0); + s = -V(-100, 0, 0, 5, D), l = !0; + } + } else { + const X = E - r.y; + if (X <= 100) { + const D = W(X, 0, 100); + s = V(100, 0, 0, 5, D), l = !0; + } + } + if (e !== "y") + if (x) { + const X = p - r.x; + if (X >= -100) { + const D = W(X, -100, 0); + c = -V(-100, 0, 0, 5, D), l = !0; + } + } else { + const X = w - r.x; + if (X <= 100) { + const D = W(X, 0, 100); + c = V(100, 0, 0, 5, D), l = !0; + } + } + l && (f && cancelAnimationFrame(f), g()); + } + function g() { + m(), e !== "x" && (s = a + s >= d ? 0 : s), e !== "y" && (c = h + c >= u ? 0 : c), t.scrollBy({ top: s, left: c }), l && (f = requestAnimationFrame(g)); + } + function T() { + l = !1; + } + return { + updatePointer: v, + destroy: T + }; +} +export { + Wt as createSwapy, + Q as getClosestScrollableContainer, + jt as utils +}; diff --git a/dist/swapy.min.js b/dist/swapy.min.js new file mode 100644 index 0000000..5bb814d --- /dev/null +++ b/dist/swapy.min.js @@ -0,0 +1,5 @@ +(function(P,F){typeof exports=="object"&&typeof module<"u"?F(exports):typeof define=="function"&&define.amd?define(["exports"],F):(P=typeof globalThis<"u"?globalThis:P||self,F(P.Swapy={}))})(this,function(P){"use strict";function F(t){return typeof t=="object"&&t!==null&&"x"in t&&"y"in t&&"unit"in t&&typeof t.unit=="string"&&typeof t.x=="object"&&typeof t.y=="object"&&"topLeft"in t.x&&"topRight"in t.x&&"bottomRight"in t.x&&"bottomLeft"in t.x&&"topLeft"in t.y&&"topRight"in t.y&&"bottomRight"in t.y&&"bottomLeft"in t.y}function nt(t){var p;const e=t.match(/(\d+(?:\.\d+)?)(px|%)/g);if(!e)return{x:{topLeft:0,topRight:0,bottomRight:0,bottomLeft:0},y:{topLeft:0,topRight:0,bottomRight:0,bottomLeft:0},unit:"px"};const n=e.map(s=>{const[c,f,m]=s.match(/(\d+(?:\.\d+)?)(px|%)/)??[];return{value:parseFloat(f),unit:m}}),o=((p=n[0])==null?void 0:p.unit)||"px";if(n.some(s=>s.unit!==o))throw new Error("Inconsistent units in border-radius string.");const[l,i,d,u]=n.map(s=>s.value),a={topLeft:l??0,topRight:i??l??0,bottomRight:d??l??0,bottomLeft:u??i??l??0};return{x:{...a},y:{...a},unit:o}}function ot({x:t,y:e,unit:n},o,l){if(n==="px"){const i={topLeft:t.topLeft/o,topRight:t.topRight/o,bottomLeft:t.bottomLeft/o,bottomRight:t.bottomRight/o},d={topLeft:e.topLeft/l,topRight:e.topRight/l,bottomLeft:e.bottomLeft/l,bottomRight:e.bottomRight/l};return{x:i,y:d,unit:"px"}}else if(n==="%")return{x:t,y:e,unit:"%"};return{x:t,y:e,unit:n}}function U(t){return` + ${t.x.topLeft}${t.unit} ${t.x.topRight}${t.unit} ${t.x.bottomRight}${t.unit} ${t.x.bottomLeft}${t.unit} + / + ${t.y.topLeft}${t.unit} ${t.y.topRight}${t.unit} ${t.y.bottomRight}${t.unit} ${t.y.bottomLeft}${t.unit} + `}function lt(t){return t.x.topLeft===0&&t.x.topRight===0&&t.x.bottomRight===0&&t.x.bottomLeft===0&&t.y.topLeft===0&&t.y.topRight===0&&t.y.bottomRight===0&&t.y.bottomLeft===0}function rt(t){return typeof t=="object"&&"x"in t&&"y"in t}function R(t,e){return{x:t,y:e}}function xt(t,e){return R(t.x+e.x,t.y+e.y)}function vt(t,e){return R(t.x-e.x,t.y-e.y)}function It(t,e){return R(t.x*e,t.y*e)}function L(t,e,n){return t+(e-t)*n}function At(t,e,n){return xt(t,It(vt(e,t),n))}function it(t,e,n){return{x:{topLeft:L(t.x.topLeft,e.x.topLeft,n),topRight:L(t.x.topRight,e.x.topRight,n),bottomRight:L(t.x.bottomRight,e.x.bottomRight,n),bottomLeft:L(t.x.bottomLeft,e.x.bottomLeft,n)},y:{topLeft:L(t.y.topLeft,e.y.topLeft,n),topRight:L(t.y.topRight,e.y.topRight,n),bottomRight:L(t.y.bottomRight,e.y.bottomRight,n),bottomLeft:L(t.y.bottomLeft,e.y.bottomLeft,n)},unit:t.unit}}function Et(t,e,n){return j((n-t)/(e-t),0,1)}function G(t,e,n,o,l){return L(n,o,Et(t,e,l))}function j(t,e,n){return Math.min(Math.max(t,e),n)}const Tt={duration:350,easing:t=>t};function at(t,e,n,o){let l=!1;const i=()=>{l=!0},d={...Tt,...o};let u;function a(p){u===void 0&&(u=p);const s=p-u,c=j(s/d.duration,0,1),f=Object.keys(t),m=Object.keys(e);if(!f.every(g=>m.includes(g))){console.error("animate Error: `from` keys are different than `to`");return}const v={};f.forEach(g=>{typeof t[g]=="number"&&typeof e[g]=="number"?v[g]=L(t[g],e[g],d.easing(c)):F(t[g])&&F(e[g])?v[g]=it(t[g],e[g],d.easing(c)):rt(t[g])&&rt(e[g])&&(v[g]=At(t[g],e[g],d.easing(c)))}),n(v,c>=1,c),c<1&&!l&&requestAnimationFrame(a)}return requestAnimationFrame(a),i}const Xt={startDelay:0};function Dt(t,e){const n={...Xt,...e};let o=t.el(),l=!1,i=null,d=null,u=null,a=null,p=0,s=0,c=0,f=0,m=0,v=0,g=0,X=0,r=0,I=0,E=null,h;o.addEventListener("pointerdown",w),document.body.addEventListener("pointerup",x),document.body.addEventListener("pointermove",T),document.body.addEventListener("touchmove",D,{passive:!1});function w(y){if(l||!y.isPrimary)return;n.startDelay>0?(u==null||u({el:y.target}),h=setTimeout(()=>{B()},n.startDelay)):B();function B(){E=y.target,y.preventDefault();const Y=t.boundingRect(),k=t.layoutRect();m=k.x,v=k.y,c=Y.x-m,f=Y.y-v,p=y.clientX-c,s=y.clientY-f,g=y.clientX,X=y.clientY,r=(y.clientX-Y.x)/Y.width,I=(y.clientY-Y.y)/Y.height,l=!0,T(y)}}function A(){const y=t.layoutRect();p-=m-y.x,s-=v-y.y,m=y.x,v=y.y}function x(y){if(!l){h&&(clearTimeout(h),h=null,a==null||a({el:y.target}));return}if(!y.isPrimary)return;l=!1;const B=y.clientX-g,Y=y.clientY-X;d==null||d({x:c,y:f,pointerX:y.clientX,pointerY:y.clientY,width:B,height:Y,relativeX:r,relativeY:I,el:E}),E=null}function T(y){if(!l){h&&(clearTimeout(h),h=null,a==null||a({el:y.target}));return}if(!y.isPrimary)return;y.preventDefault();const B=y.clientX-g,Y=y.clientY-X,k=c=y.clientX-p,tt=f=y.clientY-s;i==null||i({width:B,height:Y,x:k,y:tt,pointerX:y.clientX,pointerY:y.clientY,relativeX:r,relativeY:I,el:E})}function D(y){if(!l)return!0;y.preventDefault()}function M(y){i=y}function H(y){d=y}function _(y){u=y}function N(y){a=y}function $(){o.removeEventListener("pointerdown",w),o=t.el(),o.addEventListener("pointerdown",w)}function q(){t.el().removeEventListener("pointerdown",w),document.body.removeEventListener("pointerup",x),document.body.removeEventListener("pointermove",T),document.body.removeEventListener("touchmove",D),i=null,d=null,u=null,a=null}return{onDrag:M,onDrop:H,onHold:_,onRelease:N,onElementUpdate:$,destroy:q,readjust:A}}function Mt(t){return 1+2.70158*Math.pow(t-1,3)+1.70158*Math.pow(t-1,2)}function bt(t){return 1-Math.pow(1-t,3)}function z(t){return{x:t.x,y:t.y,width:t.width,height:t.height}}function K(t){let e=t,n=0,o=0;for(;e;)n+=e.offsetTop,o+=e.offsetLeft,e=e.offsetParent;return{x:o,y:n,width:t.offsetWidth,height:t.offsetHeight}}function st(t,e){return t.x>=e.x&&t.x<=e.x+e.width&&t.y>=e.y&&t.y<=e.y+e.height}function Lt(t){let e=t,n=0,o=0;for(;e;){const l=i=>{const d=getComputedStyle(i);return/(auto|scroll)/.test(d.overflow+d.overflowY+d.overflowX)};if(e===document.body){o+=window.scrollX,n+=window.scrollY;break}l(e)&&(o+=e.scrollLeft,n+=e.scrollTop),e=e.parentElement}return{x:o,y:n}}function J(t){let e="unread",n,o,l,i,d,u,a,p,s,c,f;function m(){n=t.currentTransform(),o=t.boundingRect(),l=Lt(t.el()),f=ct(t.el()).map(({parent:I,children:E})=>({parent:{el:I,initialRect:z(I.getBoundingClientRect())},children:E.map(h=>{const w=h;return w.originalBorderRadius||(w.originalBorderRadius=getComputedStyle(h).borderRadius),{el:h,borderRadius:nt(w.originalBorderRadius),initialRect:z(h.getBoundingClientRect())}})})),e="readInitial"}function v(){if(e!=="readInitial")throw new Error("FlipView: Cannot read final values before reading initial values");s=t.layoutRect(),u=o.width/s.width,a=o.height/s.height,i=o.x-s.x-n.dragX+l.x,d=o.y-s.y-n.dragY+l.y,p=ot(t.borderRadius(),u,a);const r=ct(t.el());f=f.map(({parent:E,children:h},w)=>{const A=r[w].parent;return{parent:{...E,el:A,finalRect:K(A)},children:h.map((x,T)=>{const D=r[w].children[T];let M=K(D);return D.hasAttribute("data-swapy-text")&&(M={...M,width:x.initialRect.width,height:x.initialRect.height}),{...x,el:D,finalRect:M}})}});const I={translateX:i,translateY:d,scaleX:u,scaleY:a};t.el().style.transformOrigin="0 0",t.el().style.borderRadius=U(p),t.setTransform(I),c=[],f.forEach(({parent:E,children:h})=>{const w=h.map(({el:A,initialRect:x,finalRect:T,borderRadius:D})=>Yt(A,x,T,D,E.initialRect,E.finalRect));c.push(...w)}),e="readFinal"}function g(){if(e!=="readFinal")throw new Error("FlipView: Cannot get transition values before reading");return{from:{width:o.width,height:o.height,translate:R(i,d),scale:R(u,a),borderRadius:p},to:{width:s.width,height:s.height,translate:R(0,0),scale:R(1,1),borderRadius:t.borderRadius()}}}function X(){if(e!=="readFinal")throw new Error("FlipView: Cannot get children transition values before reading");return c}return{readInitial:m,readFinalAndReverse:v,transitionValues:g,childrenTransitionData:X}}function Yt(t,e,n,o,l,i){t.style.transformOrigin="0 0";const d=l.width/i.width,u=l.height/i.height,a=e.width/n.width,p=e.height/n.height,s=ot(o,a,p),c=e.x-l.x,f=n.x-i.x,m=e.y-l.y,v=n.y-i.y,g=(c-f*d)/d,X=(m-v*u)/u;return t.style.transform=`translate(${g}px, ${X}px) scale(${a/d}, ${p/u})`,t.style.borderRadius=U(s),{el:t,fromTranslate:R(g,X),fromScale:R(a,p),fromBorderRadius:s,toBorderRadius:o,parentScale:{x:d,y:u}}}function ct(t){const e=[];function n(o){const l=Array.from(o.children);l.length>0&&(e.push({parent:o,children:l}),l.forEach(i=>n(i)))}return n(t),e}function ft(t){const e=[];let n=t,o={dragX:0,dragY:0,translateX:0,translateY:0,scaleX:1,scaleY:1};const l=nt(window.getComputedStyle(n).borderRadius),i={el:()=>n,setTransform:d,clearTransform:u,currentTransform:()=>o,borderRadius:()=>l,layoutRect:()=>K(n),boundingRect:()=>z(n.getBoundingClientRect()),usePlugin:p,destroy:s,updateElement:c};function d(f){o={...o,...f},a()}function u(){o={dragX:0,dragY:0,translateX:0,translateY:0,scaleX:1,scaleY:1},a()}function a(){const{dragX:f,dragY:m,translateX:v,translateY:g,scaleX:X,scaleY:r}=o;f===0&&m===0&&v===0&&g===0&&X===1&&r===1?n.style.transform="":n.style.transform=`translate(${f+v}px, ${m+g}px) scale(${X}, ${r})`}function p(f,m){const v=f(i,m);return e.push(v),v}function s(){e.forEach(f=>f.destroy())}function c(f){if(!f)return;const m=n.style.cssText;n=f,n.style.cssText=m,e.forEach(v=>v.onElementUpdate())}return i}function Ct(t,e,n){return n.map(o=>({slotId:o.slot,itemId:o.item,item:o.item===""?null:t.find(l=>o.item===l[e])}))}function Rt(t,e){return t.map(n=>({item:n[e],slot:n[e]}))}function Ht(t,e,n,o,l,i=!1){const d=e.filter(p=>!o.some(s=>s.item===p[n])).map(p=>({slot:p[n],item:p[n]}));let u;i?u=o.map(p=>e.some(s=>s[n]===p.item)?p:{slot:p.slot,item:""}):u=o.filter(p=>e.some(s=>s[n]===p.item)||!p.item);const a=[...u,...d];l(a),(d.length>0||u.length!==o.length)&&requestAnimationFrame(()=>{t==null||t.update()})}const $t=Object.freeze(Object.defineProperty({__proto__:null,dynamicSwapy:Ht,initSlotItemMap:Rt,toSlottedItems:Ct},Symbol.toStringTag,{value:"Module"})),Bt={animation:"dynamic",enabled:!0,swapMode:"hover",dragOnHold:!1,autoScrollOnDrag:!1,dragAxis:"both",manualSwap:!1};function ut(t){switch(t){case"dynamic":return{easing:bt,duration:300};case"spring":return{easing:Mt,duration:350};case"none":return{easing:e=>e,duration:1}}}function Ot(t,e){const n={...Bt,...e},o=_t({slots:[],items:[],config:n});let l=[],i=[];d();function d(){if(!Ft(t))throw new Error("Cannot create a Swapy instance because your HTML structure is invalid. Fix all above errors and then try!");l=Array.from(t.querySelectorAll("[data-swapy-slot]")).map(r=>Pt(r,o)),o.setSlots(l),i=Array.from(t.querySelectorAll("[data-swapy-item]")).map(r=>Nt(r,o)),o.setItems(i),o.syncSlotItemMap(),i.forEach(r=>{r.onDrag(({pointerX:I,pointerY:E})=>{a();let h=!1;l.forEach(w=>{const A=w.rect();st({x:I,y:E},A)&&(h=!0,w.isHighlighted()||w.highlight())}),!h&&o.config().swapMode==="drop"&&r.slot().highlight(),n.swapMode==="hover"&&u(r,{pointerX:I,pointerY:E})}),r.onDrop(({pointerX:I,pointerY:E})=>{p(),n.swapMode==="drop"&&u(r,{pointerX:I,pointerY:E})}),r.onHold(()=>{a()}),r.onRelease(()=>{p()})})}function u(r,{pointerX:I,pointerY:E}){l.forEach(h=>{const w=h.rect();if(st({x:I,y:E},w)){if(r.id()===h.itemId())return;o.config().swapMode==="hover"&&r.setContinuousDrag(!0);const A=r.slot(),x=h.item();if(!o.eventHandlers().onBeforeSwap({fromSlot:A.id(),toSlot:h.id(),draggingItem:r.id(),swapWithItem:(x==null?void 0:x.id())||""}))return;if(o.config().manualSwap){const T=structuredClone(o.slotItemMap());o.swapItems(r,h);const D=o.slotItemMap(),M=J(r.view());M.readInitial();const H=x?J(x.view()):null;H==null||H.readInitial();let _=0,N=0;const $=Z(r.view().el());$ instanceof Window?(_=$.scrollY,N=$.scrollX):(_=$.scrollTop,N=$.scrollLeft),o.eventHandlers().onSwap({oldSlotItemMap:T,newSlotItemMap:D,fromSlot:A.id(),toSlot:h.id(),draggingItem:r.id(),swappedWithItem:(x==null?void 0:x.id())||""}),requestAnimationFrame(()=>{const q=t.querySelectorAll("[data-swapy-item]");o.items().forEach(y=>{const B=Array.from(q).find(Y=>Y.dataset.swapyItem===y.id());y.view().updateElement(B)}),o.syncSlotItemMap(),M.readFinalAndReverse(),H==null||H.readFinalAndReverse(),Q(r,M),x&&H&&Q(x,H),$.scrollTo({left:N,top:_})})}else{let T=0,D=0;const M=Z(r.view().el());M instanceof Window?(T=M.scrollY,D=M.scrollX):(T=M.scrollTop,D=M.scrollLeft),dt(r,h,!0),x&&dt(x,A),M.scrollTo({left:D,top:T});const H=o.slotItemMap();o.syncSlotItemMap();const _=o.slotItemMap();o.eventHandlers().onSwap({oldSlotItemMap:H,newSlotItemMap:_,fromSlot:A.id(),toSlot:h.id(),draggingItem:r.id(),swappedWithItem:(x==null?void 0:x.id())||""})}}})}function a(){t.querySelectorAll("img").forEach(r=>{r.style.pointerEvents="none"}),t.style.userSelect="none",t.style.webkitUserSelect="none"}function p(){t.querySelectorAll("img").forEach(r=>{r.style.pointerEvents=""}),t.style.userSelect="",t.style.webkitUserSelect=""}function s(r){o.config().enabled=r}function c(r){o.eventHandlers().onSwapStart=r}function f(r){o.eventHandlers().onSwap=r}function m(r){o.eventHandlers().onSwapEnd=r}function v(r){o.eventHandlers().onBeforeSwap=r}function g(){X(),requestAnimationFrame(()=>{d()})}function X(){i.forEach(r=>r.destroy()),l.forEach(r=>r.destroy()),o.destroy(),i=[],l=[]}return{enable:s,slotItemMap:()=>o.slotItemMap(),onSwapStart:c,onSwap:f,onSwapEnd:m,onBeforeSwap:v,update:g,destroy:X}}function _t({slots:t,items:e,config:n}){const o={slots:t,items:e,config:n,slotItemMap:{asObject:{},asMap:new Map,asArray:[]},zIndexCount:1,eventHandlers:{onSwapStart:()=>{},onSwap:()=>{},onSwapEnd:()=>{},onBeforeSwap:()=>!0},scrollOffsetWhileDragging:{x:0,y:0},scrollHandler:null};let l={...o};const i=c=>{var f;(f=l.scrollHandler)==null||f.call(l,c)};window.addEventListener("scroll",i);function d(c){return l.slots.find(f=>f.id()===c)}function u(c){return l.items.find(f=>f.id()===c)}function a(){const c={},f=new Map,m=[];l.slots.forEach(v=>{var r;const g=v.id(),X=((r=v.item())==null?void 0:r.id())||"";c[g]=X,f.set(g,X),m.push({slot:g,item:X})}),l.slotItemMap={asObject:c,asMap:f,asArray:m}}function p(c,f){var h;const m=l.slotItemMap,v=c.id(),g=((h=f.item())==null?void 0:h.id())||"",X=f.id(),r=c.slot().id();m.asObject[X]=v,m.asObject[r]=g,m.asMap.set(X,v),m.asMap.set(r,g);const I=m.asArray.findIndex(w=>w.slot===X),E=m.asArray.findIndex(w=>w.slot===r);m.asArray[I].item=v,m.asArray[E].item=g}function s(){window.removeEventListener("scroll",i),l={...o}}return{slots:()=>l.slots,items:()=>l.items,config:()=>n,setItems:c=>l.items=c,setSlots:c=>l.slots=c,slotById:d,itemById:u,zIndex:(c=!1)=>c?++l.zIndexCount:l.zIndexCount,resetZIndex:()=>{l.zIndexCount=1},eventHandlers:()=>l.eventHandlers,syncSlotItemMap:a,slotItemMap:()=>l.slotItemMap,onScroll:c=>{l.scrollHandler=c},swapItems:p,destroy:s}}function Pt(t,e){const n=ft(t);function o(){return n.el().dataset.swapySlot}function l(){const s=n.el().children[0];return(s==null?void 0:s.dataset.swapyItem)||null}function i(){return z(n.el().getBoundingClientRect())}function d(){const s=n.el().children[0];if(s)return e.itemById(s.dataset.swapyItem)}function u(){e.slots().forEach(s=>{s.view().el().removeAttribute("data-swapy-highlighted")})}function a(){u(),n.el().setAttribute("data-swapy-highlighted","")}function p(){}return{id:o,view:()=>n,itemId:l,rect:i,item:d,highlight:a,unhighlightAllSlots:u,isHighlighted:()=>n.el().hasAttribute("data-swapy-highlighted"),destroy:p}}function Nt(t,e){const n=ft(t),o={};let l=null,i=null,d=!1,u=!0,a;const p=qt();let s=()=>{},c=()=>{},f=()=>{},m=()=>{};const{onDrag:v,onDrop:g,onHold:X,onRelease:r}=n.usePlugin(Dt,{startDelay:e.config().dragOnHold?400:0}),I=R(0,0),E=R(0,0),h=R(0,0),w=R(0,0);let A=null,x=null;X(S=>{e.config().enabled&&(q()&&!$(S.el)||Y()&&B(S.el)||f==null||f(S))}),r(S=>{e.config().enabled&&(q()&&!$(S.el)||Y()&&B(S.el)||m==null||m(S))});function T(S){var C;k(),et().highlight(),(C=o.drop)==null||C.call(o),e.slots().forEach(O=>{const V=O.view().boundingRect();O.view().el().style.width=`${V.width}px`,O.view().el().style.flexShrink="0",O.view().el().style.height=`${V.height}px`});const b=e.slotItemMap();e.eventHandlers().onSwapStart({draggingItem:ht(),fromSlot:yt(),slotItemMap:b}),i=b,n.el().style.position="relative",n.el().style.zIndex=`${e.zIndex(!0)}`,A=Z(S.el),e.config().autoScrollOnDrag&&(l=Wt(A,e.config().dragAxis),l.updatePointer({x:S.pointerX,y:S.pointerY})),I.x=window.scrollX,I.y=window.scrollY,h.x=0,h.y=0,A instanceof HTMLElement&&(E.x=A.scrollLeft,E.y=A.scrollTop,x=()=>{w.x=A.scrollLeft-E.x,w.y=A.scrollTop-E.y,n.setTransform({dragX:((a==null?void 0:a.width)||0)+h.x+w.x,dragY:((a==null?void 0:a.height)||0)+h.y+w.y})},A.addEventListener("scroll",x)),e.onScroll(()=>{h.x=window.scrollX-I.x,h.y=window.scrollY-I.y;const O=w.x||0,V=w.y||0;n.setTransform({dragX:((a==null?void 0:a.width)||0)+h.x+O,dragY:((a==null?void 0:a.height)||0)+h.y+V})})}v(S=>{var b;if(e.config().enabled){if(!d){if(q()&&!$(S.el)||Y()&&B(S.el))return;T(S)}d=!0,l&&l.updatePointer({x:S.pointerX,y:S.pointerY}),a=S,(b=o.drop)==null||b.call(o),p(()=>{n.el().style.position="relative";const C=S.width+h.x+w.x,O=S.height+h.y+w.y;e.config().dragAxis==="y"?n.setTransform({dragY:O}):e.config().dragAxis==="x"?n.setTransform({dragX:C}):n.setTransform({dragX:C,dragY:O}),s==null||s(S)})}}),g(S=>{if(!d)return;tt(),d=!1,u=!1,a=null,A&&(A.removeEventListener("scroll",x),x=null),A=null,w.x=0,w.y=0,h.x=0,h.y=0,l&&(l.destroy(),l=null),et().unhighlightAllSlots(),c==null||c(S),e.eventHandlers().onSwapEnd({slotItemMap:e.slotItemMap(),hasChanged:i!=null&&i.asMap?!jt(i==null?void 0:i.asMap,e.slotItemMap().asMap):!1}),i=null,e.onScroll(null),e.slots().forEach(C=>{C.view().el().style.width="",C.view().el().style.flexShrink="",C.view().el().style.height=""}),e.config().manualSwap&&e.config().swapMode==="drop"?requestAnimationFrame(b):b();function b(){const C=n.currentTransform(),O=C.dragX+C.translateX,V=C.dragY+C.translateY;o.drop=at({translate:R(O,V)},{translate:R(0,0)},({translate:mt},wt)=>{wt?d||(n.clearTransform(),n.el().style.transformOrigin=""):n.setTransform({dragX:0,dragY:0,translateX:mt.x,translateY:mt.y}),wt&&(e.items().forEach(St=>{St.isDragging()||(St.view().el().style.zIndex="")}),e.resetZIndex(),n.el().style.position="",u=!0)},ut(e.config().animation))}});function D(S){s=S}function M(S){c=S}function H(S){f=S}function _(S){m=S}function N(){return n.el().querySelector("[data-swapy-handle]")}function $(S){const b=N();return b?b===S||b.contains(S):!1}function q(){return N()!==null}function y(){return Array.from(n.el().querySelectorAll("[data-swapy-no-drag]"))}function B(S){const b=y();return!b||b.length===0?!1:b.includes(S)||b.some(C=>C.contains(S))}function Y(){return y().length>0}function k(){n.el().setAttribute("data-swapy-dragging","")}function tt(){n.el().removeAttribute("data-swapy-dragging")}function kt(){s=null,c=null,f=null,m=null,a=null,i=null,l&&(l.destroy(),l=null),A&&x&&A.removeEventListener("scroll",x),n.destroy()}function ht(){return n.el().dataset.swapyItem}function et(){return e.slotById(n.el().parentElement.dataset.swapySlot)}function yt(){return n.el().parentElement.dataset.swapySlot}return{id:ht,view:()=>n,slot:et,slotId:yt,onDrag:D,onDrop:M,onHold:H,onRelease:_,destroy:kt,isDragging:()=>d,cancelAnimation:()=>o,dragEvent:()=>a,store:()=>e,continuousDrag:()=>u,setContinuousDrag:S=>u=S}}function dt(t,e,n=!1){if(n){const l=e.item();l&&(e.view().el().style.position="relative",l.view().el().style.position="absolute")}else{const l=t.slot();l.view().el().style.position="",t.view().el().style.position=""}if(!t)return;const o=J(t.view());o.readInitial(),e.view().el().appendChild(t.view().el()),o.readFinalAndReverse(),Q(t,o)}function qt(){let t=!1;return e=>{t||(t=!0,requestAnimationFrame(()=>{e(),t=!1}))}}function Q(t,e){var u,a,p,s;(a=(u=t.cancelAnimation()).moveToSlot)==null||a.call(u),(s=(p=t.cancelAnimation()).drop)==null||s.call(p);const n=ut(t.store().config().animation),o=e.transitionValues();let l=t.view().currentTransform(),i=0,d=!1;t.cancelAnimation().moveToSlot=at({translate:o.from.translate,scale:o.from.scale,borderRadius:o.from.borderRadius},{translate:o.to.translate,scale:o.to.scale,borderRadius:o.to.borderRadius},({translate:c,scale:f,borderRadius:m},v,g)=>{if(t.isDragging()){i!==0&&(d=!0);const r=t.dragEvent().relativeX,I=t.dragEvent().relativeY;t.continuousDrag()?t.view().setTransform({translateX:L(l.translateX,l.translateX+(o.from.width-o.to.width)*r,n.easing(g-i)),translateY:L(l.translateY,l.translateY+(o.from.height-o.to.height)*I,n.easing(g-i)),scaleX:f.x,scaleY:f.y}):t.view().setTransform({scaleX:f.x,scaleY:f.y})}else l=t.view().currentTransform(),i=g,d?t.view().setTransform({scaleX:f.x,scaleY:f.y}):t.view().setTransform({dragX:0,dragY:0,translateX:c.x,translateY:c.y,scaleX:f.x,scaleY:f.y});const X=e.childrenTransitionData();X.forEach(({el:r,fromTranslate:I,fromScale:E,fromBorderRadius:h,toBorderRadius:w,parentScale:A})=>{const x=L(A.x,1,n.easing(g)),T=L(A.y,1,n.easing(g));r.style.transform=`translate(${I.x+(0-I.x/x)*n.easing(g)}px, ${I.y+(0-I.y/T)*n.easing(g)}px) scale(${L(E.x/x,1/x,n.easing(g))}, ${L(E.y/T,1/T,n.easing(g))})`,lt(h)||(r.style.borderRadius=U(it(h,w,n.easing(g))))}),lt(m)||(t.view().el().style.borderRadius=U(m)),v&&(t.isDragging()||(t.view().el().style.transformOrigin="",t.view().clearTransform()),t.view().el().style.borderRadius="",X.forEach(({el:r})=>{r.style.transform="",r.style.transformOrigin="",r.style.borderRadius=""}))},n)}function W(...t){console.error("Swapy Error:",...t)}function Ft(t){const e=t;let n=!0;const o=e.querySelectorAll("[data-swapy-slot]");e||(W("container passed to createSwapy() is undefined or null"),n=!1),o.forEach(u=>{const a=u,p=a.dataset.swapySlot,s=a.children,c=s[0];(!p||p.length===0)&&(W(a,"does not contain a slotId using data-swapy-slot"),n=!1),s.length>1&&(W("slot:",`"${p}"`,"cannot contain more than one element"),n=!1),c&&(!c.dataset.swapyItem||c.dataset.swapyItem.length===0)&&(W("slot",`"${p}"`,"does not contain an element with an item id using data-swapy-item"),n=!1)});const l=Array.from(o).map(u=>u.dataset.swapySlot),i=e.querySelectorAll("[data-swapy-item]"),d=Array.from(i).map(u=>u.dataset.swapyItem);if(gt(l)){const u=pt(l);W("your container has duplicate slot ids",`(${u.join(", ")})`),n=!1}if(gt(d)){const u=pt(d);W("your container has duplicate item ids",`(${u.join(", ")})`),n=!1}return n}function gt(t){return new Set(t).size!==t.length}function pt(t){const e=new Set,n=new Set;for(const o of t)e.has(o)?n.add(o):e.add(o);return Array.from(n)}function jt(t,e){if(t.size!==e.size)return!1;for(const[n,o]of t)if(e.get(n)!==o)return!1;return!0}function Z(t){let e=t;for(;e;){const n=window.getComputedStyle(e),o=n.overflowY,l=n.overflowX;if((o==="auto"||o==="scroll")&&e.scrollHeight>e.clientHeight||(l==="auto"||l==="scroll")&&e.scrollWidth>e.clientWidth)return e;e=e.parentElement}return window}function Wt(t,e){let l=!1,i,d=0,u=0,a=0,p=0,s=0,c=0,f=null;t instanceof HTMLElement?(i=z(t.getBoundingClientRect()),d=t.scrollHeight-i.height,u=t.scrollWidth-i.width):(i={x:0,y:0,width:window.innerWidth,height:window.innerHeight},d=document.documentElement.scrollHeight-window.innerHeight,u=document.documentElement.scrollWidth-window.innerWidth);function m(){t instanceof HTMLElement?(a=t.scrollTop,p=t.scrollLeft):(a=window.scrollY,p=window.scrollX)}function v(r){l=!1;const I=i.y,E=i.y+i.height,h=i.x,w=i.x+i.width,A=Math.abs(I-r.y)=-100){const D=j(T,-100,0);s=-G(-100,0,0,5,D),l=!0}}else{const T=E-r.y;if(T<=100){const D=j(T,0,100);s=G(100,0,0,5,D),l=!0}}if(e!=="y")if(x){const T=h-r.x;if(T>=-100){const D=j(T,-100,0);c=-G(-100,0,0,5,D),l=!0}}else{const T=w-r.x;if(T<=100){const D=j(T,0,100);c=G(100,0,0,5,D),l=!0}}l&&(f&&cancelAnimationFrame(f),g())}function g(){m(),e!=="x"&&(s=a+s>=d?0:s),e!=="y"&&(c=p+c>=u?0:c),t.scrollBy({top:s,left:c}),l&&(f=requestAnimationFrame(g))}function X(){l=!1}return{updatePointer:v,destroy:X}}P.createSwapy=Ot,P.getClosestScrollableContainer=Z,P.utils=$t,Object.defineProperty(P,Symbol.toStringTag,{value:"Module"})});