Touch Test Hammer.JS

by p_russell

HTML

<script src="https://hammerjs.github.io/dist/hammer.js"></script>

<div class="outerWrapper">  
    <div id="pages">
		    <div class="page" id="p3"><p>Page 3</p></div> 
				<div class="page" id="p2"><p>Page 2</p>
					<button onclick="alert('Press')">Click me</button> 
				</div>
				<div class="page" id="p1"><p>Page 1</p></div>
        <div class="page" id="p0"><p>Page 0</p></div>
    </div>
		<div id="iconOverlay">
			 <button onclick="alert('Press')">Click me</button> 	
		</div>
</div>

CSS

body { overflow-x: hidden ;
	height: 700px;
	width: 250px;
}
.pages {
	position: relative;
}
.page { 
	height: 300px;
	width: 250px;
	position: absolute; left: 0px ; top: 0;
	transition-timing-function: ease-out;
/* 	transition: 0.1s; */
}
.page p {   color: white; 
/* width: 100% ; height: 100% ; */
text-align: center;
padding-top: 10% ;
font-family: roboto ;
}
#p0 { background-color: red;}
#p1 { background-color: black;}
#p2 { background-color: green;}
#p3 { background-color: blue;}

#iconOverlay {
	position: absolute;
	height: 5%;
	width: 30%;
	z-index: 100;
	text-align: center;
	padding-top: 30% ;
	pointer-events: none;
}
#iconOverlay button  { 	color: black;  
	pointer-events: none;
}

JavaScript

window.pages = {};
pages.selector = '.page'
pages.sensitivity = 25;
pages.active = 0;
pages.count = 0;

pages.pageIDs = [];

pages.width=document.body.clientWidth;

pages.init = function( selector ) {
  pages.pageElem = document.querySelector( selector );
  pages.count = pages.pageElem.querySelectorAll(pages.selector).length;
	for ( var i=0; i< pages.count ; i++ ) {
		pages.pageIDs[i] = document.querySelector( "#p"+i )
		var zIndex = pages.count - i;
		pages.pageIDs[i].style.zIndex = zIndex;
	}
	var pagesManager  = new Hammer.Manager(pages.pageElem);
	pagesManager.add (new Hammer.Pan({ threshold: 0, pointers: 0 }));
	pagesManager.on( 'pan' , function (evt) {
	
		var percent = 100 * evt.deltaX / pages.width ;
		pages.pageIDs[pages.active].style.transform = 'translateX( ' + percent + '%)';

		if ( evt.isFinal ) {

		console.log ("0 evt.isFinal");	
			if ( Math.abs( evt.velocityX) > 1 ||  Math.abs(percent) >= pages.sensitivity  ) 			{
				pages.pageIDs[pages.active].style.left = '-1000px';
				pages.goTo( pages.active + 1 );
console.log ("1 percent(" + percent + ") >= sens OR abs(velocityX) " + Math.abs( evt.velocityX) + " > 1 >>>>> " + pages.active );					
			} else {
				pages.pageIDs[pages.active].style.transform = 'translateX( 0% )';
			}
		}
	});	
};			


pages.goTo = function( number) {
	var zIndex;
	if ( number == pages.count ) { 
		pages.active = 0;
// Reset zIndex
		for ( var i=0 ; i < pages.count ; i++ ) {
			zIndex = pages.count - i;
			pages.pageIDs[i].style.zIndex = zIndex;
		}
	} else {
		pages.active = number;
		zIndex = -number ;
		pages.pageIDs[number-1].style.zIndex = zIndex;
	}

	pages.pageIDs[number-1].style.transform = 'translateX( 0% )';
	pages.pageIDs[number-1].style.left = '0px';
	console.log ("page active = "+ pages.active + " : " + zIndex);
	
// slide the page out then subtract page count from z-index 

//	pages.pageElem.style.transform = 'translateX( 50% )';

/* 	pages.pageElem.classList.add( 'is-animating' );
	var percentage = -( 100 /...