Open a modal (or a new page) based on context

This feature is also sometime named the Pinterest-style route, which is further explained in this react-router example:

  https://github.com/rackt/react-router/tree/cf0419f70e14a0ae39cba2ff99b01d3cbbd085be/examples/pinterest

6 files changed, 57 insertions, 24 deletions

diff --git a/client/components/main/header.js b/client/components/main/header.js
index 864f889d..7b7e431f 100644
--- a/client/components/main/header.js
+++ b/client/components/main/header.js
@@ -5,9 +5,7 @@ Template.header.helpers({
   },
 
   wrappedHeader: function() {
-    var unwrapedRoutes = ['board', 'card'];
-    var currentRouteName = FlowRouter.getRouteName();
-    return unwrapedRoutes.indexOf(currentRouteName) === -1;
+    return ! Session.get('currentBoard');
   }
 });
 
diff --git a/client/components/main/keyboardShortcuts.tpl.jade b/client/components/main/keyboardShortcuts.tpl.jade
new file mode 100644
index 00000000..321c2b0a
--- /dev/null
+++ b/client/components/main/keyboardShortcuts.tpl.jade
@@ -0,0 +1,4 @@
+.wrapper
+  h2
+    i.fa.fa-keyboard-o
+    | Keyboard shortcuts
diff --git a/client/config/router.js b/client/config/router.js
index ef874c5b..eb072934 100644
--- a/client/config/router.js
+++ b/client/config/router.js
@@ -1,3 +1,8 @@
+let previousPath;
+FlowRouter.triggers.exit([({path}) => {
+  previousPath = path;
+}]);
+
 FlowRouter.route('/', {
   name: 'home',
   triggersEnter: [AccountsTemplates.ensureSignedIn],
@@ -5,7 +10,8 @@ FlowRouter.route('/', {
     EscapeActions.executeAll();
     Filter.reset();
 
-    Session.set('currentBoard', '');
+    Session.set('currentBoard', null);
+    Session.set('currentCard', null);
 
     BlazeLayout.render('defaultLayout', { content: 'boardList' });
   }
@@ -31,14 +37,32 @@ FlowRouter.route('/b/:id/:slug', {
 FlowRouter.route('/b/:boardId/:slug/:cardId', {
   name: 'card',
   action: function(params) {
+    EscapeActions.executeUpTo('popup-close');
     Session.set('currentBoard', params.boardId);
     Session.set('currentCard', params.cardId);
-    EscapeActions.executeUpTo('popup-close');
 
     BlazeLayout.render('defaultLayout', { content: 'board' });
   }
 });
 
+FlowRouter.route('/shortcuts', {
+  name: 'shortcuts',
+  action: function(params) {
+    const shortcutsTemplate = 'keyboardShortcuts';
+
+    EscapeActions.executeUpTo('popup-close');
+
+    if (previousPath) {
+      Modal.open(shortcutsTemplate, {
+        onCloseGoTo: previousPath
+      });
+    } else {
+      // XXX There is currently no way to escape this page on Sandstorm
+      BlazeLayout.render('defaultLayout', { content: shortcutsTemplate });
+    }
+  }
+});
+
 FlowRouter.notFound = {
   action: function() {
     BlazeLayout.render('defaultLayout', { content: 'notFound' });
diff --git a/client/lib/escapeActions.js b/client/lib/escapeActions.js
index b3d4efe0..1297cfb0 100644
--- a/client/lib/escapeActions.js
+++ b/client/lib/escapeActions.js
@@ -11,9 +11,9 @@ EscapeActions = {
     'textcomplete',
     'popup-back',
     'popup-close',
+    'modalWindow',
     'inlinedForm',
     'detailsPane',
-    'modalWindow',
     'multiselection',
     'sidebarView'
   ],
diff --git a/client/lib/keyboard.js b/client/lib/keyboard.js
index bd78390a..066836d4 100644
--- a/client/lib/keyboard.js
+++ b/client/lib/keyboard.js
@@ -1,35 +1,37 @@
-// XXX Pressing `?` should display a list of all shortcuts available.
-//
 // XXX There is no reason to define these shortcuts globally, they should be
 // attached to a template (most of them will go in the `board` template).
 
-Mousetrap.bind('w', function() {
+Mousetrap.bind('?', () => {
+  FlowRouter.go('shortcuts');
+});
+
+Mousetrap.bind('w', () => {
   Sidebar.toogle();
 });
 
-Mousetrap.bind('q', function() {
-  var currentBoardId = Session.get('currentBoard');
-  var currentUserId = Meteor.userId();
+Mousetrap.bind('q', () => {
+  const currentBoardId = Session.get('currentBoard');
+  const currentUserId = Meteor.userId();
   if (currentBoardId && currentUserId) {
     Filter.members.toogle(currentUserId);
   }
 });
 
-Mousetrap.bind('x', function() {
+Mousetrap.bind('x', () => {
   if (Filter.isActive()) {
     Filter.reset();
   }
 });
 
-Mousetrap.bind(['down', 'up'], function(evt, key) {
+Mousetrap.bind(['down', 'up'], (evt, key) => {
   if (! Session.get('currentCard')) {
     return;
   }
 
-  var nextFunc = (key === 'down' ? 'next' : 'prev');
-  var nextCard = $('.js-minicard.is-selected')[nextFunc]('.js-minicard').get(0);
+  const nextFunc = (key === 'down' ? 'next' : 'prev');
+  const nextCard = $('.js-minicard.is-selected')[nextFunc]('.js-minicard').get(0);
   if (nextCard) {
-    var nextCardId = Blaze.getData(nextCard)._id;
+    const nextCardId = Blaze.getData(nextCard)._id;
     Utils.goCardId(nextCardId);
   }
 });
diff --git a/client/lib/modal.js b/client/lib/modal.js
index 492f6595..9b204bb4 100644
--- a/client/lib/modal.js
+++ b/client/lib/modal.js
@@ -2,27 +2,32 @@ const closedValue = null
 
 window.Modal = new class {
   constructor() {
-    this._currentModal = new ReactiveVar(closedValue)
+    this._currentModal = new ReactiveVar(closedValue);
+    this._onCloseGoTo = '';
   }
 
   getTemplateName() {
-    return this._currentModal.get()
+    return this._currentModal.get();
   }
 
   isOpen() {
-    return this.getTemplateName() !== closedValue
+    return this.getTemplateName() !== closedValue;
   }
 
   close() {
-    this._currentModal.set(closedValue)
+    this._currentModal.set(closedValue);
+    if (this._onCloseGoTo) {
+      FlowRouter.go(this._onCloseGoTo);
+    }
   }
 
-  open(modalName) {
-    this._currentModal.set(modalName)
+  open(modalName, options) {
+    this._currentModal.set(modalName);
+    this._onCloseGoTo = options && options.onCloseGoTo || '';
   }
 };
 
-Blaze.registerHelper('Modal', Modal)
+Blaze.registerHelper('Modal', Modal);
 
 EscapeActions.register('modalWindow',
   () => Modal.close(),