Create cl.js

cl.js

@@ -0,0 +1,277 @@
+(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: 0;
+    left: 0;
+    right: 0;
+    margin: 50px auto;
+    font-size: 0;
+    z-index: 100000;
+    cursor: move; /* ドラッグカーソルを追加 */
+  }
+  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;
+  }
+  .close-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background: rgba(255, 0, 0, 0.8);
+    color: white;
+    border: none;
+    padding: 5px;
+    cursor: pointer;
+  }
+  .draggable-icon {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    font-size: 20px;
+    cursor: move; /* ドラッグカーソルを追加 */
+  }
+    `;
+    document.head.appendChild(s);
+  }
+  if (!document.querySelector('evalcontainer')) {
+    s=document.createElement("evalcontainer");
+    
+    // 右上の「×」ボタンを追加
+    var closeButton = document.createElement("button");
+    closeButton.className = "close-button";
+    closeButton.innerText = "×";
+    closeButton.onclick = function() {
+      evaljs.close();
+    };
+    s.appendChild(closeButton);
+
+    // ドラッグアイコンを追加
+    var dragIcon = document.createElement("div");
+    dragIcon.className = "draggable-icon";
+    dragIcon.innerText = "🖱️";
+    s.appendChild(dragIcon);
+    
+    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 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);
+    evaljs={
+      window:s,
+      clear() {
+        while (output.hasChildNodes()) output.removeChild(output.lastChild);
+      },
+      close() {
+        document.body.removeChild(this.window);
+      }
+    };
+
+    // ドラッグ機能を実装
+    let isDragging = false;
+    let offsetX, offsetY;
+
+    dragIcon.onmousedown = function(e) {
+      isDragging = true;
+      offsetX = e.clientX - s.getBoundingClientRect().left;
+      offsetY = e.clientY - s.getBoundingClientRect().top;
+      document.body.style.cursor = 'move'; // カーソルを変更
+    };
+
+    document.onmousemove = function(e) {
+      if (isDragging) {
+        s.style.left = (e.clientX - offsetX) + 'px';
+        s.style.top = (e.clientY - offsetY) + 'px';
+      }
+    };
+
+    document.onmouseup = function() {
+      isDragging = false;
+      document.body.style.cursor = ''; // カーソルを元に戻す
+    };
+
+    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);
+      }
+    };
+  }
+}());