From 888e8bbc7e935c3d55f63738794a463ec5014e21 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Mon, 14 Aug 2023 23:42:02 +0000 Subject: [PATCH] add draggable list custom element, improve boot order list --- config.html | 13 ++--- scripts/config.js | 93 ++++-------------------------- scripts/draggable.js | 131 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 147 insertions(+), 90 deletions(-) create mode 100644 scripts/draggable.js diff --git a/config.html b/config.html index 50b4e76..23d5ba5 100644 --- a/config.html +++ b/config.html @@ -10,6 +10,7 @@ +
@@ -55,15 +56,9 @@
Boot Order -
- -
-
-
-
- -
-
+ +
+
diff --git a/scripts/config.js b/scripts/config.js index 62ea4e6..2921e78 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -754,25 +754,8 @@ async function handleDeviceAdd () { async function populateBoot () { if (type === "qemu") { document.querySelector("#boot-card").classList.remove("none"); - document.querySelectorAll(".drop-target").forEach((element) => { - element.addEventListener("dragenter", (event) => { - event.target.style.borderTop = "1px dotted"; - event.preventDefault(); - }); - element.addEventListener("dragleave", (event) => { - event.target.attributeStyleMap.clear(); - event.preventDefault(); - }); - element.addEventListener("dragover", (event) => { - event.preventDefault(); - }); - element.addEventListener("drop", (event) => { - const data = event.dataTransfer.getData("text/plain"); - event.target.attributeStyleMap.clear(); - addBootLine(element.parentElement.id, JSON.parse(data), element); - event.preventDefault(); - }); - }); + document.querySelector("#enabled").title = "Enabled"; + document.querySelector("#disabled").title = "Disabled"; const order = config.data.boot.replace("order=", "").split(";"); const bootable = { disabled: [] }; const eligible = bootMetaData.eligiblePrefixes; @@ -801,74 +784,22 @@ async function populateBoot () { } function addBootLine (fieldset, bootable, before = null) { - const box = document.createElement("div"); - const icon = document.createElement("img"); - icon.src = bootMetaData[bootable.prefix].icon; - box.append(icon); - const label = document.createElement("p"); - label.innerText = bootable.id; - label.style.margin = "0px"; - box.append(label); - box.draggable = true; - box.classList.add("flex"); - box.classList.add("row"); - box.classList.add("drop-target"); - box.id = `boot-${bootable.id}`; - // setup draggable event listeners - box.addEventListener("dragstart", (event) => { - event.target.style.opacity = "0.5"; - event.dataTransfer.setData("text/plain", JSON.stringify(bootable)); - event.dataTransfer.effectAllowed = "move"; - }); - box.addEventListener("dragend", (event) => { - if (event.dataTransfer.dropEffect === "move") { - box.parentElement.removeChild(box); - } - else { - event.target.attributeStyleMap.clear(); - } - }); - box.addEventListener("dragenter", (event) => { - if (event.target.parentElement.classList.contains("drop-target")) { - event.target.parentElement.style.borderTop = "1px dotted"; - } - event.preventDefault(); - }); - box.addEventListener("dragleave", (event) => { - if (event.target.parentElement.classList.contains("drop-target")) { - event.target.parentElement.style.borderTop = ""; - } - event.preventDefault(); - }); - box.addEventListener("dragover", (event) => { - event.preventDefault(); - }); - box.addEventListener("drop", (event) => { - event.preventDefault(); - const data = event.dataTransfer.getData("text/plain"); - if (event.target.parentElement.classList.contains("drop-target")) { - event.target.parentElement.attributeStyleMap.clear(); - } - addBootLine(box.parentElement.id, JSON.parse(data), box); - }); + const item = document.createElement("draggable-item"); + item.bootable = bootable; + item.innerHTML = ` + +

${bootable.id}

+ `; + item.draggable = true; + item.classList.add("drop-target"); if (before) { - document.querySelector(`#${fieldset}`).insertBefore(box, before); + document.querySelector(`#${fieldset}`).insertBefore(item, before); } else { - document.querySelector(`#${fieldset}`).append(box); + document.querySelector(`#${fieldset}`).append(item); } } -class DraggableItem extends HTMLElement { - constructor () { - super(); - } -} - -customElements.define("draggable-item", DraggableItem); - -window.customElement - async function handleFormExit () { const body = { cores: document.querySelector("#cores").value, diff --git a/scripts/draggable.js b/scripts/draggable.js new file mode 100644 index 0000000..edaa81e --- /dev/null +++ b/scripts/draggable.js @@ -0,0 +1,131 @@ +class DraggableContainer extends HTMLElement { + constructor () { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.innerHTML = ` + + +
+ +
+ `; + this.content = this.shadowRoot.querySelector("#wrapper"); + this.bottom = this.shadowRoot.querySelector("#bottom"); + this.titleElem = this.shadowRoot.querySelector("#title"); + } + + get title () { + return this.titleElem.innerText; + } + + set title (title) { + this.titleElem.innerText = title; + } + + append (newNode) { + this.content.insertBefore(newNode, this.bottom); + } + + insertBefore (newNode, referenceNode) { + this.content.insertBefore(newNode, referenceNode); + } +} + +class DraggableItem extends HTMLElement { + constructor () { + super(); + this.attachShadow({ mode: "open" }); + this.shadowRoot.innerHTML = ` + + +
+ `; + this.content = this.shadowRoot.querySelector("#wrapper"); + // add drag and drop listeners + this.addEventListener("dragstart", (event) => { + this.content.style.opacity = "0.5"; + event.dataTransfer.setData("application/json", JSON.stringify(this.data)); + event.dataTransfer.setData("text/html", this.content.innerHTML); + event.dataTransfer.effectAllowed = "move"; + }); + this.addEventListener("dragend", (event) => { + if (event.dataTransfer.dropEffect === "move") { + this.parentElement.removeChild(this); + } + else { + this.content.attributeStyleMap.clear(); + } + }); + this.addEventListener("dragenter", (event) => { + if (event.target.classList.contains("drop-target")) { + event.target.classList.add("drag-over"); + event.target.borderTop = true; + } + event.preventDefault(); + }); + this.addEventListener("dragleave", (event) => { + if (event.target.classList.contains("drag-over")) { + event.target.classList.remove("drag-over"); + event.target.borderTop = false; + } + event.preventDefault(); + }); + this.addEventListener("dragover", (event) => { + 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.classList.contains("drop-target")) { + const data = event.dataTransfer.getData("application/json"); + const content = event.dataTransfer.getData("text/html"); + const item = document.createElement("draggable-item"); + item.bootable = data; + item.innerHTML = content; + item.draggable = true; + item.classList.add("drop-target"); + event.target.parentElement.insertBefore(item, event.target); + } + this.content.attributeStyleMap.clear(); + event.preventDefault(); + }); + } + + get innerHTML () { + return this.content.innerHTML; + } + + set innerHTML (innerHTML) { + this.content.innerHTML = innerHTML; + } + + get bootable () { + return this.data; + } + + set bootable (bootable) { + this.data = bootable; + } + + get borderTop () { + return this.content.style.borderTop === ""; + } + + set borderTop (borderTop) { + if (borderTop) { + this.content.style.borderTop = "1px dotted"; + } + else { + this.content.style.borderTop = ""; + } + } +} + +customElements.define("draggable-container", DraggableContainer); +customElements.define("draggable-item", DraggableItem);