Benjamin Woodruff
8c980bc30d
This adds the logic needed to switch between multiple char atlas implementations, and an example second implementation to test it out with. This also offers an escape hatch if something goes wrong with the char atlas implementation(s).
92 lines
3.4 KiB
HTML
92 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>xterm.js demo</title>
|
|
<link rel="stylesheet" href="/build/xterm.css" />
|
|
<link rel="stylesheet" href="/build/addons/fullscreen/fullscreen.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>xterm.js: xterm, in the browser</h1>
|
|
<div id="terminal-container"></div>
|
|
<div>
|
|
<h2>Actions</h2>
|
|
<p>
|
|
<label>Find next <input id="find-next"/></label>
|
|
<label>Find previous <input id="find-previous"/></label>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h2>Options</h2>
|
|
<p>
|
|
<label><input type="checkbox" id="option-cursor-blink"> cursorBlink</label>
|
|
</p>
|
|
<p>
|
|
<label><input type="checkbox" id="option-mac-option-is-meta"> macOptionIsMeta</label>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
cursorStyle
|
|
<select id="option-cursor-style">
|
|
<option value="block">block</option>
|
|
<option value="underline">underline</option>
|
|
<option value="bar">bar</option>
|
|
</select>
|
|
</label>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
bellStyle
|
|
<select id="option-bell-style">
|
|
<option value="">none</option>
|
|
<option value="sound">sound</option>
|
|
<option value="visual">visual</option>
|
|
<option value="both">both</option>
|
|
</select>
|
|
</label>
|
|
</p>
|
|
<p>
|
|
<label>scrollback <input type="number" id="option-scrollback" value="1000" /></label>
|
|
</p>
|
|
<p>
|
|
<label>tabStopWidth <input type="number" id="option-tabstopwidth" value="8" /></label>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
experimentalCharAtlas
|
|
<select id="option-experimental-char-atlas">
|
|
<option value="static" selected>static</option>
|
|
<option value="none">none</option>
|
|
</select>
|
|
</label>
|
|
</p>
|
|
<div>
|
|
<h3>Size</h3>
|
|
<div>
|
|
<div style="display: inline-block; margin-right: 16px;">
|
|
<label for="cols">Columns</label>
|
|
<input type="number" id="cols" />
|
|
</div>
|
|
<div style="display: inline-block; margin-right: 16px;">
|
|
<label for="rows">Rows</label>
|
|
<input type="number" id="rows" />
|
|
</div>
|
|
<div style="display: inline-block; margin-right: 16px;">
|
|
<label for="padding">Padding</label>
|
|
<input type="number" id="padding" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Accessibility</h3>
|
|
<p>
|
|
<label><input type="checkbox" id="option-screen-reader-mode"> screenReaderMode</label>
|
|
</p>
|
|
</div>
|
|
<p><strong>Attention:</strong> The demo is a barebones implementation and is designed for the development and evaluation of xterm.js only. Exposing the demo to the public as is would introduce security risks for the host.</p>
|
|
<script src="dist/bundle.js" defer ></script>
|
|
</body>
|
|
</html>
|