[mirror_xterm.js.git] / addons / attach / index.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="../../src/xterm.css" />
    <link rel="stylesheet" href="../../demo/style.css" />
    <script src="../../src/xterm.js"></script>
    <script src="attach.js"></script>
    <style>
        body {
            color: #111;
        }
        
        h1, h2 {
            color: #444;
            border-bottom: 1px solid #ddd;
            text-align: left;
        }
        
        form {
            margin-bottom: 32px;
        }
        
        input, button {
            line-height: 22px;
            font-size: 16px;
            display: inline-block;
            border-radius: 2px;
            border: 1px solid #ccc;
        }
        
        input {
            height: 22px;
            padding-left: 4px;
            padding-right: 4px;
        }
        
        button {
            height: 28px;
            background-color: #ccc;
            cursor: pointer;
            color: #333;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
  </head>
  <body>
      <div class="container">
          
    <h1>
        xterm.js: socket attach
    </h1>
          <p>
              Attach the terminal to a WebSocket terminal stream with ease. Perfect for attaching to your
              Docker containers.
          </p>
          <h2>
              Socket information
          </h2>
    <form id="socket-form">
      <input id="socket-url"
             type="text"
             placeholder="Enter socket url (e.g. ws://mysock)"
             autofocus />
      <button>
        Attach
      </button>
    </form>
    <div id="terminal-container"></div>
          
      </div>
    <script>
      var term = new Terminal(),
          container = document.getElementById('terminal-container'),
          socketUrl = document.getElementById('socket-url'),
          socketForm = document.getElementById('socket-form');
      
      socketForm.addEventListener('submit', function (ev) {
        ev.preventDefault();
        var url = socketUrl.value,
            sock = new WebSocket(url);
        sock.addEventListener('open', function () {
          term.attach(sock);
        });
      });
      
      term.open(container);
    </script>
  </body>
</html>
Commit	Line	Data
9bd2a1c2 PK	1	<!doctype html>
	2	<html>
	3	<head>
	4	<link rel="stylesheet" href="../../src/xterm.css" />
	5	<link rel="stylesheet" href="../../demo/style.css" />
	6	<script src="../../src/xterm.js"></script>
	7	<script src="attach.js"></script>
01e48b74 PK	8	<style>
	9	body {
	10	color: #111;
	11	}
	12
	13	h1, h2 {
	14	color: #444;
	15	border-bottom: 1px solid #ddd;
	16	text-align: left;
	17	}
	18
	19	form {
	20	margin-bottom: 32px;
	21	}
	22
	23	input, button {
	24	line-height: 22px;
	25	font-size: 16px;
	26	display: inline-block;
	27	border-radius: 2px;
	28	border: 1px solid #ccc;
	29	}
	30
	31	input {
	32	height: 22px;
	33	padding-left: 4px;
	34	padding-right: 4px;
	35	}
	36
	37	button {
	38	height: 28px;
	39	background-color: #ccc;
	40	cursor: pointer;
	41	color: #333;
	42	}
	43
	44	.container {
	45	max-width: 900px;
	46	margin: 0 auto;
	47	}
	48	</style>
9bd2a1c2 PK	49	</head>
9bd2a1c2 PK	50	<body>
01e48b74 PK	51	<div class="container">
	52
	53	<h1>
	54	xterm.js: socket attach
	55	</h1>
	56	<p>
	57	Attach the terminal to a WebSocket terminal stream with ease. Perfect for attaching to your
	58	Docker containers.
	59	</p>
	60	<h2>
	61	Socket information
	62	</h2>
9bd2a1c2 PK	63	<form id="socket-form">
	64	<input id="socket-url"
	65	type="text"
	66	placeholder="Enter socket url (e.g. ws://mysock)"
	67	autofocus />
	68	<button>
	69	Attach
	70	</button>
	71	</form>
	72	<div id="terminal-container"></div>
01e48b74 PK	73
01e48b74 PK	74	</div>
9bd2a1c2 PK	75	<script>
	76	var term = new Terminal(),
	77	container = document.getElementById('terminal-container'),
	78	socketUrl = document.getElementById('socket-url'),
	79	socketForm = document.getElementById('socket-form');
	80
	81	socketForm.addEventListener('submit', function (ev) {
	82	ev.preventDefault();
	83	var url = socketUrl.value,
	84	sock = new WebSocket(url);
	85	sock.addEventListener('open', function () {
	86	term.attach(sock);
	87	});
	88	});
	89
	90	term.open(container);
	91	</script>
	92	</body>
	93	</html>