Update cl.js

cl.js

@@ -1,4 +1,11 @@
 (function() {
+  // Load interact.js dynamically if it is not already loaded
+  if (!window.interact) {
+    var script = document.createElement("script");
+    script.src = "https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js";
+    document.head.appendChild(script);
+  }
+
   var s;
   if (!document.querySelector('style.EVALDOTJSSTYLETHING')) {
     s = document.createElement("style");
@@ -10,10 +17,10 @@
         width: 500px;
         height: 350px;
         background: rgba(0,0,0,0.8);
-        top: 50px;
+        top: 0;
         left: 0;
         right: 0;
-        margin: auto;
+        margin: 50px auto;
         font-size: 0;
         z-index: 100000;
       }
@@ -84,23 +91,31 @@
       evalcontainer > evaloutput > evaloutputentry.EVALLOG::before {
         content: "";
       }
-      .close-button {
+      .eval-close-button {
         position: absolute;
-        top: 10px;
+        top: 5px;
         right: 10px;
-        background: rgba(255, 0, 0, 0.8);
-        color: white;
-        border: none;
-        padding: 5px;
+        font-size: 18px;
+        color: #fff;
         cursor: pointer;
-        z-index: 100001; /* above the container */
+        font-weight: bold;
       }
     `;
     document.head.appendChild(s);
   }
+
   if (!document.querySelector('evalcontainer')) {
     s = document.createElement("evalcontainer");
     var output = document.createElement("evaloutput");
+    
+    // Create close button
+    var closeButton = document.createElement("span");
+    closeButton.innerHTML = "×";
+    closeButton.className = "eval-close-button";
+    closeButton.onclick = function() {
+      evaljs.close();
+    };
+    s.appendChild(closeButton);
 
     function createOutputEntry(words) {
       var t = document.createElement("evaloutputentry");
@@ -108,18 +123,11 @@
       t.className = 'EVALLOG';
       output.appendChild(t);
     }
+
     createOutputEntry('To close this window, do evaljs.close();');
     createOutputEntry('To clear, do evaljs.clear();');
     s.appendChild(output);
     
-    var closeButton = document.createElement("button");
-    closeButton.className = 'close-button';
-    closeButton.textContent = '×';
-    closeButton.onclick = function() {
-      evaljs.close();
-    };
-    s.appendChild(closeButton);
-
     var textarea = document.createElement("textarea");
     textarea.className = 'EVALTEXTAREA';
     textarea.focus();
@@ -158,7 +166,7 @@
               t.classList.add('EVALSTRING');
               break;
           }
-        } catch (e) {
+        } catch(e) {
           evaloutput = e;
           t.classList.add('EVALERROR');
         }
@@ -172,8 +180,6 @@
     };
     s.appendChild(textarea);
     document.body.appendChild(s);
-    
-    // Initialize evaljs object
     evaljs = {
       window: s,
       clear() {
@@ -184,27 +190,6 @@
       }
     };
 
-    // Interact.js for drag-and-drop functionality
-    interact(s)
-      .draggable({
-        onmove: dragMoveListener
-      });
-
-    function dragMoveListener(event) {
-      var target = event.target,
-          // keep the dragged position in the data-x/data-y attributes
-          x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
-          y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
-
-      // translate the element
-      target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
-
-      // update the position attributes
-      target.setAttribute('data-x', x);
-      target.setAttribute('data-y', y);
-    }
-
-    // Adjust console methods
     function merp(u, t) {
       switch (typeof u) {
         case 'object':
@@ -233,6 +218,7 @@
       }
       return u;
     }
+
     console.log = function() {
       for (var i = 0; i < arguments.length; i++) {
         var t = document.createElement("evaloutputentry"), u = arguments[i];
@@ -242,6 +228,7 @@
         output.appendChild(t);
       }
     };
+
     console.warn = function() {
       for (var i = 0; i < arguments.length; i++) {
         var t = document.createElement("evaloutputentry"), u = arguments[i];
@@ -252,6 +239,7 @@
         output.appendChild(t);
       }
     };
+
     console.error = function() {
       for (var i = 0; i < arguments.length; i++) {
         var t = document.createElement("evaloutputentry"), u = arguments[i];
@@ -262,5 +250,27 @@
         output.appendChild(t);
       }
     };
+
+    // Initialize drag-and-drop using interact.js
+    script.onload = function() {
+      interact('evalcontainer').draggable({
+        modifiers: [
+          interact.modifiers.restrictRect({
+            restriction: 'parent',
+            endOnly: true
+          })
+        ],
+        listeners: {
+          move(event) {
+            var target = event.target;
+            var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+            var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+            target.style.transform = `translate(${x}px, ${y}px)`;
+            target.setAttribute('data-x', x);
+            target.setAttribute('data-y', y);
+          }
+        }
+      });
+    };
   }
 }());