JSFiddle - React, Tailwind, and code Playground
by Tenderfeel
JavaScript
var mTouch = new Class({
Implements:[Events, Options],
options:{
hoverDelay:50,
pressDelay: 1000,
moveThreshold: 10,
onTap:null,
onHover:null
},
initialize:function(element, options){
this.setOptions(options);
this.hasTouchEvent = this.supportForTouchEvents();
this.evn = this.getEventName();
this.debug = $('debug');
this.element = $(document.body);
this.target = null;
this.startTime = 0;
this.hoverTimeout = null;
this.pressTimeout = null;
this.touch;
this.startX;
this.startY;
this.deltaX = 0;
this.deltaY = 0;
this.deltaT = 0;
window.addEvent(this.evn.start, function(){return false;});
this.element.addEvent(this.evn.start, this.touchStartHandler.bind(this));
},
supportForTouchEvents : function () {
// Dev must want touch, so check for support
if (typeof TouchEvent != 'undefined') {
if (window.navigator.userAgent.match(/(Mobi|Fennec|Mini)/i)) {
return true;
} else {
return false;
}
} else {
return false;
}
},
getEventName:function(){
if(this.hasTouchEvent){
return {
start:'touchstart',
move:'touchmove',
end:'touchend',
cancel:'touchcancel'
};
}else{
return {
start:'mousedown',
move:'mousemove',
end:'mouseup',
cancel:'mouseleave'
};
}
},
log:function(txt){
//this.debug.set('text', txt);
console.log(txt);
},
touchStartHandler:function(e){
var that = this;
this.target = e.target;
var parent = e.target.getParent();
console.log(this.target);
this.target.fireEvent('touchstart', e);
this.startTime = (new Date).getTime();
if(this.hasTouchEvent){
if (e.changedTouches && e.changedTouches.length) {
touch = e.changedTouches[0];
this.startX =...