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 !

J'ai volontairement supprimé Disqus parce que ça me saoulait. N'hésitez pas à me contacter sur Twitter si vous avez une remarque !
Ou même me créer une issue sur GitHub, tiens.