Merge pull request #3002 from novaugust/shortcuts

Implement Shortcuts in Ember

ghost/admin/initializers/popover.js

@@ -22,6 +22,7 @@ var popoverInitializer = {
         application.inject('component:gh-popover', 'popover', 'popover:service');
         application.inject('component:gh-popover-button', 'popover', 'popover:service');
         application.inject('controller:modals.delete-post', 'popover', 'popover:service');
+        application.inject('route:application', 'popover', 'popover:service');
     }
 };
 

ghost/admin/mixins/editor-route-base.js

@@ -0,0 +1,25 @@
+import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
+import styleBody from 'ghost/mixins/style-body';
+
+var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, {
+    shortcuts: {
+        'ctrl+s, command+s': 'save',
+        'ctrl+alt+p': 'publish',
+        'ctrl+alt+z': 'toggleZenMode'
+    },
+    actions: {
+        save: function () {
+            this.get('controller').send('save');
+        },
+        publish: function () {
+            var controller = this.get('controller');
+            controller.send('setSaveType', 'publish');
+            controller.send('save');
+        },
+        toggleZenMode: function () {
+            Ember.$('body').toggleClass('zen');
+        }
+    }
+});
+
+export default EditorRouteBase;

ghost/admin/mixins/shortcuts-route.js

@@ -0,0 +1,61 @@
+/* global key, console */
+
+//Configure KeyMaster to respond to all shortcuts,
+//even inside of
+//input, textarea, and select.
+key.filter = function () {
+    return true;
+};
+
+/**
+ * Only routes can implement shortcuts.
+ * If you need to trigger actions on the controller,
+ * simply call them with `this.get('controller').send('action')`.
+ *
+ * To implement shortcuts, add this mixin to your `extend()`,
+ * and implement a `shortcuts` hash.
+ * In this hash, keys are shortcut combinations
+ *  (see [keymaster docs](https://github.com/madrobby/keymaster/blob/master/README.markdown)), and values are controller action names.
+ * ```javascript
+ * shortcuts: {
+ *     'ctrl+s, command+s': 'save',
+ *     'ctrl+alt+p': 'toggleZenMode'
+ * }
+ * ```
+ */
+var ShortcutsRoute = Ember.Mixin.create({
+    registerShortcuts: function () {
+        var self = this,
+            shortcuts = this.get('shortcuts');
+
+        Ember.keys(shortcuts).forEach(function (shortcut) {
+            key(shortcut, function (event) {
+                //stop things like ctrl+s from actually opening a save dialogue
+                event.preventDefault();
+                //map the shortcut to its action
+                self.send(shortcuts[shortcut], event);
+            });
+        });
+    },
+    removeShortcuts: function () {
+        var shortcuts = this.get('shortcuts');
+
+        Ember.keys(shortcuts).forEach(function (shortcut) {
+            key.unbind(shortcut);
+        });
+    },
+    activate: function () {
+        this._super();
+        if (!this.shortcuts) {
+            console.error('Shortcuts not found on route');
+            return;
+        }
+        this.registerShortcuts();
+    },
+    deactivate: function () {
+        this._super();
+        this.removeShortcuts();
+    }
+});
+
+export default ShortcutsRoute;

ghost/admin/mixins/style-body.js

@@ -2,6 +2,7 @@
 
 var styleBody = Ember.Mixin.create({
     activate: function () {
+        this._super();
         var cssClasses = this.get('classNames');
 
         if (cssClasses) {
@@ -14,6 +15,7 @@ var styleBody = Ember.Mixin.create({
     },
 
     deactivate: function () {
+        this._super();
         var cssClasses = this.get('classNames');
 
         Ember.run.schedule('afterRender', null, function () {

ghost/admin/routes/application.js

@@ -1,5 +1,15 @@
-var ApplicationRoute = Ember.Route.extend({
+import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
+
+var ApplicationRoute = Ember.Route.extend(ShortcutsRoute, {
+    shortcuts: {
+        'esc': 'closePopups'
+    },
     actions: {
+        closePopups: function () {
+            this.get('popover').closePopovers();
+            this.get('notifications').closeAll();
+            // @todo close modals
+        },
         signedIn: function (user) {
             // Update the user on all routes and controllers
             this.container.unregister('user:current');

ghost/admin/routes/editor/edit.js

@@ -1,7 +1,7 @@
-import styleBody from 'ghost/mixins/style-body';
 import AuthenticatedRoute from 'ghost/routes/authenticated';
+import base from 'ghost/mixins/editor-route-base';
 
-var EditorEditRoute = AuthenticatedRoute.extend(styleBody, {
+var EditorEditRoute = AuthenticatedRoute.extend(base, {
     classNames: ['editor'],
 
     model: function (params) {

ghost/admin/routes/editor/new.js

@@ -1,7 +1,7 @@
 import AuthenticatedRoute from 'ghost/routes/authenticated';
-import styleBody from 'ghost/mixins/style-body';
+import base from 'ghost/mixins/editor-route-base';
 
-var EditorNewRoute = AuthenticatedRoute.extend(styleBody, {
+var EditorNewRoute = AuthenticatedRoute.extend(base, {
     classNames: ['editor'],
 
     model: function () {

ghost/admin/routes/posts.js

@@ -1,5 +1,6 @@
-import styleBody from 'ghost/mixins/style-body';
 import AuthenticatedRoute from 'ghost/routes/authenticated';
+import styleBody from 'ghost/mixins/style-body';
+import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
 
 var paginationSettings = {
     status: 'all',
@@ -7,7 +8,7 @@ var paginationSettings = {
     page: 1
 };
 
-var PostsRoute = AuthenticatedRoute.extend(styleBody, {
+var PostsRoute = AuthenticatedRoute.extend(ShortcutsRoute, styleBody, {
     classNames: ['manage'],
 
     model: function () {
@@ -23,9 +24,19 @@ var PostsRoute = AuthenticatedRoute.extend(styleBody, {
         controller.set('paginationSettings', paginationSettings);
     },
 
+    shortcuts: {
+        'up': 'moveUp',
+        'down': 'moveDown'
+    },
     actions: {
         openEditor: function (post) {
             this.transitionTo('editor', post);
+        },
+        moveUp: function () {
+            window.alert('@todo keyboard post navigation: up');
+        },
+        moveDown: function () {
+            window.alert('@todo keyboard post navigation: down');
         }
     }
 });

ghost/admin/utils/notifications.js

@@ -46,6 +46,9 @@ var Notifications = Ember.ArrayProxy.extend({
             type: 'warn',
             message: message
         });
+    },
+    closeAll: function () {
+        window.alert('@TODO implement closeALl notifications');
     }
 });