From 31c4aa01bda63e510e120ae9da8149c732111d2a Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Thu, 27 Aug 2015 00:27:23 +0200 Subject: 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 --- client/components/main/header.js | 4 +--- client/components/main/keyboardShortcuts.tpl.jade | 4 ++++ client/config/router.js | 28 +++++++++++++++++++++-- client/lib/escapeActions.js | 2 +- client/lib/keyboard.js | 24 ++++++++++--------- client/lib/modal.js | 19 +++++++++------ 6 files changed, 57 insertions(+), 24 deletions(-) create mode 100644 client/components/main/keyboardShortcuts.tpl.jade (limited to 'client') 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(), -- cgit v1.2.3-1-g7c22