Skip to content

Commit 37c4cae

Browse files
TyriarTyriar
authored
Merge branch 'master' into refactor-better-mocha
2 parents f41eea0 + c71f947 commit 37c4cae

File tree

2 files changed

+133
-36
lines changed

2 files changed

+133
-36
lines changed

‎demo/index.html‎

Lines changed: 84 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -15,42 +15,90 @@
1515
</head>
1616
<body>
1717
<h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
18-
<div id="terminal-container"></div>
19-
<div>
20-
<h3>Options</h3>
21-
<p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
22-
<div id="options-container"></div>
23-
</div>
24-
<div>
25-
<h3>Addons</h3>
26-
<p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
27-
<div id="addons-container"></div>
28-
<h3>Addons Control</h3>
29-
<h4>SearchAddon</h4>
30-
<p>
31-
<label>Find next <input id="find-next"/></label>
32-
<label>Find previous <input id="find-previous"/></label>
33-
<label>Use regex<input type="checkbox" id="regex"/></label>
34-
<label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
35-
<label>Whole word<input type="checkbox" id="whole-word"/></label>
36-
</p>
37-
<h4>SerializeAddon</h4>
38-
<p>
39-
<button id="serialize">Serialize the content of terminal</button>
40-
<label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
41-
<div><pre id="serialize-output"></pre></div>
42-
</p>
43-
</div>
44-
<div>
45-
<h3>Style</h3>
46-
<div style="display: inline-block; margin-right: 16px;">
47-
<label for="padding">Padding</label>
48-
<input type="number" id="padding" />
18+
<div id="container">
19+
<div id="grid">
20+
<div id="terminal-container"></div>
21+
</div>
22+
<div id="grid">
23+
<div class="tab">
24+
<button id= "optionsbutton" class="tabLinks" onclick="openSection(event, 'options')">Options</button>
25+
<button id= "addonsbutton" class="tabLinks" onclick="openSection(event, 'addons')">Addons</button>
26+
<button id= "stylebutton" class="tabLinks" onclick="openSection(event, 'style')">Style</button>
27+
<button id= "testbutton" class="tabLinks" onclick="openSection(event, 'test')">Test</button>
28+
</div>
29+
<div id="options" class="tabContent">
30+
<h3>Options</h3>
31+
<p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
32+
<div id="options-container"></div>
33+
</div>
34+
<div id="addons" class="tabContent">
35+
<h3>Addons</h3>
36+
<p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
37+
<div id="addons-container"></div>
38+
<h3>Addons Control</h3>
39+
<h4>SearchAddon</h4>
40+
<div style= "display:flex; flex-direction:column;">
41+
<label>Find next <input id="find-next"/></label>
42+
<label>Find previous <input id="find-previous"/></label>
43+
<label><input type="checkbox" id="regex"/>Use regex</label>
44+
<label><input type="checkbox" id="case-sensitive"/>Case sensitive</label>
45+
<label><input type="checkbox" id="whole-word"/>Whole word</label>
46+
</div>
47+
<h4>SerializeAddon</h4>
48+
<div>
49+
<button id="serialize">Serialize the content of terminal</button>
50+
<label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
51+
<div><pre id="serialize-output"></pre></div>
52+
</div>
53+
</div>
54+
<div id="style" class="tabContent">
55+
<h3>Style</h3>
56+
<div style="display: inline-block; margin-right: 16px;">
57+
<label for="padding">Padding</label>
58+
<input type="number" id="padding" />
59+
</div>
60+
</div>
61+
<div id="test" class="tabContent">
62+
<h3>Test</h3>
63+
<div style="display: inline-block; margin-right: 16px;">
64+
<button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
65+
<button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button>
66+
</div>
67+
</div>
4968
</div>
5069
</div>
51-
<hr/>
52-
<button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
53-
<button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button>
54-
<script src="dist/client-bundle.js" defer ></script>
55-
</body>
70+
<script src="dist/client-bundle.js" defer ></script>
71+
<script>
72+
var tab = localStorage.getItem("tab");
73+
74+
if(tab === null){
75+
document.getElementById("options").style.display = "block";
76+
document.getElementById("optionsbutton").classList.add("active");
77+
}
78+
else {
79+
const tabContent = document.getElementsByClassName("tabContent");
80+
let itr;
81+
for (itr = 0; itr < tabContent.length; itr+=1) {
82+
tabContent[itr].style.display = "none";
83+
}
84+
document.getElementById(""+tab+"").style.display = "block";
85+
document.getElementById(""+tab+"button").classList.add("active");
86+
}
87+
function openSection(event, section) {
88+
const tabContent = document.getElementsByClassName("tabContent");
89+
let itr;
90+
for (itr = 0; itr < tabContent.length; itr+=1) {
91+
tabContent[itr].style.display = "none";
92+
}
93+
const tabLinks = document.getElementsByClassName("tabLinks");
94+
for (itr = 0; itr < tabLinks.length; itr+=1) {
95+
tabLinks[itr].className = tabLinks[itr].className.replace(" active", "");
96+
}
97+
document.getElementById(section).style.display = "block";
98+
localStorage.setItem("tab", section);
99+
event.currentTarget.className += " active";
100+
}
101+
102+
</script>
103+
</body>
56104
</html>

‎demo/style.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,52 @@ pre {
4141
word-wrap: break-word;
4242
white-space: pre-wrap;
4343
}
44+
45+
46+
#container {
47+
display: flex;
48+
height: 75vh;
49+
}
50+
#grid {
51+
flex: 1;
52+
/* max-height: 80vh;
53+
overflow-y: auto; */
54+
width: 100%;
55+
}
56+
.tab {
57+
overflow: hidden;
58+
border: 1px solid #ccc;
59+
background-color: #f1f1f1;
60+
}
61+
62+
/* Style the buttons inside the tab */
63+
.tab button {
64+
background-color: inherit;
65+
float: left;
66+
border: none;
67+
outline: none;
68+
cursor: pointer;
69+
padding: 14px 16px;
70+
transition: 0.3s;
71+
font-size: 17px;
72+
}
73+
74+
/* Change background color of buttons on hover */
75+
.tab button:hover {
76+
background-color: #ddd;
77+
}
78+
79+
/* Create an active/current tablink class */
80+
.tab button.active {
81+
background-color: #ccc;
82+
}
83+
84+
/* Style the tab content */
85+
.tabContent {
86+
display: none;
87+
padding: 6px 12px;
88+
border: 1px solid #ccc;
89+
border-top: none;
90+
max-height: 100vh;
91+
overflow-y: auto;
92+
}

0 commit comments

Comments
 (0)