web-console-rails3 0.3.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4556090d4990261a3b9cbdfa3e9eb35bc50772ca
-  data.tar.gz: f73bd7ae863f2aa237be9160efd7dbb4bd33b4b5
+  metadata.gz: dbc0a729da56cc72ec280e4c61dff38133b54626
+  data.tar.gz: 3a3879f62b9fe309ce47a160d9d978ebc7c184d5
 SHA512:
-  metadata.gz: edd0352d444bf3e257e43c0943a6e551e37448b2ac3bd9f1b2d135db93763ee2df5ddf4840bfe3077d23045d70775bde0908e7faf2e2990e57fc1adc7922577d
-  data.tar.gz: 15d85727b97fd2b305faeb24e75002a0023807afdcb93455b43376b4b059c4314fab6fdc883e284a3da1a61ec7ff69d354bdb3bed5d37294e63af905bbda9828
+  metadata.gz: 9f6d3fcc41bcb977ea4a45e5c1d8efa71d4c6af467c3f6b16105f2a6e8d69ce1fa3db0a72fe384b3811ed5c06ae7ea805e0f6722df3f28ae32938fc7211fe4a1
+  data.tar.gz: 94dcde582093e9ea37ef3999949acdb6a683122063fec5b97c3476de66dd8c32bfe5d94c973dae82a8881cad940b66a514119807d664f70265205eeb61850f4f

data/README.markdown

@@ -21,7 +21,7 @@ To install it in your current application, add the following to your `Gemfile`.
 
 ```ruby
 group :development do
-  gem 'web-console-rails3', '~> 0.3.0'
+  gem 'web-console-rails3', '~> 0.4.1'
 end
 ```
 

data/Rakefile

@@ -25,7 +25,7 @@ Bundler::GemHelper.install_tasks if defined? Bundler::GemHelper
 namespace :docker do
   task :sync do
     Dir.chdir(EXPANDED_CWD) do
-     sh "git fetch && git reset --hard origin/master", verbose: false
+     sh 'git fetch && git reset --hard origin/master', verbose: false
     end
   end
 

data/app/assets/javascripts/web_console/application.js

@@ -1,2 +1 @@
-//= require web_console
 //= require_tree .

data/app/assets/javascripts/web_console/console_sessions.js

@@ -1,3 +1,177 @@
-window.onload = function() {
-  window.terminal = new WebConsole.Terminal(TerminalSettings);
-};
+//= require web-console
+
+var AJAXTransport = (function(WebConsole) {
+
+  var inherits = WebConsole.inherits;
+  var EventEmitter = WebConsole.EventEmitter;
+
+  // Use an IE friendly implementation of XMLHttpRequest.
+  XHR = (function() {
+    try {
+      return XMLHttpRequest;
+    } catch (e) {
+      return function() {
+        return new ActiveXObject('Microsoft.XMLHTTP');
+      };
+    }
+  }).call(this);
+
+  var AJAXTransport = function(options) {
+    EventEmitter.call(this);
+    options || (options = {});
+
+    this.url = (typeof options.url === 'string') ? {
+      input: options.url,
+      pendingOutput: options.url,
+      configuration: options.url
+    } : options.url;
+
+    this.pendingInput  = '';
+
+    this.on('input', this.sendInput);
+    this.on('configuration', this.sendConfiguration);
+    this.once('initialization', function(cols, rows) {
+      this.emit('configuration', cols, rows);
+      this.pollForPendingOutput();
+    });
+  };
+
+  inherits(AJAXTransport, EventEmitter);
+
+  // Shorthand for creating XHR requests.
+  AJAXTransport.prototype.createRequest = function(method, url, options) {
+    options || (options = {});
+
+    var request = new XHR();
+    request.open(method, url);
+
+    if (typeof options.form === 'object') {
+      var content = [], form = options.form;
+
+      for (var key in form) {
+        var value = form[key];
+        content.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
+      }
+
+      var formMimeType = 'application/x-www-form-urlencoded; charset=utf-8';
+      request.setRequestHeader('Content-Type', formMimeType);
+      request.data = content.join('&');
+    }
+
+    return request;
+  };
+
+  AJAXTransport.prototype.pollForPendingOutput = function() {
+    var request = this.createRequest('GET', this.url.pendingOutput);
+
+    var self = this;
+    request.onreadystatechange = function() {
+      if (request.readyState === 4) {
+        if (request.status === 200) {
+          self.emit('pendingOutput', request.responseText);
+          self.pollForPendingOutput();
+        } else {
+          self.emit('disconnect', request);
+        }
+      }
+    };
+
+    request.send(null);
+  };
+
+  // Send the input to the server.
+  //
+  // Each key press is encoded to an intermediate format, before it is sent to
+  // the server.
+  //
+  // WebConsole#keysPressed is an alias for WebConsole#sendInput.
+  AJAXTransport.prototype.sendInput = function(input) {
+    input || (input = '');
+
+    if (this.disconnected) return;
+    if (this.sendingInput) return this.pendingInput += input;
+
+    // Indicate that we are starting to send input.
+    this.sendingInput = true;
+
+    var request = this.createRequest('PUT', this.url.input, {
+      form: { input: this.pendingInput + input }
+    });
+
+    // Clear the pending input.
+    this.pendingInput = '';
+
+    var self = this;
+    request.onreadystatechange = function() {
+      if (request.readyState === 4) {
+        self.sendingInput = false;
+        if (self.pendingInput) self.sendInput();
+      }
+    };
+
+    request.send(request.data);
+  };
+
+  // Send the terminal configuration to the server.
+  //
+  // Right now by configuration, we understand the terminal widht and terminal
+  // height.
+  //
+  // WebConsole#resized is an alias for WebConsole#sendconfiguration.
+  AJAXTransport.prototype.sendConfiguration = function(cols, rows) {
+    if (this.disconnected) return;
+
+    var request = this.createRequest('PUT', this.url.configuration, {
+      form: { width: cols, height: rows }
+    });
+
+    // Just send the configuration and don't care about any output.
+    request.send(request.data);
+  };
+
+  return AJAXTransport;
+
+}).call(this, WebConsole);
+
+window.addEventListener('load', function() {
+  var geometry = calculateFitScreenGeometry();
+  config.terminal.cols = geometry[0];
+  config.terminal.rows = geometry[1];
+
+  var terminal = window.terminal = new WebConsole.Terminal(config.terminal);
+
+  terminal.on('data', function(data) {
+    transport.emit('input', data);
+  });
+
+  var transport = new AJAXTransport(config.transport);
+
+  transport.on('pendingOutput', function(response) {
+    var json = JSON.parse(response);
+    if (json.output) terminal.write(json.output);
+  });
+
+  transport.on('disconnect', function() {
+    terminal.destroy();
+  });
+
+  transport.emit('initialization', terminal.cols, terminal.rows);
+
+  // Utilities
+  // ---------
+
+  function calculateFitScreenGeometry() {
+    // Currently, resizing term.js is broken. E.g. opening vi causes it to go
+    // back to 80x24 and fail with off-by-one error. Other stuff, like chip8
+    // are rendered incorrectly and so on.
+    //
+    // To work around it, create a temporary terminal, just so we can get the
+    // best dimensions for the screen.
+    var temporary = new WebConsole.Terminal;
+    try {
+      return temporary.fitScreen();
+    } finally {
+      temporary.destroy();
+    }
+  }
+});

data/app/assets/stylesheets/web_console/application.css

@@ -8,7 +8,6 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
- *= require vt100
  *= require_self
  *= require_tree .
  */

data/app/assets/stylesheets/web_console/console_sessions.css.erb

@@ -0,0 +1,6 @@
+<% WebConsole.config.style.instance_eval do %>
+  body { color: <%= colors.foreground %>; background: <%= colors.background %>; margin: 0; padding: 0; }
+
+  .terminal { float: left; overflow: hidden; font: <%= font %>; }
+  .terminal-cursor { color: <%= colors.background %>; background: <%= colors.foreground %>; }
+<% end %>

data/app/controllers/web_console/application_controller.rb

@@ -1,11 +1,6 @@
 module WebConsole
   class ApplicationController < ActionController::Base
