Update cl.js

cl.js

@@ -11,21 +11,12 @@
         height: 350px;
         background: rgba(0,0,0,0.8);
         top: 50px;
-        left: 50%;
-        transform: translateX(-50%);
+        left: 0;
+        right: 0;
+        margin: auto;
         font-size: 0;
         z-index: 100000;
       }
-      evalcontainer > .close-btn {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        background: transparent;
-        border: none;
-        color: white;
-        font-size: 16px;
-        cursor: pointer;
-      }
       evalcontainer > textarea.EVALTEXTAREA {
         width: 500px;
         border: none;
@@ -93,23 +84,24 @@
       evalcontainer > evaloutput > evaloutputentry.EVALLOG::before {
         content: "";
       }
+      .close-button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: rgba(255, 0, 0, 0.8);
+        color: white;
+        border: none;
+        padding: 5px;
+        cursor: pointer;
+        z-index: 100001; /* above the container */
+      }
     `;
     document.head.appendChild(s);
   }
-
   if (!document.querySelector('evalcontainer')) {
     s = document.createElement("evalcontainer");
-    
-    // Close button
-    var closeButton = document.createElement("button");
-    closeButton.className = 'close-btn';
-    closeButton.textContent = '×';
-    closeButton.onclick = function() {
-      evaljs.close();
-    };
-    s.appendChild(closeButton);
-
     var output = document.createElement("evaloutput");
+
     function createOutputEntry(words) {
       var t = document.createElement("evaloutputentry");
       t.innerHTML = words;
@@ -119,6 +111,14 @@
     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';
@@ -126,7 +126,7 @@
     textarea.onkeypress = e => {
       if (e.keyCode === 13 && !e.shiftKey) {
         var t = document.createElement("evaloutputentry"),
-          evaloutput;
+        evaloutput;
         t.textContent = textarea.value;
         output.appendChild(t);
         t = document.createElement("evaloutputentry");
@@ -170,38 +170,41 @@
         return false;
       }
     };
-    
     s.appendChild(textarea);
     document.body.appendChild(s);
+    
+    // Initialize evaljs object
+    evaljs = {
+      window: s,
+      clear() {
+        while (output.hasChildNodes()) output.removeChild(output.lastChild);
+      },
+      close() {
+        document.body.removeChild(this.window);
+      }
+    };
 
-    // Draggable functionality
+    // Interact.js for drag-and-drop functionality
     interact(s)
       .draggable({
         onmove: dragMoveListener
       });
 
-    function dragMoveListener (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;
+    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);
     }
 
-    evaljs = {
-      window: s,
-      clear() {
-        while (output.hasChildNodes()) output.removeChild(output.lastChild);
-      },
-      close() {
-        document.body.removeChild(this.window);
-      }
-    };
-
+    // Adjust console methods
     function merp(u, t) {
       switch (typeof u) {
         case 'object':
@@ -230,7 +233,6 @@
       }
       return u;
     }
-    
     console.log = function() {
       for (var i = 0; i < arguments.length; i++) {
         var t = document.createElement("evaloutputentry"), u = arguments[i];
@@ -261,9 +263,4 @@
       }
     };
   }
-
-  // Load interact.js library dynamically
-  var script = document.createElement('script');
-  script.src = 'https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js';
-  document.head.appendChild(script);
-})();
+}());