HumbleSoftware · cesutherland · Sep 16, 2013 · Sep 16, 2013 · Sep 21, 2013 · Sep 22, 2013
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -18,7 +18,7 @@ module.exports = function(grunt) {
             '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
             '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
             '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
-            ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> \n*/\n' + 
+            ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> \n*/\n' +
             ';(function (Backbone, _) {',
           footer : 'taxi.version = "<%= pkg.version %>";\n})(Backbone.noConflict(), _.noConflict());'
         },
@@ -49,7 +49,11 @@ module.exports = function(grunt) {
           'dist/vendor.js': [
             'vendor/jquery*.js',
             'vendor/underscore*.js',
-            'vendor/backbone*.js'
+            'vendor/backbone*.js',
+            'vendor/codemirror*.js'
+          ],
+          'dist/vendor.css': [
+            'vendor/codemirror*.css'
           ],
           'dist/<%= name %>-complete.js' : [
             'dist/vendor.js',

diff --git a/examples/bdd.html b/examples/bdd.html
@@ -1,6 +1,7 @@
   <html>
   <head>
     <link rel="stylesheet" href="../dist/taxi.css" />
+    <link rel="stylesheet" href="../dist/vendor.css" />
     <script type="text/javascript" src="../dist/vendor.js"></script>
     <script type="text/javascript" src="../dist/taxi.js"></script>
     <script type="text/javascript">

diff --git a/examples/bdd.js b/examples/bdd.js
@@ -1,12 +1,10 @@
 driver('Component One', function () {
   passenger('One Default', function (options) {
-    var
-      $container = options.$container;
+    var $container = options.$container;
     $container.html('hello world');
   });
   passenger('One Special', function (options) {
-    var
-      $container = options.$container;
+    var $container = options.$container;
     $container.html('hello world');
   });
 });
@@ -21,8 +19,7 @@ driver('Component Two', function () {
 });
 driver('Error Component', function () {
   passenger('native error', function () {
-    var
-      object = {};
+    var object = {};
     object.test();
   });
   passenger('custom error', function () {

diff --git a/examples/example.html b/examples/example.html
@@ -1,6 +1,7 @@
   <html>
   <head>
     <link rel="stylesheet" href="../dist/taxi.css" />
+    <link rel="stylesheet" href="../dist/vendor.css" />
     <script type="text/javascript" src="../dist/vendor.js"></script>
     <script type="text/javascript" src="../dist/taxi.js"></script>
     <script type="text/javascript" src="example.js"></script>
@@ -23,17 +24,15 @@
                   key : 'case-one',
                   name : 'One Default',
                   callback : function (options) {
-                    var
-                      $container = options.$container;
+                    var $container = options.$container;
                     $container.html('hello world');
                   }
                 },
                 {
                   key : 'case-two',
                   name : 'One Special',
                   callback : function (options) {
-                    var
-                      $container = options.$container;
+                    var $container = options.$container;
                     $container.html('hello world <br /> Longer Content');
                   }
                 }

diff --git a/src/DriverListView.js b/src/DriverListView.js
@@ -2,8 +2,7 @@ taxi.DriverListView = Backbone.View.extend({
   className : 'taxi-driver-list',
   render : function () {
     var
-      data = this.getRenderData(),
-      html = taxi.templates.driver_list(data);
+      html = taxi.templates.driver_list(this.getRenderData());
     this.$el.html(html);
     return this;
   },

diff --git a/src/DriverView.js b/src/DriverView.js
@@ -1,86 +1,57 @@
 taxi.DriverView = Backbone.View.extend({
   className : 'taxi-driver',
-  contexts : {},
   initialize : function (options) {
-    this.runner = options.runner;
+    this.passenger = options.passenger;
+    this.passengerViews = [];
   },
-  destroy : function () {
-    var
-      runners = this.model.get('passengers'),
-      afterEach = this.model.get('afterEach'),
-      contexts = this.contexts;
-    if (afterEach) {
-      _.each(runners, function (runner) {
-        try {
-          afterEach.call(contexts[runner.key]);
-        } catch (e) {
-          console.error(e);
-        }
-      });
-    }
+  remove : function () {
+    _.invoke(this.passengerViews, 'remove');
+    this.passengerViews = [];
+    return Backbone.View.prototype.remove.apply(this, arguments);
   },
   render : function () {
     var
-      data = this.getRenderData(),
-      html = taxi.templates.driver(data);
+      html = taxi.templates.driver(this.getRenderData());
     this.$el.html(html);
-    this.$runners = this.$el.find('.taxi-driver-runners');
-    this.renderRunners();
+    this.$passengers = this.$('.taxi-driver-passengers');
+    this.renderPassengers();
     return this;
   },
-  renderRunners : function () {
+  renderPassengers : function () {
     var
-      runner = this.runner,
-      runners = this.model.get('passengers');
-    if (runner) {
-      this.renderRunner(_.find(runners, function (config) {
-        return config.key === runner;
+      passenger = this.passenger,
+      passengers = this.model.get('passengers');
+    if (passenger) {
+      this.renderPassenger(_.find(passengers, function (config) {
+        return config.key === passenger;
       }));
     } else {
-      _.each(runners, this.renderRunner, this);
+      _.each(passengers, this.renderPassenger, this);
     }
   },
-  renderRunner : function (runner) {
+  renderPassenger : function (passenger) {
     var
       key = this.model.get('key'),
-      $runners = this.$runners,
       beforeEach = this.model.get('beforeEach'),
-      contexts = this.contexts,
-      context = {},
-      $html = $(taxi.templates.runner({
-        'runner' : runner,
-        'driver_key' : key
-      })),
-      $container = $html.find('.taxi-runner-container'),
-      options = {
-        $container : $container
-      };
-
-    try {
-      if (beforeEach) {
-        beforeEach.call(context, options);
-      }
-      if (runner.callback) {
-        runner.callback.call(context, options);
-      }
-    } catch (e) {
-      $container
-        .addClass('taxi-error')
-        .text(e.stack || e.toString());
-      console.error(e);
-    }
+      afterEach = this.model.get('afterEach'),
+      passengerView = new taxi.PassengerView({
+        model : passenger,
+        driverKey : key,
+        before : beforeEach,
+        after : afterEach
+      });
 
-    $runners.append($html);
-    contexts[runner.key] = context;
+    this.passengerViews.push(passengerView);
+    this.$passengers.append(passengerView.render().$el);
   },
   getRenderData : function () {
     return this.model.toJSON();
   },
   scroll : function (key) {
     var
       selector = '[data-key="' + key + '"]',
-      $runner = this.$runners.children().filter(selector),
-      position = $runner.position();
+      $passenger = this.$passengers.children().filter(selector),
+      position = $passenger.position();
     if (position) {
       this.$el.scrollTop(position.top);
     }

diff --git a/src/PassengerView.js b/src/PassengerView.js
@@ -0,0 +1,90 @@
+taxi.PassengerView = Backbone.View.extend({
+  tagName : 'li',
+  className : 'taxi-passenger',
+  emptyFunction : 'function (options) {\n}',
+  events : {
+    'click .tab' : 'onTab'
+  },
+  initialize : function (options) {
+    this.driverKey = options.driverKey;
+    this.before = options.before;
+    this.after = options.after;
+    this.editors = [];
+    this.context = {};
+  },
+  remove : function () {
+    if (this.after) {
+      try {
+        this.after.call(this.context);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    return Backbone.View.prototype.remove.apply(this, arguments);
+  },
+  render : function () {
+    this.$el.html(taxi.templates.passenger({
+      passenger : this.model,
+      driver_key : this.driverKey
+    }));
+    this.$tabs = this.$('.tabs');
+    this.createEditors();
+    this.executeCallbacks();
+    return this;
+  },
+  createEditors : function () {
+    this.editors['callback-editor'] = this.createEditor('.callback-editor',
+      this.model.callback || this.emptyFunction);
+  },
+  createEditor : function (classSelector, value) {
+    return CodeMirror(this.$(classSelector)[0], {
+      value: value.toString(),
+      mode: 'text/javascript',
+      lineNumbers: true,
+      tabSize: 2,
+      lineWrapping: true,
+      viewportMargin: Infinity,
+      autofocus: true
+    });
+  },
+  executeCallbacks : function () {
+    var
+      $container = this.$('.taxi-passenger-container'),
+      options = {
+        $container : $container
+      };
+    try {
+      if (this.before) {
+        this.before.call(this.context, options);
+      }
+
+      if (this.model.callback) {
+        this.model.callback.call(this.context, options);
+      }
+    } catch (e) {
+      $container
+        .addClass('taxi-error')
+        .text(e.stack || e.toString());
+      console.error(e);
+    }
+  },
+  onTab : function (event) {
+    var
+      $lastActive = this.$tabs.children('.active'),
+      lastActiveClassName = $lastActive.data('control'),
+      $active = this.$(event.currentTarget),
+      activeClassName = $active.data('control');
+
+    $lastActive.removeClass('active');
+    $active.addClass('active');
+
+    this.$('.' + lastActiveClassName).hide();
+    this.$('.' + activeClassName).show();
+    if (activeClassName === 'taxi-passenger-container') {
+      this.model.callback = eval('(' + this.editors['callback-editor'].getValue() + ')');
+      this.render();
+    } else {
+      this.editors[activeClassName].refresh();
+    }
+  }
+});
diff --git a/src/TaxiRouter.js b/src/TaxiRouter.js
@@ -2,8 +2,8 @@ taxi.TaxiRouter = Backbone.Router.extend({
   routes : {
     '' : 'home',
     'driver/:driver' : 'driver',
-    'driver/:driver/:runner' : 'driver',
-    'single/:driver/:runner' : 'driver'
+    'driver/:driver/:passenger' : 'driver',
+    'single/:driver/:passenger' : 'driver'
   },
   initialize : function (options) {
     this.config = options.config;
@@ -18,17 +18,17 @@ taxi.TaxiRouter = Backbone.Router.extend({
     this.application.setView(view);
     this.application.setTitle();
   },
-  driver : function (driver, runner) {
+  driver : function (driver, passenger) {
     var
       model = this.drivers.get(driver),
       view = new taxi.DriverView({
         model : model,
-        runner : runner
+        passenger : passenger
       });
     this.application.setView(view);
     this.application.setTitle(
-      '<a href="#driver/'+model.get('key')+'">'+model.get('name')+' Driver</a>'
+      '<a href="#driver/' + model.get('key') + '">' + model.get('name') + ' Driver</a>'
     );
-    //view.scroll(runner);
+    //view.scroll(passenger);
   }
 });
diff --git a/src/TaxiView.js b/src/TaxiView.js
@@ -7,24 +7,20 @@ taxi.TaxiView = Backbone.View.extend({
       collection : this.config.drivers
     });
   },
-  destroy : function () {
-    this.menu.destroy();
+  remove : function () {
+    this.menu.remove();
+    return Backbone.View.prototype.remove.apply(this, arguments);
   },
   render : function () {
-    var
-      menu = this.menu,
-      $el = this.$el;
-    menu.render();
     this.$el.html(taxi.templates.taxi());
-    this.$content = $el.find('.taxi-view');
-    this.$title = $el.find('.taxi-title');
-    this.$menu = menu.$el;
-    $el.find('.taxi-menu').append(menu.$el);
+    this.$content = this.$('.taxi-view');
+    this.$title = this.$('.taxi-title');
+    this.$('.taxi-menu').append(this.menu.render().$el);
     return this;
   },
   setView : function (view) {
-    if (this.view && this.view.destroy) {
-      this.view.destroy();
+    if (this.view) {
+      this.view.remove();
     }
     if (view) {
       this.view = view;