yeet
This commit is contained in:
Yamozha
42
node_modules/@egjs/hammerjs/tests/manual/assets/style.css
generated
vendored
Normal file
42
node_modules/@egjs/hammerjs/tests/manual/assets/style.css
generated
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
|
||||
|
||||
*, *:after, *:before {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
background: #eee;
|
||||
font: 13px/1.5em 'Open Sans', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4986e7;
|
||||
}
|
||||
|
||||
.bg1, .green { background: #42d692; }
|
||||
.bg2, .blue { background: #4986e7; }
|
||||
.bg3, .red { background: #d06b64; }
|
||||
.bg4, .purple { background: #cd74e6; }
|
||||
.bg5, .azure { background: #9fe1e7; }
|
||||
|
||||
body {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.clear { clear: both; }
|
||||
18
node_modules/@egjs/hammerjs/tests/manual/compute_touch_action.html
generated
vendored
Normal file
18
node_modules/@egjs/hammerjs/tests/manual/compute_touch_action.html
generated
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
Open the inspector and play a bit with the touchAction property.
|
||||
<script src="../../dist/hammer.min.js"></script>
|
||||
<script>
|
||||
var mc = new Hammer(document.body);
|
||||
mc.add(new Hammer.Swipe({ direction: Hammer.DIRECTION_HORIZONTAL }));
|
||||
mc.add(new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL }));
|
||||
|
||||
console.log(document.body.style.touchAction)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
51
node_modules/@egjs/hammerjs/tests/manual/input.html
generated
vendored
Normal file
51
node_modules/@egjs/hammerjs/tests/manual/input.html
generated
vendored
Normal file
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="hit" class="bg1" style="padding: 30px; height: 200px;">
|
||||
</div>
|
||||
|
||||
<pre id="debug" style="overflow:hidden; background: #eee; padding: 15px;"></pre>
|
||||
|
||||
<pre id="log" style="overflow:hidden;"></pre>
|
||||
</div>
|
||||
<script src="../../dist/hammer.js"></script>
|
||||
<script>
|
||||
|
||||
Object.prototype.toDirString = function() {
|
||||
var output = [];
|
||||
for(var key in this) {
|
||||
if(this.hasOwnProperty(key)) {
|
||||
var value = this[key];
|
||||
if(Array.isArray(value)) {
|
||||
value = "Array("+ value.length +"):"+ value;
|
||||
} else if(value instanceof HTMLElement) {
|
||||
value = value +" ("+ value.outerHTML.substring(0, 50) +"...)";
|
||||
}
|
||||
output.push(key +": "+ value);
|
||||
}
|
||||
}
|
||||
return output.join("\n")
|
||||
};
|
||||
|
||||
var el = document.querySelector("#hit");
|
||||
var log = document.querySelector("#log");
|
||||
var debug = document.querySelector("#debug");
|
||||
|
||||
var mc = new Hammer(el);
|
||||
mc.get('pinch').set({ enable: true });
|
||||
|
||||
mc.on("hammer.input", function(ev) {
|
||||
debug.innerHTML = [ev.srcEvent.type, ev.pointers.length, ev.isFinal, ev.deltaX, ev.deltaY].join("<br>");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
61
node_modules/@egjs/hammerjs/tests/manual/log.html
generated
vendored
Normal file
61
node_modules/@egjs/hammerjs/tests/manual/log.html
generated
vendored
Normal file
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<title>Hammer.js</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div id="hit" class="bg1" style="padding: 30px;">
|
||||
<span id="target" class="bg5" style="display: block; height: 100px;"></span>
|
||||
</div>
|
||||
|
||||
<pre id="debug" style="overflow:hidden; background: #eee; padding: 15px;"></pre>
|
||||
|
||||
<pre id="log" style="overflow:hidden;"></pre>
|
||||
|
||||
</div>
|
||||
<script src="../../dist/hammer.min.js"></script>
|
||||
<script>
|
||||
|
||||
Object.prototype.toDirString = function() {
|
||||
var output = [];
|
||||
for(var key in this) {
|
||||
if(this.hasOwnProperty(key)) {
|
||||
var value = this[key];
|
||||
if(Array.isArray(value)) {
|
||||
value = "Array("+ value.length +"):"+ value;
|
||||
} else if(value instanceof HTMLElement) {
|
||||
value = value +" ("+ value.outerHTML.substring(0, 50) +"...)";
|
||||
}
|
||||
output.push(key +": "+ value);
|
||||
}
|
||||
}
|
||||
return output.join("\n")
|
||||
};
|
||||
|
||||
|
||||
var el = document.querySelector("#hit");
|
||||
var log = document.querySelector("#log");
|
||||
var debug = document.querySelector("#debug");
|
||||
|
||||
var mc = new Hammer(el);
|
||||
mc.get('pinch').set({ enable: true });
|
||||
mc.get('rotate').set({ enable: true });
|
||||
mc.on("swipe pan panstart panmove panend pancancel multipan press pressup pinch rotate tap doubletap",
|
||||
logGesture);
|
||||
|
||||
function DEBUG(str) {
|
||||
debug.textContent = str;
|
||||
}
|
||||
function logGesture(ev) {
|
||||
console.log(ev.timeStamp, ev.type, ev);
|
||||
log.textContent = ev.toDirString();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
73
node_modules/@egjs/hammerjs/tests/manual/multiple.html
generated
vendored
Normal file
73
node_modules/@egjs/hammerjs/tests/manual/multiple.html
generated
vendored
Normal file
@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<title>Hammer.js</title>
|
||||
<style>
|
||||
|
||||
#right,
|
||||
#left {
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#left { float: left; }
|
||||
#right { float: right; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<pre id="left" class="bg1"></pre>
|
||||
<pre id="right" class="bg5"></pre>
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
<h1>Multiple instances the same time</h1>
|
||||
<p>You can run multiple instances of Hammer on your page and they will recognize each completely isolated
|
||||
from each other. This makes it possible to build multi-user interfaces.</p>
|
||||
|
||||
</div>
|
||||
<script src="../../dist/hammer.min.js"></script>
|
||||
<script>
|
||||
|
||||
Object.prototype.toDirString = function() {
|
||||
var output = [];
|
||||
for(var key in this) {
|
||||
if(this.hasOwnProperty(key)) {
|
||||
var value = this[key];
|
||||
if(Array.isArray(value)) {
|
||||
value = "Array("+ value.length +"):"+ value;
|
||||
} else if(value instanceof HTMLElement) {
|
||||
value = value +" ("+ value.outerHTML.substring(0, 50) +"...)";
|
||||
}
|
||||
output.push(key +": "+ value);
|
||||
}
|
||||
}
|
||||
return output.join("\n")
|
||||
};
|
||||
|
||||
|
||||
function addHammer(el) {
|
||||
var mc = new Hammer(el, { multiUser: true });
|
||||
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
|
||||
mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
|
||||
mc.get('pinch').set({ enable: true });
|
||||
mc.get('rotate').set({ enable: true });
|
||||
|
||||
mc.on("swipe pan press pinch rotate tap doubletap", function (ev) {
|
||||
ev.preventDefault();
|
||||
el.innerText = ev.toDirString();
|
||||
});
|
||||
}
|
||||
|
||||
addHammer(document.querySelector("#left"));
|
||||
addHammer(document.querySelector("#right"));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
217
node_modules/@egjs/hammerjs/tests/manual/nested.html
generated
vendored
Normal file
217
node_modules/@egjs/hammerjs/tests/manual/nested.html
generated
vendored
Normal file
@ -0,0 +1,217 @@
|
||||
<!DOCTYPE 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="../../dist/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>
|
||||
100
node_modules/@egjs/hammerjs/tests/manual/simulator-googlemaps.html
generated
vendored
Normal file
100
node_modules/@egjs/hammerjs/tests/manual/simulator-googlemaps.html
generated
vendored
Normal file
@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<title>Hammer.js</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div id="maps" style="height: 500px; margin-bottom: 20px;"></div>
|
||||
|
||||
<h1>Gestures simulator</h1>
|
||||
<p>Used for unit-testing Hammer.js. To test it on the Google Maps view, you should open your
|
||||
<a href="https://developer.chrome.com/devtools/docs/mobile-emulation#emulate-touch-events">
|
||||
Inspector and emulate a touch-screen.</a>
|
||||
Or just open it on your touch-device.</p>
|
||||
<p>Currently, it only triggers touchEvents.</p>
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/hammer-simulator/index.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
|
||||
<script>
|
||||
|
||||
Simulator.events.touch.fakeSupport();
|
||||
|
||||
var el, map;
|
||||
var container = document.getElementById('maps');
|
||||
var program = [
|
||||
['pan', ['deltaX','deltaY']],
|
||||
['pinch', ['scale']],
|
||||
['tap', ['pos']],
|
||||
['swipe', ['deltaX','deltaY']],
|
||||
['pinch', ['pos','scale']],
|
||||
['pan', ['pos']],
|
||||
['rotate', ['pos','rotation']],
|
||||
['doubleTap', ['pos']],
|
||||
['pinchRotate', ['pos','scale','rotation']],
|
||||
];
|
||||
|
||||
function randomRange(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
function randomRangeInt(min, max) {
|
||||
return Math.round(randomRange(min, max));
|
||||
}
|
||||
|
||||
function gestureOption(name) {
|
||||
var max = map.getDiv().offsetWidth * .9;
|
||||
switch(name) {
|
||||
case 'deltaY':
|
||||
case 'deltaX':
|
||||
return randomRangeInt(10, max * .5);
|
||||
case 'pos':
|
||||
return [randomRangeInt(10, max), randomRangeInt(10, max)];
|
||||
case 'scale':
|
||||
return randomRange(.2, 2);
|
||||
case 'rotation':
|
||||
return randomRange(-180, 180);
|
||||
}
|
||||
}
|
||||
|
||||
function walkProgram(done) {
|
||||
var clone = [].concat(program);
|
||||
(function next() {
|
||||
if(clone.length) {
|
||||
var entry = clone.shift();
|
||||
var options = {};
|
||||
for(var i=0; i<entry[1].length; i++) {
|
||||
options[entry[1][i]] = gestureOption(entry[1][i]);
|
||||
}
|
||||
Simulator.gestures[entry[0]](el, options, next);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}());
|
||||
}
|
||||
|
||||
function startSimulator() {
|
||||
walkProgram(startSimulator);
|
||||
}
|
||||
|
||||
(function setupGoogleMaps() {
|
||||
map = new google.maps.Map(container, {
|
||||
zoom: 14,
|
||||
center: new google.maps.LatLng(51.98, 5.91)
|
||||
});
|
||||
|
||||
// collect the target element
|
||||
google.maps.event.addListenerOnce(map, 'idle', function(){
|
||||
el = container.childNodes[0].childNodes[0];
|
||||
startSimulator();
|
||||
});
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
118
node_modules/@egjs/hammerjs/tests/manual/simulator.html
generated
vendored
Normal file
118
node_modules/@egjs/hammerjs/tests/manual/simulator.html
generated
vendored
Normal file
@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<title>Hammer.js</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div id="hit" class="bg4" style="padding: 30px; height: 300px; position: relative;">
|
||||
</div>
|
||||
|
||||
<pre id="debug" style="overflow:hidden; background: #eee; padding: 15px;"></pre>
|
||||
|
||||
<pre id="log" style="overflow:hidden;"></pre>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../../node_modules/hammer-simulator/index.js"></script>
|
||||
<script src="../../dist/hammer.js"></script>
|
||||
<script>
|
||||
|
||||
var program = [
|
||||
['pan', ['deltaX','deltaY']],
|
||||
['pinch', ['scale']],
|
||||
['tap', ['pos']],
|
||||
['swipe', ['deltaX','deltaY']],
|
||||
['pinch', ['pos','scale']],
|
||||
['pan', ['pos']],
|
||||
['rotate', ['pos','rotation']],
|
||||
['doubleTap', ['pos']],
|
||||
['pinchRotate', ['pos','scale','rotation']],
|
||||
];
|
||||
|
||||
function randomRange(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
function randomRangeInt(min, max) {
|
||||
return Math.round(randomRange(min, max));
|
||||
}
|
||||
|
||||
function gestureOption(name) {
|
||||
var max = el.offsetWidth * .9;
|
||||
switch(name) {
|
||||
case 'deltaY':
|
||||
case 'deltaX':
|
||||
return randomRangeInt(10, max * .5);
|
||||
case 'pos':
|
||||
return [randomRangeInt(10, max), randomRangeInt(10, max)];
|
||||
case 'scale':
|
||||
return randomRange(.2, 2);
|
||||
case 'rotation':
|
||||
return randomRange(-180, 180);
|
||||
}
|
||||
}
|
||||
|
||||
function walkProgram(done) {
|
||||
var clone = [].concat(program);
|
||||
(function next() {
|
||||
if(clone.length) {
|
||||
var entry = clone.shift();
|
||||
var options = {};
|
||||
for(var i=0; i<entry[1].length; i++) {
|
||||
options[entry[1][i]] = gestureOption(entry[1][i]);
|
||||
}
|
||||
setTimeout(function() {
|
||||
log.innerHTML = '';
|
||||
Simulator.gestures[entry[0]](el, options, next);
|
||||
}, 1000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}());
|
||||
}
|
||||
|
||||
function startSimulator() {
|
||||
walkProgram(startSimulator);
|
||||
}
|
||||
|
||||
|
||||
var el = document.querySelector("#hit");
|
||||
var log = document.querySelector("#log");
|
||||
var debug = document.querySelector("#debug");
|
||||
|
||||
var mc = new Hammer(el);
|
||||
mc.get('pinch').set({ enable: true, threshold:.1 });
|
||||
mc.get('rotate').set({ enable: true });
|
||||
mc.on("swipe pan multipan press pinch rotate tap doubletap", logGesture);
|
||||
|
||||
function logGesture(ev) {
|
||||
log.textContent = ev.toDirString();
|
||||
}
|
||||
|
||||
Object.prototype.toDirString = function() {
|
||||
var output = [];
|
||||
for(var key in this) {
|
||||
if(this.hasOwnProperty(key)) {
|
||||
var value = this[key];
|
||||
if(Array.isArray(value)) {
|
||||
value = "Array("+ value.length +"):"+ value;
|
||||
} else if(value instanceof HTMLElement) {
|
||||
value = value +" ("+ value.outerHTML.substring(0, 50) +"...)";
|
||||
}
|
||||
output.push(key +": "+ value);
|
||||
}
|
||||
}
|
||||
return output.join("\n")
|
||||
};
|
||||
|
||||
startSimulator();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
91
node_modules/@egjs/hammerjs/tests/manual/touchaction.html
generated
vendored
Normal file
91
node_modules/@egjs/hammerjs/tests/manual/touchaction.html
generated
vendored
Normal file
@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<title>Hammer.js</title>
|
||||
|
||||
<style>
|
||||
.tester {
|
||||
margin: 20px 0;
|
||||
padding: 10px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-space {
|
||||
height: 9000px;
|
||||
}
|
||||
|
||||
#native, #no-native {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
padding: 10px 20px;
|
||||
display: none;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<p>Hammer provides a <a href="../../src/touchaction.js">kind of polyfill</a>
|
||||
for the browsers that don't support the <a href="http://www.w3.org/TR/pointerevents/#the-touch-action-css-property">touch-action</a> property.</p>
|
||||
|
||||
<div id="native" class="green">Your browser has support for the touch-action property!</div>
|
||||
<div id="no-native" class="red">Your browser doesn't support the touch-action property,
|
||||
so we use the polyfill.</div>
|
||||
|
||||
<h2>touch-action: auto</h2>
|
||||
<p>Should prevent nothing.</p>
|
||||
<div class="tester azure" id="auto"></div>
|
||||
|
||||
<h2>touch-action: pan-y</h2>
|
||||
<p>Should prevent scrolling on horizontal movement. This is set by default when creating a Hammer instance.</p>
|
||||
<div class="tester azure" id="pan-y"></div>
|
||||
|
||||
<h2>touch-action: pan-x</h2>
|
||||
<p>Should prevent scrolling on vertical movement.</p>
|
||||
<div class="tester azure" id="pan-x"></div>
|
||||
|
||||
<h2>touch-action: pan-x pan-y</h2>
|
||||
<p>Should <strong>not</strong> prevent any scrolling on any movement. Horizontal and vertical scrolling handled by the browser directly.</p>
|
||||
<div class="tester azure" id="pan-x-pan-y"></div>
|
||||
|
||||
<h2>touch-action: none</h2>
|
||||
<p>Should prevent all.</p>
|
||||
<div class="tester azure" id="none"></div>
|
||||
</div>
|
||||
<script src="../../dist/hammer.js"></script>
|
||||
<script>
|
||||
var support = Hammer.prefixed(document.body.style, 'touchAction');
|
||||
document.getElementById(support ? 'native' : 'no-native').className += ' show';
|
||||
|
||||
var touchActions = ['auto', 'pan-y', 'pan-x', 'pan-x pan-y', 'none'];
|
||||
Hammer.each(touchActions, function(touchAction) {
|
||||
var el = document.getElementById(touchAction.replace(" ", "-"));
|
||||
|
||||
var mc = Hammer(el, {
|
||||
touchAction: touchAction
|
||||
});
|
||||
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
|
||||
mc.get('pinch').set({ enable: true });
|
||||
mc.get('rotate').set({ enable: true });
|
||||
|
||||
mc.on("pan swipe rotate pinch tap doubletap press", function(ev) {
|
||||
el.textContent = ev.type +" "+ el.textContent;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="scroll-space"></div>
|
||||
<p>hi.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
211
node_modules/@egjs/hammerjs/tests/manual/visual.html
generated
vendored
Normal file
211
node_modules/@egjs/hammerjs/tests/manual/visual.html
generated
vendored
Normal file
@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<title>Hammer.js</title>
|
||||
|
||||
<style>
|
||||
|
||||
html, body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-perspective: 500;
|
||||
-moz-perspective: 500;
|
||||
perspective: 500;
|
||||
}
|
||||
|
||||
.animate {
|
||||
-webkit-transition: all .3s;
|
||||
-moz-transition: all .3s;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
#hit {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#log {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="log"></div>
|
||||
<div id="hit" style="background: #42d692; width: 150px; height: 150px;"></div>
|
||||
|
||||
|
||||
<script src="../../dist/hammer.js"></script>
|
||||
<script>
|
||||
|
||||
var reqAnimationFrame = (function () {
|
||||
return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
|
||||
var log = document.querySelector("#log");
|
||||
var el = document.querySelector("#hit");
|
||||
|
||||
var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
|
||||
var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);
|
||||
|
||||
var ticking = false;
|
||||
var transform;
|
||||
var timer;
|
||||
|
||||
var mc = new Hammer.Manager(el);
|
||||
|
||||
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
|
||||
|
||||
mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'));
|
||||
mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
|
||||
mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
|
||||
|
||||
mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
|
||||
mc.add(new Hammer.Tap());
|
||||
|
||||
mc.on("panstart panmove", onPan);
|
||||
mc.on("rotatestart rotatemove", onRotate);
|
||||
mc.on("pinchstart pinchmove", onPinch);
|
||||
mc.on("swipe", onSwipe);
|
||||
mc.on("tap", onTap);
|
||||
mc.on("doubletap", onDoubleTap);
|
||||
|
||||
mc.on("hammer.input", function(ev) {
|
||||
if(ev.isFinal) {
|
||||
resetElement();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function resetElement() {
|
||||
el.className = 'animate';
|
||||
transform = {
|
||||
translate: { x: START_X, y: START_Y },
|
||||
scale: 1,
|
||||
angle: 0,
|
||||
rx: 0,
|
||||
ry: 0,
|
||||
rz: 0
|
||||
};
|
||||
|
||||
requestElementUpdate();
|
||||
|
||||
if (log.textContent.length > 2000) {
|
||||
log.textContent = log.textContent.substring(0, 2000) + "...";
|
||||
}
|
||||
}
|
||||
|
||||
function updateElementTransform() {
|
||||
var value = [
|
||||
'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
|
||||
'scale(' + transform.scale + ', ' + transform.scale + ')',
|
||||
'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+ transform.angle + 'deg)'
|
||||
];
|
||||
|
||||
value = value.join(" ");
|
||||
el.textContent = value;
|
||||
el.style.webkitTransform = value;
|
||||
el.style.mozTransform = value;
|
||||
el.style.transform = value;
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
function requestElementUpdate() {
|
||||
if(!ticking) {
|
||||
reqAnimationFrame(updateElementTransform);
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
function logEvent(str) {
|
||||
//log.insertBefore(document.createTextNode(str +"\n"), log.firstChild);
|
||||
}
|
||||
|
||||
function onPan(ev) {
|
||||
el.className = '';
|
||||
transform.translate = {
|
||||
x: START_X + ev.deltaX,
|
||||
y: START_Y + ev.deltaY
|
||||
};
|
||||
|
||||
requestElementUpdate();
|
||||
logEvent(ev.type);
|
||||
}
|
||||
|
||||
var initScale = 1;
|
||||
function onPinch(ev) {
|
||||
if(ev.type == 'pinchstart') {
|
||||
initScale = transform.scale || 1;
|
||||
}
|
||||
|
||||
el.className = '';
|
||||
transform.scale = initScale * ev.scale;
|
||||
|
||||
requestElementUpdate();
|
||||
logEvent(ev.type);
|
||||
}
|
||||
|
||||
var initAngle = 0;
|
||||
function onRotate(ev) {
|
||||
if(ev.type == 'rotatestart') {
|
||||
initAngle = transform.angle || 0;
|
||||
}
|
||||
|
||||
el.className = '';
|
||||
transform.rz = 1;
|
||||
transform.angle = initAngle + ev.rotation;
|
||||
requestElementUpdate();
|
||||
logEvent(ev.type);
|
||||
}
|
||||
|
||||
function onSwipe(ev) {
|
||||
var angle = 50;
|
||||
transform.ry = (ev.direction & Hammer.DIRECTION_HORIZONTAL) ? 1 : 0;
|
||||
transform.rx = (ev.direction & Hammer.DIRECTION_VERTICAL) ? 1 : 0;
|
||||
transform.angle = (ev.direction & (Hammer.DIRECTION_RIGHT | Hammer.DIRECTION_UP)) ? angle : -angle;
|
||||
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
resetElement();
|
||||
}, 300);
|
||||
requestElementUpdate();
|
||||
logEvent(ev.type);
|
||||
}
|
||||
|
||||
function onTap(ev) {
|
||||
transform.rx = 1;
|
||||
transform.angle = 25;
|
||||
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
resetElement();
|
||||
}, 200);
|
||||
requestElementUpdate();
|
||||
logEvent(ev.type);
|
||||
}
|
||||
|
||||
function onDoubleTap(ev) {
|
||||
transform.rx = 1;
|
||||
transform.angle = 80;
|
||||
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
resetElement();
|
||||
}, 500);
|
||||
requestElementUpdate();
|
||||
logEvent(ev.type);
|
||||
}
|
||||
|
||||
resetElement();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user