Commit d6121f4a authored by nextime's avatar nextime

remove old hammer.js

parent 1bff3b6e
{
"json": "bower.json"
}
\ No newline at end of file
# ide
.idea
.iml
# node
lib-cov
*.seed
*.log
*.csv
*.dat
*.out
*.pid
*.gz
pids
logs
results
npm-debug.log
node_modules
\ No newline at end of file
language: node_js
node_js:
- 0.8
before_script:
- npm install -g grunt-cli
\ No newline at end of file
module.exports = (grunt) ->
grunt.initConfig
pkg: grunt.file.readJSON 'package.json'
# meta options
meta:
banner: '
/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n
* <%= pkg.homepage %>\n
*\n
* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> <<%= pkg.author.email %>>;\n
* Licensed under the <%= _.pluck(pkg.licenses, "type").join(", ") %> license */\n\n'
# concat src files
concat:
options:
separator: '\n\n'
dist:
options:
banner: '<%= meta.banner %>'
src: [
'src/intro.js'
'src/core.js'
'src/setup.js'
'src/instance.js'
'src/event.js'
'src/pointerevent.js'
'src/utils.js'
'src/detection.js'
'src/gestures.js'
'src/outro.js']
dest: 'dist/hammer.js'
distjquery:
src: [
'dist/hammer.js'
'plugins/jquery.hammer.js']
dest: 'dist/jquery.hammer.js'
# minify the sourcecode
uglify:
options:
banner: '<%= meta.banner %>'
dist:
files:
'dist/hammer.min.js': ['dist/hammer.js']
'dist/jquery.hammer.min.js': ['dist/jquery.hammer.js']
# check for optimisations and errors
jshint:
options:
curly: true
expr: true
newcap: true
quotmark: 'single'
regexdash: true
trailing: true
undef: true
unused: true
maxerr: 100
eqnull: true
sub: false
browser: true
node: true
globals:
define: false
dist:
src: ['dist/hammer.js']
distjquery:
options:
globals:
Hammer: true,
define: false
src: ['dist/jquery.hammer.js']
# watch for changes
watch:
scripts:
files: ['src/*.js','plugins/*.js']
tasks: ['concat']
options:
interrupt: true
# simple node server
connect:
server:
options:
hostname: "0.0.0.0"
# tests
qunit:
all: ['tests/**/*.html']
# release
tagrelease:
file: 'package.json'
commit: true
message: 'Release %version%'
prefix: 'v'
annotate: false
# Load tasks
grunt.loadNpmTasks 'grunt-contrib-concat'
grunt.loadNpmTasks 'grunt-contrib-uglify'
grunt.loadNpmTasks 'grunt-contrib-watch'
grunt.loadNpmTasks 'grunt-contrib-jshint'
grunt.loadNpmTasks 'grunt-contrib-connect'
grunt.loadNpmTasks 'grunt-contrib-qunit'
grunt.loadNpmTasks 'grunt-tagrelease'
# Default task(s).
grunt.registerTask 'default', ['connect','watch']
grunt.registerTask 'test', ['jshint','qunit']
grunt.registerTask 'build', ['concat','uglify','test']
\ No newline at end of file
Copyright (C) 2013 by Jorik Tangelder (Eight Media)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
\ No newline at end of file
# Hammer.js
[![Build Status](https://travis-ci.org/EightMedia/hammer.js.png)](https://travis-ci.org/EightMedia/hammer.js/)
### A javascript library for multi-touch gestures
> I told you, homeboy /
> You *CAN* touch this /
> Yeah, that's how we living and you know /
> You *CAN* touch this
## Features
- Detects Tap, DoubleTap, Swipe, Drag, Pinch, and Rotate gestures
- DOM Events
- Debug plugins
- Custom gestures
- Chainable instance methods
- jQuery plugin with events delegation (the on/off methods) available
- IE8 and older compatibility with jQuery plugin
- AMD support (RequireJS)
- Unit tests
- Option to disable mouse support, so only for touch and pen input.
## Getting Started
See the [Wiki on GitHub](https://github.com/EightMedia/hammer.js/wiki) for documentation.
## Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style.
Add unit tests for any new or changed functionality. Lint and test your code using grunt.
Please don't commit the dist versions with your changes, only the changed source files.
## Further notes
Created by [Jorik Tangelder](http://twitter.com/jorikdelaporik) and developed at [Eight Media](http://www.eight.nl/) in Arnhem, the Netherlands.
It's recommend to listen to [this loop](http://soundcloud.com/eightmedia/hammerhammerhammer) while using hammer.js.
{
"name": "hammerjs",
"version": "1.0.6dev",
"main": ["dist/jquery.hammer.js"]
}
{
"name": "hammerjs",
"version": "1.0.6dev",
"main": "dist/jquery.hammer.js",
"scripts": [
"dist/jquery.hammer.js"
]
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
The demo's are for demoing only, and not production ready. Hammer.js is not a component library.
\ No newline at end of file
This diff is collapsed.
// google analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30289566-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Hammer.js</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<style>
html, body, #carousel, #carousel ul, #carousel li {
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
#debug {
position: fixed;
background: #fff;
padding: 5px;
color: #000;
top: 0;
left: 0;
z-index: 1337;
}
#carousel {
background: silver;
overflow: hidden;
width:100%;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-transform-style: preserve-3d;
}
#carousel ul.animate {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#carousel ul {
transform: translate3d(0%,0,0) scale3d(1,1,1);
-o-transform: translate3d(0%,0,0) scale3d(1,1,1);
-ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
-moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
-webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
#carousel ul {
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
box-shadow: 0 0 20px rgba(0,0,0,.2);
position: relative;
}
#carousel li {
float: left;
overflow: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,0);
}
#carousel li h2 {
color: #fff;
font-size: 30px;
text-align: center;
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-shadow: -1px -1px 0 rgba(0,0,0,.2);
}
#carousel li.pane1 { background: #42d692; }
#carousel li.pane2 { background: #4986e7; }
#carousel li.pane3 { background: #d06b64; }
#carousel li.pane4 { background: #cd74e6; }
#carousel li.pane5 { background: #9fe1e7; }
</style>
</head>
<body>
<!--<div id="debug">Log</div>-->
<div id="carousel">
<ul>
<li class="pane1"><h2>Swipe...</h2></li>
<li class="pane2"><h2>...or drag...</h2></li>
<li class="pane3"><h2>...or swipe...</h2></li>
<li class="pane4"><h2>..or drag...</h2></li>
<li class="pane5"><h2>Dit is het einde!</h2></li>
</ul>
</div>
<!-- jQuery is just for the demo! Hammer.js works without jQuery :-) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/js/modernizr.js"></script>
<script src="../dist/jquery.hammer.js"></script>
<script>
var debug_el = $("#debug");
function debug(text) {
debug_el.text(text);
}
/**
* requestAnimationFrame and cancel polyfill
*/
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
/**
* super simple carousel
* animation between panes happens with css transitions
*/
function Carousel(element)
{
var self = this;
element = $(element);
var container = $(">ul", element);
var panes = $(">ul>li", element);
var pane_width = 0;
var pane_count = panes.length;
var current_pane = 0;
/**
* initial
*/
this.init = function() {
setPaneDimensions();
$(window).on("load resize orientationchange", function() {
setPaneDimensions();
//updateOffset();
})
};
/**
* set the pane dimensions and scale the container
*/
function setPaneDimensions() {
pane_width = element.width();
panes.each(function() {
$(this).width(pane_width);
});
container.width(pane_width*pane_count);
};
/**
* show pane by index
* @param {Number} index
*/
this.showPane = function( index ) {
// between the bounds
index = Math.max(0, Math.min(index, pane_count-1));
current_pane = index;
var offset = -((100/pane_count)*current_pane);
setContainerOffset(offset, true);
};
function setContainerOffset(percent, animate) {
container.removeClass("animate");
if(animate) {
container.addClass("animate");
}
if(Modernizr.csstransforms3d) {
container.css("transform", "translate3d("+ percent +"%,0,0) scale3d(1,1,1)");
}
else if(Modernizr.csstransforms) {
container.css("transform", "translate("+ percent +"%,0)");
}
else {
var px = ((pane_width*pane_count) / 100) * percent;
container.css("left", px+"px");
}
}
this.next = function() { return this.showPane(current_pane+1, true); };
this.prev = function() { return this.showPane(current_pane-1, true); };
function handleHammer(ev) {
console.log(ev);
// disable browser scrolling
ev.gesture.preventDefault();
switch(ev.type) {
case 'dragright':
case 'dragleft':
// stick to the finger
var pane_offset = -(100/pane_count)*current_pane;
var drag_offset = ((100/pane_width)*ev.gesture.deltaX) / pane_count;
// slow down at the first and last pane
if((current_pane == 0 && ev.gesture.direction == Hammer.DIRECTION_RIGHT) ||
(current_pane == pane_count-1 && ev.gesture.direction == Hammer.DIRECTION_LEFT)) {
drag_offset *= .4;
}
setContainerOffset(drag_offset + pane_offset);
break;
case 'swipeleft':
self.next();
ev.gesture.stopDetect();
break;
case 'swiperight':
self.prev();
ev.gesture.stopDetect();
break;
case 'release':
// more then 50% moved, navigate
if(Math.abs(ev.gesture.deltaX) > pane_width/2) {
if(ev.gesture.direction == 'right') {
self.prev();
} else {
self.next();
}
}
else {
self.showPane(current_pane, true);
}
break;
}
}
element.hammer({ drag_lock_to_axis: true })
.on("release dragleft dragright swipeleft swiperight", handleHammer);
}
var carousel = new Carousel("#carousel");
carousel.init();
</script>
<script src="assets/js/ga.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Hammer.js</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<style>
h1 {
margin: 30px;
text-align: center;
}
.drag {
position: absolute;
left: 100px;
top: 100px;
background: #9fe1e7;
border-radius: 50px;
width: 100px;
height: 100px;
}
.drag1 { background: #42d692; }
.drag2 { background: #4986e7; }
.drag3 { background: #d06b64; }
.drag4 { background: #cd74e6; }
.drag5 { background: #9fe1e7; }
</style>
</head>
<body>
<h1>Drag the balls!</h1>
<div class="drag drag1"></div>
<div class="drag drag2"></div>
<div class="drag drag3"></div>
<div class="drag drag4"></div>
<div class="drag drag5"></div>
<!-- jQuery is just for the demo! Hammer.js works without jQuery :-) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/js/modernizr.js"></script>
<script src="../dist/jquery.hammer.js"></script>
<script>
$(".drag")
.hammer({ drag_max_touches:0})
.on("touch drag", function(ev) {
var touches = ev.gesture.touches;
ev.gesture.preventDefault();
for(var t=0,len=touches.length; t<len; t++) {
var target = $(touches[t].target);
target.css({
zIndex: 1337,
left: touches[t].pageX-50,
top: touches[t].pageY-50
});
}
});
</script>
<script src="assets/js/ga.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Hammer.js</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<style>
body {
padding: 30px;
}
#center-pos {
position: absolute;
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 30px;
border: solid 1px rgba(0,0,0,.3);
margin-left: -16px;
margin-top: -16px;
pointer-events: none;
}
.sidebar {
float: right;
width: 150px;
font-size: 12px;
}
.sidebar li {
overflow: hidden;
text-overflow: ellipsis;
}
.events li.active { background: lightgreen; }
.properties li { white-space: nowrap; }
.properties span { margin-left: 5px; }
.hitarea {
background: aliceblue;
padding: 20px;
border: solid #ccc 1px;
}
.hitarea-nested {
background: lightblue;
}
@media screen and (max-width:640px) {
body {
padding: 10px;
}
.sidebar {
float: none;
width: auto;
margin-bottom: 25px;
}
.sidebar li {
display: inline-block;
width: 30%;
}
.sidebar li.property-gesture {
position: fixed;
right: 0;
top: 0;
background: lightgreen;
padding: 1px 4px;
width: auto;
}
}
@media screen and (max-width:480px) {
.sidebar li {
width: 49%;
}
}
</style>
</head>
<body>
<p class="alert"><strong>Press shift on your desktop for multitouch.</strong></p>
<div class="sidebar well well-small">
<h4>Events</h4>
<label class="checkbox">
<input type="checkbox" checked id="prevent-default"> block browser behavior (preventDefault)
</label>
<ul class="unstyled events" id="events-list">
<li>touch</li>
<li>release</li>
<li>hold</li>
<li>tap</li>
<li>doubletap</li>
<li>dragstart</li>
<li>drag</li>
<li>dragend</li>
<li>dragleft</li>
<li>dragright</li>
<li>dragup</li>
<li>dragdown</li>
<li>swipe</li>
<li>swipeleft</li>
<li>swiperight</li>
<li>swipeup</li>
<li>swipedown</li>
<li>transformstart</li>
<li>transform</li>
<li>transformend</li>
<li>rotate</li>
<li>pinch</li>
<li>pinchin</li>
<li>pinchout</li>
</ul>
<h4>EventData</h4>
<ul class="unstyled properties">
<li class="property-gesture"><strong>gesture</strong> <span id="log-prop-gesture"></span></li>
<li><strong>touches</strong> <span id="log-prop-touches"></span></li>
<li><strong>pointerType</strong> <span id="log-prop-pointerType"></span></li>
<li><strong>center</strong> <span id="log-prop-center"></span></li>
<li><strong>angle</strong> <span id="log-prop-angle"></span>&deg;</li>
<li><strong>direction</strong> <span id="log-prop-direction"></span></li>
<li><strong>distance</strong> <span id="log-prop-distance"></span>px</li>
<li><strong>deltaTime</strong> <span id="log-prop-deltaTime"></span>ms</li>
<li><strong>deltaX</strong> <span id="log-prop-deltaX"></span>px</li>
<li><strong>deltaY</strong> <span id="log-prop-deltaY"></span>px</li>
<li><strong>velocityX</strong> <span id="log-prop-velocityX"></span></li>
<li><strong>velocityY</strong> <span id="log-prop-velocityY"></span></li>
<li><strong>scale</strong> <span id="log-prop-scale"></span></li>
<li><strong>rotation</strong> <span id="log-prop-rotation"></span>&deg;</li>
<li><strong>target</strong> <span id="log-prop-target"></span></li>
</ul>
</div>
<div id="hitarea" class="hitarea">
<h3>Hitarea</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Praesent at erat felis.</a> Donec ornare ligula non nibh vulputate sollicitudin. Cras sodales eros a velit pulvinar vehicula. In sed lorem lectus, vel dapibus nulla. Mauris lacus massa, volutpat vel suscipit at, lacinia condimentum libero. Praesent nec metus ligula. Morbi porttitor rhoncus mattis.
</p>
<p>
Donec nisi ante, eleifend vitae luctus vel, auctor et nibh. Donec scelerisque urna id massa ultricies in facilisis purus rutrum.
Proin tristique luctus leo vitae feugiat. Donec sit amet ipsum mi, nec bibendum sem. Nullam sodales aliquet venenatis.
</p>
</div>
<!--
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at erat felis. Donec ornare ligula non nibh vulputate sollicitudin. Cras sodales eros a velit pulvinar vehicula. In sed lorem lectus, vel dapibus nulla. Mauris lacus massa, volutpat vel suscipit at, lacinia condimentum libero. Praesent nec metus ligula. Morbi porttitor rhoncus mattis.
</p>
<p>
Donec adipiscing porttitor risus, vel commodo ante tincidunt vitae. Fusce lacinia augue non sapien volutpat facilisis. Integer varius faucibus metus, sit amet viverra justo venenatis id. Nam ornare rhoncus tempus. Nulla eleifend, mauris quis auctor bibendum, mi purus interdum sapien, id fringilla nunc mi ut tortor. Sed pretium egestas augue, eget volutpat ipsum egestas nec. Aliquam a elementum justo. Suspendisse tempus, nisi id tincidunt vulputate, nunc sem scelerisque risus, molestie facilisis lacus velit et nunc. Phasellus sed convallis libero. Phasellus sit amet neque non arcu pellentesque laoreet id sed ligula. Donec gravida laoreet condimentum. Ut ornare dignissim tempus. Mauris aliquet tincidunt turpis, quis pulvinar nisl pulvinar id. Sed in gravida ligula.
</p>
<p>
Ut molestie, lectus vel pharetra pharetra, nunc libero interdum ligula, eget vulputate purus nulla sit amet turpis. Aliquam volutpat porttitor erat ac volutpat. Donec ligula elit, tincidunt non congue id, iaculis feugiat sem. Phasellus vestibulum mi id enim interdum imperdiet. Ut dolor ante, tempus sit amet ornare a, faucibus sed massa. Curabitur adipiscing, mauris eget vestibulum lacinia, nisl lorem viverra velit, vitae facilisis urna erat et est. Pellentesque fringilla metus libero, at accumsan nisl. Etiam nisl lorem, placerat ut tristique vel, luctus id nulla. Sed vel nunc ut justo volutpat eleifend ac nec risus. Praesent at viverra tellus. Maecenas semper pellentesque quam, et bibendum nisl eleifend sit amet. Donec sed elit eget magna dictum dignissim.
</p>
-->
<h2>Event log</h2>
<pre id="event-log"></pre>
<!-- jQuery is just for the demo! Hammer.js works without jQuery :-) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="../dist/hammer.js"></script>
<script src="../plugins/hammer.fakemultitouch.js"></script>
<script src="../plugins/hammer.showtouches.js"></script>
<!--[if !IE]> -->
<script>
Hammer.plugins.showTouches();
</script>
<!-- <![endif]-->
<script>
Hammer.plugins.fakeMultitouch();
function getEl(id) {
return document.getElementById(id);
}
var log_elements = {};
var prevent_scroll_drag = true;
$("#prevent-default").click(function() {
hammertime.options.prevent_default = this.checked;
});
function getLogElement(type, name) {
var el = log_elements[type + name];
if(!el) {
return log_elements[type + name] = getEl("log-"+ type +"-"+ name);
}
return el;
}
// log properties
var properties = ['gesture','center','deltaTime','angle','direction',
'distance','deltaX','deltaY','velocityX','velocityY', 'pointerType',
'scale','rotation','touches','target'];
function logEvent(ev) {
if(!ev.gesture) {
return;
}
// add to the large event log at the bottom of the page
var log = [this.id, ev.type];
//event_log.innerHTML = log.join(" - ") +"\n" + event_log.innerHTML;
// highlight gesture
var event_el = getLogElement('gesture', ev.type);
event_el.className = "active";
for(var i= 0,len=properties.length; i<len; i++) {
var prop = properties[i];
var value = ev.gesture[prop];
switch(prop) {
case 'center':
value = value.pageX +"x"+ value.pageY;
break;
case 'gesture':
value = ev.type;
break;
case 'target':
value = ev.gesture.target.tagName;
break;
case 'touches':
value = ev.gesture.touches.length;
break;
}
getLogElement('prop', prop).innerHTML = value;
}
}
// get all the events
var all_events = [];
$("#events-list li").each(function() {
var li = $(this);
var type = li.text();
li.attr("id", "log-gesture-"+type);
all_events.push(type);
});
// start!
var hammertime = Hammer(getEl('hitarea'), {
prevent_default: true,
no_mouseevents: true
})
.on(all_events.join(" "), logEvent);
var debug_el = getEl('event-log');
function debug(val) {
debug_el.innerHTML = val.toString();
}
</script>
<script src="assets/js/ga.js" async></script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Hammer.js</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<style>
body { padding: 30px; }
body.toggle {
background: silver;
}
</style>
</head>
<body>
<h1>FastClick implementation</h1>
<p>Skip the ~300ms delay of an click.</p>
<a id="fast-click" class="btn btn-success btn-large" href="#">Fast click</a>
<a id="fast-click-jquery" class="btn btn-success btn-large" href="#">Fast click jQuery</a>
<a id="normal-click" class="btn btn-large" href="#">Normal click</a>
<!-- jQuery is just for the demo! Hammer.js works without jQuery :-) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="../dist/hammer.js"></script>
<script>
function getEl(id) {
return document.getElementById(id);
}
function toggleBody() {
document.body.className = (document.body.className == 'toggle') ? '' : 'toggle';
}
/**
* simple fastclick
* @param el
* @param handler
*/
function fastClick(el, handler) {
el.addEventListener("click", function(ev) {
ev.preventDefault();
}, false);
Hammer(el).on("tap doubletap", handler);
}
/**
* small jQuery plugin
* @param handler
* @return {*}
*/
jQuery.fn.fastClick = function(handler) {
this.click(function(ev) { ev.preventDefault(); });
Hammer(this[0]).on("tap doubletap", handler);
return this;
};
// demo the methods
var fast = getEl('fast-click');
var $fast = $('#fast-click-jquery');
var normal = getEl('normal-click');
fastClick(fast, toggleBody);
$fast.fastClick(toggleBody);
normal.addEventListener("click", function(ev) {
toggleBody();
ev.preventDefault();
}, false);
</script>
<script src="assets/js/ga.js"></script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Hammer.js</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<style>
@keyframes highlight {
0%{ background: rgba(255, 240, 140, 1); }
100%{ background: rgba(255, 240, 140, 0); }
}
@-moz-keyframes highlight{
0%{ background: rgba(255, 240, 140, 1); }
100%{ background: rgba(255, 240, 140, 0); }
}
@-webkit-keyframes highlight{
0%{ background: rgba(255, 240, 140, 1); }
100%{ background: rgba(255, 240, 140, 0); }
}
body { padding: 0; }
#container {
padding: 20px;
}
.highlight {
background: #fff68d;
}
.hero-unit {
padding: 0;
}
.toucharea {
padding: 30px;
}
</style>
</head>
<body>
<div id="container">
<div class="page-header">
<h1>jquery.hammer.js</h1>
</div>
<div class="hero-unit">
<div class="toucharea">
<h1>Touch me</h1>
<p>The tap event will be fired. Notice in the sourcecode that event delegation is also supported.<br>
In the console you can see the event data.</p>
<h4>List items with stopPropagation</h4>
<ul id="items">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
<p>
<a href="#" id="add-list-item" class="btn btn-success">Add list item</a>
</p>
</div>
</div>
<pre style='color:#000000;background:#ffffff;'><span style='color:#7f0055; font-weight:bold; '>var</span> hammertime = $(<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>.toucharea</span><span style='color:#2a00ff; '>"</span>).hammer();
<span style='color:#3f7f59; '>// the whole area</span>
hammertime.on(<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>touch</span><span style='color:#2a00ff; '>"</span>, <span style='color:#7f0055; font-weight:bold; '>function</span>(ev) {
$(<span style='color:#7f0055; font-weight:bold; '>this</span>).highlight();
});
<span style='color:#3f7f59; '>// on elements in the toucharea, with a stopPropagation</span>
hammertime.on(<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>touch</span><span style='color:#2a00ff; '>"</span>, <span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>li</span><span style='color:#2a00ff; '>"</span>, <span style='color:#7f0055; font-weight:bold; '>function</span>(ev) {
$(<span style='color:#7f0055; font-weight:bold; '>this</span>).highlight();
ev.stopPropagation();
});
<span style='color:#3f7f59; '>// on dynamic items</span>
$(<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>#add-list-item</span><span style='color:#2a00ff; '>"</span>).on(<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>touch</span><span style='color:#2a00ff; '>"</span>, <span style='color:#7f0055; font-weight:bold; '>function</span>(ev) {
$(<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>#items</span><span style='color:#2a00ff; '>"</span>).append(<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>&lt;li>Dynamic added listitem&lt;/li></span><span style='color:#2a00ff; '>"</span>);
ev.gesture.preventDefault();
ev.stopPropagation();
});
<span style='color:#3f7f59; '>// simple helper function</span>
$.fn.highlight = <span style='color:#7f0055; font-weight:bold; '>function</span>(options) {
options = $.extend({},{
className: <span style='color:#2a00ff; '>'highlight'</span>,
delay: 100
}, options);
<span style='color:#7f0055; font-weight:bold; '>return</span> <span style='color:#7f0055; font-weight:bold; '>this</span>.each(<span style='color:#7f0055; font-weight:bold; '>function</span>(){
(<span style='color:#7f0055; font-weight:bold; '>function</span>(elem, cName, time){
setTimeout(<span style='color:#7f0055; font-weight:bold; '>function</span>() {
elem.removeClass(cName);
}, time);
elem.addClass(cName);
})($(<span style='color:#7f0055; font-weight:bold; '>this</span>), options.className, options.delay);
});
}
</pre>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="../dist/jquery.hammer.min.js"></script>
<script id="demoScript">
var hammertime = $(".toucharea").hammer();
console.log(hammertime);
// the whole area
hammertime.on("touch", function(ev) {
if(window.console) { console.log(ev); }
$(this).highlight();
});
// on elements in the toucharea, with a stopPropagation
hammertime.on("touch", "li", function(ev) {
if(window.console) { console.log('nested', ev); }
$(this).highlight();
ev.stopPropagation();
});
// on dynamic items
$("#add-list-item").on("touch", function(ev) {
$("#items").append("<li>Dynamic added listitem</li>");
ev.gesture.preventDefault();
ev.stopPropagation();
});
$.fn.highlight = function(options) {
options = $.extend({},{
className: 'highlight',
delay: 100
}, options);
return this.each(function(){
(function(elem, cName, time){
setTimeout(function() {
elem.removeClass(cName);
}, time);
elem.addClass(cName);
})($(this), options.className, options.delay);
});
}
</script>
<script src="assets/js/ga.js"></script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
var hammertime = require('../dist/hammer.js');
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
{
"name": "hammerjs",
"title": "Hammer.JS",
"description": "A javascript library for multi-touch gestures",
"version": "1.0.6dev",
"homepage": "http://eightmedia.github.com/hammer.js",
"licenses": [{
"type": "MIT",
"url": "https://github.com/eightmedia/hammer.js/blob/master/LICENSE"
}],
"keywords": ["touch","gestures","ender"],
"author": {
"name": "Jorik Tangelder",
"email": "j.tangelder@gmail.com"
},
"repository": {
"type": "git",
"url": "git://github.com/eightmedia/hammer.js.git"
},
"bugs": {
"url": "https://github.com/eightmedia/hammer.js/issues"
},
"dependencies": {},
"devDependencies": {
"grunt": "0.4.x",
"grunt-contrib-connect": "0.1.x",
"grunt-contrib-concat": "0.1.x",
"grunt-contrib-uglify": "0.1.x",
"grunt-contrib-jshint": "0.1.x",
"grunt-contrib-watch": "0.2.x",
"grunt-contrib-qunit": "0.2.x",
"grunt-tagrelease": "0.1.x",
"faketouches": "0.0.x"
},
"main": "dist/hammer.js",
"engines": {
"node": ">=0.8.0"
},
"scripts": {
"test": "grunt test"
}
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
(function(window, undefined) {
'use strict';
\ No newline at end of file
// Based off Lo-Dash's excellent UMD wrapper (slightly modified) - https://github.com/bestiejs/lodash/blob/master/lodash.js#L5515-L5543
// some AMD build optimizers, like r.js, check for specific condition patterns like the following:
if(typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
// define as an anonymous module
define(function() {
return Hammer;
});
}
// check for `exports` after `define` in case a build optimizer adds an `exports` object
else if(typeof module === 'object' && typeof module.exports === 'object') {
module.exports = Hammer;
}
else {
window.Hammer = Hammer;
}
})(this);
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment