Created
October 16, 2013 00:45
-
-
Save csuwildcat/7000935 to your computer and use it in GitHub Desktop.
Unfinished gesture events
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(){ | |
var directions = { | |
up: 0, | |
down: 180, | |
left: 270, | |
right: 90 | |
}; | |
xtag.pseudos.gesture = { | |
onAdd: function(pseudo){ | |
var gesture = pseudo.source.gesture = xtag.merge(pseudo.source.gesture, JSON.parse(pseudo.value)); | |
console.log(gesture); | |
switch (pseudo.source.type) { | |
case 'swipe': | |
var hasDir = gesture.direction in directions; | |
if (hasDir) gesture.degree = directions[gesture.direction]; | |
if (gesture.degree != null) { | |
gesture.inverse = (gesture.degree + 180) % 360; | |
gesture.range = {}; | |
var poles = [gesture.degree]; | |
if (!hasDir && !gesture.directional) poles.push(gesture.inverse); | |
poles.forEach(function(degree){ | |
var tolerance = -gesture.tolerance | |
span = (gesture.tolerance * -2) - 1; | |
while (span++) { | |
var item = degree + tolerance; | |
if (item < 0) gesture.range[361 + tolerance] = 1; | |
else if (item > 360) gesture.range[item - 360] = 1; | |
else gesture.range[item] = 1; | |
++tolerance; | |
} | |
}); | |
} | |
break; | |
} | |
} | |
}; | |
/* var touchFxEnd = false; | |
xtag.pseudos.touchFx = { | |
fx: { | |
'ring': function(event, element){ | |
xtag.addEvent(element, 'animationend', function(){ | |
if (document.contains(element)) document.body.removeChild(element); | |
}) | |
} | |
}, | |
action: function(pseudo, event){ | |
var touches = event.touches, | |
fx = xtag.pseudos.touchFx.fx[pseudo.value]; | |
if (touches && fx) { | |
var i = touches.length; | |
while(i--) { | |
var id = 'touch-fx-' + pseudo.value + '-' + touches[i].identifier, | |
div = document.getElementById(id); | |
if (div) { | |
div.className | |
} | |
else { | |
div = document.createElement('div'); | |
div.id = id; | |
div.className = 'touch-fx touch-fx-' + pseudo.value; | |
document.body.appendChild(div); | |
} | |
div.style.top = touches[i].pageY + 'px'; | |
div.style.left = touches[i].pageX + 'px'; | |
fx.call(this, event, div); | |
} | |
} | |
return true; | |
} | |
}; */ | |
xtag.pseudos.touches = { | |
onCompiled: function(stack, pseudo){ | |
var condition = pseudo.source.condition; | |
pseudo.source.condition = function(e){ | |
return ((Number(pseudo.value) || 1) == (e.touches ? e.touches.length : 1)) ? | |
condition.apply(this, xtag.toArray(arguments)) : null; | |
} | |
} | |
}; | |
function cancelGesture(el, type){ | |
xtag.fireEvent(el, 'gesturecancel', { detail: { gesture: type } }); | |
} | |
function checkTimeout(time){ | |
return new Date().getTime() < time; | |
} | |
function checkDistance(start, now, distance){ | |
return xtag.toArray(now.touches).every(function(touch, i){ | |
return !start.touches[i] || | |
(Math.abs(touch.pageX - start.touches[i].pageX) > distance || | |
Math.abs(touch.pageY - start.touches[i].pageY) > distance); | |
}); | |
} | |
var degrad = 180 / Math.PI; | |
function checkAngle(custom, event){ | |
if (custom.gesture.degree == null) return true; | |
return xtag.toArray(event.touches).every(function(touch, i){ | |
if (!custom.startEvent.touches[i]) return true; | |
var degree = ~~(Math.atan2(touch.pageY - custom.startEvent.touches[i].pageY, touch.pageX - custom.startEvent.touches[i].pageX) * degrad); | |
degree += ((degree < -90) ? 450 : 90); | |
return custom.gesture.range[degree]; | |
}); | |
} | |
xtag.customEvents.swipe = { | |
attach: ['tapstart', 'tapmove', 'tapend', 'dragend'], | |
gesture: { | |
degree: null, | |
timeout: 1000, | |
tolerance: 25, | |
distance: 100, | |
direction: null, | |
directional: true | |
}, | |
condition: function(event, custom){ | |
if (event.type == 'dragend' || event.type == 'tapend') { | |
delete custom.startEvent; | |
delete custom.startTime; | |
return; | |
} | |
var start = custom.startEvent; | |
if (start && event.type == 'tapmove') { | |
if (checkTimeout(custom.startTime)) { | |
if (checkDistance(start, event, custom.gesture.distance) && checkAngle(custom, event)) { | |
delete custom.startEvent; | |
delete custom.startTime; | |
return true; | |
} | |
} | |
else cancelGesture(event.target, 'swipe'); | |
} | |
if (event.type == 'tapstart') { | |
custom.startEvent = event; | |
custom.startTime = new Date().getTime() + custom.gesture.timeout; | |
} | |
} | |
}; | |
/*** Pinch ***/ | |
/* function getCentroid(points){ | |
var f; | |
var x = y = area = 0; | |
var index = points.length; | |
while (--index) { | |
var p1 = points[index], | |
p2 = points[index - 1]; | |
f = p1.x * p2.y - p2.x * p1.y; | |
x += (p1.x + p2.x) * f; | |
y += (p1.y + p2.y) * f; | |
area += p1.x * p2.y; | |
area -= p1.y * p2.x; | |
} | |
area /= 2; | |
f = area * 6; | |
return { x: x / f, y: y / f } | |
} */ | |
function getPolygonArea(touches){ | |
var area = 0; | |
last = 0, | |
length = touches.length, | |
_touches = xtag.toArray(touches); | |
_touches.forEach(function(touch, i){ | |
last = (i + 1) % length; | |
area += touch.pageX * _touches[last].pageY; | |
area -= touch.pageY * _touches[last].pageX; | |
}); | |
return Math.abs(area / 2); | |
} | |
xtag.customEvents.pinch = { | |
attach: ['tapstart', 'tapmove', 'tapend', 'dragend', 'scrollwheel'], | |
gesture: { | |
tolerance: 25, | |
degree: null, | |
distance: 100, | |
duration: 1000, | |
direction: null, | |
directional: true | |
}, | |
condition: function(event, custom){ | |
if (event.type == 'scrollwheel') { | |
//console.log(event.delta); | |
} | |
else { | |
if (event.type == 'tapstart') { | |
custom.startArea = getPolygonArea(event.touches); | |
return; | |
} | |
else if (event.touches.length > 1){ | |
if (event.touches.length == 2) { | |
} | |
else { | |
var area = getPolygonArea(event.touches); | |
if (area != custom.startArea) { | |
event.pinchArea = area; | |
event.pinchDirection = area > custom.startArea ? 'out' : 'in'; | |
custom.startArea = area; | |
return true; | |
} | |
} | |
} | |
} | |
} | |
}; | |
/*** Long Tap ***/ | |
function clearLongtap(custom){ | |
clearTimeout(custom.timer); | |
xtag.removeEvents(document, custom.move); | |
} | |
xtag.customEvents.longtap = { | |
attach: ['tapstart'], | |
gesture: { | |
tolerance: 6, | |
duration: 450 | |
}, | |
condition: function(event, custom){ | |
clearTimeout(custom.timer); | |
custom.startEvent = event; | |
custom.timer = setTimeout(function(){ | |
xtag.fireEvent(event.target, 'longtap', { baseEvent: event }); | |
}, custom.gesture.duration); | |
custom.move = xtag.addEvents(document, { | |
move: function(e){ | |
if (checkDistance(custom.startEvent, e, custom.gesture.tolerance)) { | |
clearLongtap(custom); | |
} | |
}, | |
tapend: function(e){ | |
clearLongtap(custom); | |
} | |
}); | |
} | |
}; | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment