aboutsummaryrefslogtreecommitdiffhomepage
path: root/themes
diff options
context:
space:
mode:
authorThomas Citharel <tcit@tcit.fr>2015-06-06 16:39:10 +0200
committerThomas Citharel <tcit@tcit.fr>2015-06-06 16:39:10 +0200
commit22a46267beef273f8602d569a22281af2207fdbe (patch)
tree550d900c76f4c29c63d8970298b72f84113ad2d5 /themes
parentddbb2308a3302e2d2d6ff89f4dd3235f85d335e1 (diff)
downloadwallabag-22a46267beef273f8602d569a22281af2207fdbe.tar.gz
wallabag-22a46267beef273f8602d569a22281af2207fdbe.tar.zst
wallabag-22a46267beef273f8602d569a22281af2207fdbe.zip
implemented lots of keyboard shortcuts
Diffstat (limited to 'themes')
-rw-r--r--themes/_global/js/keyboard.js131
-rwxr-xr-xthemes/baggy/css/main.css61
-rwxr-xr-xthemes/baggy/home.twig4
-rwxr-xr-xthemes/baggy/view.twig3
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 @@
1/**
2 * @desc Navigate with Keyboard from an article to another on an article's page
3 * @param string leftURL - URL of the article on the left
4 * @param string rightURL - URL of the article on the right
5 */
6
1function navigateKeyboard(leftURL, rightURL) { 7function navigateKeyboard(leftURL, rightURL) {
2 window.addEventListener("keydown", function (event) { 8 window.addEventListener("keydown", function (event) {
3 var key = event.which || event.keyCode; // event.keyCode is used for IE8 and earlier versions 9 var key = event.which || event.keyCode; // event.keyCode is used for IE8 and earlier versions
4 switch (key) { 10 switch (key) {
5 case 37: 11 case 37:
6 goLeft(leftURL); 12 goLeft(leftURL); // left arrow
13 break;
14 case 72:
15 goLeft(leftURL); // h letter (vim style)
7 break; 16 break;
8 17
9 case 39: 18 case 39:
10 goRight(rightURL); 19 goRight(rightURL); // right arrow
11 break; 20 break;
21 case 76:
22 goRight(rightURL); // l letter (vim style)
23 break;
24 case 8:
25 window.history.back();
26
12 } 27 }
13 28
14 }, false); 29 }, false);
@@ -25,3 +40,115 @@ function goRight(rightURL) {
25 window.location = window.location.origin + window.location.pathname + rightURL; 40 window.location = window.location.origin + window.location.pathname + rightURL;
26 } 41 }
27} 42}
43
44
45/**
46 * @desc Do actions with Keyboard on an article's page
47 * @param number id - ID of the current article
48 */
49
50function actionArticle(id) {
51 window.addEventListener("keydown", function (event) {
52 var key = event.which || event.keyCode; // event.keyCode is used for IE8 and earlier versions
53 switch (key) {
54 case 46:
55 deleteArticle(id); // delete key
56 break;
57 case 68:
58 deleteArticle(id); // d key letter
59 break;
60 case 70:
61 favoriteArticle(id); // f key letter
62 break;
63 case 77:
64 markReadArticle(id); // m key letter
65 break;
66 }
67
68 }, false);
69}
70
71function deleteArticle(id) {
72 if (id) {
73 window.location = window.location.origin + window.location.pathname + '?action=delete&id=' + id;
74 }
75}
76
77function favoriteArticle(id) {
78 if (id) {
79 window.location = window.location.origin + window.location.pathname + '?action=toggle_fav&id=' + id;
80 }
81}
82
83function markReadArticle(id) {
84 if (id) {
85 window.location = window.location.origin + window.location.pathname + '?action=toggle_archive&id=' + id;
86 }
87}
88
89function homeNavigation() {
90 selectedArticle = $('.entrie:first');
91 console.log("selected first article");
92 window.addEventListener("keydown", function (event) {
93 var key = event.which || event.keyCode; // event.keyCode is used for IE8 and earlier versions
94 switch (key) {
95 case 37: // left arrow
96 selectedArticle = goSelectPrev(selectedArticle,1);
97 break;
98 case 72: // h letter (vim style)
99 selectedArticle = goSelectPrev(selectedArticle,1);
100 break;
101
102 case 39: // right arrow
103 selectedArticle = goSelectNext(selectedArticle,1);
104 break;
105 case 76: // l letter (vim style)
106 selectedArticle = goSelectNext(selectedArticle,1);
107 break;
108 case 13: // enter into article
109 enterArticle(selectedArticle);
110 break;
111 case 74: // j letter key
112 selectedArticle = goSelectNext(selectedArticle,3);
113 break;
114 case 40: // down arrow
115 selectedArticle = goSelectNext(selectedArticle,3);
116 break;
117 case 75: // k letter key
118 selectedArticle = goSelectNext(selectedArticle,3);
119 break;
120 case 38: // up arrow
121 selectedArticle = goSelectNext(selectedArticle,3);
122 break;
123 }
124
125 }, false);
126}
127
128function goSelectNext(selectedArticle,number) {
129 if (selectedArticle.next().length) {
130 selectedArticle.removeClass("eselected");
131 selectedArticle = selectedArticle.next();
132 selectedArticle.addClass("eselected");
133 console.log("Changed selected to next");
134 console.log("selectedArticle is now " + selectedArticle.attr("id"));
135 }
136 return selectedArticle;
137}
138
139
140function goSelectPrev(selectedArticle,number) {
141 if (selectedArticle.prev().length) {
142 selectedArticle.removeClass("eselected");
143 selectedArticle = selectedArticle.prev();
144 selectedArticle.addClass("eselected");
145 console.log("Changed selected to previous");
146 console.log("selectedArticle is now " + selectedArticle.attr("id"));
147
148 }
149 return selectedArticle;
150}
151
152function enterArticle(selectedArticle) {
153 window.location = selectedArticle.find('a:first').attr('href');
154} \ 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 {
399 transition: all 0.5s ease; 399 transition: all 0.5s ease;
400} 400}
401 401
402.entrie:hover { 402.entrie:hover, .eselected {
403 box-shadow: 0 3px 10px rgba(0,0,0,1); 403 box-shadow: 0 3px 10px rgba(0,0,0,1);
404} 404}
405 405
406.entrie:hover:after { 406.entrie:hover:after, .eselected:after {
407 height: 40px; 407 height: 40px;
408} 408}
409 409
410.entrie:hover:before { 410.entrie:hover:before, .eselected:before {
411 bottom: 2.4em; 411 bottom: 2.4em;
412} 412}
413 413
414.entrie:hover h2 a { 414.entrie:hover h2 a, .eselected h2 a {
415 color: #666; 415 color: #666;
416} 416}
417 417
@@ -421,9 +421,9 @@ footer a {
421 line-height: 1.2; 421 line-height: 1.2;
422} 422}
423 423
424 .entrie h2:after { 424.entrie h2:after {
425 content: none; 425 content: none;
426 } 426}
427 427
428 428
429.entrie h2 a { 429.entrie h2 a {
@@ -437,16 +437,6 @@ footer a {
437 -o-transition: all 0.5s ease; 437 -o-transition: all 0.5s ease;
438 transition: all 0.5s ease; 438 transition: all 0.5s ease;
439} 439}
440/*
441.entrie h2 a:after {
442 content: "";
443 position: absolute;
444 top: 0;
445 width: 100%;
446 height: 100%;
447 left: 0;
448}
449*/
450 440
451.entrie p { 441.entrie p {
452 color: #666; 442 color: #666;
@@ -454,12 +444,8 @@ footer a {
454 line-height: 1.7; 444 line-height: 1.7;
455} 445}
456 446
457 .entrie h2 a:first-letter { 447.entrie h2 a:first-letter {
458 text-transform: uppercase; 448 text-transform: uppercase;
459 }
460
461.entrie:hover .tools {
462 bottom: 0;
463} 449}
464 450
465.entrie .tools { 451.entrie .tools {
@@ -477,20 +463,25 @@ footer a {
477 transition: all 0.5s ease; 463 transition: all 0.5s ease;
478} 464}
479 465
480 .entrie .tools a { 466.entrie:hover .tools, .eselected .tools {
481 color: #666; 467 bottom: 0;
482 text-decoration: none; 468}
483 display: block;
484 padding: 0.4em;
485 }
486 469
487 .entrie .tools a:hover {
488 color: #FFF;
489 }
490 470
491 .entrie .tools li { 471.entrie .tools a {
492 display: inline-block; 472 color: #666;
493 } 473 text-decoration: none;
474 display: block;
475 padding: 0.4em;
476}
477
478.entrie .tools a:hover {
479 color: #FFF;
480}
481
482.entrie .tools li {
483 display: inline-block;
484}
494 485
495.entrie:nth-child(3n+1) { 486.entrie:nth-child(3n+1) {
496 margin-left: 0; 487 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 @@
107 {% 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 %} 107 {% 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 %}
108 {% endif %} 108 {% endif %}
109{% endif %} 109{% endif %}
110
111<script type="text/javascript">
112 homeNavigation();
113</script>
110{% endblock %} 114{% 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 @@
111 // Use left and right arrow to navigate on with keyboard 111 // Use left and right arrow to navigate on with keyboard
112 navigateKeyboard('?view=view&id={{ navigate.nextid|e }}','?view=view&id={{ navigate.previousid|e }}'); 112 navigateKeyboard('?view=view&id={{ navigate.nextid|e }}','?view=view&id={{ navigate.previousid|e }}');
113 113
114 // use keyboard to do actions
115 actionArticle('{{ entry.id|e }}');
116
114 // swipe to right or left on mobile to navigate 117 // swipe to right or left on mobile to navigate
115 $('article').on("swiperight", function(){ 118 $('article').on("swiperight", function(){
116 goLeft('?view=view&id={{ navigate.nextid|e }}'); 119 goLeft('?view=view&id={{ navigate.nextid|e }}');