☰

jQuery touch action Ex

簡単なタッチ操作のイベントを追加します

Verzia zo dňa 23.12.2020. Pozri najnovšiu verziu.

Tento skript by nemal byť nainštalovaný priamo. Je to knižnica pre ďalšie skripty, ktorú by mali používať cez meta príkaz // @require https://update.greasyfork.org/scripts/419065/883528/jQuery%20touch%20action%20Ex.js 

// ==UserScript==
// @name         jQuery touch action Ex
// @version      0.0.1
// @description  簡単なタッチ操作のイベントを追加します
// @author       y_kahou
// ==/UserScript==

if (window.jQuery) (function($) {
    'use strict';
    
    
    // 通常のタップ
    $.fn.tap = function(interval = 200) {
        // すでにtapまたはdoubletapを設定していたら何もしない
        if ($(this).prop('tap') || $(this).prop('doubletap')) {
            return $(this)
        }
        $(this).attr('tap','')
        
        return $(this).on({
            touchstart: function(e) {
                $(this).data('tap', true)
                var to = setTimeout(() => {
                    $(this).data('tap', false)
                    $(this).trigger('hold')
                }, interval)
                $(this).data('tap_to', to)
            },
            touchmove: function(e) {
                if ($(this).data('tap')) {
                    $(this).trigger('subfocus')
                    $(this).data('tap', false)
                    clearTimeout($(this).data('tap_to'))
                }
            },
            touchend: function(e) {
                if ($(this).data('tap')) {
                    $(this).data('tap', false)
                    clearTimeout($(this).data('tap_to'))
                    e.type = 'tap'
                    e.touches = e.changedTouches
                    e.changedTouches = void(0)
                    $(this).trigger(e)
                    e.preventDefault()
                }
            }
        })
    }
    
    // ダブルタップを考慮したタップとダブルタップ
    $.fn.doubletap = function(interval = 200) {
        // すでにtapまたはdoubletapを設定していたら何もしない
        if ($(this).prop('tap') || $(this).prop('doubletap')) {
            return $(this)
        }
        $(this).attr('doubletap','')
        
        return $(this).on({
            touchstart: function(e) {
                $(this).data('tap', true)
                var to = setTimeout(() => {
                    $(this).data('tap', false)
                    $(this).trigger('hold')
                }, interval)
                $(this).data('tap_to', to)
            },
            touchmove: function(e) {
                if ($(this).data('tap')) {
                    $(this).trigger('subfocus')
                    $(this).data('tap', false)
                    clearTimeout($(this).data('tap_to'))
                }
            },
            touchend: function(e) {
                if ($(this).data('tap')) {
                    $(this).data('tap', false)
                    clearTimeout($(this).data('tap_to'))
                    e.type = 'temp'
                    $(this).trigger(e)
                    e.preventDefault()
                }
            },
            temp: function(e) {
                e.touches = e.changedTouches
                e.changedTouches = void(0)
                if ($(this).data('dbltap')) {
                    $(this).data('dbltap', false)
                    clearTimeout($(this).data('dbltap_to'))
                    e.type = 'doubletap'
                    $(this).trigger(e)
                } else {
                    $(this).data('dbltap', true)
                    var to = setTimeout(() => {
                        $(this).data('dbltap', false)
                        e.type = 'tap'
                        $(this).trigger(e)
                    }, interval)
                    $(this).data('dbltap_to', to)
                }
            }
        })
    }
    
    $.fn.swipe = function(min_dist = 50) {
        // すでにswipeを設定していたら何もしない
        if ($(this).prop('swipe')) {
            return $(this)
        }
        $(this).attr('swipe','')
        
        return $(this).on({
            touchstart: function(e) {
                if (e.touches.length == 1) {
                    var x = Math.floor(e.touches[0].screenX)
                    var y = Math.floor(e.touches[0].screenY)
                    $(this).data('start_point', `${x},${y}`)
                }
            },
            touchend: function(e) {
                if (e.changedTouches && e.changedTouches.length == 1) {
                    var p = $(this).data('start_point')
                    var x1 = Number(p.split(',')[0])
                    var y1 = Number(p.split(',')[1])
                    var x2 = Math.floor(e.changedTouches[0].screenX)
                    var y2 = Math.floor(e.changedTouches[0].screenY)
                    var ang = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI
                    if (ang < 0) ang += 360
                    
                    var dist = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
                    if (min_dist < dist) {
                        $(this).trigger('swipe', [ang, dist])
                    }
                }
            }
        })
    }
    
    // 4方向のスワイプ判定
    $.fn.swipe_way = function({min_dist = 50, range = 90} = {}) {
        // すでにswipe_wayを設定していたら何もしない
        if ($(this).prop('swipe_way')) {
            return $(this)
        }
        
        // swipe未設定なら設定
        if (!$(this).prop('swipe')) {
            $(this).swipe(min_dist)
        }
        $(this).removeAttr('swipe')
        $(this).attr('swipe_way','')
        
        return $(this).on('swipe', function(e, ang, dist) {
            const ways = ['right', 'down', 'left', 'up']
            for (var i in ways) {
                var ang_ = (i==0 && 270<ang ? ang-360 : ang)
                if (Math.abs(90 * i - ang_) <= range / 2) {
                    $(this).trigger('swipe' + ways[i], [ang, dist])
                    break;
                }
            }
        })
    }
    
})(window.jQuery);