Commit 77c189a9 authored by Filipa Lacerda's avatar Filipa Lacerda

Move xterm to a node dependency and remove global code [ci skip]

parent f5b9e287
import 'vendor/xterm/encoding-indexes'; import Terminal from './terminal';
import 'vendor/xterm/encoding';
import Terminal from 'vendor/xterm/xterm';
import 'vendor/xterm/fit';
import './terminal';
window.Terminal = Terminal; export default () => new Terminal({ selector: '#terminal' });
export default () => new gl.Terminal({ selector: '#terminal' });
/* global Terminal */
import $ from 'jquery'; 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';
(() => { export default class GLTerminal {
class GLTerminal {
constructor(options) { constructor(options) {
this.options = options || {}; this.options = options || {};
...@@ -20,7 +19,9 @@ import $ from 'jquery'; ...@@ -20,7 +19,9 @@ import $ from 'jquery';
this.setSocketUrl(); this.setSocketUrl();
this.createTerminal(); this.createTerminal();
$(window).off('resize.terminal').on('resize.terminal', () => { $(window)
.off('resize.terminal')
.on('resize.terminal', () => {
this.terminal.fit(); this.terminal.fit();
}); });
} }
...@@ -34,24 +35,34 @@ import $ from 'jquery'; ...@@ -34,24 +35,34 @@ import $ from 'jquery';
} }
createTerminal() { createTerminal() {
Terminal.applyAddon(fit);
Terminal.applyAddon(attach);
this.terminal = new Terminal(this.options); this.terminal = new Terminal(this.options);
//TODO - CHECK IF WE SHOULD USE `attach` instead
this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']); this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']);
this.socket.binaryType = 'arraybuffer'; this.socket.binaryType = 'arraybuffer';
this.terminal.open(this.container); this.terminal.open(this.container);
this.socket.onopen = () => { this.runTerminal(); };
this.socket.onerror = () => { this.handleSocketFailure(); }; this.socket.onopen = () => {
this.runTerminal();
};
this.socket.onerror = () => {
this.handleSocketFailure();
};
} }
runTerminal() { runTerminal() {
const decoder = new TextDecoder('utf-8'); const decoder = new TextDecoder('utf-8');
const encoder = new TextEncoder('utf-8'); const encoder = new TextEncoder('utf-8');
this.terminal.on('data', (data) => { this.terminal.on('data', data => {
this.socket.send(encoder.encode(data)); this.socket.send(encoder.encode(data));
}); });
this.socket.addEventListener('message', (ev) => { this.socket.addEventListener('message', ev => {
this.terminal.write(decoder.decode(ev.data)); this.terminal.write(decoder.decode(ev.data));
}); });
...@@ -62,9 +73,4 @@ import $ from 'jquery'; ...@@ -62,9 +73,4 @@ import $ from 'jquery';
handleSocketFailure() { handleSocketFailure() {
this.terminal.write('\r\nConnection failure'); this.terminal.write('\r\nConnection failure');
} }
}
}
window.gl = window.gl || {};
gl.Terminal = GLTerminal;
})();
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
*/ */
@import "../../../node_modules/pikaday/scss/pikaday"; @import "../../../node_modules/pikaday/scss/pikaday";
@import "../../../node_modules/xterm/src/xterm.css";
/* /*
* GitLab UI framework * GitLab UI framework
......
...@@ -103,7 +103,8 @@ ...@@ -103,7 +103,8 @@
"webpack-bundle-analyzer": "^2.13.1", "webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.0.8", "webpack-cli": "^3.0.8",
"webpack-stats-plugin": "^0.2.1", "webpack-stats-plugin": "^0.2.1",
"worker-loader": "^2.0.0" "worker-loader": "^2.0.0",
"xterm": "^3.5.0"
}, },
"devDependencies": { "devDependencies": {
"axios-mock-adapter": "^1.15.0", "axios-mock-adapter": "^1.15.0",
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
/*
* Fit terminal columns and rows to the dimensions of its
* DOM element.
*
* Approach:
* - Rows: Truncate the division of the terminal parent element height
* by the terminal row height
*
* - Columns: Truncate the division of the terminal parent element width by
* the terminal character width (apply display: inline at the
* terminal row and truncate its width with the current number
* of columns)
*/
(function (fit) {
if (typeof exports === 'object' && typeof module === 'object') {
/*
* CommonJS environment
*/
module.exports = fit(require('./xterm'));
} else if (typeof define == 'function') {
/*
* Require.js is available
*/
define(['./xterm'], fit);
} else {
/*
* Plain browser environment
*/
fit(window.Terminal);
}
})(function (Xterm) {
/**
* This module provides methods for fitting a terminal's size to a parent container.
*
* @module xterm/addons/fit/fit
*/
var exports = {};
exports.proposeGeometry = function (term) {
var parentElementStyle = window.getComputedStyle(term.element.parentElement),
parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
parentElementWidth = parseInt(parentElementStyle.getPropertyValue('width')),
elementStyle = window.getComputedStyle(term.element),
elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left')),
availableHeight = parentElementHeight - elementPaddingVer,
availableWidth = parentElementWidth - elementPaddingHor,
container = term.rowContainer,
subjectRow = term.rowContainer.firstElementChild,
contentBuffer = subjectRow.innerHTML,
characterHeight,
rows,
characterWidth,
cols,
geometry;
subjectRow.style.display = 'inline';
subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace
characterWidth = subjectRow.getBoundingClientRect().width;
subjectRow.style.display = ''; // Revert style before calculating height, since they differ.
characterHeight = parseInt(subjectRow.offsetHeight);
subjectRow.innerHTML = contentBuffer;
rows = parseInt(availableHeight / characterHeight);
cols = parseInt(availableWidth / characterWidth) - 1;
geometry = {cols: cols, rows: rows};
return geometry;
};
exports.fit = function (term) {
var geometry = exports.proposeGeometry(term);
term.resize(geometry.cols, geometry.rows);
};
Xterm.prototype.proposeGeometry = function () {
return exports.proposeGeometry(this);
};
Xterm.prototype.fit = function () {
return exports.fit(this);
};
return exports;
});
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -8006,6 +8006,10 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1: ...@@ -8006,6 +8006,10 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
version "4.0.1" version "4.0.1"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
xterm@^3.5.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.5.0.tgz#ba3f464bc5730c9d259ebe62131862224db9ddcc"
y18n@^3.2.1: y18n@^3.2.1:
version "3.2.1" version "3.2.1"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41" resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment