diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 02:54:31 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 02:54:31 +0000 |
commit | 3b4936b6f2b870f9f2444ebb6ce1ca2de3f49d9f (patch) | |
tree | c91ab0ac9447b25f91c05e901212c2142fb95953 /html/src/components/terminal/xterm/addons/overlay.ts | |
parent | Initial commit. (diff) | |
download | ttyd-3b4936b6f2b870f9f2444ebb6ce1ca2de3f49d9f.tar.xz ttyd-3b4936b6f2b870f9f2444ebb6ce1ca2de3f49d9f.zip |
Adding upstream version 1.7.4.upstream/1.7.4
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | html/src/components/terminal/xterm/addons/overlay.ts | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/html/src/components/terminal/xterm/addons/overlay.ts b/html/src/components/terminal/xterm/addons/overlay.ts new file mode 100644 index 0000000..6fa5a92 --- /dev/null +++ b/html/src/components/terminal/xterm/addons/overlay.ts @@ -0,0 +1,73 @@ +// ported from hterm.Terminal.prototype.showOverlay +// https://chromium.googlesource.com/apps/libapps/+/master/hterm/js/hterm_terminal.js +import { bind } from 'decko'; +import { ITerminalAddon, Terminal } from 'xterm'; + +export class OverlayAddon implements ITerminalAddon { + private terminal: Terminal; + private overlayNode: HTMLElement; + private overlayTimeout?: number; + + 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 + ); + } + + activate(terminal: Terminal): void { + this.terminal = terminal; + } + + dispose(): void {} + + @bind + showOverlay(msg: string, timeout?: number): void { + const { terminal, overlayNode } = this; + if (!terminal.element) return; + + overlayNode.style.color = '#101010'; + overlayNode.style.backgroundColor = '#f0f0f0'; + overlayNode.textContent = msg; + overlayNode.style.opacity = '0.75'; + + if (!overlayNode.parentNode) { + terminal.element.appendChild(overlayNode); + } + + const divSize = terminal.element.getBoundingClientRect(); + const overlaySize = overlayNode.getBoundingClientRect(); + + overlayNode.style.top = (divSize.height - overlaySize.height) / 2 + 'px'; + overlayNode.style.left = (divSize.width - overlaySize.width) / 2 + 'px'; + + if (this.overlayTimeout) clearTimeout(this.overlayTimeout); + if (!timeout) return; + + this.overlayTimeout = window.setTimeout(() => { + overlayNode.style.opacity = '0'; + this.overlayTimeout = window.setTimeout(() => { + if (overlayNode.parentNode) { + overlayNode.parentNode.removeChild(overlayNode); + } + this.overlayTimeout = undefined; + overlayNode.style.opacity = '0.75'; + }, 200); + }, timeout || 1500); + } +} |