Rodrigo Brito

Dominado cliques com eventos

Para os exemplos será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

Os posts anteriores, JS-0505 (Dropdown Menu e Event Bubbling) e JS-0506 (SetTimeout e SetInterval), estão relacionados ao conteúdo deste post e podem (quase devem) ser utilizados como referência.

Nem todo site utiliza o clique fora da área de contato do menu mobile para o seu fechamento (é o caso deste site, que ocupa a altura total da tela). Contudo, para efeitos didáticos e também de usabilidade, o evento de clique fora da área neste exemplo será implementado.

A fase de Bubbling influencia o monitoramento dos eventos de clique ou toque, impactando a abertura do menu em razão do target do evento. O botão do menu mobile é um elemento fora da área da lista do menu, portanto, um clique neste é efetivamente um clique fora da área. O setTimeout será utilizado para deixar o método handleOutsideClick (método do clique fora) na área de espera (Callback Queue) que só será executado depois dos eventos que estiverem na pilha de execução, Call Stack.

Então, graças ao entendimento sobre as fases de evento, o fechamento será realocado para a Callback Queue apenas utilizando o setTimeout dando espaço para o evento de abertura do menu mobile acontecer em um momento anterior.

Ajustando:

O código do arquivo outsideclick.js sofreu a seguinte alteração na linha oito, com o acréscimo do setTimeout, para empurrar a função handleOutsideClick para a Callback Queue:

Colocando o botão do menu mobile no HTML:

O botão que será utilizado e estilizado a seguir foi colocado em uma área acima da lista do menu. Por padrão será display none e no media query de 700px será revelado. Foram utilizados dataset, data-menu="button" para o button e data-menu="list" para a lista dos itens do menu, que serão utilizados para a seleção de elementos tanto no CSS quanto no JS. As propriedades "aria" foram utilizadas por questões de acessibilidade, desta forma, o texto do botão não será lido por leitores de tela. O código ficou da seguinte forma:

Hora de preparar o CSS:

Seguindo o padrão, foi criado um arquivo a parte e importado no style.css (@import 'menu-mobile.css';). As variáveis são as contidas no arquivo base.css. O código em si não contém grandes novidades, apenas a confecção do menu do tipo hambúrguer utilizando o pseudo-elemento "before" e uma rotação deste, além da animação de entrada do menu, já implementada no código (show-right). O código é o seguinte:

A classe "dropdown-menu" teve sua posição alterada no media query para "static", para poder empurrar os elementos para baixo na abertura do submenu.

Agora o JS:

O script embora pequeno, traz consigo o cuidado na sequência de eventos. Primeiramente, utilizando modules, foi criado o arquivo menu-mobile.js, exportando por default a função menuMobile, que é importada e ativada no script.js.

A função outsideClick do arquivo outsideclick.js, assim como no dropdown-menu.js, foi importada, demonstrando a capacidade de compartilhamento do código. O botão do menu mobile e a lista do menu foram selecionadas utilizando os valores dos seus dataset. A constante "events" foi criada para ser utilizada como parâmetro para o disparador de ventos, podendo ser clique (click) ou toque (touchstart).

Dentro do if (para prevenir erro na ausência do botão) foi criado o método openMenu, disparado aos eventos de clique o toque no botão (linha dezenove). Este método apenas adiciona a classe "active" nos elementos botão e lista do menu para ser revelados e somente então, coloca o outsideClick na fila de espera de execução (Callback Queue). Quando o evento de abertura ocorrer, o evento de monitoramento do clique fora do menu estará ativo e quando executado, removera a classe "active" dos elementos selecionados, fechará os submenu e será retirada da stack no final.

 O resultado final:

Para visualizar o projeto em andamento, clique aqui.

Para baixar o projeto, clique aqui.