add draggable list custom element,
improve boot order list
This commit is contained in:
Arthur Lu
parent
7e01b5d730
commit
888e8bbc7e
13
config.html
13
config.html
@ -10,6 +10,7 @@
|
||||
<link rel="stylesheet" href="css/nav.css">
|
||||
<link rel="stylesheet" href="css/form.css">
|
||||
<script src="scripts/config.js" type="module"></script>
|
||||
<script src="scripts/draggable.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -55,15 +56,9 @@
|
||||
</fieldset>
|
||||
<fieldset class="w3-card w3-padding none" id="boot-card">
|
||||
<legend>Boot Order</legend>
|
||||
<div id="enabled">
|
||||
<label>Enabled</label>
|
||||
<div class="drop-target spacer" id="enabled-spacer"></div>
|
||||
</div>
|
||||
<hr style="margin: 0.5em 0px;">
|
||||
<div id="disabled">
|
||||
<label>Disabled</label>
|
||||
<div class="drop-target spacer" id="disabled-spacer"></div>
|
||||
</div>
|
||||
<draggable-container id="enabled"></draggable-container>
|
||||
<hr style="padding: 0; margin: 0;">
|
||||
<draggable-container id="disabled"></draggable-container>
|
||||
</fieldset>
|
||||
<div class="w3-container w3-center" id="form-actions">
|
||||
<button class="w3-button w3-margin" id="exit" type="button">EXIT</button>
|
||||
|
||||
@ -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 = `
|
||||
<img src="${bootMetaData[bootable.prefix].icon}">
|
||||
<p style="margin: 0px;">${bootable.id}</p>
|
||||
`;
|
||||
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,
|
||||
|
||||
131
scripts/draggable.js
Normal file
131
scripts/draggable.js
Normal file
@ -0,0 +1,131 @@
|
||||
class DraggableContainer extends HTMLElement {
|
||||
constructor () {
|
||||
super();
|
||||
this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.innerHTML = `
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<label id="title"></label>
|
||||
<div id="wrapper">
|
||||
<draggable-item id="bottom" class="drop-target"></draggable-item>
|
||||
</div>
|
||||
`;
|
||||
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 = `
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<style>
|
||||
#wrapper {
|
||||
min-height: 1.5em;
|
||||
}
|
||||
</style>
|
||||
<div id="wrapper" class="flex row"></div>
|
||||
`;
|
||||
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);
|
||||
Loading…
Reference in New Issue
Block a user