github.com/ladydascalie/elvish@v0.0.0-20170703214355-2964dd3ece7f/web/main.html (about) 1 <html> 2 3 <div id="scrollback"> 4 <div id="progress"></div> 5 </div> 6 <textarea id="code" rows="4"></textarea> 7 8 <style> 9 #code { 10 width: 100%; 11 } 12 #scrollback, #code, #progress { 13 font-family: monospace; 14 font-size: 11pt; 15 } 16 .code { 17 color: white; 18 background-color: black; 19 } 20 .error, .exception { 21 color: red; 22 } 23 .exception { 24 font-weight: bold; 25 } 26 .server-error { 27 color: white; 28 background-color: red; 29 } 30 </style> 31 32 <script> 33 // TODO(xiaq): Stream results. 34 var $scrollback = document.getElementById('scrollback'), 35 $code = document.getElementById('code'), 36 $progress = document.getElementById('progress'); 37 38 $code.addEventListener('keypress', function(e) { 39 if (e.keyCode == 13 && 40 !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) { 41 e.preventDefault(); 42 execute(); 43 } 44 }); 45 46 function execute() { 47 var code = $code.value; 48 $code.value = ''; 49 addToScrollback('code', code); 50 $progress.innerText = 'executing...'; 51 52 var req = new XMLHttpRequest(); 53 req.onloadend = function() { 54 $progress.innerText = ''; 55 }; 56 req.onload = function() { 57 var res = JSON.parse(req.responseText); 58 addToScrollback('output', res.OutBytes); 59 if (res.OutValues) { 60 for (var v of res.OutValues) { 61 addToScrollback('output-value', v); 62 } 63 } 64 addToScrollback('error', res.ErrBytes); 65 addToScrollback('exception', res.Err); 66 }; 67 req.onerror = function() { 68 addToScrollback('server-error', req.responseText 69 || req.statusText 70 || (req.status == req.UNSENT && "lost connection") 71 || "unknown error"); 72 }; 73 req.open('POST', '/execute'); 74 req.send(code); 75 } 76 77 function addToScrollback(className, innerText) { 78 var $div = document.createElement('div') 79 $div.className = className; 80 $div.innerText = innerText; 81 $scrollback.insertBefore($div, $progress); 82 83 window.scrollTo(0, document.body.scrollHeight); 84 } 85 86 </script> 87 88 </html>