scripts/gamuSwipe
3
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

script de gestion du swipe pour les écrans tactiles

Browse source
This commit is contained in:
Christophe 2019-01-31 10:59:07 +01:00
parent 31691b64d4
commit a58324a6a9
3 changed files with 84 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
README.md
View file

@ -1,2 +1,16 @@
# gamuSwipe
https://git.gamuza.fr/scripts/gamuswipe
gamuSwipe est un script pour simplifier le swipe pour les écrans tactiles
## utilisation
le script fournit la fonction `gamuSwipe(id, handleswipe)`
id => l'id de l'élément support
handleswipe => callback qui recoit le sens du déplacement : left ou right

34
gamuSwipe.js Normal file
View file

@ -0,0 +1,34 @@
/*
* gamuSwipe v1.0.0 2019-01-31
*
*/
function gamuSwipe(mon_id,handleswipe){
window.addEventListener('load', function(){
var touchsurface = document.getElementById(mon_id);
var startX;
var dist;
touchsurface.addEventListener('touchstart', function(e){
var touchobj = e.changedTouches[0];
dist = 0;
startX = touchobj.pageX;
}, false);
//touchsurface.addEventListener('touchmove', function(e){
//}, false);
touchsurface.addEventListener('touchend', function(e){
var touchobj = e.changedTouches[0];
dist = touchobj.pageX - startX;
if (dist < 0) {
handleswipe('left');
e.preventDefault();
} else if(dist > 0){
handleswipe('right');
e.preventDefault();
}
}, false);
}, false);// end window.onload
}

36
index.html Normal file
View file

@ -0,0 +1,36 @@
<html >
<style type="text/css" media="screen">
body {
background-color: beige;
height: 100vh;
}
.inner {
width: 300px;
margin: 0 auto;
}
#touchsurface {
width: 300px;
height: 300px;
background-color: grey;
}
</style>
<script src="gamuSwipe.js" type="text/javascript"></script>
<script type="text/javascript">
function handleswipe(direction){
if (direction){
alert('direction = '+ direction);
}
}
gamuSwipe('my_body', handleswipe);
</script>
<body id="my_body">
<div class="inner">
<div id="touchsurface">Swipe Me</div>
<a class="toto" href="https://developer.mozilla.org/en-US/docs/Web/API/Touch_events"> Click Ok </a>
</div>
</body>
</html>