diff --git a/build/bundle.js b/build/bundle.js index 8bea66d0..9ad42b0a 100644 --- a/build/bundle.js +++ b/build/bundle.js @@ -8600,23 +8600,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(); @@ -8627,13 +8644,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) { @@ -8652,7 +8669,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()), @@ -8662,12 +8679,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(); @@ -8761,15 +8778,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]); } }); @@ -13695,54 +13710,111 @@ 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; - }); require.define("/src/js/app/index.js",function(require,module,exports,__dirname,__filename,process,global){var _ = require('underscore'); @@ -16735,23 +16807,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(); @@ -16762,13 +16851,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) { @@ -16787,7 +16876,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()), @@ -16797,12 +16886,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(); @@ -16896,15 +16985,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]); } }); @@ -16931,54 +17018,111 @@ 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; - }); require("/src/js/views/multiView.js"); diff --git a/src/js/views/index.js b/src/js/views/index.js index 3de5c2e2..1b761deb 100644 --- a/src/js/views/index.js +++ b/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]); } }); diff --git a/src/js/views/multiView.js b/src/js/views/multiView.js index 9081218f..381d3f43 100644 --- a/src/js/views/multiView.js +++ b/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; -