簡単なタッチ操作のイベントを追加します
This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @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);