new sortable list implementation

data/static/js/ui.js

@@ -90,21 +90,16 @@ document.addEventListener("DOMContentLoaded", () => {
       minWidth: origMinWidth,
       minHeight: origMinHeight,
     } = getComputedStyle(img);
-    console.log(img, img.naturalWidth, img.naturalHeight, origMinWidth, origMinHeight, origMaxWidth, origMaxHeight)
     if (img.naturalWidth < parseInt(origMinWidth)) {
-      console.log(1)
       img.style.minWidth = img.naturalWidth + "px";
     }
     if (img.naturalHeight < parseInt(origMinHeight)) {
-      console.log(2)
       img.style.minHeight = img.naturalHeight + "px";
     }
     if (img.naturalWidth < parseInt(origMaxWidth)) {
-      console.log(3)
       img.style.maxWidth = img.naturalWidth + "px";
     }
     if (img.naturalHeight < parseInt(origMaxHeight)) {
-      console.log(4)
       img.style.maxHeight = img.naturalHeight + "px";
     }
   }
@@ -133,3 +128,108 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   })
 });
+
+
+{
+  function isBefore(el1, el2) {
+    if (el2.parentNode === el1.parentNode) {
+      for (let cur = el1.previousSibling; cur; cur = cur.previousSibling) {
+        if (cur === el2) return true;
+      }
+    }
+    return false;
+  }
+
+  let draggedItem = null;
+
+  function sortableItemDragStart(e, item) {
+    const box = item.getBoundingClientRect();
+    const oX = e.clientX - box.left;
+    const oY = e.clientY - box.top;
+    draggedItem = item;
+    item.classList.add('dragged');
+    e.dataTransfer.setDragImage(item, oX, oY);
+    e.dataTransfer.effectAllowed = 'move';
+  }
+
+  function sortableItemDragEnd(e, item) {
+    draggedItem = null;
+    item.classList.remove('dragged');
+  }
+
+  function sortableItemDragOver(e, item) {
+    const target = e.target.closest('.sortable-item');
+    if (!target || target === draggedItem) {
+      return;
+    }
+    const inSameList = draggedItem.dataset.sortableListKey === target.dataset.sortableListKey;
+    if (!inSameList) {
+      return;
+    }
+    const targetList = draggedItem.closest('.sortable-list');
+    if (isBefore(draggedItem, target)) {
+      targetList.insertBefore(draggedItem, target);
+    } else {
+      targetList.insertBefore(draggedItem, target.nextSibling);
+    }
+  }
+
+  const listItemsHandled = new Map();
+
+  const getListItemsHandled =  (list) => {
+    return listItemsHandled.get(list) || new Set();
+  }
+
+  function registerSortableList(list) {
+    list.querySelectorAll('li:not(.immovable)').forEach(item => {
+      const listItems = getListItemsHandled(list);
+      listItems.add(item);
+      listItemsHandled.set(list, listItems);
+      const dragger = item.querySelector('.dragger');
+      dragger.addEventListener('dragstart', e => {sortableItemDragStart(e, item)});
+      dragger.addEventListener('dragend', e => {sortableItemDragEnd(e, item)});
+      item.addEventListener('dragover', e => {sortableItemDragOver(e, item)});
+    });
+
+    const obs = new MutationObserver(records => {
+      for (const mutation of records) {
+        mutation.addedNodes.forEach(node => {
+          if (!(node instanceof HTMLElement)) {
+            return;
+          }
+          if (!node.classList.contains('sortable-item')) {
+            return;
+          }
+          const listItems = getListItemsHandled(list)
+          if (listItems.has(node)) {
+            return;
+          }
+          const dragger = node.querySelector('.dragger');
+          dragger.addEventListener('dragstart', e => {sortableItemDragStart(e, node)});
+          dragger.addEventListener('dragend', e => {sortableItemDragEnd(e, node)});
+          node.addEventListener('dragover', e => {sortableItemDragOver(e, node)});
+          listItems.add(node);
+          listItemsHandled.set(list, listItems);
+        });
+      }
+    });
+    obs.observe(list, {childList: true});
+  }
+
+  document.querySelectorAll('.sortable-list').forEach(registerSortableList);
+
+  listsObs = new MutationObserver(records => {
+    for (const mutation of records) {
+      mutation.addedNodes.forEach(node => {
+        if (!(node instanceof HTMLElement)) {
+          return;
+        }
+        if (!node.classList.contains('sortable-list')) {
+          return;
+        }
+        registerSortableList(node);
+      })
+    }
+  })
+  listsObs.observe(document.body, {childList: true, subtree: true});
+}