diff --git a/scripts/config.js b/scripts/config.js index 57c5ec3..433ca95 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -780,13 +780,16 @@ function addBootLine (container, data, before = null) { } function deleteBootLine (id) { + const query = `#${id}`; const enabled = document.querySelector("#enabled"); const disabled = document.querySelector("#disabled"); - if (enabled.getItemByID(id)) { - enabled.deleteItemByID(id); + const inEnabled = enabled.querySelector(query); + const inDisabled = disabled.querySelector(query); + if (inEnabled) { + enabled.removeChild(inEnabled); } - if (disabled.getItemByID(id)) { - disabled.deleteItemByID(id); + if (inDisabled) { + disabled.removeChild(inDisabled); } } diff --git a/scripts/draggable.js b/scripts/draggable.js index f34f26f..05d9395 100644 --- a/scripts/draggable.js +++ b/scripts/draggable.js @@ -29,13 +29,12 @@ class DraggableContainer extends HTMLElement { this.content.insertBefore(newNode, referenceNode); } - getItemByID (nodeid) { - return this.content.querySelector(`#${nodeid}`); + querySelector (query) { + return this.content.querySelector(query); } - deleteItemByID (nodeid) { - const node = this.content.querySelector(`#${nodeid}`); - if (node) { + removeChild (node) { + if (node && this.content.contains(node)) { this.content.removeChild(node); return true; } @@ -93,16 +92,14 @@ class DraggableItem extends HTMLElement { } }); this.addEventListener("dragenter", (event) => { - if (event.target.classList.contains("drop-target")) { - event.target.classList.add("drag-over"); - event.target.borderTop = true; + if (event.target.dropTarget) { + event.target.dragOver = true; } event.preventDefault(); }); this.addEventListener("dragleave", (event) => { - if (event.target.classList.contains("drag-over")) { - event.target.classList.remove("drag-over"); - event.target.borderTop = false; + if (event.target.dragOver) { + event.target.dragOver = false; } event.preventDefault(); }); @@ -110,17 +107,16 @@ class DraggableItem extends HTMLElement { event.preventDefault(); }); this.addEventListener("drop", (event) => { - if (event.target.classList.contains("drag-over")) { - event.target.classList.remove("drag-over"); - event.target.borderTop = false; + if (event.target.dragOver) { + event.target.dragOver = false; } - if (event.target.classList.contains("drop-target")) { + if (event.target.dropTarget) { const transfer = JSON.parse(event.dataTransfer.getData("application/json")); const item = document.createElement("draggable-item"); item.data = transfer.data; item.innerHTML = transfer.content; item.draggable = true; - item.classList.add("drop-target"); + item.dropTarget = true; item.id = transfer.id; item.value = transfer.data.value; event.target.parentElement.insertBefore(item, event.target); @@ -138,15 +134,32 @@ class DraggableItem extends HTMLElement { this.content.innerHTML = innerHTML; } - get borderTop () { - return this.content.style.borderTop === ""; + get dropTarget () { + return this.classList.contains("drop-target"); } - set borderTop (borderTop) { - if (borderTop) { + set dropTarget (dropTarget) { + 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"; } else { + this.classList.remove("drag-over"); + // temp hover over effect this.content.style.borderTop = ""; } }