arrows in, workinggg

src/js/views/index.js

@@ -4,23 +4,40 @@ var _ = require('underscore');
 var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
 
 var BaseView = Backbone.View.extend({
-  render: function() {
-    var destination = this.destination || this.container.getInsideElement();
-    this.$el.html(this.template(this.JSON));
+  getDestination: function() {
+    return this.destination || this.container.getInsideElement();
+  },
+
+  render: function(HTML) {
+    // flexibility
+    var destination = this.getDestination();
+    HTML = HTML || this.template(this.JSON);
+
+    this.$el.html(HTML);
     $(destination).append(this.el);
   }
 });
 
-var PosNegBase = BaseView.extend({
-  positive: function() {
+var ResolveRejectBase = BaseView.extend({
+  resolve: function() {
     this.deferred.resolve();
   },
 
-  negative: function() {
+  reject: function() {
     this.deferred.reject();
   }
 });
 
+var PositiveNegativeBase = BaseView.extend({
+  positive: function() {
+    this.navEvents.trigger('positive');
+  },
+
+  negative: function() {
+    this.navEvents.trigger('negative');
+  }
+});
+
 var ContainedBase = BaseView.extend({
   show: function() {
     this.container.show();
@@ -31,13 +48,13 @@ var ContainedBase = BaseView.extend({
   }
 });
 
-var ConfirmCancelView = PosNegBase.extend({
+var ConfirmCancelView = ResolveRejectBase.extend({
   tagName: 'div',
   className: 'confirmCancelView box horizontal justify',
   template: _.template($('#confirm-cancel-template').html()),
   events: {
-    'click .confirmButton': 'positive',
-    'click .cancelButton': 'negative'
+    'click .confirmButton': 'resolve',
+    'click .cancelButton': 'reject'
   },
 
   initialize: function(options) {
@@ -56,7 +73,7 @@ var ConfirmCancelView = PosNegBase.extend({
   }
 });
 
-var LeftRightView = PosNegBase.extend({
+var LeftRightView = PositiveNegativeBase.extend({
   tagName: 'div',
   className: 'leftRightView box horizontal center',
   template: _.template($('#left-right-template').html()),
@@ -66,12 +83,12 @@ var LeftRightView = PosNegBase.extend({
   },
 
   initialize: function(options) {
-    if (!options.destination || !options.deferred) {
+    if (!options.destination || !options.events) {
       throw new Error('needmore');
     }
 
     this.destination = options.destination;
-    this.deferred = options.deferred;
+    this.navEvents = options.events;
     this.JSON = {};
 
     this.render();
@@ -165,15 +182,13 @@ var ModalAlert = ContainedBase.extend({
   },
 
   render: function() {
-    var destination = this.destination || this.container.getInsideElement();
-    var HTML = null;
-    if (this.JSON.markdown) {
-      HTML = require('markdown').markdown.toHTML(this.JSON.markdown);
-    } else {
-      HTML = this.template(this.JSON);
-    }
-    this.$el.html(HTML);
-    $(destination).append(this.el);
+    var HTML = (this.JSON.markdown) ?
+      require('markdown').markdown.toHTML(this.JSON.markdown) :
+      this.template(this.JSON);
+
+    // call to super, not super elegant but better than
+    // copy paste code
+    ModalAlert.__super__.render.apply(this, [HTML]);
   }
 });
 

src/js/views/multiView.js

@@ -10,50 +10,107 @@ var ConfirmCancelView = require('../views').ConfirmCancelView;
 var LeftRightView = require('../views').LeftRightView;
 var ModalAlert = require('../views').ModalAlert;
 
+var NAV_EVENT_DELAY = 300;
+
 var MultiView = Backbone.View.extend({
   tagName: 'div',
   className: 'multiView',
+  // ms to debounce the nav functions
+  navEventDelay: 1500,
+
+  // a simple mapping of what childViews we support
   typeToConstructor: {
     ModalAlert: ModalAlert
   },
+
   initialize: function(options) {
     options = options || {};
-    if (!options.childViews) {
-      options.childViews = [{
-        type: 'ModalAlert',
-        options: {
-          markdown: 'Woah wtf!!'
-        }
-      }, {
-        type: 'ModalAlert',
-        options: {
-          markdown: 'Im second'
-        }
-      }];
-    }
-    this.childViewJSONs = options.childViews;
+    this.childViewJSONs = options.childViews || [{
+      type: 'ModalAlert',
+      options: {
+        markdown: 'Woah wtf!!'
+      }
+    }, {
+      type: 'ModalAlert',
+      options: {
+        markdown: 'Im second'
+      }
+    }];
+
     this.childViews = [];
+    this.currentIndex = 0;
+
+    this.navEvents = _.clone(Backbone.Events);
+    this.navEvents.on('positive', this.getPosFunc(), this);
+    this.navEvents.on('negative', this.getNegFunc(), this);
+
     this.render();
   },
 
+  getPosFunc: function() {
+    return _.debounce(_.bind(function() {
+      this.navForward();
+    }, this), NAV_EVENT_DELAY, true);
+  },
+
+  getNegFunc: function() {
+    return _.debounce(_.bind(function() {
+      this.navBackward();
+    }, this), NAV_EVENT_DELAY, true);
+  },
+
+  navForward: function() {
+    this.navIndexChange(1);
+  },
+
+  navBackward: function() {
+    this.navIndexChange(-1);
+  },
+
+  navIndexChange: function(delta) {
+    console.log('doing nav index change', delta);
+    this.hideViewIndex(this.currentIndex);
+    this.currentIndex += delta;
+    this.showViewIndex(this.currentIndex);
+  },
+
+  hideViewIndex: function(index) {
+    this.childViews[index].hide();
+  },
+
+  showViewIndex: function(index) {
+    this.childViews[index].show();
+  },
+
   createChildView: function(viewJSON) {
     var type = viewJSON.type;
     if (!this.typeToConstructor[type]) {
-      throw new Error('wut');
+      throw new Error('no constructor for type "' + type + '"');
     }
     var view = new this.typeToConstructor[type](viewJSON.options);
-    this.childViews.push(view);
-    view.show();
+    return view;
+  },
+
+  addNavToView: function(view) {
+    var leftRight = new LeftRightView({
+      events: this.navEvents,
+      // we want the arrows to be on the same level as the content (not
+      // beneath), so we go one level up with getDestination()
+      destination: view.getDestination()
+    });
   },
 
   render: function() {
     // go through each and render... show the first
-    _.each(this.childViewJSONs, function(childView) {
-      this.createChildView(childView);
+    _.each(this.childViewJSONs, function(childViewJSON) {
+      var childView = this.createChildView(childViewJSON);
+      this.childViews.push(childView);
+      this.addNavToView(childView);
     }, this);
+
+    this.showViewIndex(this.currentIndex);
   }
 });
 
 exports.MultiView = MultiView;
 
-