hammerjs
Version:
A javascript library for multi-touch gestures
218 lines (185 loc) • 8.14 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta name="msapplication-tap-highlight" content="no"/>
<link rel="stylesheet" href="assets/style.css">
<title>Hammer.js</title>
<style>
.container {
max-width: 900px;
margin: 0 auto;
}
.panes.wrapper {
max-height: 400px;
max-width: 800px;
background: #666;
margin: 40px auto;
}
.panes {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.pane {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
text-align: center;
font: bold 60px/250px 'Open Sans', Helvetica, Arial, sans-serif;
color: #fff;
}
.panes.animate > .pane {
transition: all .3s;
-webkit-transition: all .3s;
}
</style>
</head>
<body>
<div class="panes wrapper">
<div class="pane bg1">
<div class="panes">
<div class="pane" style="background: rgba(0,0,0,0);">1.1</div>
<div class="pane" style="background: rgba(0,0,0,.2);">1.2</div>
<div class="pane" style="background: rgba(0,0,0,.4);">1.3</div>
<div class="pane" style="background: rgba(0,0,0,.6);">1.4</div>
<div class="pane" style="background: rgba(0,0,0,.8);">1.5</div>
</div>
</div>
<div class="pane bg2">
<div class="panes">
<div class="pane" style="background: rgba(0,0,0,0);">2.1</div>
<div class="pane" style="background: rgba(0,0,0,.2);">2.2</div>
<div class="pane" style="background: rgba(0,0,0,.4);">2.3</div>
<div class="pane" style="background: rgba(0,0,0,.6);">2.4</div>
<div class="pane" style="background: rgba(0,0,0,.8);">2.5</div>
</div>
</div>
<div class="pane bg3">
<div class="panes">
<div class="pane" style="background: rgba(0,0,0,0);">3.1</div>
<div class="pane" style="background: rgba(0,0,0,.2);">3.2</div>
<div class="pane" style="background: rgba(0,0,0,.4);">3.3</div>
<div class="pane" style="background: rgba(0,0,0,.6);">3.4</div>
<div class="pane" style="background: rgba(0,0,0,.8);">3.5</div>
</div>
</div>
<div class="pane bg4">
<div class="panes">
<div class="pane" style="background: rgba(0,0,0,0);">4.1</div>
<div class="pane" style="background: rgba(0,0,0,.2);">4.2</div>
<div class="pane" style="background: rgba(0,0,0,.4);">4.3</div>
<div class="pane" style="background: rgba(0,0,0,.6);">4.4</div>
<div class="pane" style="background: rgba(0,0,0,.8);">4.5</div>
</div>
</div>
<div class="pane bg5">
<div class="panes">
<div class="pane" style="background: rgba(0,0,0,0);">5.1</div>
<div class="pane" style="background: rgba(0,0,0,.2);">5.2</div>
<div class="pane" style="background: rgba(0,0,0,.4);">5.3</div>
<div class="pane" style="background: rgba(0,0,0,.6);">5.4</div>
<div class="pane" style="background: rgba(0,0,0,.8);">5.5</div>
</div>
</div>
</div>
<div class="container">
<h1>Nested Pan recognizers</h1>
<p>Nested recognizers are possible with some threshold and with use of <code>requireFailure()</code>.</p>
</div>
<script src="../../hammer.js"></script>
<script>
var reqAnimationFrame = (function() {
return window[Hammer.prefixed(window, "requestAnimationFrame")] || function(callback) {
setTimeout(callback, 1000 / 60);
}
})();
function dirProp(direction, hProp, vProp) {
return (direction & Hammer.DIRECTION_HORIZONTAL) ? hProp : vProp
}
/**
* Carousel
* @param container
* @param direction
* @constructor
*/
function HammerCarousel(container, direction) {
this.container = container;
this.direction = direction;
this.panes = Array.prototype.slice.call(this.container.children, 0);
this.containerSize = this.container[dirProp(direction, 'offsetWidth', 'offsetHeight')];
this.currentIndex = 0;
this.hammer = new Hammer.Manager(this.container);
this.hammer.add(new Hammer.Pan({ direction: this.direction, threshold: 10 }));
this.hammer.on("panstart panmove panend pancancel", Hammer.bindFn(this.onPan, this));
this.show(this.currentIndex);
}
HammerCarousel.prototype = {
/**
* show a pane
* @param {Number} showIndex
* @param {Number} [percent] percentage visible
* @param {Boolean} [animate]
*/
show: function(showIndex, percent, animate){
showIndex = Math.max(0, Math.min(showIndex, this.panes.length - 1));
percent = percent || 0;
var className = this.container.className;
if(animate) {
if(className.indexOf('animate') === -1) {
this.container.className += ' animate';
}
} else {
if(className.indexOf('animate') !== -1) {
this.container.className = className.replace('animate', '').trim();
}
}
var paneIndex, pos, translate;
for (paneIndex = 0; paneIndex < this.panes.length; paneIndex++) {
pos = (this.containerSize / 100) * (((paneIndex - showIndex) * 100) + percent);
if(this.direction & Hammer.DIRECTION_HORIZONTAL) {
translate = 'translate3d(' + pos + 'px, 0, 0)';
} else {
translate = 'translate3d(0, ' + pos + 'px, 0)'
}
this.panes[paneIndex].style.transform = translate;
this.panes[paneIndex].style.mozTransform = translate;
this.panes[paneIndex].style.webkitTransform = translate;
}
this.currentIndex = showIndex;
},
/**
* handle pan
* @param {Object} ev
*/
onPan : function (ev) {
var delta = dirProp(this.direction, ev.deltaX, ev.deltaY);
var percent = (100 / this.containerSize) * delta;
var animate = false;
if (ev.type == 'panend' || ev.type == 'pancancel') {
if (Math.abs(percent) > 20 && ev.type == 'panend') {
this.currentIndex += (percent < 0) ? 1 : -1;
}
percent = 0;
animate = true;
}
this.show(this.currentIndex, percent, animate);
}
};
// the horizontal pane scroller
var outer = new HammerCarousel(document.querySelector(".panes.wrapper"), Hammer.DIRECTION_HORIZONTAL);
// each pane should contain a vertical pane scroller
Hammer.each(document.querySelectorAll(".pane .panes"), function(container) {
// setup the inner scroller
var inner = new HammerCarousel(container, Hammer.DIRECTION_VERTICAL);
// only recognize the inner pan when the outer is failing.
// they both have a threshold of some px
outer.hammer.get('pan').requireFailure(inner.hammer.get('pan'));
});
</script>
</body>
</html>