From: Shuanglei Tao Date: Sun, 16 Jun 2019 01:03:37 +0000 (+0800) Subject: html: use ts string template X-Git-Url: http://git.prime8.dev/?a=commitdiff_plain;h=e67d567fea47f6b151971b3022cfed3c5bc37690;p=ttyd.git html: use ts string template --- 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