Output frame for multicommand output

HTML/commandview/command.js

@@ -34,15 +34,15 @@ cv.command.prototype = {
     // Create throbber.
     this.progressIndicator = new termkit.progressIndicator();
 
-    // Create outputView for command output.
-    this.outputView = new termkit.outputView();
+    // Create outputFrame hosting outputViews for command output.
+    this.outputFrame = new termkit.outputView.outputFrame();
 
     $command.append(this.tokenField.$element);
     $command.append(this.progressIndicator.$element);
-    $command.append(this.outputView.$element);
+    $command.append(this.outputFrame.$element);
 
     this.progressIndicator.$element.hide();
-    this.outputView.$element.hide();
+    this.outputFrame.$element.hide();
 
     return $command;
   },
@@ -79,7 +79,7 @@ cv.command.prototype = {
 
     this.progressIndicator.$element[(this.state == 'running') ? 'show' : 'hide']();
 
-    this.outputView.$element[!this.collapsed ? 'show' : 'hide']();
+    this.outputFrame.$element[!this.collapsed ? 'show' : 'hide']();
   },
 
   // Execute tokenfield contents as command.
@@ -105,8 +105,8 @@ cv.command.prototype = {
           self.commandView.newCommand();
         });
       },
-      // Send all output to outputView.
-      this.outputView.hook()
+      // Send all output to outputFrame.
+      this.outputFrame.hook()
     );
   },
 

HTML/index.html

@@ -23,6 +23,7 @@
   <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/outputframe.js"></script>
   <script type="text/javascript" charset="utf-8" src="outputview/outputnode.js"></script>
   <script type="text/javascript" charset="utf-8" src="outputview/outputfactory.js"></script>
 

HTML/outputview/outputframe.js

@@ -0,0 +1,52 @@
+(function ($) {
+
+/**
+ * Controller for output frame.
+ */
+var of = termkit.outputView.outputFrame = function () {
+  var self = this;
+
+  this.$element = this.$markup();
+  this.views = [];
+};
+
+of.prototype = {
+
+  // Return active markup for this widget.
+  $markup: function () {
+    var $outputFrame = $('<div class="termkitOutputFrame"></div>').data('controller', this);
+    var self = this;
+
+    return $outputFrame;
+  },
+
+  // Hook into the given set of handlers.
+  hook: function (handlers) {
+    var self = this;
+    handlers = handlers || {};
+    handlers['view'] = function (m,a) { self.viewHandler(m, a); };
+    return handlers;
+  },
+
+  viewHandler: function (method, args) {
+    var subview = args.subview || 0;
+    this.allocate(subview + 1);
+    this.views[subview].viewHandler(method, args);
+  },
+
+  // Update the element's markup in response to internal changes.
+  allocate: function (subviews) {
+    if (this.views.length < subviews) {
+      subviews -= this.views.length;
+      while (subviews--) {
+        this.views.push(new termkit.outputView());
+        this.$element.append(this.views[this.views.length - 1].$element);
+      };
+    }
+  },
+
+};
+
+///////////////////////////////////////////////////////////////////////////////
+
+})(jQuery);

HTML/outputview/outputview.js

@@ -39,14 +39,6 @@ ov.prototype = {
 
   },
 
-  // Hook into the given set of handlers.
-  hook: function (handlers) {
-    var self = this;
-    handlers = handlers || {};
-    handlers['view'] = function (m,a) { self.viewHandler(m, a); };
-    return handlers;
-  },
-
   // Construct a tree of view objects.
   construct: function construct(objects) {
     var self = this;