diff --git a/themes/_global/js/keyboard.js b/themes/_global/js/keyboard.js
index d2a736e41..969a0d6e0 100644
--- a/themes/_global/js/keyboard.js
+++ b/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');
+}
\ No newline at end of file
diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css
index f2566bb9e..9ca58fbec 100755
--- a/themes/baggy/css/main.css
+++ b/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;
diff --git a/themes/baggy/home.twig b/themes/baggy/home.twig
index 84fc8e8bb..e1b78a26f 100755
--- a/themes/baggy/home.twig
+++ b/themes/baggy/home.twig
@@ -107,4 +107,8 @@
{% if constant('PDF') == 1 %}{% trans "Download as PDF" %}{% endif %}
{% endif %}
{% endif %}
+
+
{% endblock %}
diff --git a/themes/baggy/view.twig b/themes/baggy/view.twig
index ebc30b693..9ee64fc0f 100755
--- a/themes/baggy/view.twig
+++ b/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 }}');