diff --git a/html/src/components/terminal/index.tsx b/html/src/components/terminal/index.tsx
index 39a174f..4387c63 100644
--- a/html/src/components/terminal/index.tsx
+++ b/html/src/components/terminal/index.tsx
@@ -121,7 +121,7 @@ export default class Xterm extends Component {
@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 {
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 {
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
diff --git a/html/src/components/terminal/overlay.ts b/html/src/components/terminal/overlay.ts
index cb41dae..53e9da5 100644
--- a/html/src/components/terminal/overlay.ts
+++ b/html/src/components/terminal/overlay.ts
@@ -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;
- }
}
diff --git a/src/index.html b/src/index.html
index ca6c78b..8d41bc5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1 +1 @@
-ttyd - Terminal
\ No newline at end of file
+ttyd - Terminal
\ No newline at end of file