implemented lots of keyboard shortcuts

themes/_global/js/keyboard.js

@@ -1,14 +1,29 @@
+/** 
+ * @desc Navigate with Keyboard from an article to another on an article's page
+ * @param string leftURL - URL of the article on the left
+ * @param string rightURL - URL of the article on the right
+ */
+
 function navigateKeyboard(leftURL, rightURL) {
   window.addEventListener("keydown", function (event) {
     var key = event.which || event.keyCode; // event.keyCode is used for IE8 and earlier versions
     switch (key) {
       case 37:
-       goLeft(leftURL);
+       goLeft(leftURL); // left arrow
+      break;
+      case 72:
+        goLeft(leftURL); // h letter (vim style)
       break;
 
       case 39:
-        goRight(rightURL);
+        goRight(rightURL); // right arrow
       break;
+      case 76:
+        goRight(rightURL); // l letter (vim style)
+      break;
+      case 8:
+        window.history.back();
+
     }
 
   }, false);
@@ -25,3 +40,115 @@ function goRight(rightURL) {
         window.location = window.location.origin + window.location.pathname + rightURL;
   }
 }
+
+
+/** 
+ * @desc Do actions with Keyboard on an article's page
+ * @param number id - ID of the current article
+ */
+
+function actionArticle(id) {
+  window.addEventListener("keydown", function (event) {
+    var key = event.which || event.keyCode; // event.keyCode is used for IE8 and earlier versions
+    switch (key) {
+      case 46:
+       deleteArticle(id); // delete key
+      break;
+      case 68:
+        deleteArticle(id); // d key letter
+      break;
+      case 70:
+        favoriteArticle(id); // f key letter
+      break;
+      case 77:
+        markReadArticle(id); // m key letter
+      break;
+    }
+
+  }, false);
+}
+
+function deleteArticle(id) {
+   if (id) {
+          window.location = window.location.origin + window.location.pathname + '?action=delete&id=' + id;
+  }
+}
+
+function favoriteArticle(id) {
+   if (id) {
+          window.location = window.location.origin + window.location.pathname + '?action=toggle_fav&id=' + id;
+  }
+}
+
+function markReadArticle(id) {
+   if (id) {
+          window.location = window.location.origin + window.location.pathname + '?action=toggle_archive&id=' + id;
+  }
+}
+
+function homeNavigation() {
+  selectedArticle = $('.entrie:first');
+  console.log("selected first article");
+  window.addEventListener("keydown", function (event) {
+    var key = event.which || event.keyCode; // event.keyCode is used for IE8 and earlier versions
+    switch (key) {
+      case 37: // left arrow
+       selectedArticle = goSelectPrev(selectedArticle,1);
+      break;
+      case 72: // h letter (vim style)
+        selectedArticle = goSelectPrev(selectedArticle,1);
+      break;
+
+      case 39: // right arrow
+        selectedArticle = goSelectNext(selectedArticle,1);
+      break;
+      case 76: // l letter (vim style)
+        selectedArticle = goSelectNext(selectedArticle,1);
+      break;
+      case 13: // enter into article
+        enterArticle(selectedArticle);
+      break;
+      case 74: // j letter key
+        selectedArticle = goSelectNext(selectedArticle,3);
+      break;
+      case 40: // down arrow
+        selectedArticle = goSelectNext(selectedArticle,3);
+      break;
+      case 75: // k letter key
+        selectedArticle = goSelectNext(selectedArticle,3);
+      break;
+      case 38: // up arrow
+        selectedArticle = goSelectNext(selectedArticle,3);
+      break;
+    }
+
+  }, false);
+}
+
+function goSelectNext(selectedArticle,number) {
+  if (selectedArticle.next().length) {
+    selectedArticle.removeClass("eselected");
+    selectedArticle = selectedArticle.next();
+    selectedArticle.addClass("eselected");
+    console.log("Changed selected to next");
+    console.log("selectedArticle is now " + selectedArticle.attr("id"));
+  }
+  return selectedArticle;
+}
+
+
+function goSelectPrev(selectedArticle,number) {  
+  if (selectedArticle.prev().length) {
+    selectedArticle.removeClass("eselected");
+    selectedArticle = selectedArticle.prev();
+    selectedArticle.addClass("eselected");
+    console.log("Changed selected to previous");
+    console.log("selectedArticle is now " + selectedArticle.attr("id"));
+
+  }
+  return selectedArticle;
+}
+
+function enterArticle(selectedArticle) {
+  window.location = selectedArticle.find('a:first').attr('href');
+}

