multi-repl/client.html at master · seidtgeist/multi-repl · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>multi-repl</title>
    <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css" />
    <style type="text/css">
      body{background:#000;color:#fff;margin:0;padding:0;text-rendering:optimizeLegibility;}
      pre{margin:0;padding:0;}
      body,pre,input{font:18px/1.0 'Inconsolata',monospace;}
      #input{border:0;bottom:0;display:block;left:0px;padding:18px;position:absolute;}
      #input{background:#000;color:#7491f1;font-weight:bold;text-shadow:#7491f1 0 0 3px;}
      #input{outline:none;}
      #output{padding:18px;overflow:auto;}
      .ansi-1{font-weight:bold;}/*bold*/
      .ansi-30{color:#4e4e4e;}/*black*/
      .ansi-31{color:#ff6c60;}/*red*/
      .ansi-32{color:#a8ff60;}/*green*/
      .ansi-33{color:#ffffb6;}/*yellow*/
      .ansi-34{color:#96cbfe;}/*blue*/
      .ansi-35{color:#ff73fd;}/*magenta*/
      .ansi-36{color:#c6c5fe;}/*cyan*/
      .ansi-37{color:#eeeeee;}/*white*/
    </style>
  </head>
  <body>
    <pre id="output">Welcome to multi-repl. Type something below!</pre>
    <form id="form"><input id="input" /></form>
    <script src="/dojo.js"></script>
    <script src="/socket.io.min.js"></script>
    <script>
     function ansi2html(message){
       var open_tags = 0;
       return message
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')
         .replace(/\033\[([?\d;]+)m/g,
           function(str, codes){
             return dojo.map(codes.split(';'), function(code){
               if (code === '0' && open_tags > 0){
                 var closing_tags = '';
                 while(open_tags--){
                   closing_tags += '</span>';
                 }
                 return closing_tags;
               }else{
                 open_tags++;
                 return '<span class="ansi-' + code + '">';
               }
             }).join('');
           });
     }

      function scrollDown(node){
        node.scrollTop = node.scrollHeight;
      }

      function append(message){
        var fragment = dojo._toDom(message);
        dojo.place(fragment, output[0]);
        scrollDown(output[0]);
      }

      var form = dojo.query('#form');
      var input = dojo.query('#input');
      var output = dojo.query('#output');

      input[0].focus();

      output.style({
        height: innerHeight - 36 - 36 - 18 +'px',
        width: innerWidth - 36 + 'px'
      });

      input.style({
        width: innerWidth-36 + 'px'
      });

      var socket = new io.Socket('localhost', { port: 1337 });
      socket.on('message', function(message){
        append(ansi2html(message));
      });
      socket.connect();

      form.connect('submit', function(e){
        e.preventDefault();
        var message = input.attr('value');
        input.attr('value', '');
        socket.send(message);
      });
    </script>
  </body>
</html>