diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-07-12 13:44:09 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-08-03 16:26:24 +0300 |
commit | 77c189a9a7687849eac438a2850c6a106b371399 (patch) | |
tree | 1d306694dec8d184a6522d6d81cdd26b72692f15 /app/assets | |
parent | f5b9e2879090d86c41ee6ec2b9e6e14d7cd3fd59 (diff) |
Move xterm to a node dependency and remove global code [ci skip]
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/terminal/index.js | 10 | ||||
-rw-r--r-- | app/assets/javascripts/terminal/terminal.js | 106 | ||||
-rw-r--r-- | app/assets/stylesheets/application.scss | 2 |
3 files changed, 60 insertions, 58 deletions
diff --git a/app/assets/javascripts/terminal/index.js b/app/assets/javascripts/terminal/index.js index 1a75e072c4e..49aeb377c74 100644 --- a/app/assets/javascripts/terminal/index.js +++ b/app/assets/javascripts/terminal/index.js @@ -1,9 +1,3 @@ -import 'vendor/xterm/encoding-indexes'; -import 'vendor/xterm/encoding'; -import Terminal from 'vendor/xterm/xterm'; -import 'vendor/xterm/fit'; -import './terminal'; +import Terminal from './terminal'; -window.Terminal = Terminal; - -export default () => new gl.Terminal({ selector: '#terminal' }); +export default () => new Terminal({ selector: '#terminal' }); diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js index caffcddf3b0..ead208bafec 100644 --- a/app/assets/javascripts/terminal/terminal.js +++ b/app/assets/javascripts/terminal/terminal.js @@ -1,70 +1,76 @@ -/* global Terminal */ - import $ from 'jquery'; +import { Terminal } from 'xterm'; +import * as fit from 'xterm/lib/addons/fit/fit'; +import * as attach from 'xterm/lib/addons/attach/attach'; -(() => { - class GLTerminal { - - constructor(options) { - this.options = options || {}; +export default class GLTerminal { + constructor(options) { + this.options = options || {}; - if (!Object.prototype.hasOwnProperty.call(this.options, 'cursorBlink')) { - this.options.cursorBlink = true; - } + if (!Object.prototype.hasOwnProperty.call(this.options, 'cursorBlink')) { + this.options.cursorBlink = true; + } - if (!Object.prototype.hasOwnProperty.call(this.options, 'screenKeys')) { - this.options.screenKeys = true; - } + if (!Object.prototype.hasOwnProperty.call(this.options, 'screenKeys')) { + this.options.screenKeys = true; + } - this.container = document.querySelector(options.selector); + this.container = document.querySelector(options.selector); - this.setSocketUrl(); - this.createTerminal(); - $(window).off('resize.terminal').on('resize.terminal', () => { + this.setSocketUrl(); + this.createTerminal(); + $(window) + .off('resize.terminal') + .on('resize.terminal', () => { this.terminal.fit(); }); - } + } - setSocketUrl() { - const { protocol, hostname, port } = window.location; - const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://'; - const path = this.container.dataset.projectPath; + setSocketUrl() { + const { protocol, hostname, port } = window.location; + const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://'; + const path = this.container.dataset.projectPath; - this.socketUrl = `${wsProtocol}${hostname}:${port}${path}`; - } + this.socketUrl = `${wsProtocol}${hostname}:${port}${path}`; + } - createTerminal() { - this.terminal = new Terminal(this.options); - this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']); - this.socket.binaryType = 'arraybuffer'; + createTerminal() { + Terminal.applyAddon(fit); + Terminal.applyAddon(attach); - this.terminal.open(this.container); - this.socket.onopen = () => { this.runTerminal(); }; - this.socket.onerror = () => { this.handleSocketFailure(); }; - } + this.terminal = new Terminal(this.options); - runTerminal() { - const decoder = new TextDecoder('utf-8'); - const encoder = new TextEncoder('utf-8'); + //TODO - CHECK IF WE SHOULD USE `attach` instead + this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']); + this.socket.binaryType = 'arraybuffer'; - this.terminal.on('data', (data) => { - this.socket.send(encoder.encode(data)); - }); + this.terminal.open(this.container); - this.socket.addEventListener('message', (ev) => { - this.terminal.write(decoder.decode(ev.data)); - }); + this.socket.onopen = () => { + this.runTerminal(); + }; + this.socket.onerror = () => { + this.handleSocketFailure(); + }; + } - this.isTerminalInitialized = true; - this.terminal.fit(); - } + runTerminal() { + const decoder = new TextDecoder('utf-8'); + const encoder = new TextEncoder('utf-8'); - handleSocketFailure() { - this.terminal.write('\r\nConnection failure'); - } + this.terminal.on('data', data => { + this.socket.send(encoder.encode(data)); + }); + this.socket.addEventListener('message', ev => { + this.terminal.write(decoder.decode(ev.data)); + }); + + this.isTerminalInitialized = true; + this.terminal.fit(); } - window.gl = window.gl || {}; - gl.Terminal = GLTerminal; -})(); + handleSocketFailure() { + this.terminal.write('\r\nConnection failure'); + } +} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index f2950308019..308eec12b62 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -18,6 +18,8 @@ */ @import "../../../node_modules/pikaday/scss/pikaday"; +@import "../../../node_modules/xterm/src/xterm.css"; + /* * GitLab UI framework |