themes/baggy/css/main.css

@@ -399,19 +399,19 @@ footer a {
           transition: all 0.5s ease;
 }
 
-.entrie:hover {
+.entrie:hover, .eselected {
   box-shadow: 0 3px 10px rgba(0,0,0,1);
 }
 
-.entrie:hover:after {
+.entrie:hover:after, .eselected:after {
   height: 40px;
 }
 
-.entrie:hover:before {
+.entrie:hover:before, .eselected:before {
   bottom: 2.4em;
 }
 
-.entrie:hover h2 a {
+.entrie:hover h2 a, .eselected h2 a {
   color: #666;
 }
 
@@ -421,9 +421,9 @@ footer a {
   line-height: 1.2;
 }
 
-  .entrie h2:after {
-    content: none;
-  }
+.entrie h2:after {
+  content: none;
+}
 
 
 .entrie h2 a {
@@ -437,16 +437,6 @@ footer a {
        -o-transition: all 0.5s ease;
           transition: all 0.5s ease;
 }
-/*
-.entrie h2 a:after {
-  content: "";
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  left: 0;
-}
-*/
 
 .entrie p {
   color: #666;
@@ -454,12 +444,8 @@ footer a {
   line-height: 1.7;
 }
 
-  .entrie h2 a:first-letter {
-    text-transform: uppercase;
-  }
-
-.entrie:hover .tools {
-  bottom: 0;
+.entrie h2 a:first-letter {
+  text-transform: uppercase;
 }
 
 .entrie .tools {
@@ -477,20 +463,25 @@ footer a {
           transition: all 0.5s ease;
 }
 
-  .entrie .tools a {
-    color: #666;
-    text-decoration: none;
-    display: block;
-    padding: 0.4em;
-  }
+.entrie:hover .tools, .eselected .tools {
+  bottom: 0;
+}
 
-  .entrie .tools a:hover {
-    color: #FFF;
-  }
 
-  .entrie .tools li {
-    display: inline-block;
-  }
+.entrie .tools a {
+  color: #666;
+  text-decoration: none;
+  display: block;
+  padding: 0.4em;
+}
+
+.entrie .tools a:hover {
+  color: #FFF;
+}
+
+.entrie .tools li {
+  display: inline-block;
+}
 
 .entrie:nth-child(3n+1) {
   margin-left: 0;

themes/baggy/home.twig

@@ -107,4 +107,8 @@
             {% if constant('PDF') == 1 %}<a title="{% trans "Download the articles from this category in a pdf file" %}" href="./?pdf&amp;method=category&amp;value={{ view }}">{% trans "Download as PDF" %}</a>{% endif %}
             {% endif %}
 {% endif %}
+
+<script type="text/javascript">
+    homeNavigation();
+</script>
 {% endblock %}

themes/baggy/view.twig

@@ -111,6 +111,9 @@
         // Use left and right arrow to navigate on with keyboard
         navigateKeyboard('?view=view&id={{ navigate.nextid|e }}','?view=view&id={{ navigate.previousid|e }}');
 
+        // use keyboard to do actions
+        actionArticle('{{ entry.id|e }}');
+
         // swipe to right or left on mobile to navigate
         $('article').on("swiperight", function(){
             goLeft('?view=view&id={{ navigate.nextid|e }}');