You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.4 KiB
108 lines
2.4 KiB
(function($) {
|
|
var Swipe = function(el) {
|
|
var self = this
|
|
|
|
this.el = $(el)
|
|
this.pos = { start: { x: 0, y: 0 }, end: { x: 0, y: 0 } }
|
|
this.startTime
|
|
|
|
el.on('touchstart', function(e) { self.touchStart(e) })
|
|
el.on('touchmove', function(e) { self.touchMove(e) })
|
|
el.on('touchend', function(e) { self.swipeEnd() })
|
|
el.on('mousedown', function(e) { self.mouseDown(e) })
|
|
}
|
|
|
|
Swipe.prototype = {
|
|
touchStart: function(e) {
|
|
var touch = e.originalEvent.touches[0]
|
|
|
|
this.swipeStart(e, touch.pageX, touch.pageY)
|
|
},
|
|
|
|
touchMove: function(e) {
|
|
var touch = e.originalEvent.touches[0]
|
|
|
|
this.swipeMove(e, touch.pageX, touch.pageY)
|
|
},
|
|
|
|
mouseDown: function(e) {
|
|
var self = this
|
|
|
|
this.swipeStart(e, e.pageX, e.pageY)
|
|
|
|
this.el.on('mousemove', function(e) { self.mouseMove(e) })
|
|
this.el.on('mouseup', function() { self.mouseUp() })
|
|
},
|
|
|
|
mouseMove: function(e) {
|
|
this.swipeMove(e, e.pageX, e.pageY)
|
|
},
|
|
|
|
mouseUp: function(e) {
|
|
this.swipeEnd(e)
|
|
|
|
this.el.off('mousemove')
|
|
this.el.off('mouseup')
|
|
},
|
|
|
|
swipeStart: function(e, x, y) {
|
|
this.pos.start.x = x
|
|
this.pos.start.y = y
|
|
this.pos.end.x = x
|
|
this.pos.end.y = y
|
|
|
|
this.startTime = new Date().getTime()
|
|
|
|
this.trigger('swipeStart', e)
|
|
},
|
|
|
|
swipeMove: function(e, x, y) {
|
|
this.pos.end.x = x
|
|
this.pos.end.y = y
|
|
|
|
this.trigger('swipeMove', e)
|
|
},
|
|
|
|
swipeEnd: function(e) {
|
|
this.trigger('swipeEnd', e)
|
|
},
|
|
|
|
trigger: function(e, originalEvent) {
|
|
var self = this
|
|
|
|
var
|
|
event = $.Event(e),
|
|
x = self.pos.start.x - self.pos.end.x,
|
|
y = self.pos.end.y - self.pos.start.y,
|
|
radians = Math.atan2(y, x),
|
|
direction = 'up',
|
|
distance = Math.round(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))),
|
|
angle = Math.round(radians * 180 / Math.PI),
|
|
speed = Math.round(distance / ( new Date().getTime() - self.startTime ) * 1000)
|
|
|
|
if ( angle < 0 ) {
|
|
angle = 360 - Math.abs(angle)
|
|
}
|
|
|
|
if ( ( angle <= 45 && angle >= 0 ) || ( angle <= 360 && angle >= 315 ) ) {
|
|
direction = 'left'
|
|
} else if ( angle >= 135 && angle <= 225 ) {
|
|
direction = 'right'
|
|
} else if ( angle > 45 && angle < 135 ) {
|
|
direction = 'down'
|
|
}
|
|
|
|
event.originalEvent = originalEvent
|
|
|
|
event.swipe = { x: x, y: y, direction: direction, distance: distance, angle: angle, speed: speed }
|
|
|
|
$(self.el).trigger(event)
|
|
}
|
|
}
|
|
|
|
$.fn.swipe = function() {
|
|
var swipe = new Swipe(this)
|
|
|
|
return this
|
|
}
|
|
})(jQuery) |