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

• Página estática

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 URL~~ 1 e 2
• ~~Melhorar a forma de filtrar os dados para encontrar mais resultados~~ 1

Novas pendências aqui.

License

MIT license.