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>