cl.js

(function() {
  var s;
  if (!document.querySelector('style.EVALDOTJSSTYLETHING')) {
    s = document.createElement("style");
    s.className = "EVALDOTJSSTYLETHING";
    s.innerHTML = `
      evalcontainer {
        display: block;
        position: fixed;
        width: 500px;
        height: 350px;
        background: rgba(0,0,0,0.8);
        top: 50px;
        left: 0;
        right: 0;
        margin: auto;
        font-size: 0;
        z-index: 100000;
      }
      evalcontainer > textarea.EVALTEXTAREA {
        width: 500px;
        border: none;
        box-sizing: border-box;
        font-family: monospace;
        font-size: 12px;
        height: 200px;
        padding: 5px;
        resize: none;
        position: absolute;
        bottom: 0;
        background: rgba(0,0,0,0.8);
        color: white;
      }
      evalcontainer > evaloutput {
        display: block;
        width: 500px;
        max-height: 150px;
        font-size: 12px;
        font-family: monospace;
        overflow-y: auto;
        color: white;
        box-sizing: border-box;
        padding: 5px;
        position: absolute;
        bottom: 200px;
      }
      evalcontainer > evaloutput > evaloutputentry {
        display: block;
        white-space: pre;
      }
      evalcontainer > evaloutput > evaloutputentry::before {
        content: ">\\00a0";
        color: rgba(255,255,255,0.5);
      }
      evalcontainer > evaloutput > evaloutputentry.EVALRESULT {
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }
      evalcontainer > evaloutput > evaloutputentry.EVALRESULT::before {
        content: "<\\00a0";
        font-style: normal;
      }
      evalcontainer > evaloutput > evaloutputentry.EVALWARN {
        background: #FFEB3B;
        color: black;
      }
      evalcontainer > evaloutput > evaloutputentry.EVALSTRING {
        color: #FFEB3B;
      }
      evalcontainer > evaloutput > evaloutputentry.EVALNUMBER {
        color: #2196F3;
      }
      evalcontainer > evaloutput > evaloutputentry.EVALFUNCTION {
        font-style: italic;
      }
      evalcontainer > evaloutput > evaloutputentry.EVALUNDEFINED {
        color: #9E9E9E;
      }
      evalcontainer > evaloutput > evaloutputentry.EVALERROR {
        background: #f44336;
      }
      evalcontainer > evaloutput > evaloutputentry.EVALWARN.EVALSTRING {
        color: black;
      }
      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");
    var output = document.createElement("evaloutput");

    function createOutputEntry(words) {
      var t = document.createElement("evaloutputentry");
      t.innerHTML = words;
      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();
    textarea.onkeypress = e => {
      if (e.keyCode === 13 && !e.shiftKey) {
        var t = document.createElement("evaloutputentry"),
        evaloutput;
        t.textContent = textarea.value;
        output.appendChild(t);
        t = document.createElement("evaloutputentry");
        t.classList.add('EVALRESULT');
        try {
          evaloutput = eval(textarea.value);
          switch (typeof evaloutput) {
            case 'object':
              evaloutput = JSON.stringify(evaloutput);
              t.classList.add('EVALFUNCTION');
              break;
            case 'string':
              evaloutput = `"${evaloutput}"`;
              t.classList.add('EVALSTRING');
              break;
            case 'number':
            case 'boolean':
              t.classList.add('EVALNUMBER');
              break;
            case 'function':
              evaloutput = evaloutput.toString();
              t.classList.add('EVALFUNCTION');
              break;
            case 'undefined':
              t.classList.add('EVALUNDEFINED');
              break;
            case 'symbol':
              evaloutput = evaloutput.toString();
              t.classList.add('EVALSTRING');
              break;
          }
        } catch (e) {
          evaloutput = e;
          t.classList.add('EVALERROR');
        }
        t.textContent = evaloutput + '';
        output.appendChild(t);
        output.scrollTop = output.scrollHeight;
        textarea.value = '';
        e.preventDefault();
        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);
      }
    };

    // 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':
          u = JSON.stringify(u);
          t.classList.add('EVALFUNCTION');
          break;
        case 'string':
          u = `"${u}"`;
          t.classList.add('EVALSTRING');
          break;
        case 'number':
        case 'boolean':
          t.classList.add('EVALNUMBER');
          break;
        case 'function':
          u = u.toString();
          t.classList.add('EVALFUNCTION');
          break;
        case 'undefined':
          t.classList.add('EVALUNDEFINED');
          break;
        case 'symbol':
          u = u.toString();
          t.classList.add('EVALSTRING');
          break;
      }
      return u;
    }
    console.log = function() {
      for (var i = 0; i < arguments.length; i++) {
        var t = document.createElement("evaloutputentry"), u = arguments[i];
        t.classList.add('EVALLOG');
        u = merp(u, t);
        t.textContent = (u + '').replace(/\s/g, '\\u00a0');
        output.appendChild(t);
      }
    };
    console.warn = function() {
      for (var i = 0; i < arguments.length; i++) {
        var t = document.createElement("evaloutputentry"), u = arguments[i];
        t.classList.add('EVALLOG');
        t.classList.add('EVALWARN');
        u = merp(u, t);
        t.textContent = (u + '').replace(/\s/g, '\\u00a0');
        output.appendChild(t);
      }
    };
    console.error = function() {
      for (var i = 0; i < arguments.length; i++) {
        var t = document.createElement("evaloutputentry"), u = arguments[i];
        t.classList.add('EVALLOG');
        t.classList.add('EVALERROR');
        u = merp(u, t);
        t.textContent = (u + '').replace(/\s/g, '\\u00a0');
        output.appendChild(t);
      }
    };
  }
}());