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);