Somewhat working view-stream and outputview tree

HTML/client/shell.js

@@ -19,13 +19,15 @@ tc.shell = function (client, environment, exit) {
 
 tc.shell.prototype = {
 
+  // Hook into the given set of handlers.
   hook: function (handlers) {
     var self = this;
     handlers = handlers || [];
     handlers['shell'] = function (m,a) { self.shellHandler(m, a); };
     return handlers;
   },
 
+  // Handler for view.* invocations.
   shellHandler: function (method, args) {
     switch (method) {
       case 'shell.environment':

HTML/commandview/command.js

@@ -26,17 +26,23 @@ cv.command.prototype = {
     var self = this;
     var $command = $('<div class="command"><span class="sigil"></span>').data('controller', this);
 
-    // Add tokenfield for command input.
+    // Create tokenfield for command input.
     this.tokenField = new termkit.tokenField();
     this.tokenField.onChange = function (e, t) { self.checkTriggers(e, t); }
     this.tokenField.onSubmit = function (e, t) { self.submitCommand(e, t); }
 
+    // Create throbber.
     this.progressIndicator = new termkit.progressIndicator();
 
+    // Create outputView for command output.
+    this.outputView = new termkit.outputView();
+
     $command.append(this.tokenField.$element);
     $command.append(this.progressIndicator.$element);
+    $command.append(this.outputView.$element);
 
     this.progressIndicator.$element.hide();
+    this.outputView.$element.hide();
 
     return $command;
   },
@@ -65,29 +71,35 @@ cv.command.prototype = {
     }[this.state];
     this.$sigil.attr('class', 'sigil sigil-'+this.state).html(this.collapsed ? '▶' : sigil);
     this.progressIndicator.$element[(this.state == 'running') ? 'show' : 'hide']();
+    this.outputView.$element[!this.collapsed ? 'show' : 'hide']();
   },
 
-  // Execute tokenfield as command.
+  // Execute tokenfield contents as command.
   submitCommand: function (event, tokens) {
     var self = this;
     this.state = 'running';
     this.collapsed = false;
 
     // Convert tokens into strings.
     var command = tokens.map(function (t) { return t.toCommand(); });
+
+    // Execute in current context.
     this.context.shell.run(command, function (data, code, status) {
-      // Set appropriate return state.
-      self.state = {
-        'ok': 'ok',
-        'warning': 'warning',
-        'error': 'error',
-      }[status] || 'ok';
+        // Set appropriate return state.
+        self.state = {
+          'ok': 'ok',
+          'warning': 'warning',
+          'error': 'error',
+        }[status] || 'ok';
 
-      // Open new command.
-      async(function () {
-        self.commandView.newCommand();
-      });
-    }, { });
+        // Open new command.
+        async(function () {
+          self.commandView.newCommand();
+        });
+      },
+      // Send all output to outputView.
+      this.outputView.hook()
+    );
   },
 
   // Use triggers to respond to a creation or change event.

HTML/commandview/commandview.js

@@ -17,7 +17,8 @@ var cv = termkit.commandView = function (shell) {
   this.activeIndex = 0;
   this.beginIndex = 0;
   this.endIndex = 0;
-  this.commandList = new cv.commandList();
+
+  this.commandList = new termkit.container();  
 };
 
 cv.prototype = {
@@ -29,11 +30,11 @@ cv.prototype = {
     return $commandView;
   },
 
-  // Refresh the given view by re-inserting all command elements.
+  // Update the element's markup in response to internal changes.
   updateElement: function () {
     if (this.endIndex < this.commandList.length) {
       for (; this.endIndex < this.commandList.length; ++this.endIndex) {
-        var command = this.commandList.commands[this.endIndex];
+        var command = this.commandList.collection[this.endIndex];
         this.$commands.append(command.$element);
       }
     }
@@ -46,7 +47,7 @@ cv.prototype = {
   },
 
   activeCommand: function () {
-    return this.commandList.commands[this.activeIndex];
+    return this.commandList.collection[this.activeIndex];
   },
 
   newCommand: function () {

HTML/container.js

@@ -0,0 +1,81 @@
+(function ($) {
+
+/**
+ * Unique collection of objects that refer to their container.
+ * (uniqueness not really enforced)
+ */
+var cc = termkit.container = function () {
+  this.collection = [];
+};
+
+cc.prototype = {
+
+  get contents() {
+    return [].concat(this.collection);
+  },
+
+  // Pass-through length of array
+  get length() {
+    return this.collection.length;
+  },
+
+  // Add a new object at the given index (optional).
+  add: function (collection, index) {
+    var self = this;
+
+    // Prepare splice call.
+    if (arguments.length < 2 || index == -1) {
+      index = this.collection.length;
+    }
+    var args = [ index, 0 ].concat(collection);
+
+    // Allow both single object and array.
+    $.each(oneOrMany(collection), function () {
+      this.container = self;
+    });
+
+    // Add elements.
+    [].splice.apply(this.collection, args);
+  },
+
+  // Remove the given object.
+  remove: function (collection) {
+    var self = this;
+
+    // Allow both single object and array.
+    $.each(oneOrMany(collection), function () {
+      var index = self.indexOf(this);
+      if (index < 0) return;
+
+      var object = self.collection[index];
+      object.container = null;
+
+      self.collection.splice(index, 1);
+    });
+  },
+
+  // Replace the given object with the replacement object(s).
+  replace: function (object, collection) {
+    var index = this.indexOf(object);
+    this.remove(object);
+    this.add(collection, index);
+  },
+
+  // Find index of given object in list.
+  indexOf: function (object) {
+    return (typeof object == 'number') ? object : $.inArray(object, this.collection);
+  },
+
+  // Next iterator.
+  next: function (object) {
+    return this.collection[this.indexOf(object) + 1];
+  },
+
+  // Previous iterator.
+  prev: function (object) {
+    return this.collection[this.indexOf(object) - 1];
+  },
+
+};
+
+})(jQuery);

HTML/index.html

@@ -9,20 +9,23 @@
   <script type="text/javascript" charset="utf-8" src="socket.io/socket.io.js"></script>
   <script type="text/javascript" charset="utf-8" src="termkit.js"></script>
 
+  <script type="text/javascript" charset="utf-8" src="container.js"></script>
+
   <script type="text/javascript" charset="utf-8" src="client/client.js"></script>
   <script type="text/javascript" charset="utf-8" src="client/shell.js"></script>
 
   <script type="text/javascript" charset="utf-8" src="progressindicator/progressindicator.js"></script>
 
   <script type="text/javascript" charset="utf-8" src="tokenfield/tokenfield.js"></script>
-  <script type="text/javascript" charset="utf-8" src="tokenfield/tokenlist.js"></script>
   <script type="text/javascript" charset="utf-8" src="tokenfield/selection.js"></script>
   <script type="text/javascript" charset="utf-8" src="tokenfield/caret.js"></script>
   <script type="text/javascript" charset="utf-8" src="tokenfield/token.js"></script>
   <script type="text/javascript" charset="utf-8" src="tokenfield/autocomplete.js"></script>
 
+  <script type="text/javascript" charset="utf-8" src="outputview/outputview.js"></script>
+  <script type="text/javascript" charset="utf-8" src="outputview/outputnode.js"></script>
+
   <script type="text/javascript" charset="utf-8" src="commandview/commandview.js"></script>
-  <script type="text/javascript" charset="utf-8" src="commandview/commandlist.js"></script>
   <script type="text/javascript" charset="utf-8" src="commandview/commandcontext.js"></script>
   <script type="text/javascript" charset="utf-8" src="commandview/command.js"></script>