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:

  cf0419f70e/examples/pinterest

client/lib/escapeActions.js

@@ -11,9 +11,9 @@ EscapeActions = {
     'textcomplete',
     'popup-back',
     'popup-close',
+    'modalWindow',
     'inlinedForm',
     'detailsPane',
-    'modalWindow',
     'multiselection',
     'sidebarView'
   ],

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);
   }
 });

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(),