Navigation avec le clavier pour bonjourdubstep.fr

Une petite feature qui me tenait à coeur pour bonjourdubstep : la navigation par clavier. Ainsi, nous pouvons utiliser la touche « r » pour aller sur une page choisie aléatoirement; « j » pour la page suivante; « k » pour la page suivante et « h » pour revenir sur la home.

La contrainte ici, c’est que cela ne fonctionnera qu’uniquement sur une url type /page/N, vu que les URL avec le titre du morceau à l’intérieur ne fonctionnent pas étant donné qu’elles ne récupèrent pas l’ID de la page comme le fait /page/N. Merci tumblr.

Bref, pour ceux que ça pourrait intéresser et faire genre j’sais utiliser la librairie jQuery, voici le code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

jQuery("body").keydown(function(event) {
// Si le keycode de l'event (= touche pressée (keydown)) est 82 (correspond à la touche "r")
if (event.keyCode == '82') {
// On récupère les pages total avec le tag qui va bien de Tumblr
var totalpages = {TotalPages};
if (totalpages > 1) {
// Ensuite, le calcul qui va bien pour sortir un numéro entre {1;totalpages}
var randPage = Math.ceil(Math.random() * totalpages);
// On redirige la fenêtre vers /page/randPage
window.location.href='/page/'+randPage
}
}
 
// Si le keycode est celui de la touche "h"
if (event.keyCode == '72') {
// On redirige à la racine
window.location.href='/'
}
// Si le keycode est celui de la touche "j"
if (event.keyCode == '74') {
// On var l'id de la page courante
var currentpage = {CurrentPage};
// Si elle est suppérieur à 1 (pour ne pas aller à /page/0/ et inférieur)
if (currentpage > 1) {
// On va à currentpage-1
var prevpage = currentpage -1;
window.location.href='/page/'+prevpage
}
}
 
// Même principe que pour la touche "j", sauf que là, c'est "k"
if (event.keyCode == '75') {
var currentpage = {CurrentPage};
if (currentpage > {TotalPages}) {
var nextpage = currentpage +1;
window.location.href='/page/'+nextpage
}
}
});

Ensuite, un coup de JavaScript Compressor pour gagner en performance sur la page et zou.

Egalement l’occasion pour moi de tester Sublime Text v2, chaudement recommandé par @_kud, qui n’a pas l’air trop vilain.

Allez, kiss !