Compare commits

...
11 Commits
Author SHA1 Message Date
paris 3a782972e3 Bump version to 0.13 2014-08-16 03:25:46 +00:00
paris d12406bedc Fix wrong behavior of fit add-on 2014-08-16 03:25:13 +00:00
paris 561fc59dbc Added screenshot for docs
Bumped version to 0.12
2014-05-03 00:30:04 +00:00
paris ce1d788efe Bumped bower version to 0.11 2014-05-02 23:45:20 +00:00
paris 01e48b7406 Revamped the attach addon
Also updated docs with proper attach url
2014-05-02 23:45:00 +00:00
paris a1717fdd8d Update docs index 2014-05-02 23:21:07 +00:00
paris c9f5f235e2 Started documenting methods
Also added Getting Started section in docs
2014-05-02 22:51:38 +00:00
paris 21dde3cfa2 Updated version, in docs 2014-05-02 22:34:15 +00:00
paris 73bf6d1ce8 Started documenting events 2014-05-02 18:57:48 +00:00
paris 1b6ad0fd7b Bumped Bower version to 0.10 2014-04-11 02:12:37 +00:00
paris 189a556408 Moved fit into its own addon 2014-04-11 02:04:56 +00:00
11 changed files with 227 additions and 51 deletions
+10 -3
View File
@@ -1,6 +1,13 @@
# xterm.js
# xterm.js — xterm, in the browser
xterm, in the browser.
Xterm.js is a full xterm clone, written completely in JavaScript.
Xterm.js supplies a modular, event-based interface that lets developers build addons and themes that augment
the experience of running a fully-feature terminal inside the browser.
Xterm.js serves as the foundation for the terminal found at www.sourcelair.com.
![xterm.js screenshot](docs/screenshot.png)
### Contribution and License Agreement
@@ -10,5 +17,5 @@ all code is your original work.
## License
Copyright (c) 2014, sourceLair Limited (www.sourcelair.com) (MIT License)
Copyright (c) 2014, sourceLair, Limited (www.sourcelair.com) (MIT License)
Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+55
View File
@@ -5,8 +5,61 @@
<link rel="stylesheet" href="../../demo/style.css" />
<script src="../../src/xterm.js"></script>
<script src="attach.js"></script>
<style>
body {
color: #111;
}
h1, h2 {
color: #444;
border-bottom: 1px solid #ddd;
text-align: left;
}
form {
margin-bottom: 32px;
}
input, button {
line-height: 22px;
font-size: 16px;
display: inline-block;
border-radius: 2px;
border: 1px solid #ccc;
}
input {
height: 22px;
padding-left: 4px;
padding-right: 4px;
}
button {
height: 28px;
background-color: #ccc;
cursor: pointer;
color: #333;
}
.container {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>
xterm.js: socket attach
</h1>
<p>
Attach the terminal to a WebSocket terminal stream with ease. Perfect for attaching to your
Docker containers.
</p>
<h2>
Socket information
</h2>
<form id="socket-form">
<input id="socket-url"
type="text"
@@ -17,6 +70,8 @@
</button>
</form>
<div id="terminal-container"></div>
</div>
<script>
var term = new Terminal(),
container = document.getElementById('terminal-container'),
+29
View File
@@ -0,0 +1,29 @@
/*
* 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)
*/
Terminal.prototype.fit = function () {
var container = this.rowContainer,
subjectRow = this.rowContainer.firstElementChild,
rows = parseInt(container.offsetHeight / subjectRow.offsetHeight),
characterWidth,
cols;
subjectRow.style.display = 'inline';
characterWidth = parseInt(subjectRow.offsetWidth / this.cols);
subjectRow.style.display = '';
cols = container.offsetWidth / characterWidth;
cols = parseInt(cols);
this.resize(cols, rows);
};
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "xterm.js",
"version": "0.9.2",
"version": "0.13",
"ignore": ["demo", "docs", "test", ".gitignore"]
}
+4 -3
View File
@@ -5,9 +5,10 @@
<link rel="stylesheet" href="../src/xterm.css" />
<link rel="stylesheet" href="../addon/fullscreen/fullscreen.css" />
<link rel="stylesheet" href="style.css" />
<script src="../src/xterm.js"></script>
<script src="../addon/fullscreen/fullscreen.js"></script>
<script src="main.js" defer></script>
<script src="../src/xterm.js" ></script>
<script src="../addons/fit/fit.js" ></script>
<script src="../addons/fullscreen/fullscreen.js" ></script>
<script src="main.js" defer ></script>
</head>
<body>
<h1>
+3 -3
View File
@@ -44,16 +44,16 @@ master_doc = 'index'
# General information about the project.
project = u'xterm.js'
copyright = u'2014, sourceLair Limited'
copyright = u'2014, SourceLair Limited'
# The version info for the project you're documenting, acts as replacement for
# |version| and |release|, also used in various other places throughout the
# built documents.
#
# The short X.Y version.
version = '0.1a'
version = '0.13'
# The full version, including alpha/beta/rc tags.
release = '0.1a'
release = '0.13 Alpha'
# The language for content autogenerated by Sphinx. Refer to documentation
# for a list of supported languages.
+43
View File
@@ -0,0 +1,43 @@
------
Events
------
focus
^^^^^
This event is fired, when the Terminal gets focus.
blur
^^^^
This event is fired, when the Terminal loses focus.
open
^^^^
This event is fired, when the Terminal gets opened into a DOM Element.
keydown
^^^^^^^
This event is fired, when the `keydown` DOM Event gets triggered on the Terminal.
keypress
^^^^^^^^
This event is fired, when the `keypress` DOM Event gets triggered on the Terminal.
key
^^^
This event is fired, when a key is being handled by the Terminal.
resize
^^^^^^
This event is being fired, when the Terminal view gets resized by the `resize` method.
data
^^^^
This event is being fired, when a chunk of input data gets handled by the terminal.
copy
^^^^
This event is fired, when the `copy` DOM Event gets triggered on the Terminal.
paste
^^^^^
This event is fired, when the `paste` DOM Event gets triggered on the Terminal.
+35 -12
View File
@@ -6,17 +6,40 @@
Welcome to xterm.js's documentation!
====================================
Contents:
This is the documentation for xterm.js. Xterm.js is a full xterm clone, written completely in JavaScript.
Xterm.js supplies a modular, event-based interface that lets developers build addons and themes that augment
the experience of running a fully-feature terminal inside the browser.
Xterm.js serves as the foundation for the terminal found at www.sourcelair.com.
.. image:: screenshot.png
Getting started
^^^^^^^^^^^^^^^
.. code-block:: javascript
var term = new Terminal(),
url = 'ws://docker/containers/mycontainer/attach/ws/?stdin=1&stdout=1&stderr=1&logs=1',
socket = new WebSocket(url);
term.open(document.body);
term.on('data', function (data) {
socket.send(data);
});
socket.onmessage = function (e) {
term.write(e.data);
}
Contents
^^^^^^^^
The standard way to create a terminal-based application with xterm.js is to work with its events and
methods, that let you manipulate input, output, state and size of the terminal.
.. toctree::
:maxdepth: 2
Indices and tables
==================
* :ref:`genindex`
* :ref:`modindex`
* :ref:`search`
:maxdepth: 1
methods
events
+47
View File
@@ -0,0 +1,47 @@
-------
Methods
-------
focus()
^^^^^^^
Sends focus to the terminal
blur()
^^^^^^
Blurs the Terminal
open(element)
^^^^
Open the Xterm terminal, inside the given element.
resize(x, y)
^^^^^^^^^^^^
Resize the terminal, according to the given columns and rows.
insertRow(row)
^^^^^^^^^^^^^^
Insert the given row in the terminal.
on(event, callback)
^^^^^^^^^^^^^^^^^^^
Hook the given callback, to the given event.
off(event, callback)
^^^^^^^^^^^^^^^^^^^
Remove the Hook of the given callback, from the given event.
once(event, callback)
^^^^^^^^^^^^^^^^^^^
Hook the given callback to the given event, for just a single invocation.
write(data)
^^^^^^^^^^^
Write the given data to the terminal.
writeln(data)
^^^^^^^^^^^^^
Write the given data to the terminal, followed by a carriage return and a new line.
handler(data)
^^^^^^^^^^^^^
Fire the data event, for the given data.
Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

-29
View File
@@ -2521,35 +2521,6 @@ Terminal.prototype.resize = function(x, y) {
this.emit('resize', {terminal: this, cols: x, rows: y});
};
/*
* 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)
*/
Terminal.prototype.fit = function () {
var container = this.element.parentElement,
subjectRow = this.rowContainer.firstElementChild,
rows = parseInt(container.offsetHeight / subjectRow.offsetHeight),
characterWidth,
cols;
subjectRow.style.display = 'inline';
characterWidth = parseInt(subjectRow.offsetWidth / this.cols);
subjectRow.style.display = '';
cols = parseInt(container.offsetWidth / characterWidth);
this.resize(cols, rows);
}
Terminal.prototype.updateRange = function(y) {
if (y < this.refreshStart) this.refreshStart = y;
if (y > this.refreshEnd) this.refreshEnd = y;