fix issues in boot order drag and drop selector

config.html

@@ -12,6 +12,8 @@
 		<link rel="stylesheet" href="css/form.css">
 		<script src="scripts/config.js" type="module"></script>
 		<script src="scripts/draggable.js" type="module"></script>
+		<script src="modules/Sortable.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
 	</head>
 	<body>
 		<header>

modules/Sortable.min.js

@@ -0,0 +1,2 @@
+/*! Sortable 1.15.2 - MIT | git://github.com/SortableJS/Sortable.git */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Sortable=e()}(this,function(){"use strict";function e(e,t){var n,o=Object.keys(e);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(e),t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),o.push.apply(o,n)),o}function I(o){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?e(Object(i),!0).forEach(function(t){var e,n;e=o,t=i[n=t],n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach(function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(i,t))})}return o}function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function a(){return(a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,o=arguments[e];for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t}).apply(this,arguments)}function i(t,e){if(null==t)return{};var n,o=function(t,e){if(null==t)return{};for(var n,o={},i=Object.keys(t),r=0;r<i.length;r++)n=i[r],0<=e.indexOf(n)||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols)for(var i=Object.getOwnPropertySymbols(t),r=0;r<i.length;r++)n=i[r],0<=e.indexOf(n)||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n]);return o}function r(t){return function(t){if(Array.isArray(t))return l(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return l(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?l(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var y=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),w=t(/Edge/i),s=t(/firefox/i),u=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),n=t(/iP(ad|od|hone)/i),c=t(/chrome/i)&&t(/android/i),d={capture:!1,passive:!1};function h(t,e,n){t.addEventListener(e,n,!y&&d)}function f(t,e,n){t.removeEventListener(e,n,!y&&d)}function p(t,e){if(e&&(">"===e[0]&&(e=e.substring(1)),t))try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return}}function P(t,e,n,o){if(t){n=n||document;do{if(null!=e&&(">"!==e[0]||t.parentNode===n)&&p(t,e)||o&&t===n)return t}while(t!==n&&(t=(i=t).host&&i!==document&&i.host.nodeType?i.host:i.parentNode))}var i;return null}var g,m=/\s+/g;function k(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(m," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(m," ")))}function R(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];o[e=!(e in o||-1!==e.indexOf("webkit"))?"-webkit-"+e:e]=n+("string"==typeof n?"":"px")}}function v(t,e){var n="";if("string"==typeof t)n=t;else do{var o=R(t,"transform")}while(o&&"none"!==o&&(n=o+" "+n),!e&&(t=t.parentNode));var i=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix||window.MSCSSMatrix;return i&&new i(n)}function b(t,e,n){if(t){var o=t.getElementsByTagName(e),i=0,r=o.length;if(n)for(;i<r;i++)n(o[i],i);return o}return[]}function O(){var t=document.scrollingElement;return t||document.documentElement}function X(t,e,n,o,i){if(t.getBoundingClientRect||t===window){var r,a,l,s,c,u,d=t!==window&&t.parentNode&&t!==O()?(a=(r=t.getBoundingClientRect()).top,l=r.left,s=r.bottom,c=r.right,u=r.height,r.width):(l=a=0,s=window.innerHeight,c=window.innerWidth,u=window.innerHeight,window.innerWidth);if((e||n)&&t!==window&&(i=i||t.parentNode,!y))do{if(i&&i.getBoundingClientRect&&("none"!==R(i,"transform")||n&&"static"!==R(i,"position"))){var h=i.getBoundingClientRect();a-=h.top+parseInt(R(i,"border-top-width")),l-=h.left+parseInt(R(i,"border-left-width")),s=a+r.height,c=l+r.width;break}}while(i=i.parentNode);return o&&t!==window&&(o=(e=v(i||t))&&e.a,t=e&&e.d,e&&(s=(a/=t)+(u/=t),c=(l/=o)+(d/=o))),{top:a,left:l,bottom:s,right:c,width:d,height:u}}}function Y(t,e,n){for(var o=M(t,!0),i=X(t)[e];oLine truncated

scripts/config.js

@@ -1,4 +1,4 @@
-import { requestPVE, requestAPI, goToPage, getURIData, resourcesConfig, setTitleAndHeader, bootConfig } from "./utils.js";
+import { requestPVE, requestAPI, goToPage, getURIData, resourcesConfig, setTitleAndHeader, bootConfig, setAppearance } from "./utils.js";
 import { alert, dialog } from "./dialog.js";
 
 window.addEventListener("DOMContentLoaded", init); // do the dumb thing where the disk config refreshes every second
@@ -14,6 +14,7 @@ let vmid;
 let config;
 
 async function init () {
+	setAppearance();
 	setTitleAndHeader();
 	const cookie = document.cookie;
 	if (cookie === "") {

scripts/draggable.js

@@ -1,39 +1,30 @@
-// Map valid UUIDs used by draggable-item elements in order to better validate data transfers to ignore random data transfers.
+const blank = document.createElement("img");
-const draggableItemUUIDs = {};
-
-/**
- * Get the data transfer source object by parsing its types. Valid draggable-item events have one type of the format `application/json/${uuid}`.
- * The function takes the entire type list from event.dataTransfer.types and returns the source object if valid, or null if invalid.
- * @param {*} typesList from event.dataTransfer.types
- * @returns {Object} Object containing the type, uuid, and element of the dataTransfer source or null
- */
-function getDragSource (typesList) {
-	if (typesList.length !== 1) {
-		return null;
-	}
-	const typeString = typesList[0];
-	const type = typeString.split("/");
-	if (type.length === 3 && type[0] === "application" && type[1] === "json" && draggableItemUUIDs[type[2]]) {
-		return { type: typeString, uuid: type[2], element: draggableItemUUIDs[type[2]] };
-	}
-	else {
-		return null;
-	}
-}
 
 class DraggableContainer extends HTMLElement {
 	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;
+				}
+			</style>
 			<label id="title"></label>
-			<div id="wrapper">
+			<div id="wrapper" style="padding-bottom: 1em;"></div>
-				<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");
+
+		window.Sortable.create(this.content, {
+			group: "boot",
+			ghostClass: "ghost",
+			setData: function (dataTransfer, dragEl) {
+				dataTransfer.setDragImage(blank, 0, 0);
+			}
+		});
 	}
 
 	get title () {
@@ -45,14 +36,10 @@ class DraggableContainer extends HTMLElement {
 	}
 
 	append (newNode) {
-		newNode.uuid = window.crypto.randomUUID();
+		this.content.appendChild(newNode, this.bottom);
-		draggableItemUUIDs[newNode.uuid] = newNode;
-		this.content.insertBefore(newNode, this.bottom);
 	}
 
 	insertBefore (newNode, referenceNode) {
-		newNode.uuid = window.crypto.randomUUID();
-		draggableItemUUIDs[newNode.uuid] = newNode;
 		this.content.insertBefore(newNode, referenceNode);
 	}
 
@@ -62,7 +49,6 @@ class DraggableContainer extends HTMLElement {
 
 	removeChild (node) {
 		if (node && this.content.contains(node)) {
-			draggableItemUUIDs[node.uuid] = null;
 			this.content.removeChild(node);
 			return true;
 		}
@@ -92,80 +78,19 @@ class DraggableItem extends HTMLElement {
 		// for whatever reason, only grid layout seems to respect the parent's content bounds
 		this.shadowRoot.innerHTML = `
 			<style>
-				#drag-over {
-					height: 1.5em; 
-					border: 1px dotted var(--main-text-color); 
-					border-radius: 5px; 
-					background-color: rgba(0,0,0,0.25); 
-				}
 				img {
 					height: 1em;
 					width: 1em;
 				}
+				* {
+					-webkit-box-sizing: border-box;
+					-moz-box-sizing: border-box;
+					box-sizing: border-box;
+				}
 			</style>
-			<div id="drag-over" style="display: none;"></div>
+			<div id="wrapper" part="wrapper"></div>
-			<div id="wrapper">
-				<div style="min-height: 1.5em;"></div>
-			</div>
 		`;
 		this.content = this.shadowRoot.querySelector("#wrapper");
-		// add drag and drop listeners
-		this.addEventListener("dragstart", (event) => {
-			this.content.style.opacity = "0.5";
-			const data = { id: this.id, data: this.data, content: this.content.innerHTML, value: this.value };
-			event.dataTransfer.setData(`application/json/${this.uuid}`, JSON.stringify(data));
-			event.dataTransfer.effectAllowed = "move";
-			const blank = document.createElement("img");
-			event.dataTransfer.setDragImage(blank, 0, 0);
-			setTimeout(() => {
-				this.content.style.visibility = "hidden";
-				this.content.style.height = "0";
-			}, 0);
-		});
-		this.addEventListener("dragend", (event) => {
-			if (event.dataTransfer.dropEffect === "move") {
-				this.parentElement.removeChild(this);
-			}
-			else {
-				this.content.attributeStyleMap.clear();
-			}
-		});
-		this.addEventListener("dragenter", (event) => {
-			const sourceElement = getDragSource(event.dataTransfer.types);
-			if (event.target.dropTarget && sourceElement) {
-				event.target.dragOver = sourceElement.element.innerHTML;
-			}
-			event.preventDefault();
-		});
-		this.addEventListener("dragleave", (event) => {
-			if (event.target.dragOver && getDragSource(event.dataTransfer.types)) {
-				event.target.dragOver = false;
-			}
-			event.preventDefault();
-		});
-		this.addEventListener("dragover", (event) => {
-			event.preventDefault();
-		});
-		this.addEventListener("drop", (event) => {
-			if (event.target.dragOver) {
-				event.target.dragOver = false;
-			}
-			const sourceElement = getDragSource(event.dataTransfer.types);
-			if (event.target.dropTarget && sourceElement) {
-				const transfer = JSON.parse(event.dataTransfer.getData(sourceElement.type));
-				const item = document.createElement("draggable-item");
-				item.data = transfer.data;
-				item.innerHTML = transfer.content;
-				item.draggable = true;
-				item.dropTarget = true;
-				item.id = transfer.id;
-				item.value = transfer.data.value;
-				item.uuid = sourceElement.uuid;
-				event.target.parentElement.insertBefore(item, event.target);
-			}
-			this.content.attributeStyleMap.clear();
-			event.preventDefault();
-		});
 	}
 
 	get innerHTML () {
@@ -175,36 +100,6 @@ class DraggableItem extends HTMLElement {
 	set innerHTML (innerHTML) {
 		this.content.innerHTML = innerHTML;
 	}
-
-	get dropTarget () {
-		return this.classList.contains("drop-target");
-	}
-
-	set dropTarget (dropTarget) {
-		if (dropTarget) {
-			this.classList.add("drop-target");
-		}
-		else {
-			this.classList.remove("drop-target");
-		}
-	}
-
-	get dragOver () {
-		return this.classList.contains("drag-over");
-	}
-
-	set dragOver (dragOver) {
-		if (dragOver) {
-			this.classList.add("drag-over");
-			this.shadowRoot.querySelector("#drag-over").style.display = "block";
-			this.shadowRoot.querySelector("#drag-over").innerHTML = dragOver;
-		}
-		else {
-			this.classList.remove("drag-over");
-			this.shadowRoot.querySelector("#drag-over").style.display = "none";
-			this.shadowRoot.querySelector("#drag-over").innerHTML = "";
-		}
-	}
 }
 
 customElements.define("draggable-container", DraggableContainer);