Skip to content

Commit 338474d

Browse files
bummoblizardbummoblizard
committed
Add back support for interactive commands
1 parent c2ed980 commit 338474d

File tree

1 file changed

+156
-127
lines changed

1 file changed

+156
-127
lines changed

‎CodeApp/terminal.bundle/index.html‎

Lines changed: 156 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,199 @@
1-
<!doctype html>
2-
<html>
3-
<head>
4-
<title>xterm</title>
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
6-
<link rel="stylesheet" href="./xterm.css" />
7-
<script src="./xterm.js"></script>
8-
<script src="./xterm-addon-fit.js"></script>
9-
<script src="./local-echo.js"></script>
10-
<style>
11-
body {background-color: #EBEBEB; overflow: hidden};
12-
#overlay {width: 0;height:0;position:absolute;}
13-
/* body {background-color: #ECECEC} */
14-
@media(prefers-color-scheme:dark){
15-
.xterm .composition-view {
16-
/* TODO: Composition position got messed up somewhere */
17-
background: #FFF;
18-
color: #000;
19-
}
20-
21-
.xterm .xterm-viewport {
22-
/* On OS X this is required in order for the scroll bar to appear fully opaque */
23-
background-color: #FFF;
24-
}
25-
26-
body {background-color: #1E1E1E}
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>xterm</title>
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
8+
/>
9+
<link rel="stylesheet" href="./xterm.css" />
10+
<script src="./xterm.js"></script>
11+
<script src="./xterm-addon-fit.js"></script>
12+
<script src="./local-echo.js"></script>
13+
<style>
14+
body {
15+
background-color: #ebebeb;
16+
overflow: hidden;
17+
}
18+
#overlay {
19+
width: 0;
20+
height: 0;
21+
position: absolute;
22+
}
23+
/* body {background-color: #ECECEC} */
24+
@media (prefers-color-scheme: dark) {
25+
.xterm .composition-view {
26+
/* TODO: Composition position got messed up somewhere */
27+
background: #fff;
28+
color: #000;
2729
}
30+
31+
.xterm .xterm-viewport {
32+
/* On OS X this is required in order for the scroll bar to appear fully opaque */
33+
background-color: #fff;
34+
}
35+
36+
body {
37+
background-color: #1e1e1e;
38+
}
39+
}
2840
</style>
2941
</head>
3042
<body>
3143
<div tabindex="0" id="overlay"></div>
32-
<div id="terminal" style="width: 100%; height: 96vh;"></div>
44+
<div id="terminal" style="width: 100%; height: 96vh"></div>
3345
<script>
34-
35-
var defaultLightTheme = {
36-
background: '#EBEBEB',
37-
foreground: '#000000',
38-
cursor: '#000000'
39-
};
40-
var defaultDarkTheme = {
41-
background: '#1e1e1e',
42-
foreground: '#ffffff',
43-
cursor: '#ffffff'
44-
};
45-
46-
var activeLightTheme = defaultLightTheme;
47-
var activeDarkTheme = defaultDarkTheme;
48-
49-
function base64ToString(string){
50-
return decodeURIComponent(escape(window.atob(string)));
46+
var defaultLightTheme = {
47+
background: "#EBEBEB",
48+
foreground: "#000000",
49+
cursor: "#000000",
50+
};
51+
var defaultDarkTheme = {
52+
background: "#1e1e1e",
53+
foreground: "#ffffff",
54+
cursor: "#ffffff",
55+
};
56+
57+
var activeLightTheme = defaultLightTheme;
58+
var activeDarkTheme = defaultDarkTheme;
59+
60+
function base64ToString(string) {
61+
return decodeURIComponent(escape(window.atob(string)));
5162
}
52-
53-
function applyBase64AsTheme(string, isDark){
54-
var decodedString = decodeURIComponent(escape(window.atob(string)));
55-
var data = JSON.parse(decodedString);
56-
applyTheme(data, isDark);
63+
64+
function applyBase64AsTheme(string, isDark) {
65+
var decodedString = decodeURIComponent(escape(window.atob(string)));
66+
var data = JSON.parse(decodedString);
67+
applyTheme(data, isDark);
5768
}
58-
69+
5970
var term = new Terminal({
60-
fontSize: 12,
71+
fontSize: 12,
6172
fontFamily: "Menlo",
62-
theme: (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? activeDarkTheme : activeLightTheme
73+
theme:
74+
window.matchMedia &&
75+
window.matchMedia("(prefers-color-scheme: dark)").matches
76+
? activeDarkTheme
77+
: activeLightTheme,
6378
});
64-
65-
function applyTheme(theme, isDark){
66-
if (theme == null){
67-
if (isDark){
68-
activeDarkTheme = defaultDarkTheme
69-
}else{
70-
activeLightTheme = defaultLightTheme
71-
}
72-
}else{
73-
if (isDark){
74-
activeDarkTheme = theme;
75-
}else{
76-
activeLightTheme = theme;
77-
}
79+
80+
function applyTheme(theme, isDark) {
81+
if (theme == null) {
82+
if (isDark) {
83+
activeDarkTheme = defaultDarkTheme;
84+
} else {
85+
activeLightTheme = defaultLightTheme;
7886
}
79-
80-
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches){
81-
term.setOption('theme', activeDarkTheme)
82-
document.body.style.backgroundColor = activeDarkTheme.background;
83-
}else{
84-
term.setOption('theme', activeLightTheme)
85-
document.body.style.backgroundColor = activeLightTheme.background;
87+
} else {
88+
if (isDark) {
89+
activeDarkTheme = theme;
90+
} else {
91+
activeLightTheme = theme;
8692
}
93+
}
94+
95+
if (
96+
window.matchMedia &&
97+
window.matchMedia("(prefers-color-scheme: dark)").matches
98+
) {
99+
term.setOption("theme", activeDarkTheme);
100+
document.body.style.backgroundColor = activeDarkTheme.background;
101+
} else {
102+
term.setOption("theme", activeLightTheme);
103+
document.body.style.backgroundColor = activeLightTheme.background;
104+
}
87105
}
88-
89-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
106+
107+
window
108+
.matchMedia("(prefers-color-scheme: dark)")
109+
.addEventListener("change", (e) => {
90110
const newColorScheme = e.matches ? "dark" : "light";
91-
111+
92112
if (newColorScheme == "dark") {
93-
document.body.style.backgroundColor = activeDarkTheme.background;
94-
term.setOption('theme', activeDarkTheme);
95-
}else {
96-
document.body.style.backgroundColor = activeLightTheme.background;
97-
term.setOption('theme', activeLightTheme);
113+
document.body.style.backgroundColor = activeDarkTheme.background;
114+
term.setOption("theme", activeDarkTheme);
115+
} else {
116+
document.body.style.backgroundColor = activeLightTheme.background;
117+
term.setOption("theme", activeLightTheme);
98118
}
99-
});
100-
119+
});
120+
101121
const fitAddon = new FitAddon.FitAddon();
102-
const localEcho = new LocalEchoController(term, {historySize: 50});
122+
const localEcho = new LocalEchoController(term, { historySize: 50 });
103123
term.loadAddon(fitAddon);
104-
term.open(document.getElementById('terminal'));
124+
term.open(document.getElementById("terminal"));
125+
126+
// Cancel wheel events from scrolling the page if the terminal has scrollback
127+
document.querySelector(".xterm").addEventListener("wheel", (e) => {
128+
if (term.buffer.active.baseY > 0) {
129+
e.preventDefault();
130+
}
131+
});
105132

106133
var isReading = false;
107134

108135
// Auto-completes common commands
109136
function autocompleteCommonCommands(index, tokens) {
110-
if (index == 0) {
111-
var commands = prompt("autocomplete.commands");
112-
return JSON.parse(commands);
113-
}else{
114-
return []
115-
}
137+
if (index == 0) {
138+
var commands = prompt("autocomplete.commands");
139+
return JSON.parse(commands);
140+
} else {
141+
return [];
142+
}
116143
}
117144

118145
// Auto-completes known files
119146
function autocompleteCommonFiles(index, tokens) {
120-
if (index == 0) return [];
121-
var files = prompt("autocomplete.currentdir", tokens[index]);
122-
return JSON.parse(files);
147+
if (index == 0) return [];
148+
var files = prompt("autocomplete.currentdir", tokens[index]);
149+
return JSON.parse(files);
123150
}
124151

125152
// Register the handlers
126153
localEcho.addAutocompleteHandler(autocompleteCommonCommands);
127154
localEcho.addAutocompleteHandler(autocompleteCommonFiles);
128155

129-
function readLine(prompt){
130-
if (isReading){
131-
localEcho.abortRead()
156+
function startInteractive() {
157+
localEcho.detach();
158+
}
159+
160+
function stopInteractive() {
161+
localEcho.attach();
162+
}
163+
164+
term.onData((data) => {
165+
window.webkit.messageHandlers.toggleMessageHandler2.postMessage({
166+
Event: "Data",
167+
Input: data,
168+
});
169+
});
170+
171+
function readLine(prompt) {
172+
if (isReading) {
173+
localEcho.abortRead();
132174
}
133-
isReading = true
134-
localEcho.read(prompt)
135-
.then(input => {
136-
readLine("");
137-
window.webkit.messageHandlers.toggleMessageHandler2.postMessage({
138-
"Event": "Return",
139-
"Input": input
140-
});
141-
})
142-
};
143-
144-
145-
// term.onData(data => {
146-
// alert(JSON.stringify(data));
147-
// // data = data.replace(/\r/g, '\n\r');
148-
// // window.webkit.messageHandlers.toggleMessageHandler.postMessage({
149-
// // "Event": "Data",
150-
// // "Input": data
151-
// // });
152-
// })
153-
154-
// Causes unwanted outputs
155-
window.onresize = function(event) {
156-
fitAddon.fit();
175+
isReading = true;
176+
localEcho.read(prompt).then((input) => {
177+
readLine("");
157178
window.webkit.messageHandlers.toggleMessageHandler2.postMessage({
158-
"Event": "window.size.change",
159-
"Cols": term.cols,
160-
"Rows": term.rows
179+
Event: "Return",
180+
Input: input,
161181
});
182+
});
183+
}
184+
185+
window.onresize = function (event) {
186+
fitAddon.fit();
187+
window.webkit.messageHandlers.toggleMessageHandler2.postMessage({
188+
Event: "window.size.change",
189+
Cols: term.cols,
190+
Rows: term.rows,
191+
});
162192
};
163-
193+
164194
window.webkit.messageHandlers.toggleMessageHandler2.postMessage({
165-
"Event": "Init"
195+
Event: "Init",
166196
});
167-
168197
</script>
169198
</body>
170199
</html>

0 commit comments

Comments
 (0)