Mark version 0.27

Fixed incorrect row/column calculation in Firefox

README.md

@@ -1,14 +1,19 @@
-# 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-featured terminal inside the browser.
+
+Xterm.js serves as foundation for the terminal found at www.sourcelair.com.
+
+![xterm.js screenshot](docs/screenshot.png)
 
 ### Contribution and License Agreement
 
-If you contribute code to this project, you are implicitly allowing your code
-to be distributed under the MIT license. You are also implicitly verifying that
-all code is your original work.
+If you contribute code to this project, you are implicitly allowing your code to be distributed under the MIT license. You are also implicitly verifying that all code is your original work.
 
 ## License
 
-Copyright (c) 2014, sourceLair Limited (www.sourcelair.com) (MIT License)
+Copyright (c) 2014, SourceLair, Ltd (www.sourcelair.com) (MIT License)
+
 Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)

addons/attach/attach.js

@@ -5,19 +5,55 @@
  * 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) {
-  var term = this;
-  
-  bidirectional = (typeof bidirectional == 'undefined') ? true : bidirectional;
-  this.socket = socket;
-  
-  socket.addEventListener('message', function (ev) {
-    term.write(ev.data);
-  });
-  
-  if (bidirectional) {
-    this.on('data', function (data) {
-      socket.send(data);
-    });
-  }
-}
+
+(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;
+      this.socket = socket;
+
+      term._getMessage = function (ev) {
+        term.write(ev.data);
+      };
+        
+      term._sendData = function (data) {
+        socket.send(data);
+      };
+
+      socket.addEventListener('message', term._getMessage);
+
+      if (bidirectional) {
+        this.on('data', term._sendData);
+      }
+      
+      socket.addEventListener('close', term.detach.bind(term, socket));
+      socket.addEventListener('error', term.detach.bind(term, socket));
+    };
+    
+    Xterm.prototype.detach = function (socket) {
+      var term = this;
+
+      term.off('data', term._sendData);
+
+      socket = (typeof socket == 'undefined') ? term.socket : socket;
+
+      if (socket) {
+        socket.removeEventListener('message', term._getMessage);
+      }
+
+      delete term.socket;
+    };
+});

addons/fit/fit.js

@@ -11,18 +11,64 @@
  *               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);
-}
+(function (fit) {
+    if (typeof define == 'function') {
+        /*
+         * Require.js is available
+         */
+        define(['../../src/xterm'], fit);
+    } else {
+        /*
+         * Plain browser environment
+         */ 
+        fit(this.Xterm);
+    }
+})(function (Xterm) {
+    Xterm.prototype.proposeGeometry = function () {
+        var parentElementStyle = window.getComputedStyle(this.element.parentElement),
+            parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
+            parentElementWidth = parseInt(parentElementStyle.getPropertyValue('width')),
+            elementStyle = window.getComputedStyle(this.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 = this.rowContainer,
+            subjectRow = this.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 = parseInt(subjectRow.offsetWidth);
+        subjectRow.style.display = ''; // Revert style before calculating height, since they differ.
+        characterHeight = parseInt(subjectRow.offsetHeight);
+        subjectRow.innerHTML = contentBuffer;
+
+        rows = parseInt(availableHeight / characterHeight);
+        /*
+         * The following hack takes place in order to get "fit" work properly
+         * in Mozilla Firefox.
+         * Most probably, because of a dimension calculation bug, Firefox
+         * calculates the width to be 1px less than it is actually drawn on
+         * screen.
+         */
+        if (navigator.userAgent.match(/Firefox/)) {
+            characterWidth++;
+        }
+        cols = parseInt(availableWidth / characterWidth);
+
+        geometry = {cols: cols, rows: rows};
+        return geometry;
+    };
+
+    Xterm.prototype.fit = function () {
+        var geometry = this.proposeGeometry();
+
+        this.resize(geometry.cols, geometry.rows);
+    };
+});

addons/fullscreen/fullscreen.js

@@ -10,16 +10,30 @@
  * If the `fullscreen` argument has not been supplied, the
  * fullscreen mode is being toggled.
  */
-Terminal.prototype.toggleFullscreen = function (fullscreen) {
-  var fn;
-  
-  if (typeof fullscreen == 'undefined') {
-    fn = (this.element.classList.contains('fullscreen')) ? 'remove' : 'add';
-  } else if (!fullscreen) {
-    fn = 'remove';
-  } else {
-    fn = 'add';
-  }
-  
-  this.element.classList[fn]('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') {
+        fn = (this.element.classList.contains('fullscreen')) ? 'remove' : 'add';
+      } else if (!fullscreen) {
+        fn = 'remove';
+      } else {
+        fn = 'add';
+      }
+
+      this.element.classList[fn]('fullscreen');
+    };
+});

bower.json

@@ -1,5 +1,5 @@
 {
   "name": "xterm.js",
-  "version": "0.11",
+  "version": "0.27",
   "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>

demo/main.js

@@ -1,12 +1,13 @@
 var terminalContainer = document.getElementById('terminal-container'),
-    term = new Terminal();
+    term = new Terminal(),
+    prompt = '> ';
 
 term.open(terminalContainer);
 term.fit();
 
 term.prompt = function () {
-  term.write('\r\n> ');
-}
+  term.write('\r\n' + prompt);
+};
 
 term.writeln('Welcome to xterm.js');
 term.writeln('Just type some keys in the prompt below.');
@@ -19,7 +20,12 @@ term.on('key', function (key, ev) {
   if (ev.keyIdentifier == 'Enter') {
     term.prompt();
   } else if (ev.keyCode == 8) {
-    term.write('\b \b');
+    /*
+     * Do not delete the prompt
+     */
+    if (term.x > 2) {
+      term.write('\b \b');
+    }
   } else if (printable) {
     term.write(key);
   }

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

docs/index.rst

@@ -8,11 +8,13 @@ Welcome to xterm.js's documentation!
 
 This is the documentation for xterm.js. Xterm.js is a full xterm clone, written completely in JavaScript.
 
-Xterm.js supplye a modular, event-based interface that lets developers build addons and themes that augment 
+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
 ^^^^^^^^^^^^^^^
 

src/xterm.css

@@ -45,6 +45,7 @@
 
 .xterm .terminal-cursor {
     background-color: #fff;
+    color: #000;
 }
 
 .xterm .xterm-helpers {