From 77c189a9a7687849eac438a2850c6a106b371399 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 12 Jul 2018 11:44:09 +0100 Subject: Move xterm to a node dependency and remove global code [ci skip] --- app/assets/javascripts/terminal/index.js | 10 +-- app/assets/javascripts/terminal/terminal.js | 106 +++++++++++++++------------- 2 files changed, 58 insertions(+), 58 deletions(-) (limited to 'app/assets/javascripts/terminal') 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'); + } +} -- cgit v1.2.3