Navegación mediante teclas con mousetrap
Publicado: 2020-10-29Me parece que desde siempre he tenido problemas con el ratón.
Es decir, desde hace años que trabajo como programador y cada vez, siempre que puedo, utilizo menos ese instrumento tosco.
¿Cómo lo evito?
Hermosos, hermosos atajos de teclado.
Y, bueno, ahora me pregunté ¿por qué no implementarlos en mi sitio?
Justo eso es lo que hice.
A mi tema de WordPress le agregué una pequeña librería para atajos de teclado, llamada mousetrap.
Gracias a ella ahora puedo navegar a las principales páginas de mi sitio con solo presionar una tecla:
- r, de ramoscarlos, me lleva a la página principal,
- c, me lleva a la página de cursos,
- b, me lleva a la página de blog,
- a, me lleva a la página de acerca de.
Y todo ello se logró con código relativamente mínimo. Primero cree una función para redireccionar:
function visitar(pagina) { window.location.href = "https://ramoscarlos.com/"+pagina; }
Y luego solo agregué cada uno de los accesos de manera manual:
// Binding de los accesos del menú principal. Mousetrap.bind('r', function() { visitar('') }); Mousetrap.bind('c', function() { visitar('cursos') }); Mousetrap.bind('a', function() { visitar('archivo') }); Mousetrap.bind('d', function() { visitar('acerca-de') });
Realmente no hay mucho más que hacer.
Por supuesto, se pueden hacer otras maravillas.
Por ejemplo, si quiero poder buscar dentro de mi archivo usando mi buscador, puedo crear una combinación de teclas para enfocar el elemento:
// Buscar el binding para la página de archivo. var paginaTieneBusqueda = document.getElementById("search-archive"); if ( paginaTieneBusqueda ) { Mousetrap.bind('ctrl+shift+f', function() { document.getElementById("search-archive").focus(); }); }
Por supuesto, protejo este atajo de teclado con un if
por si no estoy en esa página. Claro, claro, por cuestiones de desempeño, podría ponerlo en otro archivo especial para la plantilla pero… ¿para qué?
Próximamente habrá más atajos que iré agregando y documentando dentro de mi tema.
De momento, adoro navegar minimizando el uso del ratón.