feat: gaps in tailwind migration closed

assets/js/hooks/menu_editor_tree.js

@@ -0,0 +1,134 @@
+export const MenuEditorTree = {
+  mounted() {
+    this.dragItemId = null;
+    this.dragSourceEl = null;
+    this.dropTargetEl = null;
+    this.dropPosition = null;
+
+    this.clearDropTarget = () => {
+      if (this.dropTargetEl) {
+        this.dropTargetEl.classList.remove("is-drop-before", "is-drop-after", "is-drop-inside");
+      }
+
+      this.dropTargetEl = null;
+      this.dropPosition = null;
+    };
+
+    this.setDropTarget = (row, position) => {
+      if (this.dropTargetEl === row && this.dropPosition === position) {
+        return;
+      }
+
+      this.clearDropTarget();
+      this.dropTargetEl = row;
+      this.dropPosition = position;
+      row.classList.add(`is-drop-${position}`);
+    };
+
+    this.handleDragStart = (event) => {
+      const handle = event.target.closest("[data-menu-drag-handle='true']");
+      const row = event.target.closest("[data-menu-item-id]");
+
+      if (!handle || !row || !this.el.contains(row)) {
+        return;
+      }
+
+      this.dragItemId = row.dataset.menuItemId || null;
+      this.dragSourceEl = row;
+      row.classList.add("is-dragging");
+
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", this.dragItemId || "");
+      }
+    };
+
+    this.handleDragOver = (event) => {
+      const row = event.target.closest("[data-menu-item-id]");
+
+      if (!this.dragItemId || !row || !this.el.contains(row)) {
+        this.clearDropTarget();
+        return;
+      }
+
+      const targetItemId = row.dataset.menuItemId || "";
+
+      if (!targetItemId || targetItemId === this.dragItemId) {
+        this.clearDropTarget();
+        return;
+      }
+
+      event.preventDefault();
+
+      const rect = row.getBoundingClientRect();
+      const offsetY = event.clientY - rect.top;
+      const allowInside = row.dataset.menuCanDropInside === "true";
+      const insideBandTop = rect.height * 0.3;
+      const insideBandBottom = rect.height * 0.7;
+
+      const position =
+        allowInside && offsetY >= insideBandTop && offsetY <= insideBandBottom
+          ? "inside"
+          : offsetY < rect.height / 2
+            ? "before"
+            : "after";
+
+      this.setDropTarget(row, position);
+
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "move";
+      }
+    };
+
+    this.handleDrop = (event) => {
+      const row = event.target.closest("[data-menu-item-id]");
+
+      if (!this.dragItemId || !row || !this.el.contains(row) || !this.dropPosition) {
+        this.clearDropTarget();
+        return;
+      }
+
+      event.preventDefault();
+
+      this.pushEvent("menu_editor_drop_item", {
+        drag_item_id: this.dragItemId,
+        target_item_id: row.dataset.menuItemId,
+        position: this.dropPosition
+      });
+
+      this.clearDropTarget();
+    };
+
+    this.handleDragLeave = (event) => {
+      const related = event.relatedTarget;
+
+      if (this.dropTargetEl && (!related || !this.dropTargetEl.contains(related))) {
+        this.clearDropTarget();
+      }
+    };
+
+    this.handleDragEnd = () => {
+      if (this.dragSourceEl) {
+        this.dragSourceEl.classList.remove("is-dragging");
+      }
+
+      this.dragItemId = null;
+      this.dragSourceEl = null;
+      this.clearDropTarget();
+    };
+
+    this.el.addEventListener("dragstart", this.handleDragStart);
+    this.el.addEventListener("dragover", this.handleDragOver);
+    this.el.addEventListener("drop", this.handleDrop);
+    this.el.addEventListener("dragleave", this.handleDragLeave);
+    this.el.addEventListener("dragend", this.handleDragEnd);
+  },
+
+  destroyed() {
+    this.el.removeEventListener("dragstart", this.handleDragStart);
+    this.el.removeEventListener("dragover", this.handleDragOver);
+    this.el.removeEventListener("drop", this.handleDrop);
+    this.el.removeEventListener("dragleave", this.handleDragLeave);
+    this.el.removeEventListener("dragend", this.handleDragEnd);
+  }
+};