From 22a46267beef273f8602d569a22281af2207fdbe Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Sat, 6 Jun 2015 16:39:10 +0200 Subject: implemented lots of keyboard shortcuts --- themes/_global/js/keyboard.js | 131 +++++++++++++++++++++++++++++++++++++++++- themes/baggy/css/main.css | 61 +++++++++----------- themes/baggy/home.twig | 4 ++ themes/baggy/view.twig | 3 + 4 files changed, 162 insertions(+), 37 deletions(-) diff --git a/themes/_global/js/keyboard.js b/themes/_global/js/keyboard.js index d2a736e4..969a0d6e 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 f2566bb9..9ca58fbe 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 84fc8e8b..e1b78a26 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 ebc30b69..9ee64fc0 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 }}'); -- cgit v1.2.3