|
|
|
@ -5,267 +5,256 @@
|
|
|
|
|
/* jshint bitwise: false */ |
|
|
|
|
/* global GLOBAL: true */ |
|
|
|
|
|
|
|
|
|
function FingerBlast(element) { |
|
|
|
|
'use strict'; |
|
|
|
|
|
|
|
|
|
this.element = typeof element === 'string' ? document.querySelector(element) : element; |
|
|
|
|
this.listen(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
FingerBlast.prototype = { |
|
|
|
|
x: NaN, |
|
|
|
|
y: NaN, |
|
|
|
|
|
|
|
|
|
startDistance: NaN, |
|
|
|
|
startAngle: NaN, |
|
|
|
|
(function () { |
|
|
|
|
|
|
|
|
|
mouseIsDown: false, |
|
|
|
|
'use strict'; |
|
|
|
|
|
|
|
|
|
listen: function () { |
|
|
|
|
'use strict'; |
|
|
|
|
function FingerBlast(element) { |
|
|
|
|
this.element = typeof element === 'string' ? document.querySelector(element) : element; |
|
|
|
|
|
|
|
|
|
var activate = this.activate.bind(this); |
|
|
|
|
var deactivate = this.deactivate.bind(this); |
|
|
|
|
if (this.element) { |
|
|
|
|
this.listen(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function contains (element, ancestor) { |
|
|
|
|
var descendants, index, descendant; |
|
|
|
|
if ('compareDocumentPosition' in ancestor) { |
|
|
|
|
return !!(ancestor.compareDocumentPosition(element) & 16); |
|
|
|
|
} else if ('contains' in ancestor) { |
|
|
|
|
return ancestor !== element && ancestor.contains(element); |
|
|
|
|
} else { |
|
|
|
|
for ((descendants = ancestor.getElementsByTagName('*')), index = 0; (descendant = descendants[index++]);) { |
|
|
|
|
if (descendant === element) { |
|
|
|
|
return true; |
|
|
|
|
FingerBlast.prototype = { |
|
|
|
|
x: NaN, |
|
|
|
|
y: NaN, |
|
|
|
|
|
|
|
|
|
startDistance: NaN, |
|
|
|
|
startAngle: NaN, |
|
|
|
|
|
|
|
|
|
mouseIsDown: false, |
|
|
|
|
|
|
|
|
|
listen: function () { |
|
|
|
|
var activate = this.activate.bind(this); |
|
|
|
|
var deactivate = this.deactivate.bind(this); |
|
|
|
|
|
|
|
|
|
function contains (element, ancestor) { |
|
|
|
|
var descendants, index, descendant; |
|
|
|
|
if ('compareDocumentPosition' in ancestor) { |
|
|
|
|
return !!(ancestor.compareDocumentPosition(element) & 16); |
|
|
|
|
} else if ('contains' in ancestor) { |
|
|
|
|
return ancestor !== element && ancestor.contains(element); |
|
|
|
|
} else { |
|
|
|
|
for ((descendants = ancestor.getElementsByTagName('*')), index = 0; (descendant = descendants[index++]);) { |
|
|
|
|
if (descendant === element) { |
|
|
|
|
return true; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.element.addEventListener('mouseover', function (e) { |
|
|
|
|
var target = e.relatedTarget; |
|
|
|
|
if (target !== this && !contains(target, this)) { |
|
|
|
|
activate(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.element.addEventListener('mouseover', function (e) { |
|
|
|
|
var target = e.relatedTarget; |
|
|
|
|
if (target !== this && !contains(target, this)) { |
|
|
|
|
activate(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.element.addEventListener('mouseout', function (e) { |
|
|
|
|
var target = e.relatedTarget; |
|
|
|
|
if (target !== this && !contains(target, this)) { |
|
|
|
|
deactivate(e); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
this.element.addEventListener('mouseout', function (e) { |
|
|
|
|
var target = e.relatedTarget; |
|
|
|
|
if (target !== this && !contains(target, this)) { |
|
|
|
|
deactivate(e); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
activate: function () { |
|
|
|
|
'use strict'; |
|
|
|
|
activate: function () { |
|
|
|
|
if (this.active) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.element.addEventListener('mousedown', (this.touchStart = this.touchStart.bind(this)), true); |
|
|
|
|
this.element.addEventListener('mousemove', (this.touchMove = this.touchMove.bind(this)), true); |
|
|
|
|
this.element.addEventListener('mouseup', (this.touchEnd = this.touchEnd.bind(this)), true); |
|
|
|
|
this.element.addEventListener('click', (this.click = this.click.bind(this)), true); |
|
|
|
|
this.active = true; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
deactivate: function (e) { |
|
|
|
|
this.active = false; |
|
|
|
|
if (this.mouseIsDown) { |
|
|
|
|
this.touchEnd(e); |
|
|
|
|
} |
|
|
|
|
this.element.removeEventListener('mousedown', this.touchStart, true); |
|
|
|
|
this.element.removeEventListener('mousemove', this.touchMove, true); |
|
|
|
|
this.element.removeEventListener('mouseup', this.touchEnd, true); |
|
|
|
|
this.element.removeEventListener('click', this.click, true); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
click: function (e) { |
|
|
|
|
if (e.synthetic) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
e.preventDefault(); |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
if (this.active) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.element.addEventListener('mousedown', (this.touchStart = this.touchStart.bind(this)), true); |
|
|
|
|
this.element.addEventListener('mousemove', (this.touchMove = this.touchMove.bind(this)), true); |
|
|
|
|
this.element.addEventListener('mouseup', (this.touchEnd = this.touchEnd.bind(this)), true); |
|
|
|
|
this.element.addEventListener('click', (this.click = this.click.bind(this)), true); |
|
|
|
|
this.active = true; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
deactivate: function (e) { |
|
|
|
|
'use strict'; |
|
|
|
|
|
|
|
|
|
this.active = false; |
|
|
|
|
if (this.mouseIsDown) { |
|
|
|
|
this.touchEnd(e); |
|
|
|
|
} |
|
|
|
|
this.element.removeEventListener('mousedown', this.touchStart, true); |
|
|
|
|
this.element.removeEventListener('mousemove', this.touchMove, true); |
|
|
|
|
this.element.removeEventListener('mouseup', this.touchEnd, true); |
|
|
|
|
this.element.removeEventListener('click', this.click, true); |
|
|
|
|
}, |
|
|
|
|
touchStart: function (e) { |
|
|
|
|
if (e.synthetic || /input|textarea/.test(e.target.tagName.toLowerCase())) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
click: function (e) { |
|
|
|
|
'use strict'; |
|
|
|
|
this.mouseIsDown = true; |
|
|
|
|
|
|
|
|
|
if (e.synthetic) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
e.preventDefault(); |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
}, |
|
|
|
|
e.preventDefault(); |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
|
|
|
|
|
touchStart: function (e) { |
|
|
|
|
'use strict'; |
|
|
|
|
this.fireTouchEvents('touchstart', e); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
if (e.synthetic || /input|textarea/.test(e.target.tagName.toLowerCase())) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
touchMove: function (e) { |
|
|
|
|
if (e.synthetic) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.mouseIsDown = true; |
|
|
|
|
e.preventDefault(); |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
this.move(e.clientX, e.clientY); |
|
|
|
|
|
|
|
|
|
this.fireTouchEvents('touchstart', e); |
|
|
|
|
}, |
|
|
|
|
if (this.mouseIsDown) { |
|
|
|
|
this.fireTouchEvents('touchmove', e); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
touchMove: function (e) { |
|
|
|
|
'use strict'; |
|
|
|
|
touchEnd: function (e) { |
|
|
|
|
if (e.synthetic) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (e.synthetic) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.mouseIsDown = false; |
|
|
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
e.preventDefault(); |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
|
|
|
|
|
this.move(e.clientX, e.clientY); |
|
|
|
|
this.fireTouchEvents('touchend', e); |
|
|
|
|
|
|
|
|
|
if (this.mouseIsDown) { |
|
|
|
|
this.fireTouchEvents('touchmove', e); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
if (!this.target) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
touchEnd: function (e) { |
|
|
|
|
'use strict'; |
|
|
|
|
// Mobile Safari moves all the mouse events to fire after the touchend event.
|
|
|
|
|
this.target.dispatchEvent(this.createMouseEvent('mouseover', e)); |
|
|
|
|
this.target.dispatchEvent(this.createMouseEvent('mousemove', e)); |
|
|
|
|
this.target.dispatchEvent(this.createMouseEvent('mousedown', e)); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
if (e.synthetic) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
fireTouchEvents: function (eventName, originalEvent) { |
|
|
|
|
var events = []; |
|
|
|
|
var gestures = []; |
|
|
|
|
|
|
|
|
|
this.mouseIsDown = false; |
|
|
|
|
if (!this.target) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
// Convert 'ontouch*' properties and attributes to listeners.
|
|
|
|
|
var onEventName = 'on' + eventName; |
|
|
|
|
|
|
|
|
|
this.fireTouchEvents('touchend', e); |
|
|
|
|
if (onEventName in this.target) { |
|
|
|
|
console.warn('Converting `' + onEventName + '` property to event listener.', this.target); |
|
|
|
|
this.target.addEventListener(eventName, this.target[onEventName], false); |
|
|
|
|
delete this.target[onEventName]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (!this.target) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (this.target.hasAttribute(onEventName)) { |
|
|
|
|
console.warn('Converting `' + onEventName + '` attribute to event listener.', this.target); |
|
|
|
|
var handler = new GLOBAL.Function('event', this.target.getAttribute(onEventName)); |
|
|
|
|
this.target.addEventListener(eventName, handler, false); |
|
|
|
|
this.target.removeAttribute(onEventName); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Mobile Safari moves all the mouse events to fire after the touchend event.
|
|
|
|
|
this.target.dispatchEvent(this.createMouseEvent('mouseover', e)); |
|
|
|
|
this.target.dispatchEvent(this.createMouseEvent('mousemove', e)); |
|
|
|
|
this.target.dispatchEvent(this.createMouseEvent('mousedown', e)); |
|
|
|
|
}, |
|
|
|
|
// Set up a new event with the coordinates of the finger.
|
|
|
|
|
var touch = this.createMouseEvent(eventName, originalEvent); |
|
|
|
|
|
|
|
|
|
fireTouchEvents: function (eventName, originalEvent) { |
|
|
|
|
'use strict'; |
|
|
|
|
events.push(touch); |
|
|
|
|
|
|
|
|
|
var events = []; |
|
|
|
|
var gestures = []; |
|
|
|
|
// Figure out scale and rotation.
|
|
|
|
|
if (events.length > 1) { |
|
|
|
|
var x = events[0].pageX - events[1].pageX; |
|
|
|
|
var y = events[0].pageY - events[1].pageY; |
|
|
|
|
|
|
|
|
|
if (!this.target) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); |
|
|
|
|
var angle = Math.atan2(x, y) * (180 / Math.PI); |
|
|
|
|
|
|
|
|
|
// Convert 'ontouch*' properties and attributes to listeners.
|
|
|
|
|
var onEventName = 'on' + eventName; |
|
|
|
|
var gestureName = 'gesturechange'; |
|
|
|
|
|
|
|
|
|
if (onEventName in this.target) { |
|
|
|
|
console.warn('Converting `' + onEventName + '` property to event listener.', this.target); |
|
|
|
|
this.target.addEventListener(eventName, this.target[onEventName], false); |
|
|
|
|
delete this.target[onEventName]; |
|
|
|
|
} |
|
|
|
|
if (eventName === 'touchstart') { |
|
|
|
|
gestureName = 'gesturestart'; |
|
|
|
|
this.startDistance = distance; |
|
|
|
|
this.startAngle = angle; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (this.target.hasAttribute(onEventName)) { |
|
|
|
|
console.warn('Converting `' + onEventName + '` attribute to event listener.', this.target); |
|
|
|
|
var handler = new GLOBAL.Function('event', this.target.getAttribute(onEventName)); |
|
|
|
|
this.target.addEventListener(eventName, handler, false); |
|
|
|
|
this.target.removeAttribute(onEventName); |
|
|
|
|
} |
|
|
|
|
if (eventName === 'touchend') { |
|
|
|
|
gestureName = 'gestureend'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Set up a new event with the coordinates of the finger.
|
|
|
|
|
var touch = this.createMouseEvent(eventName, originalEvent); |
|
|
|
|
events.forEach(function(event) { |
|
|
|
|
var gesture = this.createMouseEvent.call(event._finger, gestureName, event); |
|
|
|
|
gestures.push(gesture); |
|
|
|
|
}.bind(this)); |
|
|
|
|
|
|
|
|
|
events.push(touch); |
|
|
|
|
events.concat(gestures).forEach(function(event) { |
|
|
|
|
event.scale = distance / this.startDistance; |
|
|
|
|
event.rotation = this.startAngle - angle; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Figure out scale and rotation.
|
|
|
|
|
if (events.length > 1) { |
|
|
|
|
var x = events[0].pageX - events[1].pageX; |
|
|
|
|
var y = events[0].pageY - events[1].pageY; |
|
|
|
|
// Loop through the events array and fill in each touch array.
|
|
|
|
|
events.forEach(function(touch) { |
|
|
|
|
touch.touches = events.filter(function(e) { |
|
|
|
|
return ~e.type.indexOf('touch') && e.type !== 'touchend'; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
var distance = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); |
|
|
|
|
var angle = Math.atan2(x, y) * (180 / Math.PI); |
|
|
|
|
touch.changedTouches = events.filter(function(e) { |
|
|
|
|
return ~e.type.indexOf('touch') && e._finger.target === touch._finger.target; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
var gestureName = 'gesturechange'; |
|
|
|
|
touch.targetTouches = touch.changedTouches.filter(function(e) { |
|
|
|
|
return ~e.type.indexOf('touch') && e.type !== 'touchend'; |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
if (eventName === 'touchstart') { |
|
|
|
|
gestureName = 'gesturestart'; |
|
|
|
|
this.startDistance = distance; |
|
|
|
|
this.startAngle = angle; |
|
|
|
|
} |
|
|
|
|
// Then fire the events.
|
|
|
|
|
events.concat(gestures).forEach(function(event, i) { |
|
|
|
|
event.identifier = i; |
|
|
|
|
event._finger.target.dispatchEvent(event); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
if (eventName === 'touchend') { |
|
|
|
|
gestureName = 'gestureend'; |
|
|
|
|
} |
|
|
|
|
createMouseEvent: function (eventName, originalEvent) { |
|
|
|
|
var e = document.createEvent('MouseEvent'); |
|
|
|
|
|
|
|
|
|
events.forEach(function(event) { |
|
|
|
|
var gesture = this.createMouseEvent.call(event._finger, gestureName, event); |
|
|
|
|
gestures.push(gesture); |
|
|
|
|
}.bind(this)); |
|
|
|
|
e.initMouseEvent(eventName, true, true, |
|
|
|
|
originalEvent.view, originalEvent.detail, |
|
|
|
|
this.x || originalEvent.screenX, this.y || originalEvent.screenY, |
|
|
|
|
this.x || originalEvent.clientX, this.y || originalEvent.clientY, |
|
|
|
|
originalEvent.ctrlKey, originalEvent.shiftKey, |
|
|
|
|
originalEvent.altKey, originalEvent.metaKey, |
|
|
|
|
originalEvent.button, this.target || originalEvent.relatedTarget |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
events.concat(gestures).forEach(function(event) { |
|
|
|
|
event.scale = distance / this.startDistance; |
|
|
|
|
event.rotation = this.startAngle - angle; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
e.synthetic = true; |
|
|
|
|
e._finger = this; |
|
|
|
|
|
|
|
|
|
// Loop through the events array and fill in each touch array.
|
|
|
|
|
events.forEach(function(touch) { |
|
|
|
|
touch.touches = events.filter(function(e) { |
|
|
|
|
return ~e.type.indexOf('touch') && e.type !== 'touchend'; |
|
|
|
|
}); |
|
|
|
|
return e; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
touch.changedTouches = events.filter(function(e) { |
|
|
|
|
return ~e.type.indexOf('touch') && e._finger.target === touch._finger.target; |
|
|
|
|
}); |
|
|
|
|
move: function (x, y) { |
|
|
|
|
if (isNaN(x) || isNaN(y)) { |
|
|
|
|
this.target = null; |
|
|
|
|
} else { |
|
|
|
|
this.x = x; |
|
|
|
|
this.y = y; |
|
|
|
|
|
|
|
|
|
touch.targetTouches = touch.changedTouches.filter(function(e) { |
|
|
|
|
return ~e.type.indexOf('touch') && e.type !== 'touchend'; |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// Then fire the events.
|
|
|
|
|
events.concat(gestures).forEach(function(event, i) { |
|
|
|
|
event.identifier = i; |
|
|
|
|
event._finger.target.dispatchEvent(event); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
createMouseEvent: function (eventName, originalEvent) { |
|
|
|
|
'use strict'; |
|
|
|
|
|
|
|
|
|
var e = document.createEvent('MouseEvent'); |
|
|
|
|
|
|
|
|
|
e.initMouseEvent(eventName, true, true, |
|
|
|
|
originalEvent.view, originalEvent.detail, |
|
|
|
|
this.x || originalEvent.screenX, this.y || originalEvent.screenY, |
|
|
|
|
this.x || originalEvent.clientX, this.y || originalEvent.clientY, |
|
|
|
|
originalEvent.ctrlKey, originalEvent.shiftKey, |
|
|
|
|
originalEvent.altKey, originalEvent.metaKey, |
|
|
|
|
originalEvent.button, this.target || originalEvent.relatedTarget |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
e.synthetic = true; |
|
|
|
|
e._finger = this; |
|
|
|
|
|
|
|
|
|
return e; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
move: function (x, y) { |
|
|
|
|
'use strict'; |
|
|
|
|
|
|
|
|
|
if (isNaN(x) || isNaN(y)) { |
|
|
|
|
this.target = null; |
|
|
|
|
} else { |
|
|
|
|
this.x = x; |
|
|
|
|
this.y = y; |
|
|
|
|
|
|
|
|
|
if (!this.mouseIsDown) { |
|
|
|
|
this.target = document.elementFromPoint(x, y); |
|
|
|
|
if (!this.mouseIsDown) { |
|
|
|
|
this.target = document.elementFromPoint(x, y); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
window.FingerBlast = FingerBlast; |
|
|
|
|
|
|
|
|
|
}()); |
|
|
|
|