Initial commit

2026-10-31 23:35:38 -05:00
parent 652d95803b
commit 6833e7acd5
10 changed files with 908 additions and 0 deletions
@@ -0,0 +1,61 @@
+const setupMenuBlocks = () => {
+    for (const [key, value] of Object.entries(ScriptElms)) {
+        customElements.define(key, value);
+        const elm       = document.createElement(key);
+        elm.className   = "script-block";
+        elm.draggable   = true
+        elm.ondragstart = dragStartHandler
+        menu.append(elm);
+    }
+}
+
+const setupDragAndDrop = () => {
+    script.ondrop     = dragDropHandler
+    script.ondragover = dragOverHandler
+    header.ondrop     = dragDropHandler
+    header.ondragover = dragOverHandler
+
+    const flexParents = document.getElementsByClassName("flex-parent");
+    for (let i = 0; i < flexParents.length; i++) {
+        flexParents[i].ondrop     = dragDropHandler
+        flexParents[i].ondragover = dragOverHandler
+    }
+}
+
+const dragStartHandler = (eve) => {
+    draggedElm = eve.target;
+    console.debug("Node: ", draggedElm);
+    eve.dataTransfer.setData("text", eve.target.tagName.toLowerCase());
+}
+
+const dragOverHandler = (eve) => { eve.preventDefault(); }
+
+const dragDropHandler = (eve) => {
+    eve.preventDefault();
+    eve.stopPropagation();
+
+    const tagTarget = eve.currentTarget;
+
+    if (
+        eve.currentTarget.id.toLowerCase() === "header"     ||
+        eve.currentTarget.classList.contains("flex-parent")
+    ) {
+        if ( draggedElm.parentNode.id.toLowerCase() !== "menu" ) {
+            destroyScriptBlock(draggedElm, tagTarget);
+        }
+
+        return;
+    }
+
+    addBlockToScript(draggedElm, tagTarget);
+}
+
+const addBlockToScript = (draggedTarget, tagTarget) => {
+    const elm = draggedTarget.cloneNode(true);
+    elm.ondragstart = dragStartHandler
+    tagTarget.appendChild(elm);
+}
+
+const destroyScriptBlock = (draggedTarget, tagTarget) => {
+    draggedTarget.remove();
+}