html: use ts string template

html/src/components/terminal/index.tsx

@@ -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

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;
-    }
 }