Bring navigation (with right, left and enter) on material entries page. Supports going to next and previous page !

Also better indentation for js files (changed editorconfig for them).

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

.editorconfig

@@ -8,3 +8,7 @@ indent_style = space
 indent_size = 4
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.js]
+indent_style = space
+indent_size = 2

app/Resources/static/themes/_global/js/shortcuts/main.js

@@ -1,3 +1,6 @@
+import Mousetrap from 'mousetrap';
+
+
 /** Shortcuts **/
 
 /* Go to */

app/Resources/static/themes/_global/js/tools.js

@@ -1,7 +1,6 @@
 import $ from 'jquery';
-import Mousetrap from 'mousetrap';
+import './shortcuts/main';
-import './shortcuts/main.js';
+import './shortcuts/entry';
-import './shortcuts/entry.js';
 
 /* Allows inline call qr-code call */
 import jrQrcode from 'jr-qrcode'; // eslint-disable-line

app/Resources/static/themes/baggy/js/init.js

@@ -1,7 +1,5 @@
+/* jQuery */
 import $ from 'jquery';
-import { initFilters, initExport } from '../../_global/js/tools';
-import './shortcuts/main.js';
-import './shortcuts/entry.js';
 
 /* eslint-disable no-unused-vars */
 /* jquery has default scope */
@@ -9,8 +7,16 @@ import cookie from 'jquery.cookie';
 import ui from 'jquery-ui-browserify';
 /* eslint-enable no-unused-vars */
 
+/* Annotations */
 import annotator from 'annotator';
 
+/* Shortcuts */
+import './shortcuts/main';
+import './shortcuts/entry';
+import '../../_global/js/shortcuts/main';
+import '../../_global/js/shortcuts/entry';
+
+/* Tools */
 import { savePercent, retrievePercent } from '../../_global/js/tools';
 import toggleSaveLinkForm from './uiTools';
 

app/Resources/static/themes/baggy/js/shortcuts/entry.js

@@ -1,19 +1,22 @@
+import Mousetrap from 'mousetrap';
+import $ from 'jquery';
+
 /* Article view */
 Mousetrap.bind('o', () => {
-    $('div#article_toolbar ul.links li:nth-child(2) a')[0].click();
+  $('div#article_toolbar ul.links li:nth-child(2) a')[0].click();
 });
 
 /* mark as favorite */
 Mousetrap.bind('s', () => {
-    $('div#article_toolbar ul.links li:nth-child(5) a')[0].click();
+  $('div#article_toolbar ul.links li:nth-child(5) a')[0].click();
 });
 
 /* mark as read */
 Mousetrap.bind('a', () => {
-    $('div#article_toolbar ul.links li:nth-child(4) a')[0].click();
+  $('div#article_toolbar ul.links li:nth-child(4) a')[0].click();
 });
 
 /* delete */
 Mousetrap.bind('del', () => {
-    $('div#article_toolbar ul.links li:nth-child(7) a')[0].click();
+  $('div#article_toolbar ul.links li:nth-child(7) a')[0].click();
 });

app/Resources/static/themes/material/js/init.js

@@ -1,8 +1,17 @@
+/* jQuery */
 import $ from 'jquery';
+
+/* Annotations */
 import annotator from 'annotator';
+
+/* Tools */
 import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools';
-import './shortcuts/main.js';
+
-import './shortcuts/entry.js';
+/* Import shortcuts */
+import './shortcuts/main';
+import './shortcuts/entry';
+import '../../_global/js/shortcuts/main';
+import '../../_global/js/shortcuts/entry';
 
 require('materialize'); // eslint-disable-line
 

app/Resources/static/themes/material/js/shortcuts/entry.js

@@ -1,19 +1,22 @@
+import Mousetrap from 'mousetrap';
+import $ from 'jquery';
+
 /* open original article */
 Mousetrap.bind('o', () => {
-    $('ul.side-nav li:nth-child(2) a i')[0].click();
+  $('ul.side-nav li:nth-child(2) a i')[0].click();
 });
 
 /* mark as favorite */
 Mousetrap.bind('s', () => {
-    $('ul.side-nav li:nth-child(5) a i')[0].click();
+  $('ul.side-nav li:nth-child(5) a i')[0].click();
 });
 
 /* mark as read */
 Mousetrap.bind('a', () => {
-    $('ul.side-nav li:nth-child(4) a i')[0].click();
+  $('ul.side-nav li:nth-child(4) a i')[0].click();
 });
 
 /* delete */
 Mousetrap.bind('del', () => {
-    $('ul.side-nav li:nth-child(6) a i')[0].click();
+  $('ul.side-nav li:nth-child(6) a i')[0].click();
 });

app/Resources/static/themes/material/js/shortcuts/main.js

@@ -1,13 +1,71 @@
-/* Actions */
+import Mousetrap from 'mousetrap';
-Mousetrap.bind('g n', () => {
+import $ from 'jquery';
+
+function toggleFocus(cardToToogleFocus) {
+  if (cardToToogleFocus) {
+    $(cardToToogleFocus).toggleClass('z-depth-4');
+  }
+}
+let card;
+let cardIndex;
+let cardNumber;
+let pagination;
+
+$(document).ready(() => {
+  cardIndex = 0;
+  cardNumber = $('#content ul.data > li').length;
+  card = $('#content ul.data > li')[cardIndex];
+  pagination = $('.pagination');
+
+  /* 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', () => {
+  Mousetrap.bind('esc', () => {
     $('.close').trigger('click');
-});
+  });
 
-// Display the first element of the current view
+  /* Select right card. If there's a next page, go to next page */
-Mousetrap.bind('right', () => {
+  Mousetrap.bind('right', () => {
-    $('ul.data li:first-child span.dot-ellipsis a')[0].click();
+    if (cardIndex >= 0 && cardIndex < cardNumber - 1) {
+      toggleFocus(card);
+      cardIndex += 1;
+      card = $('ul.data > li')[cardIndex];
+      toggleFocus(card);
+      return;
+    }
+    if (pagination != null && pagination.find('li.next') && cardIndex === cardNumber - 1) {
+      window.location.href = window.location.origin + $(pagination).find('li.next a').attr('href');
+      return;
+    }
+  });
+
+  /* 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 !== null && $(pagination).find('li.prev') && cardIndex === 0) {
+      window.location.href = `${window.location.origin + $(pagination).find('li.prev a').attr('href')}#prev`;
+      return;
+    }
+  });
+
+  Mousetrap.bind('enter', () => {
+    window.location.href = window.location.origin + $(card).find('span.card-title a').attr('href');
+  });
 });