Trabalhando gestos com Hammer.js

Hammer é uma biblioteca JavaScript que dispara eventos para os gestos realizados em suas aplicações com HTML+JS. O Hammer.js é simples de usar, como muitas bibliotecas ele usa o esquema “jQuery-like”.

Para utilizar a biblioteca de gestos precisamos dos seguintes passos, carregar a biblioteca do Hammer disponível no link: http://eightmedia.github.io/hammer.js/, além de encontrar o fonte lá você vai encontrar exemplos de como usar a biblioteca. Com os arquivos importados agora vamos ao código, inicialmente selecionamos o elemento o qual vamos “ouvir” os gestos e depois especificamos o gesto que vamos acompanhar.

Exemplo:

var element = document.getElementById('box');
var hammertime = Hammer(element).on("swipe", function(event) {
        	alert('swipe!');
    	});

No código acima temos um exemplo que acompanha o movimento de swipe, quando realizado ele dispara um alert. E o que podemos fazer com isso? Slide de fotos, invocar menus, ações em jogos, mudança de conteúdo. Podemos notar que no código acima recebemos um evento na função chamada pelo Hammer, vamos usar o “console.log” para inspecionar esse item e o resultado será o seguinte:Captura de Tela 2014-01-03 às 16.16.03

Ele retorna um objeto com uma sério de propriedades, no final da lista temos algumas propriedades importantes, type(tipo do evento), timeStamp, target(onde foi realizado o evento), srcElement(O elemento responsável por chamar o evento) e  gesture um objeto que capta as infos sobre o “toque” realizado pelo usuário, esse item vamos detalhar a seguir:

Captura de Tela 2014-01-03 às 16.16.26

No objeto gesture temos como pegar a angulação que foi realizado o toque, a velocidade x e y, escala, distância, rotação e direção do toque. É muito informação que pode ser trabalhada

Agora vamos a um evento mais prático:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hammer Tutorial</title>
    </head>
    <body>
        <div id="box">
        	<nav id="menu" class="hide">
        		<ul>
        			<li><a href="#">item 1</a></li>
        			<li><a href="#">item 2</a></li>
        			<li><a href="#">item 3</a></li>
        			<li><a href="#">item 4</a></li>
        		</ul>
        	</nav>
        </div>

        <script type="text/javascript" src="js/hammer.min.js"></script>
        <script type="text/javascript">
        	var element = document.getElementById('box');
			var menu = document.getElementById("menu");

        	Hammer(element).on("swipe", function(event) {
        		//verificamos qual o valor da propriedade direction caso "right"
        		// ele adiciona o class ao menu active
        		// caso o valor do direction for "left" ele adiciona o class "left"
        		if(event.gesture.direction == "right"){
        			menu.className = "active";	
        		}else if(event.gesture.direction == "left"){
        			menu.className = "hide";
        		}
    		});
        </script>
    </body>
</html>

No exemplo acima em nosso elemento com id box, adicionamos uma tag nav com id menu esse item que vamos exibir e esconder. No código JavaScript no final do nosso arquivo verificamos no objeto gesture qual o valor do direction, caso “right” adicionamos o class active, caso contrario adicionamos o class “hide” a transição nos fazemos com CSS3 o código eu mostro a seguir:

#box {
	padding: 0;
	margin: 10%;
	width: 80%;
	height: 300px;
	background-color: green;
	display: block;
	position: relative;
	overflow: hidden;
}

#menu {
	width: 200px;
	height: 100%;
	background-color: yellow;
	margin: 0;
	position:absolute;
	transition:  left 300ms linear;
}

#menu.hide{
	left: -250px;
}

#menu.active{
	left:0;
}

Um exemplo simples mas muito usado em muitas aplicações. O exemplo completo desse tutorial você pode conferir no GitHub: https://github.com/fellyph/Tutorial-bbUI/tree/master/hammer/www

 

 

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.