Bump version to 0.17

Bumped version to 0.12

README.md

@@ -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)

addons/attach/attach.js

@@ -5,7 +5,21 @@
  * The bidirectional argument indicates, whether the terminal should
  * send data to the socket as well and is true, by default.
  */
-Terminal.prototype.attach = function (socket, bidirectional) {
+
+(function (attach) {
+    if (typeof define == 'function') {
+        /*
+         * Require.js is available
+         */
+        define(['../../src/xterm'], attach);
+    } else {
+        /*
+         * Plain browser environment
+         */ 
+        attach(this.Xterm);
+    }
+})(function (Xterm) {
+    Xterm.prototype.attach = function (socket, bidirectional) {
       var term = this;
 
       bidirectional = (typeof bidirectional == 'undefined') ? true : bidirectional;
@@ -20,4 +34,5 @@ Terminal.prototype.attach = function (socket, bidirectional) {
           socket.send(data);
         });
       }
-}
+    };
+});

addons/attach/index.html

@@ -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'),

addons/fit/fit.js

@@ -11,18 +11,49 @@
  *               terminal row and truncate its width with the current number
  *               of columns)
  */
-Terminal.prototype.fit = function () {
+(function (fit) {
-  var container = this.element.parentElement,
+    if (typeof define == 'function') {
+        /*
+         * Require.js is available
+         */
+        define(['../../src/xterm'], fit);
+    } else {
+        /*
+         * Plain browser environment
+         */ 
+        fit(this.Xterm);
+    }
+})(function (Xterm) {
+    Xterm.prototype.fit = function () {
+      var container = this.rowContainer,
           subjectRow = this.rowContainer.firstElementChild,
-      rows = parseInt(container.offsetHeight / subjectRow.offsetHeight),
+          rows,
+          contentBuffer,
           characterWidth,
           cols;
 
       subjectRow.style.display = 'inline';
-  characterWidth = parseInt(subjectRow.offsetWidth / this.cols);
+
+      contentBuffer = subjectRow.textContent;
+
+      subjectRow.innerHTML = ' '; /* Arbitrary character to calculate its dimensions */
+      characterWidth = parseInt(subjectRow.offsetWidth);
+      characterHeight = parseInt(subjectRow.offsetHeight);
+
       subjectRow.style.display = '';
 
-  cols = parseInt(container.offsetWidth / characterWidth);
+      cols = container.offsetWidth / characterWidth;
+      cols = parseInt(cols);
+
+      var parentElementStyle = window.getComputedStyle(this.element.parentElement),
+          parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
+          elementStyle = window.getComputedStyle(this.element),
+          elementPadding = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
+          availableHeight = parentElementHeight - elementPadding,
+          rowHeight = this.rowContainer.firstElementChild.offsetHeight;
+
+      rows = parseInt(availableHeight / rowHeight);
 
       this.resize(cols, rows);
-}
+    };
+});

addons/fullscreen/fullscreen.js

@@ -10,7 +10,20 @@
  * If the `fullscreen` argument has not been supplied, the
  * fullscreen mode is being toggled.
  */
-Terminal.prototype.toggleFullscreen = function (fullscreen) {
+(function (fullscreen) {
+    if (typeof define == 'function') {
+        /*
+         * Require.js is available
+         */
+        define(['../../src/xterm'], fullscreen);
+    } else {
+        /*
+         * Plain browser environment
+         */ 
+        fullscreen(this.Xterm);
+    }
+})(function (Xterm) {
+    Xterm.prototype.toggleFullscreen = function (fullscreen) {
       var fn;
 
       if (typeof fullscreen == 'undefined') {
@@ -22,4 +35,5 @@ Terminal.prototype.toggleFullscreen = function (fullscreen) {
       }
 
       this.element.classList[fn]('fullscreen');
-}
+    };
+});

bower.json

@@ -1,5 +1,5 @@
 {
   "name": "xterm.js",
-  "version": "0.10",
+  "version": "0.17",
   "ignore": ["demo", "docs", "test", ".gitignore"]
 }

demo/index.html

@@ -3,7 +3,7 @@
     <head>
         <title>xterm.js demo</title>
         <link rel="stylesheet" href="../src/xterm.css" />
-        <link rel="stylesheet" href="../addon/fullscreen/fullscreen.css" />
+        <link rel="stylesheet" href="../addons/fullscreen/fullscreen.css" />
         <link rel="stylesheet" href="style.css" />
         <script src="../src/xterm.js" ></script>
         <script src="../addons/fit/fit.js" ></script>

docs/conf.py

@@ -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.17'
 # The full version, including alpha/beta/rc tags.
-release = '0.1a'
+release = '0.17 Alpha'
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.

docs/events.rst

@@ -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.

docs/index.rst

@@ -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
+   :maxdepth: 1
-
-
-
-Indices and tables
-==================
-
-* :ref:`genindex`
-* :ref:`modindex`
-* :ref:`search`
    
+   methods
+   events

docs/methods.rst

@@ -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.

src/xterm.js

@@ -31,8 +31,20 @@
  *   other features.
  */
 
-;(function() {
+(function (xterm) {
-
+    if (typeof define == 'function') {
+        /*
+         * Require.js is available
+         */
+        define([], xterm);
+    } else {
+        /*
+         * Plain browser environment
+         */ 
+        this.Xterm = xterm.call(this);
+        this.Terminal = this.Xterm; /* Backwards compatibility with term.js */
+    }
+})(function() {
     /**
      * Terminal Emulation References:
      *   http://vt100.net/
@@ -50,8 +62,7 @@
      * Shared
      */
 
-var window = this
+    var window = this, document = this.document;
-  , document = this.document;
 
     /**
      * EventEmitter
@@ -916,9 +927,9 @@ Terminal.prototype.bindMouse = function() {
         if (self.mouseEvents) return;
         if (self.applicationKeypad) return;
         if (ev.type === 'DOMMouseScroll') {
-      self.scrollDisp(ev.detail < 0 ? -5 : 5);
+          self.scrollDisp(ev.detail < 0 ? -1 : 1);
         } else {
-      self.scrollDisp(ev.wheelDeltaY > 0 ? -5 : 5);
+          self.scrollDisp(ev.wheelDeltaY > 0 ? -1 : 1);
         }
         return self.cancel(ev);
       });
@@ -4763,12 +4774,5 @@ Terminal.on = on;
     Terminal.off = off;
     Terminal.cancel = cancel;
 
-if (typeof module !== 'undefined') {
+    return Terminal;
-  module.exports = Terminal;
+});
-} else {
-  this.Terminal = Terminal;
-}
-
-}).call(function() {
-  return this || (typeof window !== 'undefined' ? window : global);
-}());