Sha256: af858b9a3dc382db00d76bd7575086fc0783ea0e7e02f95c31426e906df7d988
Contents?: true
Size: 1.94 KB
Versions: 7
Compression:
Stored size: 1.94 KB
Contents
import Sortable from "sortablejs"
import { post } from "alchemy_admin/utils/ajax"
const SORTABLE_OPTIONS = {
draggable: ".element-editor",
handle: ".element-handle",
ghostClass: "dragged",
animation: 150,
swapThreshold: 0.65,
easing: "cubic-bezier(1, 0, 0, 1)"
}
function onStart(event) {
const name = event.item.dataset.elementName
document
.querySelectorAll(`[data-droppable-elements~="${name}"]`)
.forEach((dropzone) => dropzone.classList.add("droppable-elements"))
}
function onSort(event) {
const item = event.item
const parentElement = event.to.parentElement.closest(".element-editor")
const params = {
element_id: item.dataset.elementId,
position: event.newIndex + 1
}
if (parentElement) {
params.parent_element_id = parentElement.dataset.elementId
}
post(Alchemy.routes.order_admin_elements_path, params).then((response) => {
const data = response.data
Alchemy.growl(data.message)
Alchemy.PreviewWindow.refresh()
item.updateTitle(data.preview_text)
})
}
function onEnd() {
const dropzones = document.querySelectorAll("[data-droppable-elements]")
dropzones.forEach((dropzone) =>
dropzone.classList.remove("droppable-elements")
)
}
function createSortable(element, options = {}) {
const group = {
name: element.dataset.elementName,
put(to, _from, item) {
return to.el.dataset.droppableElements
.split(" ")
.includes(item.dataset.elementName)
}
}
new Sortable(element, {
...SORTABLE_OPTIONS,
...options,
onStart,
onSort,
onEnd,
group
})
}
export default function SortableElements(selector) {
if (selector == null) selector = ".sortable-elements"
const sortable_areas = document.querySelectorAll(selector, {
direction: "vertical"
})
sortable_areas.forEach((element) => createSortable(element))
document.querySelectorAll(".nested-elements").forEach((nestedElement) => {
createSortable(nestedElement)
})
}
Version data entries
7 entries across 7 versions & 1 rubygems