summaryrefslogtreecommitdiffstats
path: root/html/src/components/terminal/xterm/addons/overlay.ts
diff options
context:
space:
mode:
Diffstat (limited to 'html/src/components/terminal/xterm/addons/overlay.ts')
-rw-r--r--html/src/components/terminal/xterm/addons/overlay.ts73
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);
+ }
+}