@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
92 lines (91 loc) • 3.14 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import Sortable from "sortablejs";
const sortableComponentSet = /* @__PURE__ */ new Set();
const CSS = {
ghostClass: "calcite-sortable--ghost",
chosenClass: "calcite-sortable--chosen",
dragClass: "calcite-sortable--drag",
fallbackClass: "calcite-sortable--fallback"
};
function connectSortableComponent(component) {
if (dragActive(component)) {
return;
}
disconnectSortableComponent(component);
sortableComponentSet.add(component);
const dataIdAttr = "id";
const { group, handleSelector: handle, dragSelector: draggable } = component;
component.sortable = Sortable.create(component.el, {
dataIdAttr,
...CSS,
...!!draggable && { draggable },
...!!group && {
group: {
name: group,
...!!component.canPull && {
pull: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => component.canPull({
toEl: to.el,
fromEl: from.el,
dragEl,
newIndex,
oldIndex
})
},
...!!component.canPut && {
put: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => component.canPut({
toEl: to.el,
fromEl: from.el,
dragEl,
newIndex,
oldIndex
})
}
}
},
onMove: ({ from: fromEl, dragged: dragEl, to: toEl, related: relatedEl }) => {
if (!component.onDragMove) {
return;
}
component.onDragMove({ fromEl, dragEl, toEl, relatedEl });
},
handle,
filter: `${handle}[disabled]`,
onStart: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
dragState.active = true;
onGlobalDragStart();
component.onDragStart({ fromEl, dragEl, toEl, newIndex, oldIndex });
},
onEnd: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
dragState.active = false;
onGlobalDragEnd();
component.onDragEnd({ fromEl, dragEl, toEl, newIndex, oldIndex });
},
onSort: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
component.onDragSort({ fromEl, dragEl, toEl, newIndex, oldIndex });
}
});
}
function disconnectSortableComponent(component) {
if (dragActive(component)) {
return;
}
sortableComponentSet.delete(component);
component.sortable?.destroy();
component.sortable = null;
}
const dragState = { active: false };
function dragActive(component) {
return component.dragEnabled && dragState.active;
}
function onGlobalDragStart() {
Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart());
}
function onGlobalDragEnd() {
Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
}
export {
connectSortableComponent as c,
disconnectSortableComponent as d
};