aljaz/ttyd
1
1
Fork 0
mirror of https://github.com/tsl0922/ttyd.git synced 2026-01-27 13:14:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

html: use ts string template

Browse Source
This commit is contained in:
Shuanglei Tao
2019-06-16 09:03:37 +08:00
parent 19c89ff2bb
commit e67d567fea
3 changed files with 24 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
html/src/components/terminal/index.tsx
View File

@@ -121,7 +121,7 @@ export default class Xterm extends Component<Props> {
@bind
private onSocketClose(event: CloseEvent) {
console.log('[ttyd] websocket connection closed with code: ' + event.code);
console.log(`[ttyd] websocket connection closed with code: ${event.code}`);
const { overlayAddon, openTerminal, autoReconnect } = this;
overlayAddon.showOverlay('Connection Closed', null);
@@ -156,16 +156,16 @@ export default class Xterm extends Component<Props> {
case Command.SET_PREFERENCES:
const preferences = JSON.parse(textDecoder.decode(data.buffer));
Object.keys(preferences).forEach((key) => {
console.log('[ttyd] setting ' + key + ': ' + preferences[key]);
console.log(`[ttyd] setting ${key}: ${preferences[key]}`);
terminal.setOption(key, preferences[key]);
});
break;
case Command.SET_RECONNECT:
this.autoReconnect = parseInt(textDecoder.decode(data.buffer));
console.log('[ttyd] enabling reconnect: ' + this.autoReconnect + ' seconds');
console.log(`[ttyd] enabling reconnect: ${this.autoReconnect} seconds`);
break;
default:
console.warn('[ttyd] unknown command: ' + cmd);
console.warn(`[ttyd] unknown command: ${cmd}`);
break;
}
}
@@ -177,7 +177,7 @@ export default class Xterm extends Component<Props> {
const msg = JSON.stringify({columns: size.cols, rows: size.rows});
socket.send(textEncoder.encode(Command.RESIZE_TERMINAL + msg));
}
setTimeout(() => {overlayAddon.showOverlay(size.cols + 'x' + size.rows)}, 500);
setTimeout(() => {overlayAddon.showOverlay(`${size.cols}x${size.rows}`)}, 500);
}
@bind

45
html/src/components/terminal/overlay.ts
View File

@@ -7,16 +7,29 @@ export class OverlayAddon implements ITerminalAddon {
private overlayNode: HTMLElement | null;
private overlayTimeout: number | null;
constructor() {}
constructor() {
this.overlayNode = document.createElement('div');
this.overlayNode.style.cssText = `border-radius: 15px;
font-size: xx-large;
opacity: 0.75;
padding: 0.2em 0.5em 0.2em 0.5em;
position: absolute;
-webkit-user-select: none;
-webkit-transition: opacity 180ms ease-in;
-moz-user-select: none;
-moz-transition: opacity 180ms ease-in;`;
this.overlayNode.addEventListener('mousedown', (e) => {
e.preventDefault();
e.stopPropagation();
}, true);
}
public activate(terminal: Terminal): void {
this.terminal = terminal;
this.overlayNode = this.createOverlayNode();
}
public dispose(): void {
document.removeChild(this.overlayNode);
}
public dispose(): void {}
public showOverlay(msg: string, timeout?: number): void {
const {terminal, overlayNode } = this;
@@ -55,26 +68,4 @@ export class OverlayAddon implements ITerminalAddon {
}, 200);
}, timeout || 1500);
}
private createOverlayNode(): HTMLElement {
const overlayNode = document.createElement('div');
overlayNode.style.cssText = (
'border-radius: 15px;' +
'font-size: xx-large;' +
'opacity: 0.75;' +
'padding: 0.2em 0.5em 0.2em 0.5em;' +
'position: absolute;' +
'-webkit-user-select: none;' +
'-webkit-transition: opacity 180ms ease-in;' +
'-moz-user-select: none;' +
'-moz-transition: opacity 180ms ease-in;');
overlayNode.addEventListener('mousedown', (e) => {
e.preventDefault();
e.stopPropagation();
}, true);
return overlayNode;
}
}