From 2ec4ac30fca12f0be9c6ec98a43d08c9fd2288ac Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Tue, 29 Aug 2023 21:26:57 +0000
Subject: [PATCH] improve draggable item generalization

---
 scripts/config.js    | 10 ++++++----
 scripts/draggable.js | 10 ++--------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/scripts/config.js b/scripts/config.js
index c614a1c..7d3b806 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -760,10 +760,12 @@ function addBootLine (container, data, before = null) {
 	const item = document.createElement("draggable-item");
 	item.data = data;
 	item.innerHTML = `
-		<img src="images/actions/drag.svg" id="drag">
-		<img src="${bootMetaData[data.prefix].icon}">
-		<p style="margin: 0px;">${data.id}</p>
-		<p style="margin: 0px; overflow-x: hidden; white-space: nowrap;">${data.detail}</p>
+		<div style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
+			<img src="images/actions/drag.svg" id="drag">
+			<img src="${bootMetaData[data.prefix].icon}">
+			<p style="margin: 0px;">${data.id}</p>
+			<p style="margin: 0px; overflow-x: hidden; white-space: nowrap;">${data.detail}</p>
+		</div>
 	`;
 	item.draggable = true;
 	item.classList.add("drop-target");
diff --git a/scripts/draggable.js b/scripts/draggable.js
index 96f51eb..f34f26f 100644
--- a/scripts/draggable.js
+++ b/scripts/draggable.js
@@ -64,12 +64,6 @@ class DraggableItem extends HTMLElement {
 		// for whatever reason, only grid layout seems to respect the parent's content bounds
 		this.shadowRoot.innerHTML = `
 			<style>
-				#wrapper {
-					grid-template-columns: auto auto 8ch 1fr;
-					display: grid;
-					column-gap: 10px;
-					align-items: center;
-				}
 				#drag {
 					cursor: move;
 				}
@@ -86,7 +80,7 @@ class DraggableItem extends HTMLElement {
 		// add drag and drop listeners
 		this.addEventListener("dragstart", (event) => {
 			this.content.style.opacity = "0.5";
-			const data = { data: this.data, content: this.content.innerHTML, value: this.value };
+			const data = { id: this.id, data: this.data, content: this.content.innerHTML, value: this.value };
 			event.dataTransfer.setData("application/json", JSON.stringify(data));
 			event.dataTransfer.effectAllowed = "move";
 		});
@@ -127,7 +121,7 @@ class DraggableItem extends HTMLElement {
 				item.innerHTML = transfer.content;
 				item.draggable = true;
 				item.classList.add("drop-target");
-				item.id = `boot-${transfer.data.id}`;
+				item.id = transfer.id;
 				item.value = transfer.data.value;
 				event.target.parentElement.insertBefore(item, event.target);
 			}