76 lines
1.9 KiB
JavaScript
76 lines
1.9 KiB
JavaScript
export function createObjectModal({ panel, backdrop, onDelete, onClose }) {
|
||
let activeTarget = null;
|
||
|
||
const hide = () => {
|
||
if (panel) {
|
||
panel.classList.add("hidden");
|
||
panel.style.display = "";
|
||
}
|
||
if (backdrop) {
|
||
backdrop.classList.add("hidden");
|
||
backdrop.style.display = "";
|
||
}
|
||
activeTarget = null;
|
||
onClose?.();
|
||
};
|
||
|
||
const render = () => {
|
||
if (!panel) return;
|
||
panel.innerHTML = "";
|
||
|
||
const header = document.createElement("div");
|
||
header.className = "templates-header";
|
||
header.innerHTML = `<span class="templates-title">Объект</span>`;
|
||
|
||
const closeBtn = document.createElement("button");
|
||
closeBtn.className = "templates-close";
|
||
closeBtn.textContent = "×";
|
||
closeBtn.addEventListener("click", hide);
|
||
header.appendChild(closeBtn);
|
||
panel.appendChild(header);
|
||
|
||
const list = document.createElement("div");
|
||
list.className = "template-list";
|
||
panel.appendChild(list);
|
||
|
||
if (activeTarget?.label) {
|
||
const label = document.createElement("div");
|
||
label.className = "muted";
|
||
label.style.margin = "0 0 8px";
|
||
label.textContent = activeTarget.label;
|
||
list.appendChild(label);
|
||
}
|
||
|
||
const deleteBtn = document.createElement("button");
|
||
deleteBtn.className = "example-card danger-btn";
|
||
deleteBtn.textContent = "Удалить объект";
|
||
deleteBtn.addEventListener("click", () => {
|
||
if (!activeTarget?.modelId) return;
|
||
onDelete?.(activeTarget);
|
||
});
|
||
list.appendChild(deleteBtn);
|
||
};
|
||
|
||
const show = ({ modelId, label } = {}) => {
|
||
activeTarget = { modelId, label };
|
||
render();
|
||
if (panel) {
|
||
panel.classList.remove("hidden");
|
||
panel.style.display = "grid";
|
||
}
|
||
if (backdrop) {
|
||
backdrop.classList.remove("hidden");
|
||
backdrop.style.display = "block";
|
||
}
|
||
};
|
||
|
||
if (backdrop) {
|
||
backdrop.addEventListener("click", hide);
|
||
}
|
||
|
||
return {
|
||
show,
|
||
hide,
|
||
};
|
||
}
|