129 lines
3.3 KiB
JavaScript
129 lines
3.3 KiB
JavaScript
let removedCollections = [];
|
|
|
|
document.getElementById("add-collection-button").addEventListener("click", () => {
|
|
const container = document.getElementById("collections-container");
|
|
const currentCount = container.querySelectorAll(".draggable-collection").length;
|
|
|
|
const newId = `new-${Date.now()}`
|
|
const collectionHtml = `
|
|
<div class="draggable-collection"
|
|
data-collection-id="${newId}"
|
|
draggable="true"
|
|
ondragover="dragOver(event)"
|
|
ondragstart="dragStart(event)"
|
|
ondragend="dragEnd()">
|
|
<input type="text" class="collection-name" value="" required placeholder="Enter collection name" autocomplete="off" maxlength="60"><br>
|
|
<div>0 threads, 0 posts</div>
|
|
<button type="button" class="delete-button critical">Delete</button>
|
|
</div>
|
|
`;
|
|
container.insertAdjacentHTML('beforeend', collectionHtml);
|
|
})
|
|
|
|
document.addEventListener("click", e => {
|
|
if (!e.target.classList.contains("delete-button")) {
|
|
return;
|
|
}
|
|
const collectionDiv = e.target.closest(".draggable-collection");
|
|
const collectionId = collectionDiv.dataset.collectionId;
|
|
|
|
if (!collectionId.startsWith("new-")) {
|
|
removedCollections.push(collectionId);
|
|
}
|
|
|
|
collectionDiv.remove();
|
|
})
|
|
|
|
document.getElementById("save-button").addEventListener("click", async () => {
|
|
const collections = [];
|
|
const collectionDivs = document.querySelectorAll(".draggable-collection");
|
|
let isValid = true;
|
|
collectionDivs.forEach((collection, index) => {
|
|
const collectionId = collection.dataset.collectionId;
|
|
const nameInput = collection.querySelector(".collection-name");
|
|
|
|
if (!nameInput.reportValidity()) {
|
|
isValid = false;
|
|
return;
|
|
}
|
|
|
|
collections.push({
|
|
id: collectionId,
|
|
name: nameInput.value,
|
|
is_new: collectionId.startsWith("new-"),
|
|
});
|
|
})
|
|
|
|
if (!isValid) {
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
collections: collections,
|
|
removed_collections: removedCollections,
|
|
};
|
|
|
|
try {
|
|
const saveHref = document.getElementById('save-button').dataset.submitHref;
|
|
const response = await fetch(saveHref, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(data),
|
|
});
|
|
|
|
if (response.ok) {
|
|
window.location.reload();
|
|
} else {
|
|
console.error("Error saving collections");
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error("Error saving collections: ", error);
|
|
}
|
|
})
|
|
|
|
// drag logic
|
|
// https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap
|
|
|
|
let selected = null;
|
|
const container = document.getElementById("collections-container");
|
|
function isBefore(el1, el2) {
|
|
let cur;
|
|
if (el2.parentNode === el1.parentNode) {
|
|
for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
|
|
if (cur === el2) return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function dragOver(e) {
|
|
let target = e.target.closest(".draggable-collection")
|
|
|
|
if (!target || target === selected) {
|
|
return;
|
|
}
|
|
|
|
if (isBefore(selected, target)) {
|
|
container.insertBefore(selected, target)
|
|
} else {
|
|
container.insertBefore(selected, target.nextSibling)
|
|
}
|
|
}
|
|
|
|
function dragEnd() {
|
|
if (!selected) return;
|
|
|
|
selected.classList.remove("dragged")
|
|
selected = null;
|
|
}
|
|
|
|
function dragStart(e) {
|
|
e.dataTransfer.effectAllowed = 'move'
|
|
e.dataTransfer.setData('text/plain', "")
|
|
selected = e.target
|
|
selected.classList.add("dragged")
|
|
}
|