From a6f3e87921ec157cea3beec350e3d3c6a21f4df8 Mon Sep 17 00:00:00 2001
From: patriceac <48073125+patriceac@users.noreply.github.com>
Date: Wed, 16 Nov 2022 00:35:02 -0800
Subject: [PATCH] Image modifiers drag-and-drop plugin

---
 ui/plugins/ui/modifiers-dnd.plugin.js | 100 ++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 ui/plugins/ui/modifiers-dnd.plugin.js

diff --git a/ui/plugins/ui/modifiers-dnd.plugin.js b/ui/plugins/ui/modifiers-dnd.plugin.js
new file mode 100644
index 00000000..9406cf82
--- /dev/null
+++ b/ui/plugins/ui/modifiers-dnd.plugin.js
@@ -0,0 +1,100 @@
+(function () {
+    "use strict"
+
+    var styleSheet = document.createElement("style");
+    styleSheet.textContent = `
+        .modifier-card-tiny.drag-sort-active {
+            background: transparent;
+            border: 2px dashed white;
+            opacity:0.2;
+        }
+    `;
+    document.head.appendChild(styleSheet);
+
+    // observe for changes in tag list
+    var observer = new MutationObserver(function (mutations) {
+    //    mutations.forEach(function (mutation) {
+            if (editorModifierTagsList.childNodes.length > 0) {
+                ModifierDragAndDrop(editorModifierTagsList)
+            }
+    //    })
+    })
+    
+    observer.observe(editorModifierTagsList, {
+            childList: true
+    })
+
+    let current
+    function ModifierDragAndDrop(target) {
+        editorModifierTagsList.ondragenter = (e) => {
+            e.preventDefault()
+            e.stopPropagation()
+        }
+        editorModifierTagsList.ondragover = (e) => {
+            e.preventDefault()
+            e.stopPropagation()
+        }
+
+        let overlays = document.querySelector('#editor-inputs-tags-list').querySelectorAll('.modifier-card-overlay')
+        overlays.forEach (i => {
+            i.parentElement.draggable = true;
+            
+            i.parentElement.ondragstart = (e) => {
+                current = i
+                i.parentElement.getElementsByClassName('modifier-card-image-overlay')[0].innerText = ''
+                i.parentElement.draggable = true
+                i.parentElement.classList.add('drag-sort-active')
+                for(let item of document.querySelector('#editor-inputs-tags-list').getElementsByClassName('modifier-card-image-overlay')) {
+                    if (item.parentElement.parentElement.getElementsByClassName('modifier-card-overlay')[0] != current) {
+                        item.parentElement.parentElement.getElementsByClassName('modifier-card-image-overlay')[0].style.opacity = 0
+                        if(item.parentElement.getElementsByClassName('modifier-card-image').length > 0) {
+                            item.parentElement.getElementsByClassName('modifier-card-image')[0].style.filter = 'none'
+                        }
+                        item.parentElement.parentElement.style.transform = 'none'
+                        item.parentElement.parentElement.style.boxShadow = 'none'
+                    }
+                    item.innerText = ''
+                }
+            }
+            
+            i.ondragenter = (e) => {
+                e.preventDefault()
+                if (i != current) {
+                    let currentPos = 0, droppedPos = 0;
+                    for (let it = 0; it < overlays.length; it++) {
+                        if (current == overlays[it]) { currentPos = it; }
+                        if (i == overlays[it]) { droppedPos = it; }
+                    }
+
+                    if (i.parentElement != current.parentElement) {
+                        let currentPos = 0, droppedPos = 0
+                        for (let it = 0; it < overlays.length; it++) {
+                            if (current == overlays[it]) { currentPos = it }
+                            if (i == overlays[it]) { droppedPos = it }
+                        }
+                        if (currentPos < droppedPos) {
+                            current = i.parentElement.parentNode.insertBefore(current.parentElement, i.parentElement.nextSibling).getElementsByClassName('modifier-card-overlay')[0]
+                        } else {
+                            current = i.parentElement.parentNode.insertBefore(current.parentElement, i.parentElement).getElementsByClassName('modifier-card-overlay')[0]
+                        }
+                        // update active tags
+                        const tag = activeTags.splice(currentPos, 1)
+                        activeTags.splice(droppedPos, 0, tag[0])
+                    }
+                }
+            };
+
+            i.ondragover = (e) => {
+                e.preventDefault()
+            }
+            
+            i.parentElement.ondragend = (e) => {
+                i.parentElement.classList.remove('drag-sort-active')
+                for(let item of document.querySelector('#editor-inputs-tags-list').getElementsByClassName('modifier-card-image-overlay')) {
+                    item.style.opacity = ''
+                    item.innerText = '-'
+                }
+            }
+        })
+    }
+})()