https://www.door-tablet.com/jquery/ImagePresentation/swiped-events.js

1/*!
2 * swiped-events.js - v@version@
3 * Pure JavaScript swipe events
4 * https://github.com/john-doherty/swiped-events
5 * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
6 * @author John Doherty <www.johndoherty.info>
7 * @license MIT
8 */
9(function (window, document) {
10
11    'use strict';
12
13    // patch CustomEvent to allow constructor creation (IE/Chrome)
14    if (typeof window.CustomEvent !== 'function') {
15
16        window.CustomEvent = function (event, params) {
17
18            params = params || { bubbles: false, cancelable: false, detail: undefined };
19
20            var evt = document.createEvent('CustomEvent');
21            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
22            return evt;
23        };
24
25        window.CustomEvent.prototype = window.Event.prototype;
26    }
27
28    document.addEventListener('touchstart', handleTouchStart, false);
29    document.addEventListener('touchmove', handleTouchMove, false);
30    document.addEventListener('touchend', handleTouchEnd, false);
31
32    var xDown = null;
33    var yDown = null;
34    var xDiff = null;
35    var yDiff = null;
36    var timeDown = null;
37    var startEl = null;
38
39    function handleTouchEnd(e) {
40
41        // if the user released on a different target, cancel!
42        if (startEl !== e.target) return;
43
44        var swipeThreshold = parseInt(startEl.getAttribute('data-swipe-threshold') || '20', 10);    // default 10px
45        var swipeTimeout = parseInt(startEl.getAttribute('data-swipe-timeout') || '500', 10);      // default 1000ms
46        var timeDiff = Date.now() - timeDown;
47        var eventType = '';
48
49        if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant
50            if (Math.abs(xDiff) > swipeThreshold && timeDiff < swipeTimeout) {
51                if (xDiff > 0) {
52                    eventType = 'swiped-left';
53                }
54                else {
55                    eventType = 'swiped-right';
56                }
57            }
58        }
59        else {
60            if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) {
61                if (yDiff > 0) {
62                    eventType = 'swiped-up';
63                }
64                else {
65                    eventType = 'swiped-down';
66                }
67            }
68        }
69
70        if (eventType !== '') {
71
72            // fire event on the element that started the swipe
73            startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true }));
74
75            // if (console && console.log) console.log(eventType + ' fired on ' + startEl.tagName);
76        }
77
78        // reset values
79        xDown = null;
80        yDown = null;
81        timeDown = null;
82    }
83
84    function handleTouchStart(e) {
85
86        // if the element has data-swipe-ignore="true" we stop listening for swipe events
87        if (e.target.getAttribute('data-swipe-ignore') === 'true') return;
88
89        startEl = e.target;
90
91        timeDown = Date.now();
92        xDown = e.touches[0].clientX;
93        yDown = e.touches[0].clientY;
94        xDiff = 0;
95        yDiff = 0;
96    }
97
98    function handleTouchMove(e) {
99
100        if (!xDown || !yDown) return;
101
102        var xUp = e.touches[0].clientX;
103        var yUp = e.touches[0].clientY;
104
105        xDiff = xDown - xUp;
106        yDiff = yDown - yUp;
107    }
108
109}(window, document));