Merge pull request #10 from dapetcu21/master

More UX work

app/css/template.styl

@@ -3,3 +3,6 @@
 
 .template-container-inner
   overflow-x: hidden //Collapses margins
+
+.template-bg
+  background-color: #ccc

app/js/controllers/menu-controller.js

@@ -78,10 +78,13 @@ MenuController.prototype.navigateToSection = function (section) {
       viewController = new TemplateController({
         template: templates.article,
         title: 'Some Template',
+        backIcon: 'fa-home',
       });
       break;
     case 6: 
-      viewController = new MapController();
+      viewController = new MapController({
+        backIcon: 'fa-home',
+      });
       break;
   }
   self.setNavigationItem(viewController);
@@ -196,9 +199,9 @@ MenuController.prototype.buildGrid = function (parentNode) {
 MenuController.prototype.createNavRenderController = function () {
   var renderController = new Famous.RenderController({
     inTransition: {
-      /*duration: 500,
-      curve: 'easeOut',*/
-      method: 'spring',
+      method: 'delay',
+      delay: 300,
+      delayMethod: Famous.SpringTransition,
       period: 500,
       dampingRatio: 0.5,
     },

app/js/controllers/navigation-controller.js

@@ -13,6 +13,10 @@ util.inherits(NavigationController, ViewController);
 
 NavigationController.prototype.setNavigationItem = function (viewController) {
   var self = this;
+  if (self.viewController === viewController) {
+    return;
+  }
+
   if (self.viewController) {
     self.viewController.removeListener('back', self.backHandler);
   }
@@ -31,15 +35,23 @@ NavigationController.prototype.setNavigationItem = function (viewController) {
       self.renderController.hide();
     }
   }, 1);
+
+  self.emit('navigate');
 };
 
 NavigationController.prototype.navigateBack = function () {
+  if (!this.viewController) {
+    return;
+  }
+  if ((this.viewController instanceof NavigationController) && this.viewController.viewController) {
+    return;
+  }
   this.setNavigationItem(null);
   this.emit('navigateBack');
 };
 
 NavigationController.prototype.buildNavRenderController = function (parentNode) {
-  this.renderController = this.createNavRenderController(this.renderController);
+  this.renderController = this.createNavRenderController();
   parentNode.add(this.renderController);
 };
 

app/js/controllers/template-controller.js

@@ -2,6 +2,8 @@ var TitleBarController = require('./titlebar-controller');
 var util = require('util');
 var Famous = require('../shims/famous');
 var $ = require('jquery');
+var templates = require('../lib/templates');
+var _ = require('lodash');
 
 function TemplateController(options) {
   options = options || {};
@@ -26,12 +28,20 @@ TemplateController.prototype.buildContentTree = function (parentNode) {
   var scrollView = new Famous.ScrollView();
   scrollView.sequenceFrom([surface]);
   surface.pipe(scrollView);
-  parentNode.add(scrollView);
+
+  parentNode.add(new Famous.Surface({
+    classes: ['template-bg'],
+    size: [undefined, undefined],
+  }));
+
+  parentNode.add(new Famous.StateModifier({
+    transform: Famous.Transform.inFront,
+  })).add(scrollView);
+
 
   function resizeScrollView() {
     Famous.Engine.once('postrender', function () {
       var el = $('#' + id + ' > .template-container-inner');
-      console.log(el);
       surface.setSize([undefined, $('#' + id + ' > .template-container-inner').outerHeight()]);
     });
   }
@@ -41,6 +51,25 @@ TemplateController.prototype.buildContentTree = function (parentNode) {
 
   surface.on('deploy', function () {
     Famous.Engine.on('resize', resizeScrollView);
+    Famous.Engine.once('postrender', function () {
+      $('#' + id + ' a').click(function(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+
+        var href = $(evt.target).attr('href');
+        var t = templates;
+        _.each(href.split('/'), function (el) {
+          t = t[el];
+        });
+
+        var viewController = new TemplateController({
+          titleBar: self.titleBar,
+          title: $(evt.target).data('title'),
+          template: t,
+        });
+        self.setNavigationItem(viewController);
+      });
+    });
     resizeScrollView();
   });
   surface.on('recall', function () {

app/js/controllers/title-bar.js

@@ -0,0 +1,103 @@
+var util = require('util');
+var Famous = require('../shims/famous');
+
+function TitleBar(options) {
+  var self = this;
+
+  options = options || {};
+  Famous.View.call(self, options);
+  self.options = options;
+
+  var headerLayout = new Famous.HeaderFooterLayout({
+    headerSize: 44
+  });
+  self.add(headerLayout);
+
+  self.contentParent = headerLayout.content;
+
+  var header = headerLayout.header.add(new Famous.StateModifier({
+    transform: Famous.Transform.inFront,
+  }));
+  header.add(new Famous.Surface({
+      classes: ['title-bar'],
+      size: [undefined, 44],
+    }));
+
+  var renderController = new Famous.RenderController({
+    inTransition: {
+      curve: 'easeIn',
+      duration: 500,
+    },
+    outTransition: {
+      curve: 'easeOut',
+      duration: 500,
+    }
+  });
+  self.barItemRenderController = renderController;
+
+  header.add(new Famous.StateModifier({
+    transform: Famous.Transform.inFront,
+  })).add(renderController);
+
+  self.barItems = [];
+}
+util.inherits(TitleBar, Famous.View);
+
+TitleBar.prototype.animateTitleBar = function(newTitle, oldTitle, push) {
+  if (!newTitle || !oldTitle) {
+    return;
+  }
+
+  var state = new Famous.Transitionable(0);
+  var transition = push ? {
+    method: 'spring',
+    period: 500,
+    dampingRatio: 0.5,
+  } : {
+    curve: 'easeOut',
+    duration: 500,
+  };
+  state.set(1, transition);
+
+  var mult = push ? -1 : 1;
+  var distance = window.innerWidth * 0.25;
+
+  newTitle.transformFrom(function () {
+    return Famous.Transform.translate(distance * mult * (state.get() - 1), 0, 0);
+  });
+
+  oldTitle.transformFrom(function () {
+    return Famous.Transform.translate(distance * mult * state.get(), 0, 0);
+  });
+};
+
+TitleBar.prototype.pushItem = function(barItem) {
+  var self = this;
+
+  var n = self.barItems.length;
+  if (!n) {
+    self.barItemRenderController.show(barItem.view, { duration: 0 });
+    barItem.titleModifier.transformFrom(Famous.Transform.identity);
+  } else {
+    var oldBarItem = self.barItems[n - 1];
+    self.barItemRenderController.show(barItem.view);
+    self.animateTitleBar(barItem.titleModifier, oldBarItem.titleModifier, true);
+  }
+  self.barItems.push(barItem);
+};
+
+TitleBar.prototype.popItem = function() {
+  var self = this;
+
+  var n = self.barItems.length;
+  if (n <= 1) {
+    return;
+  }
+
+  var oldBarItem = self.barItems.pop();
+  var barItem = self.barItems[n - 2];
+  self.barItemRenderController.show(barItem.view);
+  self.animateTitleBar(barItem.titleModifier, oldBarItem.titleModifier, false);
+};
+
+module.exports = TitleBar;