Component-Builder/media/uikit/js/core/touch.js

189 lines
6.7 KiB
JavaScript
Raw Normal View History

2017-11-12 00:33:10 +00:00
/*! UIkit 2.27.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2016-01-30 20:28:43 +00:00
// Based on Zeptos touch.js
// https://raw.github.com/madrobby/zepto/master/src/touch.js
// Zepto.js may be freely distributed under the MIT license.
;(function($){
if ($.fn.swipeLeft) {
return;
}
var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750, gesture;
2017-11-12 00:33:10 +00:00
var hasTouchEvents = 'ontouchstart' in window,
hasPointerEvents = window.PointerEvent,
hasTouch = hasTouchEvents
|| window.DocumentTouch && document instanceof DocumentTouch
|| navigator.msPointerEnabled && navigator.msMaxTouchPoints > 0 // IE 10
|| navigator.pointerEnabled && navigator.maxTouchPoints > 0; // IE >=11
2016-01-30 20:28:43 +00:00
function swipeDirection(x1, x2, y1, y2) {
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down');
}
function longTap() {
longTapTimeout = null;
if (touch.last) {
2016-03-19 01:51:35 +00:00
if ( touch.el !== undefined ) touch.el.trigger('longTap');
2016-01-30 20:28:43 +00:00
touch = {};
}
}
function cancelLongTap() {
if (longTapTimeout) clearTimeout(longTapTimeout);
longTapTimeout = null;
}
function cancelAll() {
if (touchTimeout) clearTimeout(touchTimeout);
if (tapTimeout) clearTimeout(tapTimeout);
if (swipeTimeout) clearTimeout(swipeTimeout);
if (longTapTimeout) clearTimeout(longTapTimeout);
touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null;
touch = {};
}
function isPrimaryTouch(event){
return event.pointerType == event.MSPOINTER_TYPE_TOUCH && event.isPrimary;
}
$(function(){
var now, delta, deltaX = 0, deltaY = 0, firstTouch;
if ('MSGesture' in window) {
gesture = new MSGesture();
gesture.target = document.body;
}
$(document)
.on('MSGestureEnd gestureend', function(e){
var swipeDirectionFromVelocity = e.originalEvent.velocityX > 1 ? 'Right' : e.originalEvent.velocityX < -1 ? 'Left' : e.originalEvent.velocityY > 1 ? 'Down' : e.originalEvent.velocityY < -1 ? 'Up' : null;
2016-03-19 01:51:35 +00:00
if (swipeDirectionFromVelocity && touch.el !== undefined) {
2016-01-30 20:28:43 +00:00
touch.el.trigger('swipe');
touch.el.trigger('swipe'+ swipeDirectionFromVelocity);
}
})
// MSPointerDown: for IE10
// pointerdown: for IE11
.on('touchstart MSPointerDown pointerdown', function(e){
if(e.type == 'MSPointerDown' && !isPrimaryTouch(e.originalEvent)) return;
firstTouch = (e.type == 'MSPointerDown' || e.type == 'pointerdown') ? e : e.originalEvent.touches[0];
now = Date.now();
delta = now - (touch.last || now);
touch.el = $('tagName' in firstTouch.target ? firstTouch.target : firstTouch.target.parentNode);
if(touchTimeout) clearTimeout(touchTimeout);
touch.x1 = firstTouch.pageX;
touch.y1 = firstTouch.pageY;
if (delta > 0 && delta <= 250) touch.isDoubleTap = true;
touch.last = now;
longTapTimeout = setTimeout(longTap, longTapDelay);
// adds the current touch contact for IE gesture recognition
2017-11-12 00:33:10 +00:00
if (e.originalEvent && e.originalEvent.pointerId && gesture && ( e.type == 'MSPointerDown' || e.type == 'pointerdown' || e.type == 'touchstart' ) ) {
2016-01-30 20:28:43 +00:00
gesture.addPointer(e.originalEvent.pointerId);
}
})
// MSPointerMove: for IE10
// pointermove: for IE11
.on('touchmove MSPointerMove pointermove', function(e){
if (e.type == 'MSPointerMove' && !isPrimaryTouch(e.originalEvent)) return;
firstTouch = (e.type == 'MSPointerMove' || e.type == 'pointermove') ? e : e.originalEvent.touches[0];
cancelLongTap();
touch.x2 = firstTouch.pageX;
touch.y2 = firstTouch.pageY;
deltaX += Math.abs(touch.x1 - touch.x2);
deltaY += Math.abs(touch.y1 - touch.y2);
})
// MSPointerUp: for IE10
// pointerup: for IE11
.on('touchend MSPointerUp pointerup', function(e){
if (e.type == 'MSPointerUp' && !isPrimaryTouch(e.originalEvent)) return;
cancelLongTap();
// swipe
if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) || (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)){
swipeTimeout = setTimeout(function() {
2016-03-19 01:51:35 +00:00
if ( touch.el !== undefined ) {
touch.el.trigger('swipe');
touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)));
}
2016-01-30 20:28:43 +00:00
touch = {};
}, 0);
// normal tap
} else if ('last' in touch) {
// don't fire tap when delta position changed by more than 30 pixels,
// for instance when moving to a point and back to origin
if (isNaN(deltaX) || (deltaX < 30 && deltaY < 30)) {
// delay by one tick so we can cancel the 'tap' event if 'scroll' fires
// ('tap' fires before 'scroll')
tapTimeout = setTimeout(function() {
// trigger universal 'tap' with the option to cancelTouch()
// (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
var event = $.Event('tap');
event.cancelTouch = cancelAll;
2016-03-19 01:51:35 +00:00
if ( touch.el !== undefined ) touch.el.trigger(event);
2016-01-30 20:28:43 +00:00
// trigger double tap immediately
if (touch.isDoubleTap) {
2016-03-19 01:51:35 +00:00
if ( touch.el !== undefined ) touch.el.trigger('doubleTap');
2016-01-30 20:28:43 +00:00
touch = {};
}
// trigger single tap after 250ms of inactivity
else {
touchTimeout = setTimeout(function(){
touchTimeout = null;
2016-03-19 01:51:35 +00:00
if ( touch.el !== undefined ) touch.el.trigger('singleTap');
2016-01-30 20:28:43 +00:00
touch = {};
}, 250);
}
}, 0);
} else {
touch = {};
}
deltaX = deltaY = 0;
}
})
// when the browser window loses focus,
// for example when a modal dialog is shown,
// cancel all ongoing events
2017-11-12 00:33:10 +00:00
.on('touchcancel MSPointerCancel pointercancel', function(e){
// Ignore pointercancel if the event supports touch events, to prevent pointercancel in swipe gesture
if ((e.type == 'touchcancel' && hasTouchEvents && hasTouch) || (!hasTouchEvents && e.type == 'pointercancel' && hasPointerEvents)) {
cancelAll();
}
});
2016-01-30 20:28:43 +00:00
// scrolling the window indicates intention of the user
// to scroll, not tap or swipe, so cancel all ongoing events
$(window).on('scroll', cancelAll);
});
['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){
$.fn[eventName] = function(callback){ return $(this).on(eventName, callback); };
});
})(jQuery);