-    class << self
-      # Alias before_filter to before_action for Rails 3 compatibility.
-      alias :before_action :before_filter unless defined?(before_filter)
-    end
-
-    before_action :prevent_unauthorized_requests!
+    before_filter :prevent_unauthorized_requests!
 
     private
 

data/app/views/web_console/console_sessions/index.html.erb

@@ -1,9 +1,15 @@
 <script>
-  var TerminalSettings = {
-    url: {
-      input: "<%= web_console.input_console_session_path(@console_session) %>",
-      pendingOutput: "<%= web_console.pending_output_console_session_path(@console_session) %>",
-      configuration: "<%= web_console.configuration_console_session_path(@console_session) %>"
+  var config = {
+    terminal: {
+      colors: <%= raw WebConsole.config.style.colors.to_json %>
+    },
+
+    transport: {
+      url: {
+        input: "<%= web_console.input_console_session_path(@console_session) %>",
+        pendingOutput: "<%= web_console.pending_output_console_session_path(@console_session) %>",
+        configuration: "<%= web_console.configuration_console_session_path(@console_session) %>"
+      }
     }
   };
 </script>

data/lib/assets/javascripts/web_console.js

@@ -1,202 +1,41 @@
-//= require vt100
+//= require term
 
-(function() {
-
-  // Store utilities in an underscore-like object.
-  var _ = {
-    // Simple prototypical inheritence helper.
-    //
-    // Forces `cls` to inherit from `base` prototype.
-    inherits: function(cls, base) {
-      var constructor = _.noop();
-      constructor.prototype = base.prototype;
-      cls.prototype = new constructor();
-      cls.prototype.constructor = cls;
-    },
-
-    // Factory for empty functions.
-    noop: function() {
-      return function() {};
-    },
-
-    // Binds a function to an explicit context.
-    bind: Function.prototype.bind ? function(func, context) {
-      return func.bind(context);
-    } : function(func, context) {
-      return function() {
-        return func.apply(context, arguments);
-      };
-    }
-  };
+;(function(BaseTerminal) {
 
   // Expose the main WebConsole namespace.
   var WebConsole = this.WebConsole = {};
 
-  // Use an IE friendly implementation of XMLHttpRequest.
-  WebConsole.XHR = (function() {
-    try {
-      return XMLHttpRequest;
-    } catch (e) {
-      var constructor = function() {
-        return new ActiveXObject('Microsoft.XMLHTTP');
-      };
+  // Follow term.js example and expose inherits and EventEmitter.
+  var inherits = WebConsole.inherits = BaseTerminal.inherits;
+  var EventEmitter = WebConsole.EventEmitter = BaseTerminal.EventEmitter;
 
-      // Attach the XHR ready states as constants.
-      constructor.UNSET            = 0;
-      constructor.OPENED           = 1;
-      constructor.HEADERS_RECEIVED = 2;
-      constructor.LOADING          = 3;
-      constructor.DONE             = 3;
-      return constructor;
+  var Terminal = WebConsole.Terminal = function(options) {
+    if (typeof options === 'number') {
+      return BaseTerminal.apply(this, arguments);
     }
-  }).call(this);
-
-  WebConsole.Terminal = function(options) {
-    options || (options = {});
-
-    if (typeof options.url === 'string') {
-      this.url = {
-        input: options.url,
-        pendingOutput: options.url,
-        configuration: options.url
-      };
-    } else {
-      this.url = options.url;
-    }
-
-    this.disableAudio = true;
 
-    VT100.call(this);
+    BaseTerminal.call(this, options || (options = {}));
 
-    this.requestPendingOutput();
-  };
-
-  // Inherit from VT100.
-  _.inherits(WebConsole.Terminal, VT100);
-
-  // Try to be minimalistic and disable the context menu.
-  WebConsole.Terminal.prototype.showContextMenu = _.noop();
-
-  // Don't show the current size on resize.
-  WebConsole.Terminal.prototype.showCurrentSize = _.noop();
-
-  // Shorthand for creating XHR requests.
-  WebConsole.Terminal.prototype.createRequest = function(method, url, options) {
-    options || (options = {});
+    this.open();
 
-    var request = new WebConsole.XHR();
-    request.open(method, url);
-
-    if (typeof options.form === 'object') {
-      var content = [], form = options.form;
-
-      for (var key in form) {
-        var value = form[key];
-        content.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
-      }
-
-      var formMimeType = 'application/x-www-form-urlencoded; charset=utf-8';
-      request.setRequestHeader('Content-Type', formMimeType);
-      request.data = content.join('&');
+    if (!(options.rows || options.cols) || !options.geometry) {
+      this.fitScreen();
     }
-
-    return request;
   };
 
-  WebConsole.Terminal.prototype.clearPendingInput = function() {
-    this.pendingInput = '';
-  };
-
-  WebConsole.Terminal.prototype.feedPendingInput = function(input) {
-    (this.pendingInput === void 0) && (this.pendingInput = '');
-    this.pendingInput += input;
-  };
-
-  WebConsole.Terminal.prototype.requestPendingOutput = function() {
-    var request = this.createRequest('GET', this.url.pendingOutput);
-
-    request.onreadystatechange = _.bind(function() {
-      var response;
-
-      if (request.readyState === WebConsole.XHR.DONE) {
-        if (request.status === 200) {
-          response = JSON.parse(request.responseText);
-          if (response.output) {
-            this.vt100(unescape(encodeURIComponent(response.output)));
-          }
-
-          this.requestPendingOutput();
-        } else {
-          try {
-            // Try to parse the error if it is a JSON.
-            response = JSON.parse(request.responseText);
-          } catch(e) {
-            // No luck with that, but it's not a big deal.
-          }
-          this.disconnect(response && response.error);
-        }
-      }
-    }, this);
-
-    request.send(null);
-  };
+  // Make WebConsole.Terminal inherit from BaseTerminal (term.js).
+  inherits(Terminal, BaseTerminal);
 
-  // Send the input to the server.
-  //
-  // Each key press is encoded to an intermediate format, before it is sent to
-  // the server.
-  //
-  // WebConsole#keysPressed is an alias for WebConsole#sendInput.
-  WebConsole.Terminal.prototype.sendInput =
-  WebConsole.Terminal.prototype.keysPressed = function(input) {
-    input || (input = '');
+  Terminal.prototype.fitScreen = function() {
+    var width  = Math.floor(this.element.clientWidth / this.cols);
+    var height = Math.floor(this.element.clientHeight / this.rows);
 
-    if (this.disconnected) return;
-    if (this.sendingInput) return this.feedPendingInput(input);
+    var rows = Math.floor(window.innerHeight / height);
+    var cols = Math.floor(this.parent.clientWidth / width);
 
-    // Indicate that we are starting to send input.
-    this.sendingInput = true;
-
-    var request = this.createRequest('PUT', this.url.input, {
-      form: { input: (this.pendingInput || '') + input }
-    });
-
-    // Clear the pending input.
-    this.clearPendingInput();
-
-    request.onreadystatechange = _.bind(function() {
-      if (request.readyState === WebConsole.XHR.DONE) {
-        this.sendingInput = false;
-        if (this.pendingInput) this.sendInput();
-      }
-    }, this);
-
-    request.send(request.data);
-  };
-
-  // Send the terminal configuration to the server.
-  //
-  // Right now by configuration, we understand the terminal widht and terminal
-  // height.
-  //
-  // WebConsole#resized is an alias for WebConsole#sendconfiguration.
-  WebConsole.Terminal.prototype.sendConfiguration =
-  WebConsole.Terminal.prototype.resized = function() {
-    if (this.disconnected) return;
-
-    var request = this.createRequest('PUT', this.url.configuration, {
-      form: { width: this.terminalWidth, height: this.terminalHeight }
-    });
-
-    // Just send the configuration and don't care about any output.
-    request.send(request.data);
-  };
+    this.resize(cols, rows);
 
-  // Don't send any more requests to the server.
-  WebConsole.Terminal.prototype.disconnect = function(message) {
-    this.disconnected = true;
-    if (this.cursorX > 0) this.vt100('\r\n');
-    this.vt100(message || 'Disconnected');
+    return [cols, rows];
   };
 
-}).call(this);
+}).call(this, Terminal);