4 files changed, 111 insertions, 3 deletions

diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css
index 408fe14c..df126fb4 100755
--- a/app/Resources/static/themes/material/css/main.css
+++ b/app/Resources/static/themes/material/css/main.css
@@ -150,6 +150,11 @@
   background-image: url("../../_global/img/icons/diaspora-icon--black.png");
 }
 
+/* Unmark.it */
+.icon-image--unmark {
+  background-image: url("../../_global/img/icons/unmark-icon--black.png");
+}
+
 /* Shaarli */
 .icon-image--shaarli {
   background-image: url("../../_global/img/icons/shaarli.png");
diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/js/init.js
index a68269e0..9746224b 100755
--- a/app/Resources/static/themes/material/js/init.js
+++ b/app/Resources/static/themes/material/js/init.js
@@ -1,10 +1,21 @@
+/* jQuery */
+import $ from 'jquery';
+
+/* Annotations */
+import annotator from 'annotator';
+
+/* Tools */
 import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools';
 
-const $ = require('jquery');
+/* Import shortcuts */
+import './shortcuts/main';
+import './shortcuts/entry';
+import '../../_global/js/shortcuts/main';
+import '../../_global/js/shortcuts/entry';
 
-global.jQuery = $;
 require('materialize'); // eslint-disable-line
-const annotator = require('annotator');
+
+global.jQuery = $;
 
 $(document).ready(() => {
   // sideNav
diff --git a/app/Resources/static/themes/material/js/shortcuts/entry.js b/app/Resources/static/themes/material/js/shortcuts/entry.js
new file mode 100644
index 00000000..357c22fe
--- /dev/null
+++ b/app/Resources/static/themes/material/js/shortcuts/entry.js
@@ -0,0 +1,22 @@
+import Mousetrap from 'mousetrap';
+import $ from 'jquery';
+
+/* open original article */
+Mousetrap.bind('o', () => {
+  $('ul.side-nav a.original i')[0].click();
+});
+
+/* mark as favorite */
+Mousetrap.bind('s', () => {
+  $('ul.side-nav a.favorite i')[0].click();
+});
+
+/* mark as read */
+Mousetrap.bind('a', () => {
+  $('ul.side-nav a.markasread i')[0].click();
+});
+
+/* delete */
+Mousetrap.bind('del', () => {
+  $('ul.side-nav a.delete i')[0].click();
+});
diff --git a/app/Resources/static/themes/material/js/shortcuts/main.js b/app/Resources/static/themes/material/js/shortcuts/main.js
new file mode 100644
index 00000000..8514f71e
--- /dev/null
+++ b/app/Resources/static/themes/material/js/shortcuts/main.js
@@ -0,0 +1,70 @@
+import Mousetrap from 'mousetrap';
+import $ from 'jquery';
+
+function toggleFocus(cardToToogleFocus) {
+  if (cardToToogleFocus) {
+    $(cardToToogleFocus).toggleClass('z-depth-4');
+  }
+}
+
+$(document).ready(() => {
+  let cardIndex = 0;
+  const cardNumber = $('#content ul.data > li').length;
+  let card = $('#content ul.data > li')[cardIndex];
+  const pagination = $('.pagination');
+
+  /* Show nothing on quickstart */
+  if ($('#content > div.quickstart').length > 0) {
+    return;
+  }
+
+  /* If we come from next page */
+  if (window.location.hash === '#prev') {
+    cardIndex = cardNumber - 1;
+    card = $('ul.data > li')[cardIndex];
+  }
+
+  /* Focus current card */
+  toggleFocus(card);
+
+  /* Actions */
+  Mousetrap.bind('g n', () => {
+    $('#nav-btn-add').trigger('click');
+  });
+
+  Mousetrap.bind('esc', () => {
+    $('.close').trigger('click');
+  });
+
+  /* Select right card. If there's a next page, go to next page */
+  Mousetrap.bind('right', () => {
+    if (cardIndex >= 0 && cardIndex < cardNumber - 1) {
+      toggleFocus(card);
+      cardIndex += 1;
+      card = $('ul.data > li')[cardIndex];
+      toggleFocus(card);
+      return;
+    }
+    if (pagination.length > 0 && pagination.find('li.next:not(.disabled)').length > 0 && cardIndex === cardNumber - 1) {
+      window.location.href = window.location.origin + $(pagination).find('li.next a').attr('href');
+    }
+  });
+
+  /* Select previous card. If there's a previous page, go to next page */
+  Mousetrap.bind('left', () => {
+    if (cardIndex > 0 && cardIndex < cardNumber) {
+      toggleFocus(card);
+      cardIndex -= 1;
+      card = $('ul.data > li')[cardIndex];
+      toggleFocus(card);
+      return;
+    }
+    if (pagination.length > 0 && $(pagination).find('li.prev:not(.disabled)').length > 0 && cardIndex === 0) {
+      window.location.href = `${window.location.origin + $(pagination).find('li.prev a').attr('href')}#prev`;
+    }
+  });
+
+  Mousetrap.bind('enter', () => {
+    window.location.href = window.location.origin + $(card).find('span.card-title a').attr('href');
+  });
+});