☰

Greasy Fork is available in English.

touchActionEx

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

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/419806/894991/touchActionEx.js 

// ==UserScript==
// @name         touchActionEx
// @version      0.3
// @description  簡単なタッチ操作のイベントを追加します
// @author       y_kahou
// ==/UserScript==
 
function addTap(ele, {interval = 200} = {}) {
    // すでにtapかdoubletapを設定していたら何もしない
    if (ele.getAttribute('tap') != null || ele.getAttribute('doubletap') != null)
        return
    ele.setAttribute('tap','')
    
    ele.addEventListener('touchstart', e => {
        if (e.targetTouches.length > 1) {
            ele.dataset.tap = 0
            return
        }
        ele.dataset.tap = 1
        let to = setTimeout(() => {
            ele.dataset.tap = 0
            ele.dispatchEvent(new CustomEvent('hold', {detail: {touch: e.targetTouches[0]}}))
        }, interval)
        ele.dataset.tap_to = to
    })
    ele.addEventListener('touchmove', e => {
        if (ele.dataset.tap == 0)
            return
        ele.dispatchEvent(new Event('subfocus'))
        ele.dataset.tap = 0
        clearTimeout(ele.dataset.tap_to)
    })
    ele.addEventListener('touchend', e => {
        if (ele.dataset.tap == 0)
            return
        ele.dataset.tap = 0
        clearTimeout(ele.dataset.tap_to)
        ele.dispatchEvent(new CustomEvent('tap', {detail: {touch: e.changedTouches[0]}}))
        e.preventDefault()
    })
}
function addDoubletap(ele, {interval = 200} = {}) {
    // すでにtapかdoubletapを設定していたら何もしない
    if (ele.getAttribute('tap') != null || ele.getAttribute('doubletap') != null)
        return
    ele.setAttribute('doubletap', '')
    
    ele.addEventListener('touchstart', e => {
        if (e.targetTouches.length > 1) {
            ele.dataset.tap = 0
            return
        }
        ele.dataset.tap = 1
        let to = setTimeout(() => {
            ele.dataset.tap = 0
            ele.dispatchEvent(new CustomEvent('hold', {detail: {touch: e.targetTouches[0]}}))
        }, interval)
        ele.dataset.tap_to = to
    })
    ele.addEventListener('touchmove', e => {
        if (ele.dataset.tap == 0)
            return
        ele.dispatchEvent(new Event('subfocus'))
        ele.dataset.tap = 0
        clearTimeout(ele.dataset.tap_to)
    })
    ele.addEventListener('touchend', e => {
        if (ele.dataset.tap == 0)
            return
        ele.dataset.tap = 0
        clearTimeout(ele.dataset.tap_to)
        let event = new CustomEvent('temp', {detail: {touch: e.changedTouches[0]}})
        ele.dispatchEvent(event)
        e.preventDefault()
    })
    ele.addEventListener('temp', e => {
        if (ele.dataset.dbltap == 1) {
            ele.dataset.dbltap = 0
            clearTimeout(ele.dataset.dbltap_to)
            ele.dispatchEvent(new CustomEvent('doubletap', {detail: e.detail}))
        } else {
            ele.dataset.dbltap = 1
            var to = setTimeout(() => {
                ele.dataset.dbltap = 0
                ele.dispatchEvent(new CustomEvent('tap', {detail: e.detail}))
            }, interval)
            ele.dataset.dbltap_to = to
        }
    })
}
function addSwipe(ele, {min_dist = 50} = {}) {
    // すでにswipeかswipe_wayを設定していたら何もしない
    if (ele.getAttribute('swipe') != null || ele.getAttribute('swipe_way') != null)
        return
    ele.setAttribute('swipe','')
    
    ele.addEventListener('touchstart', e => {
        if (e.touches.length > 1) {
            ele.dataset.start_point = ''
            return
        }
        var x = Math.floor(e.touches[0].screenX)
        var y = Math.floor(e.touches[0].screenY)
        ele.dataset.start_point = `${x},${y}`
    })
    ele.addEventListener('touchmove', e => {
        if (e.touches.length > 1) {
            ele.dataset.start_point = ''
            return
        }
    })
    ele.addEventListener('touchend', e => {
        if (e.changedTouches.length > 1)
            return
        var p = ele.dataset.start_point
        if (!p)
            return
        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) {
            var dt = {
                from: { x: x1, y: y1 },
                dest: { x: x2, y: y2 },
                angle: ang, distance: dist
            }
            ele.dispatchEvent(new CustomEvent('swipe', {detail: dt}))
        }
    })
}
function addSwipeWay(ele, {range = 90, min_dist = 50} = {}) {
    // すでにswipe_wayを設定していたら何もしない
    if (ele.getAttribute('swipe_way') != null)
        return
    // swipe未設定なら設定
    if (ele.getAttribute('swipe') == null) {
        addSwipe(ele, min_dist)
    }
    ele.removeAttribute('swipe')
    ele.setAttribute('swipe_way', '')
    
    ele.addEventListener('swipe', e => {
        const ways = ['right', 'down', 'left', 'up']
        let ang = e.detail.angle
        let dist = e.detail.distance
        for (var i in ways) {
            var ang_ = (i==0 && 270<ang ? ang-360 : ang)
            if (Math.abs(90 * i - ang_) <= range / 2) {
                ele.dispatchEvent(new CustomEvent('swipe' + ways[i], { detail: e.detail}))
                break
            }
        }
    })
    
}