reachjs v0.2.8
ReachJS
Biblioteca JavaScript para pesquisa rápida de páginas em sua aplicação.
Seus usuários poderão encontrar mais facilmente as páginas da sua aplicação utilizando apenas o teclado.
ReachJS funciona basicamente como uma ferramenta de busca para o usuário (como o Pesquisar do Windows ou o Spotlight do macOS), utilizando os dados que são passados na inicialização da biblioteca.
Veja alguns exemplos
Instalação
Você pode fazer o download direto do arquivo clicando aqui e importar ele na página como no exemplo.
<script type="text/javascript" src="./libs/reachjs.js"></script>
Ou pode também fazer o download via NPM ou Yarn.
npm install --save reachjs
yarn add reachjs
E importa-lo nos arquivos .js
utilizando webpack ou browserify por exemplo.
import reachjs from 'reachjs';
// ou
var reachjs = require('reachjs');
Utilização
Para inicializar a biblioteca, o único parâmetro obrigatório são as rotas disponíveis da sua aplicação. As demais configurações têm seus valores padrões caso você não queira customizá-los.
Rotas
O parâmetro de rotas pode ser passado tanto como um array de items como uma URL para serem resgatadas.
Para carregar como um array de items é necessário passar a chave routes
no objeto de inicialização.
import reachjs from 'reachjs';
reachjs.init({
routes: [{
title: 'Home',
path: 'home',
description: 'Página principal do sistema',
}, {
title: 'Quem Somos',
path: '/quem_somos',
description: 'Nós somos o que está nessa pequena descrição aqui',
}, {
title: 'Contato',
path: 'contato',
description: 'Nós temos várias formas de contato e estamos localizados nesse lugar aqui bem bacana :)',
}]
});
Ou utilizar o método setRoutes
exposto pela biblioteca.
import reachjs from 'reachjs';
reachjs.setRoutes([ ... ]); // mesmo array do exemplo anterior
reachjs.init();
Para carregar os items por uma URL é necessário passar a chave routesUrl
no objeto de inicialização.
import reachjs from 'reachjs';
reachjs.init({
routesUrl: 'http://app.minhaaplicacao.com.br/sistema/rotas'
});
Ou utilizar o método setRoutesUrl
exposto pela biblioteca.
import reachjs from 'reachjs';
reachjs.setRoutesUrl('http://app.minhaaplicacao.com.br/sistema/rotas');
reachjs.init();
Para configurações especiais na url de rotas você pode utilizar a chave routesConfig
no objeto de inicialização. As alterações que podem ser feitas são:
- Parâmetro de pesquisa da URL (searchQueryParam), que por padrão é
q
- Headers diferentes na requisição (customHeader)
import reachjs from 'reachjs';
reachjs.init({
routesConfig: {
searchQueryParam: 'search',
customHeader: {
Authorization: 'UmVhY2hKUw=='
}
}
});
Ou utilizar o método setRoutesConfig
exposto pela biblioteca.
import reachjs from 'reachjs';
reachjs.setRoutesConfig({
searchQueryParam: 'search',
customHeader: {
Authorization: 'UmVhY2hKUw=='
}
});
reachjs.init();
Internacionalização
Os idiomas com suporte são:
- Português (pt)
- Inglês (us)
O idioma padrão é o português.
Para selecionar um idioma diferente é necessário passar a chave locale
no objeto de inicialização.
import reachjs from 'reachjs';
reachjs.init({
locale: 'us'
});
Ou utilizar o método setLocale
exposto pela biblioteca.
import reachjs from 'reachjs';
reachjs.setLocale('us');
reachjs.init();
Teclas para disparo
Você pode customizar as teclas que irão fazer o ReachJS aparecer na tela. É obrigatório passar 2 teclas, sendo que a primeira tecla deverá obrigatoriamente ficar pressionada e a segunda ser apertada durante o pressionamento da primeira tecla.
As teclas padrões são CTRL
+ SPACEBAR
e seus respectivos keyCodes são 17
e 32
.
Para utilizar teclas de disparo diferentes é necessário passar a chave openKeys
no objeto de inicialização.
import reachjs from 'reachjs';
reachjs.init({
openKeys: [16, 18] // SHIFT + ALT
});
Ou utilizar o método setOpenKeys
exposto pela biblioteca.
import reachjs from 'reachjs';
reachjs.setOpenKeys([16, 18]);
reachjs.init();
OBS.: Essa configuração aceita apenas o keyCode
das teclas. Os keyCodes
podem ser encontrados neste link.
Evento de item selecionado
Você pode customizar o evento que é disparado sempre que o usuário escolher um dos items pesquisado.
Por padrão o ReachJS vai apenas redirecionar o usuário para o parâmetro path
passado no objeto da rota selecionada.
Para disparar um evento diferente é necessário passar a chave onSelect
no objeto de inicialização.
import reachjs from 'reachjs';
reachjs.init({
onSelect: data => {
alert(`Você será redirecionado para a página ${data.title}.`);
window.location = data.path;
}
});
Ou utilizar o método setOnSelect
exposto pela biblioteca.
import reachjs from 'reachjs';
reachjs.setOnSelect(data => {
// ...
}));
reachjs.init();
Pendências
Demonstração visual de carregando enquanto busca as rotas via URL1 e 2Melhorar a forma de filtrar os dados para encontrar mais resultados1
Novas pendências aqui.
License
MIT license.