initial commit
This commit is contained in:
43
node_modules/propagating-hammerjs/examples/basic.html
generated
vendored
Normal file
43
node_modules/propagating-hammerjs/examples/basic.html
generated
vendored
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Basic usage</title>
|
||||
<script src="../node_modules/hammerjs/hammer.js"></script>
|
||||
<script src="../propagating.js"></script>
|
||||
<style>
|
||||
div {border: 1px solid black;}
|
||||
#parent {width: 400px; height: 400px; background: lightgreen;}
|
||||
#child {width: 200px; height: 200px; background: yellow; margin: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Tap on child or parent. The child will stop propagation of the event.
|
||||
</p>
|
||||
|
||||
<div id="parent">
|
||||
parent
|
||||
<div id="child">
|
||||
child
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var parent = document.getElementById('parent');
|
||||
var hammer1 = propagating(new Hammer(parent))
|
||||
.on('tap', function (event) {
|
||||
alert('tap on parent');
|
||||
});
|
||||
|
||||
var child = document.getElementById('child');
|
||||
var hammer2 = propagating(new Hammer(child))
|
||||
.on('tap', function (event) {
|
||||
alert('tap on child');
|
||||
|
||||
// stop propagation from child to parent
|
||||
event.stopPropagation();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
121
node_modules/propagating-hammerjs/examples/extensive.html
generated
vendored
Normal file
121
node_modules/propagating-hammerjs/examples/extensive.html
generated
vendored
Normal file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Extensive usage example</title>
|
||||
<script src="../node_modules/hammerjs/hammer.js"></script>
|
||||
<script src="../propagating.js"></script>
|
||||
<style>
|
||||
#parent {
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
background: lightyellow;
|
||||
border: 1px solid orange;
|
||||
}
|
||||
|
||||
#child1,
|
||||
#child2 {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
background: lightgreen;
|
||||
border: 1px solid green;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#grandchild1,
|
||||
#grandchild2 {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background: lightblue;
|
||||
border: 1px solid blue;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Extend hammer.js with event propagation.</p>
|
||||
<ul>
|
||||
<li>Tapping or panning <code>grandchild1</code> will propagate to <code>child1</code> and then <code>parent1</code>.</li>
|
||||
<li>Tapping or panning <code>grandchild2</code> will propagate to <code>child2</code>, which stops propagation and does not reach <code>parent</code>.</li>
|
||||
</ul>
|
||||
<p>See output in the developer console, check the order of events.</p>
|
||||
|
||||
<div id="parent">
|
||||
parent
|
||||
<div id="child1">
|
||||
child1
|
||||
<div id="grandchild1">
|
||||
grandchild1
|
||||
</div>
|
||||
</div>
|
||||
<div id="child2">
|
||||
child2 (stops propagation)
|
||||
<div id="grandchild2">
|
||||
grandchild2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var parent = document.getElementById('parent');
|
||||
var child1 = document.getElementById('child1');
|
||||
var child2 = document.getElementById('child2');
|
||||
var grandchild1 = document.getElementById('grandchild1');
|
||||
var grandchild2 = document.getElementById('grandchild2');
|
||||
|
||||
var hammers = {};
|
||||
|
||||
hammers['parent'] = propagating(new Hammer(parent))
|
||||
.on('tap', function (event) {
|
||||
console.log('tap parent');
|
||||
})
|
||||
.on('pan', function (event) {
|
||||
console.log('pan parent');
|
||||
});
|
||||
|
||||
hammers['child1'] = propagating(new Hammer(child1))
|
||||
.on('tap', function (event) {
|
||||
console.log('tap child1');
|
||||
})
|
||||
.on('pan', function (event) {
|
||||
console.log('pan child1');
|
||||
});
|
||||
|
||||
hammers['grandchild1'] = propagating(new Hammer(grandchild1))
|
||||
.on('tap', function (event) {
|
||||
console.log('tap grandchild1');
|
||||
})
|
||||
.on('pan', function (event) {
|
||||
console.log('pan grandchild1')
|
||||
});
|
||||
|
||||
hammers['child2'] = propagating(new Hammer(child2))
|
||||
.on('tap', function (event) {
|
||||
console.log('tap child2');
|
||||
event.stopPropagation();
|
||||
})
|
||||
.on('pan', function (event) {
|
||||
console.log('pan child2');
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
hammers['grandchild2'] = propagating(new Hammer(grandchild2))
|
||||
.on('tap', function (event) {
|
||||
console.log('tap grandchild2');
|
||||
})
|
||||
.on('pan', function (event) {
|
||||
console.log('pan grandchild2');
|
||||
});
|
||||
|
||||
// hammerParent.on('hammer.input', function (event) {
|
||||
// console.log('hammer.input', event);
|
||||
// });
|
||||
|
||||
function destroy() {
|
||||
Object.keys(hammers).forEach(function (name) {
|
||||
hammers[name].destroy();
|
||||
});
|
||||
hammers = [];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
58
node_modules/propagating-hammerjs/examples/firstTarget.html
generated
vendored
Normal file
58
node_modules/propagating-hammerjs/examples/firstTarget.html
generated
vendored
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Use event.firstTarget</title>
|
||||
<script src="../node_modules/hammerjs/hammer.js"></script>
|
||||
<script src="../propagating.js"></script>
|
||||
<style>
|
||||
div {border: 1px solid black;}
|
||||
#parent {width: 600px; height: 400px; background: lightgreen;}
|
||||
#child {width: 400px; height: 200px; background: yellow; margin: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Pan the child element, and check out <code>event.target</code> and <code>event.firstTarget</code>.
|
||||
</p>
|
||||
<ul>
|
||||
<li id="firstTarget">First target:</li>
|
||||
<li id="target">Target:</li>
|
||||
</ul>
|
||||
<div id="parent">
|
||||
parent
|
||||
<div id="child">
|
||||
child
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// replace the global Hammer constructor with a propagated one, such that
|
||||
// hammer.js instances automatically have event propagation.
|
||||
Hammer = propagating(Hammer, {
|
||||
preventDefault: true
|
||||
});
|
||||
|
||||
var parent = document.getElementById('parent');
|
||||
var hammer1 = new Hammer(parent)
|
||||
.on('pan', function (event) {
|
||||
console.log('pan on parent', event);
|
||||
});
|
||||
|
||||
var child = document.getElementById('child');
|
||||
var hammer2 = new Hammer(child)
|
||||
.on('pan', function (event) {
|
||||
console.log('pan on child', event);
|
||||
|
||||
document.getElementById('firstTarget').innerHTML = 'First target: ' + event.firstTarget.id;
|
||||
document.getElementById('target').innerHTML = 'Target: ' + event.target.id;
|
||||
})
|
||||
.on('panstart', function (event) {
|
||||
console.log('panstart on child', event);
|
||||
})
|
||||
.on('panend', function (event) {
|
||||
console.log('panend on child', event);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
47
node_modules/propagating-hammerjs/examples/global.html
generated
vendored
Normal file
47
node_modules/propagating-hammerjs/examples/global.html
generated
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Replace global hammer.js constructor</title>
|
||||
<script src="../node_modules/hammerjs/hammer.js"></script>
|
||||
<script src="../propagating.js"></script>
|
||||
<style>
|
||||
div {border: 1px solid black;}
|
||||
#parent {width: 400px; height: 400px; background: lightgreen;}
|
||||
#child {width: 200px; height: 200px; background: yellow; margin: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Tap on child or parent. The child will stop propagation of the event.
|
||||
</p>
|
||||
|
||||
<div id="parent">
|
||||
parent
|
||||
<div id="child">
|
||||
child
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// replace the global Hammer constructor with a propagated one, such that
|
||||
// hammer.js instances automatically have event propagation.
|
||||
Hammer = propagating(Hammer);
|
||||
|
||||
var parent = document.getElementById('parent');
|
||||
var hammer1 = new Hammer(parent)
|
||||
.on('tap', function (event) {
|
||||
alert('tap on parent');
|
||||
});
|
||||
|
||||
var child = document.getElementById('child');
|
||||
var hammer2 = new Hammer(child)
|
||||
.on('tap', function (event) {
|
||||
alert('tap on child');
|
||||
|
||||
// stop propagation from child to parent
|
||||
event.stopPropagation();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user