contentdb/app/public/static/js/collection_editor.js

212 lines
5.9 KiB
JavaScript
Raw Normal View History

// @author rubenwardy
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
"use strict";
2023-08-20 23:51:21 +02:00
function updateOrder() {
const elements = [...document.querySelector("#package_list").children];
2023-08-20 23:51:21 +02:00
const ids = elements
.filter(x => !x.classList.contains("d-none"))
.map(x => x.dataset.id?.trim())
2023-08-20 23:51:21 +02:00
.filter(x => x);
document.querySelector("input[name='order']").value = ids.join(",");
}
function removePackage(card) {
const message = document.getElementById("confirm_delete").innerText.trim();
const title = card.querySelector("h5 a").innerText.trim();
if (!confirm(message.replace("{title}", title))) {
return;
}
card.querySelector("input[name^=package_removed]").value = "1";
card.classList.add("d-none");
onPackageQueryUpdate();
2023-08-20 23:51:21 +02:00
updateOrder();
}
function restorePackage(id) {
const idElement = document.querySelector(`[value='${id}']`);
if (!idElement) {
return false;
}
const card = idElement.parentNode.parentNode.parentNode.parentNode;
console.assert(card.classList.contains("card"));
card.classList.remove("d-none");
card.querySelector("input[name^=package_removed]").value = "0";
card.scrollIntoView();
onPackageQueryUpdate();
2023-08-20 23:51:21 +02:00
updateOrder();
return true;
}
function getAddedPackages() {
const ids = document.querySelectorAll("#package_list > article:not(.d-none) input[name^=package_ids]");
return [...ids].map(x => x.value);
}
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
function addPackage(pkg) {
document.getElementById("add_package").value = "";
document.getElementById("add_package_results").innerHTML = "";
const id = `${pkg.author}/${pkg.name}`;
if (restorePackage(id)) {
return;
}
const nextId = document.querySelectorAll("input[name^=package_ids-]").length;
const url = `/packages/${id}/`;
const temp = document.createElement("div");
temp.innerHTML = `
2023-08-20 23:51:21 +02:00
<article class="card my-3" data-id="${escapeHtml(id)}">
<div class="card-body">
<div class="row">
2023-08-22 20:58:43 +02:00
<div class="col-auto text-muted pe-2">
<i class="fas fa-bars"></i>
</div>
<div class="col">
2023-08-22 20:58:43 +02:00
<button class="btn btn-sm btn-danger remove-package float-end" type="button" aria-label="Remove">
<i class="fas fa-trash"></i>
</button>
<h5>
<a href="${escapeHtml(url)}" target="_blank">
${escapeHtml(pkg.title)} by ${escapeHtml(pkg.author)}
</a>
</h5>
<p class="text-muted">
${escapeHtml(pkg.short_description)}
</p>
2023-08-22 20:58:43 +02:00
<input id="package_ids-${nextId}" name="package_ids-${nextId}" type="hidden" value="${id}">
<input id="package_removed-${nextId}" name="package_removed-${nextId}" type="hidden" value="0">
<div>
<label for="descriptions-${nextId}" class="form-label">Short Description</label>
<input class="form-control" id="descriptions-${nextId}" maxlength="500" minlength="0"
name="descriptions-${nextId}" type="text" value="">
<small class="form-text text-muted">You can replace the description with your own</small>
</div>
</div>
</div>
</div>
</article>
`;
const card = temp.children[0];
document.getElementById("package_list").appendChild(card);
card.scrollIntoView();
const button = card.querySelector(".btn-danger");
button.addEventListener("click", () => removePackage(card));
2023-08-20 23:51:21 +02:00
updateOrder();
}
function updateResults(packages) {
const results = document.getElementById("add_package_results");
results.innerHTML = "";
document.getElementById("add_package_empty").style.display = packages.length === 0 ? "block" : "none";
const alreadyAdded = getAddedPackages();
packages.slice(0, 5).forEach(pkg => {
const result = document.createElement("a");
result.classList.add("list-group-item");
result.classList.add("list-group-item-action");
result.innerText = `${pkg.title} by ${pkg.author}`;
if (alreadyAdded.includes(`${pkg.author}/${pkg.name}`)) {
result.classList.add("active");
2023-08-22 20:58:43 +02:00
result.innerHTML = "<i class='fas fa-check me-3 text-success'></i>" + result.innerHTML;
}
result.addEventListener("click", () => addPackage(pkg));
results.appendChild(result);
});
}
let currentRequestId;
async function fetchPackagesAndUpdateResults(query) {
const requestId = Math.random() * 1000000;
currentRequestId = requestId;
if (query === "") {
updateResults([]);
return;
}
const url = new URL("/api/packages/", window.location.origin);
url.searchParams.set("q", query);
const resp = await fetch(url.toString());
if (!resp.ok) {
return;
}
const packages = await resp.json();
if (currentRequestId !== requestId) {
return;
}
updateResults(packages);
}
let timeoutHandle;
function onPackageQueryUpdate() {
const query = document.getElementById("add_package").value.trim();
if (timeoutHandle) {
clearTimeout(timeoutHandle);
}
timeoutHandle = setTimeout(
() => fetchPackagesAndUpdateResults(query).catch(console.error),
200);
}
window.addEventListener("load", () => {
document.querySelectorAll(".remove-package").forEach(button => {
const card = button.parentNode.parentNode.parentNode.parentNode;
console.assert(card.classList.contains("card"));
const field = card.querySelector("input[name^=package_removed]");
// Reloading/validation errors will cause this to be 1 at load
if (field && field.value === "1") {
card.classList.add("d-none");
} else {
button.addEventListener("click", () => removePackage(card));
}
});
const addPackageQuery = document.getElementById("add_package");
addPackageQuery.value = "";
addPackageQuery.classList.remove("d-none");
addPackageQuery.addEventListener("input", onPackageQueryUpdate);
addPackageQuery.addEventListener('keydown',(e)=>{
if (e.key === "Enter") {
onPackageQueryUpdate();
e.preventDefault();
}
})
2023-08-20 23:51:21 +02:00
updateOrder();
$(".sortable").sortable({
update: updateOrder,
});
});