Change to sortable for menuorder (and new fancy animations)

package.json

@@ -40,6 +40,7 @@
     "npm": "^10.1.0",
     "postcss": "^8.4.29",
     "react": "^18.2.0",
+    "sortablejs": "^1.15.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2"
   }

src/SEQTA.js

@@ -1,6 +1,7 @@
 /* global chrome */
 import { animate, spring, stagger } from 'motion';
 import Color from 'color';
+import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';
 
 import ShortcutLinks from './seqta/content/links.json';
 import MenuitemSVGKey from './seqta/content/MenuItemSVGKey.json';
@@ -857,76 +858,23 @@ function addExtensionSettings() {
 }
 
 function ApplyDraggableFunctions() {
-  var listItens = document.querySelectorAll('.draggable');
+  Sortable.mount(new AutoScroll());
-  [].forEach.call(listItens, function (item) {
+
-    addEventsDragAndDrop(item);
+  var el = document.querySelector('#menu > ul');
+  var sortable = Sortable.create(el, {
+    draggable: '.draggable',
+    dataIdAttr: 'data-key',
+    animation: 150,
+    easing: "cubic-bezier(.5,0,.5,1)",
+    onEnd: function () {
+      saveNewOrder(sortable);  // Save the new order when drag ends
+    },
   });
 }
 
-var dragSrcEl;
+function saveNewOrder(sortable) {
-
+  var order = sortable.toArray();
-function dragStart(e) {
+  chrome.storage.local.set({ menuorder: order });
-  this.style.opacity = '0.4';
-  dragSrcEl = this;
-  e.dataTransfer.effectAllowed = 'move';
-  e.dataTransfer.setData('text/html', this.innerHTML);
-}
-
-function dragEnter() {
-  this.classList.add('over');
-}
-
-function dragLeave(e) {
-  e.stopPropagation();
-  this.classList.remove('over');
-}
-
-function dragOver(e) {
-  e.preventDefault();
-  e.dataTransfer.dropEffect = 'move';
-  return false;
-}
-
-function dragDrop() {
-  if (dragSrcEl != this) {
-    const parentA = this.parentNode;
-    const siblingA = this.nextSibling === dragSrcEl ? this : this.nextSibling;
-
-    // Move `this` to before the `dragSrcEl`
-    dragSrcEl.parentNode.insertBefore(this, dragSrcEl);
-
-    // Move `dragSrcEl` to before the sibling of `this`
-    parentA.insertBefore(dragSrcEl, siblingA);
-
-    // Save position of all menu items
-    let children = parentA.childNodes;
-    let listorder = [];
-
-    for (let i = 0; i < children.length; i++) {
-      const elm = children[i];
-      listorder.push(elm.dataset.key);
-    }
-
-    chrome.storage.local.set({ menuorder: listorder });
-  }
-  return false;
-}
-
-function dragEnd() {
-  var listItens = document.querySelectorAll('.draggable');
-  [].forEach.call(listItens, function (item) {
-    item.classList.remove('over');
-  });
-  this.style.opacity = '1';
-}
-
-function addEventsDragAndDrop(el) {
-  el.addEventListener('dragstart', dragStart, false);
-  el.addEventListener('dragenter', dragEnter, false);
-  el.addEventListener('dragover', dragOver, false);
-  el.addEventListener('dragleave', dragLeave, false);
-  el.addEventListener('drop', dragDrop, false);
-  el.addEventListener('dragend', dragEnd, false);
 }
 
 function cloneAttributes(target, source) {

src/css/injected.scss

@@ -1796,6 +1796,9 @@ body {
   top: 1.1rem;
   left: -0.5rem;
 }
+.sortable-ghost {
+  opacity: 0;
+}
 /* Style the main element as the middle line of the hamburger */
 #menuToggle {
   width: 36px;