misc_pterodactyl-panel/resources/scripts/plugins/XtermScrollDownHelperAddon.ts

70 lines
2.3 KiB
TypeScript
Raw Normal View History

import { Terminal, ITerminalAddon } from 'xterm';
export class ScrollDownHelperAddon implements ITerminalAddon {
private terminal: Terminal = new Terminal();
private element?: HTMLDivElement;
activate(terminal: Terminal): void {
this.terminal = terminal;
this.terminal.onScroll(() => {
if (this.isScrolledDown()) {
this.hide();
}
});
this.terminal.onLineFeed(() => {
if (!this.isScrolledDown()) {
this.show();
}
});
this.show();
}
dispose(): void {
// ignore
}
show(): void {
if (!this.terminal || !this.terminal.element) {
return;
}
if (this.element) {
this.element.style.visibility = 'visible';
return;
}
this.terminal.element.style.position = 'relative';
this.element = document.createElement('div');
this.element.innerHTML =
'<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-down" class="svg-inline--fa fa-bell fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z"/></svg>';
this.element.style.position = 'absolute';
this.element.style.right = '1.5rem';
this.element.style.bottom = '.5rem';
this.element.style.padding = '.5rem';
this.element.style.fontSize = '1.25em';
this.element.style.boxShadow = '0 2px 8px #000';
this.element.style.backgroundColor = '#252526';
this.element.style.zIndex = '999';
this.element.style.cursor = 'pointer';
this.element.addEventListener('click', () => {
this.terminal.scrollToBottom();
});
this.terminal.element.appendChild(this.element);
}
hide(): void {
if (this.element) {
this.element.style.visibility = 'hidden';
}
}
isScrolledDown(): boolean {
return this.terminal.buffer.active.viewportY === this.terminal.buffer.active.baseY;
}
}