☰

Greasy Fork is available in English.

jQuery touch action Ex

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

23.12.2020 itibariyledir. En son verisyonu görün.

Bu script direkt olarak kurulamaz. Başka scriptler için bir kütüphanedir ve meta yönergeleri içerir // @require https://update.greasyfork.org/scripts/419065/883569/jQuery%20touch%20action%20Ex.js 

// ==UserScript==
// @name         jQuery touch action Ex
// @version      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);