tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve draggable-item custom element interface

Browse Source
This commit is contained in:
Arthur Lu 2023-09-07 21:42:19 +00:00
parent 32106b96ee
commit 4f6dc18162
2 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scripts/config.js
View File

@ -780,13 +780,16 @@ function addBootLine (container, data, before = null) {
} }
function deleteBootLine (id) { function deleteBootLine (id) {
const query = `#${id}`;
const enabled = document.querySelector("#enabled"); const enabled = document.querySelector("#enabled");
const disabled = document.querySelector("#disabled"); const disabled = document.querySelector("#disabled");
if (enabled.getItemByID(id)) { const inEnabled = enabled.querySelector(query);
enabled.deleteItemByID(id); const inDisabled = disabled.querySelector(query);
if (inEnabled) {
enabled.removeChild(inEnabled);
} }
if (disabled.getItemByID(id)) { if (inDisabled) {
disabled.deleteItemByID(id); disabled.removeChild(inDisabled);
} }
} }

53
scripts/draggable.js
View File

@ -29,13 +29,12 @@ class DraggableContainer extends HTMLElement {
this.content.insertBefore(newNode, referenceNode); this.content.insertBefore(newNode, referenceNode);
} }
getItemByID (nodeid) { querySelector (query) {
return this.content.querySelector(`#${nodeid}`); return this.content.querySelector(query);
} }
deleteItemByID (nodeid) { removeChild (node) {
const node = this.content.querySelector(`#${nodeid}`); if (node && this.content.contains(node)) {
if (node) {
this.content.removeChild(node); this.content.removeChild(node);
return true; return true;
} }
@ -93,16 +92,14 @@ class DraggableItem extends HTMLElement {
} }
}); });
this.addEventListener("dragenter", (event) => { this.addEventListener("dragenter", (event) => {
if (event.target.classList.contains("drop-target")) { if (event.target.dropTarget) {
event.target.classList.add("drag-over"); event.target.dragOver = true;
event.target.borderTop = true;
} }
event.preventDefault(); event.preventDefault();
}); });
this.addEventListener("dragleave", (event) => { this.addEventListener("dragleave", (event) => {
if (event.target.classList.contains("drag-over")) { if (event.target.dragOver) {
event.target.classList.remove("drag-over"); event.target.dragOver = false;
event.target.borderTop = false;
} }
event.preventDefault(); event.preventDefault();
}); });
@ -110,17 +107,16 @@ class DraggableItem extends HTMLElement {
event.preventDefault(); event.preventDefault();
}); });
this.addEventListener("drop", (event) => { this.addEventListener("drop", (event) => {
if (event.target.classList.contains("drag-over")) { if (event.target.dragOver) {
event.target.classList.remove("drag-over"); event.target.dragOver = false;
event.target.borderTop = false;
} }
if (event.target.classList.contains("drop-target")) { if (event.target.dropTarget) {
const transfer = JSON.parse(event.dataTransfer.getData("application/json")); const transfer = JSON.parse(event.dataTransfer.getData("application/json"));
const item = document.createElement("draggable-item"); const item = document.createElement("draggable-item");
item.data = transfer.data; item.data = transfer.data;
item.innerHTML = transfer.content; item.innerHTML = transfer.content;
item.draggable = true; item.draggable = true;
item.classList.add("drop-target"); item.dropTarget = true;
item.id = transfer.id; item.id = transfer.id;
item.value = transfer.data.value; item.value = transfer.data.value;
event.target.parentElement.insertBefore(item, event.target); event.target.parentElement.insertBefore(item, event.target);
@ -138,15 +134,32 @@ class DraggableItem extends HTMLElement {
this.content.innerHTML = innerHTML; this.content.innerHTML = innerHTML;
} }
get borderTop () { get dropTarget () {
return this.content.style.borderTop === ""; return this.classList.contains("drop-target");
} }
set borderTop (borderTop) { set dropTarget (dropTarget) {
if (borderTop) { if (dropTarget) {
this.classList.add("drop-target");
}
else {
this.classList.remove("drop-target");
}
}
get dragOver () {
return this.classList.contains("drag-over");
}
set dragOver (dragOver) {
if (dragOver) {
this.classList.add("drag-over");
// temp hover over effect
this.content.style.borderTop = "1px dotted"; this.content.style.borderTop = "1px dotted";
} }
else { else {
this.classList.remove("drag-over");
// temp hover over effect
this.content.style.borderTop = ""; this.content.style.borderTop = "";
} }
} }