implement SSR for instance config page

web/scripts/draggable.js

@@ -1,28 +1,16 @@
 const blank = document.createElement("img");
 
 class DraggableContainer extends HTMLElement {
+	shadowRoot = null;
+
 	constructor () {
 		super();
-		this.attachShadow({ mode: "open" });
-		this.shadowRoot.innerHTML = `
-			<style>
-				draggable-item.ghost::part(wrapper) {
-					border: 1px dashed var(--main-text-color);
-					border-radius: 5px;
-					margin: -1px;
-				}
-				draggable-item::part(wrapper) {
-					cursor: grab;
-				}
-			</style>
-			<label id="title"></label>
-			<div id="wrapper" style="padding-bottom: 1em;"></div>
-		`;
+		const internals = this.attachInternals();
+		this.shadowRoot = internals.shadowRoot;
 		this.content = this.shadowRoot.querySelector("#wrapper");
-		this.titleElem = this.shadowRoot.querySelector("#title");
 
 		window.Sortable.create(this.content, {
-			group: "boot",
+			group: this.dataset.group,
 			ghostClass: "ghost",
 			setData: function (dataTransfer, dragEl) {
 				dataTransfer.setDragImage(blank, 0, 0);
@@ -30,14 +18,6 @@ class DraggableContainer extends HTMLElement {
 		});
 	}
 
-	get title () {
-		return this.titleElem.innerText;
-	}
-
-	set title (title) {
-		this.titleElem.innerText = title;
-	}
-
 	append (newNode) {
 		this.content.appendChild(newNode, this.bottom);
 	}
@@ -50,6 +30,10 @@ class DraggableContainer extends HTMLElement {
 		return this.content.querySelector(query);
 	}
 
+	hasChildNodes (query) {
+		return this.querySelector(query) !== null;
+	}
+
 	removeChild (node) {
 		if (node && this.content.contains(node)) {
 			this.content.removeChild(node);
@@ -65,54 +49,12 @@ class DraggableContainer extends HTMLElement {
 	get value () {
 		const value = [];
 		this.content.childNodes.forEach((element) => {
-			if (element.value) {
-				value.push(element.value);
+			if (element.dataset.value) {
+				value.push(element.dataset.value);
 			}
 		});
 		return value;
 	}
 }
 
-class DraggableItem extends HTMLElement {
-	#value = null;
-	uuid = null;
-	constructor () {
-		super();
-		this.attachShadow({ mode: "open" });
-		// for whatever reason, only grid layout seems to respect the parent's content bounds
-		this.shadowRoot.innerHTML = `
-			<style>
-				img, svg {
-					height: 1em;
-					width: 1em;
-				}
-				* {
-					-webkit-box-sizing: border-box;
-					-moz-box-sizing: border-box;
-					box-sizing: border-box;
-				}
-			</style>
-			<div id="wrapper" part="wrapper"></div>
-		`;
-		this.content = this.shadowRoot.querySelector("#wrapper");
-	}
-
-	get innerHTML () {
-		return this.content.innerHTML;
-	}
-
-	set innerHTML (innerHTML) {
-		this.content.innerHTML = innerHTML;
-	}
-
-	get value () {
-		return this.#value;
-	}
-
-	set value (value) {
-		this.#value = value;
-	}
-}
-
 customElements.define("draggable-container", DraggableContainer);
-customElements.define("draggable-item", DraggableItem);