CE Port of "Web Terminal FE"

2 files changed, 54 insertions, 5 deletions

diff --git a/app/assets/javascripts/terminal/index.js b/app/assets/javascripts/terminal/index.js
index 49aeb377c74..8faff59fd45 100644
--- a/app/assets/javascripts/terminal/index.js
+++ b/app/assets/javascripts/terminal/index.js
@@ -1,3 +1,3 @@
 import Terminal from './terminal';
 
-export default () => new Terminal({ selector: '#terminal' });
+export default () => new Terminal(document.getElementById('terminal'));
diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js
index b24aa8a3a34..560f50ebf8f 100644
--- a/app/assets/javascripts/terminal/terminal.js
+++ b/app/assets/javascripts/terminal/terminal.js
@@ -1,9 +1,15 @@
+import _ from 'underscore';
 import $ from 'jquery';
 import { Terminal } from 'xterm';
 import * as fit from 'xterm/lib/addons/fit/fit';
+import { canScrollUp, canScrollDown } from '~/lib/utils/dom_utils';
+
+const SCROLL_MARGIN = 5;
+
+Terminal.applyAddon(fit);
 
 export default class GLTerminal {
-  constructor(options = {}) {
+  constructor(element, options = {}) {
     this.options = Object.assign(
       {},
       {
@@ -13,7 +19,8 @@ export default class GLTerminal {
       options,
     );
 
-    this.container = document.querySelector(options.selector);
+    this.container = element;
+    this.onDispose = [];
 
     this.setSocketUrl();
     this.createTerminal();
@@ -34,8 +41,6 @@ export default class GLTerminal {
   }
 
   createTerminal() {
-    Terminal.applyAddon(fit);
-
     this.terminal = new Terminal(this.options);
 
     this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']);
@@ -72,4 +77,48 @@ export default class GLTerminal {
   handleSocketFailure() {
     this.terminal.write('\r\nConnection failure');
   }
+
+  addScrollListener(onScrollLimit) {
+    const viewport = this.container.querySelector('.xterm-viewport');
+    const listener = _.throttle(() => {
+      onScrollLimit({
+        canScrollUp: canScrollUp(viewport, SCROLL_MARGIN),
+        canScrollDown: canScrollDown(viewport, SCROLL_MARGIN),
+      });
+    });
+
+    this.onDispose.push(() => viewport.removeEventListener('scroll', listener));
+    viewport.addEventListener('scroll', listener);
+
+    // don't forget to initialize value before scroll!
+    listener({ target: viewport });
+  }
+
+  disable() {
+    this.terminal.setOption('cursorBlink', false);
+    this.terminal.setOption('theme', { foreground: '#707070' });
+    this.terminal.setOption('disableStdin', true);
+    this.socket.close();
+  }
+
+  dispose() {
+    this.terminal.off('data');
+    this.terminal.dispose();
+    this.socket.close();
+
+    this.onDispose.forEach(fn => fn());
+    this.onDispose.length = 0;
+  }
+
+  scrollToTop() {
+    this.terminal.scrollToTop();
+  }
+
+  scrollToBottom() {
+    this.terminal.scrollToBottom();
+  }
+
+  fit() {
+    this.terminal.fit();
+  }
 }