mirror of
https://github.com/wavetermdev/xterm.js.git
synced 2026-08-05 13:43:48 -07:00
166 lines
8.4 KiB
HTML
166 lines
8.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>xterm.js demo</title>
|
|
<!--
|
|
WARNING: This demo is a barebones implementation designed for development and evaluation
|
|
purposes only. It is definitely NOT production ready and does not aim to be so. Exposing the
|
|
demo to the public as is would introduce security risks for the host.
|
|
-->
|
|
<link rel="shortcut icon" type="image/png" href="/logo.png">
|
|
<link rel="stylesheet" href="/xterm.css" />
|
|
<link rel="stylesheet" href="/style.css" />
|
|
</head>
|
|
<body>
|
|
<h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
|
|
<div id="container">
|
|
<div class="grid">
|
|
<div id="terminal-container"></div>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="tab">
|
|
<button id="optionsbutton" class="tabLinks" onclick="openSection(event, 'options')">Options</button>
|
|
<button id="addonsbutton" class="tabLinks" onclick="openSection(event, 'addons')">Addons</button>
|
|
<button id="stylebutton" class="tabLinks" onclick="openSection(event, 'style')">Style</button>
|
|
<button id="testbutton" class="tabLinks" onclick="openSection(event, 'test')">Test</button>
|
|
<button id="vtbutton" class="tabLinks" onclick="openSection(event, 'vt')">VT</button>
|
|
</div>
|
|
<div id="options" class="tabContent">
|
|
<h3>Options</h3>
|
|
<p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.options</code> property.</p>
|
|
<div id="options-container"></div>
|
|
</div>
|
|
<div id="addons" class="tabContent">
|
|
<h3>Addons</h3>
|
|
<p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
|
|
<div id="addons-container"></div>
|
|
<h3>Addons Control</h3>
|
|
<h4>SearchAddon</h4>
|
|
<div style= "display:flex; flex-direction:column;">
|
|
<label>Find next <input id="find-next"/></label>
|
|
<label>Find previous <input id="find-previous"/></label>
|
|
<div>Results: <span id="find-results"></span></div>
|
|
<label><input type="checkbox" id="regex"/>Use regex</label>
|
|
<label><input type="checkbox" id="case-sensitive"/>Case sensitive</label>
|
|
<label><input type="checkbox" id="whole-word"/>Whole word</label>
|
|
<label><input type="checkbox" id="highlight-all-matches" checked/>Highlight All Matches</label>
|
|
</div>
|
|
<h4>SerializeAddon</h4>
|
|
<div>
|
|
<button id="serialize">Serialize the content of terminal</button>
|
|
<label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
|
|
<div><pre id="serialize-output"></pre></div>
|
|
|
|
<button id="htmlserialize">Serialize the content of terminal in HTML</button>
|
|
<span id="htmlserialize-output-result"></span>
|
|
<div><pre id="htmlserialize-output"></pre></div>
|
|
</div>
|
|
<h4>Image Addon</h4>
|
|
<details>
|
|
<summary>image addon settings</summary>
|
|
<div>
|
|
<label>Storage Limit (in MB) <input type="number" id="image-storagelimit"/></label><br/>
|
|
<label>Show Placeholder <input type="checkbox" id="image-showplaceholder"/></label>
|
|
<br/><br/>
|
|
<label>
|
|
Ctor options (applied on addon relaunch)<br/>
|
|
<textarea id="image-options" cols="40" rows="12"></textarea>
|
|
</label>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
<div id="style" class="tabContent">
|
|
<h3>Style</h3>
|
|
<div style="display: inline-block; margin-right: 16px;">
|
|
<label for="padding">Padding</label>
|
|
<input type="number" id="padding" />
|
|
</div>
|
|
</div>
|
|
<div id="test" class="tabContent">
|
|
<h3>Test</h3>
|
|
<div style="display: inline-block; margin-right: 16px;">
|
|
<dl>
|
|
<dt>Lifecycle</dt>
|
|
<dd><button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button></dd>
|
|
<dd><button id="create-new-window" title="This is used to test rendering in other windows">Create terminal in new window</button></dd>
|
|
|
|
<dt>Performance</dt>
|
|
<dd><button id="load-test" title="Write several MB of data to simulate a lot of data coming from the process">Load test</button></dd>
|
|
<dd><button id="print-cjk" title="Prints the 20977 characters from the CJK Unified Ideographs unicode block">CJK Unified Ideographs</button></dd>
|
|
<dd><button id="print-cjk-sgr" title="Prints the 20977 characters from the CJK Unified Ideographs unicode block with randomized SGR attributes">CJK Unified Ideographs (random SGR)</button></dd>
|
|
|
|
<dt>Styles</dt>
|
|
<dd><button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button></dd>
|
|
<dd><button id="powerline-symbol-test" title="Write powerline symbol characters to the terminal (\ue0a0+)">Powerline symbol test</button></dd>
|
|
<dd><button id="underline-test" title="Write text with Kitty's extended underline sequences">Underline test</button></dd>
|
|
<dd><button id="sgr-test" title="Write text with SGR attribute">SGR test</button></dd>
|
|
<dd><button id="ansi-colors" title="Write a wide range of ansi colors">Ansi colors test</button></dd>
|
|
<dd><button id="osc-hyperlinks" title="Write some OSC 8 hyperlinks">Ansi hyperlinks test</button></dd>
|
|
<dd><button id="bce" title="Test colored erase">Colored Erase (BCE)</button></dd>
|
|
<dd><button id="add-grapheme-clusters" title="Write grapheme cluster test strings">Grapheme clusters</button></dd>
|
|
|
|
<dt>Decorations</dt>
|
|
<dd><button id="add-decoration" title="Add a decoration to the terminal">Decoration</button></dd>
|
|
<dd><button id="add-overview-ruler" title="Add an overview ruler to the terminal">Add Overview Ruler</button></dd>
|
|
|
|
<dt>Weblinks Addon</dt>
|
|
<dd><button id="weblinks-test" title="Various url conditions from demo data, hover&click to test">Test URLs</button></dd>
|
|
|
|
<dt>Image Test</dt>
|
|
<dd><button id="image-demo1">snake (sixel)</button></dd>
|
|
<dd><button id="image-demo2">oranges (sixel)</button></dd>
|
|
<dd><button id="image-demo3">palette (iip)</button></dd>
|
|
|
|
<dt>Events Test</dt>
|
|
<dd><button id="event-focus">focus</button></dd>
|
|
<dd><button id="event-blur">blur</button></dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<div id="vt" class="tabContent">
|
|
<h3>VT</h3>
|
|
<div id="vt-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="texture-atlas-container">
|
|
<input type="checkbox" id="texture-atlas-zoom"/>
|
|
<label for="texture-atlas-zoom">Zoom texture atlas</label>
|
|
<div id="texture-atlas"></div>
|
|
</div>
|
|
<script src="dist/client-bundle.js" defer ></script>
|
|
<script>
|
|
var tab = localStorage.getItem("tab");
|
|
|
|
if(tab === null){
|
|
document.getElementById("options").style.display = "block";
|
|
document.getElementById("optionsbutton").classList.add("active");
|
|
}
|
|
else {
|
|
const tabContent = document.getElementsByClassName("tabContent");
|
|
let itr;
|
|
for (itr = 0; itr < tabContent.length; itr+=1) {
|
|
tabContent[itr].style.display = "none";
|
|
}
|
|
document.getElementById(""+tab+"").style.display = "block";
|
|
document.getElementById(""+tab+"button").classList.add("active");
|
|
}
|
|
function openSection(event, section) {
|
|
const tabContent = document.getElementsByClassName("tabContent");
|
|
let itr;
|
|
for (itr = 0; itr < tabContent.length; itr+=1) {
|
|
tabContent[itr].style.display = "none";
|
|
}
|
|
const tabLinks = document.getElementsByClassName("tabLinks");
|
|
for (itr = 0; itr < tabLinks.length; itr+=1) {
|
|
tabLinks[itr].className = tabLinks[itr].className.replace(" active", "");
|
|
}
|
|
document.getElementById(section).style.display = "block";
|
|
localStorage.setItem("tab", section);
|
|
event.currentTarget.className += " active";
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|