Skip to content

More emulation gestures #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ohmycode wants to merge 2 commits into
base: master
Choose a base branch
from
Open

More emulation gestures #10

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
539fe57
Update touch-emulator.js
Feb 26, 2016
85acc2f
Update touch-emulator.js
Feb 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 123 additions & 5 deletions touch-emulator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
"use strict";

var isMultiTouch = false;
var previousRotationAngle = 0;
var rotateAngleCache = 0;
var multiTouchStartPos;
var eventTarget;
var touchElements = {};
Expand Down Expand Up @@ -163,6 +165,7 @@

// reset
if (ev.type == 'mouseup') {
previousRotationAngle = (rotateAngleCache % 10) || 0;
multiTouchStartPos = null;
isMultiTouch = false;
eventTarget = null;
Expand Down Expand Up @@ -198,14 +201,50 @@
*/
function createTouchList(mouseEv) {
var touchList = new TouchList();
var type = TouchEmulator.multiTouchType;
var threeFingers = mouseEv.altKey;

if (isMultiTouch) {

var f = TouchEmulator.multiTouchOffset;
var deltaX = multiTouchStartPos.pageX - mouseEv.pageX;
var deltaY = multiTouchStartPos.pageY - mouseEv.pageY;

touchList.push(new Touch(eventTarget, 1, multiTouchStartPos, (deltaX*-1) - f, (deltaY*-1) + f));
touchList.push(new Touch(eventTarget, 2, multiTouchStartPos, deltaX+f, deltaY-f));
var x = TouchEmulator.multiTouchOffsetX || f;
var y = TouchEmulator.multiTouchOffsetY || f;

switch(TouchEmulator.multiTouchType) {

case 'vertical' :
touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
touchList.push(new Touch(eventTarget, 2, mouseEv, TouchEmulator.multiTouchOffsetX || 0, y));
if (threeFingers) {
touchList.push(new Touch(eventTarget, 3, mouseEv, (TouchEmulator.multiTouchOffsetX || 0) * 2, y*2));
}
break;

case 'horizontal' :
touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
touchList.push(new Touch(eventTarget, 2, mouseEv, x, TouchEmulator.multiTouchOffsetY || 0));
if (threeFingers) {
touchList.push(new Touch(eventTarget, 3, mouseEv, x*2, (TouchEmulator.multiTouchOffsetY || 0) * 2));
}
break;

case 'rotate' :
var deltaY = multiTouchStartPos.pageY - mouseEv.pageY;
var circleResolution = 0.05;
var angle = rotateAngleCache = previousRotationAngle + (deltaY * circleResolution);

touchList.push(new Touch(eventTarget, 1, multiTouchStartPos, f * Math.sin(angle), f * Math.cos(angle) ));
touchList.push(new Touch(eventTarget, 2, multiTouchStartPos, -1 * f * Math.sin(angle), -1 * f * Math.cos(angle) ));
break;

case 'pinch':
default:
var deltaX = multiTouchStartPos.pageX - mouseEv.pageX;
var deltaY = multiTouchStartPos.pageY - mouseEv.pageY;
touchList.push(new Touch(eventTarget, 1, multiTouchStartPos, (deltaX*-1) - f, (deltaY*-1) + f));
touchList.push(new Touch(eventTarget, 2, multiTouchStartPos, deltaX+f, deltaY-f));
break;
}
} else {
touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
}
Expand Down Expand Up @@ -349,6 +388,85 @@
}
};

var timer = null;
function notifyChange(message) {

if (!window.jQuery) {

console.log(message);
return;

}

if (!$('#touch-emulator-notify').length) {
var el = $('<div id="touch-emulator-notify" style="display:none;"><span></span></div>');
$('body').append(el);
el.css({
width : '300px',
height : '100px',
background : '#ccc',
opacity : 0.9,
position : 'fixed',
'line-height' : '100%',
padding : '1em',
left : '50%',
top : '50%',
'margin-left' : -300/2,
'margin-top' : -100/2,
'text-align' : 'center',
'display' : 'table'

});
el.find('span').css({
'vertical-align': 'middle',
display : 'table-cell',
'font-family' : '"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif',
'font-weight' : 300,
'font-size' : '35px'
});


}
var notifyContainer = $('#touch-emulator-notify');
var messageContainer = notifyContainer.find('span');
messageContainer.text(message);

clearTimeout(timer);
notifyContainer.stop().fadeIn();

timer = setTimeout(function(){
notifyContainer.fadeOut();
}, 500);
}

var types = ['vertical', 'horizontal', 'rotate', 'pinch'];
var selected = 3;

document.addEventListener('keydown', function(event) {

if(event.keyCode == 38) { // 'up arrow' key

TouchEmulator.multiTouchOffset += 5;
notifyChange('offset: ' + TouchEmulator.multiTouchOffset);

} else if(event.keyCode == 40) { // 'down arrow' key

TouchEmulator.multiTouchOffset -= 5;
notifyChange('offset: ' + TouchEmulator.multiTouchOffset);

} else if(event.keyCode == 84) { // 't' key

selected = (selected + 1) % types.length;

TouchEmulator.multiTouchType = types[selected];
var message = types[selected];

notifyChange(message);

}

});

// export
if (typeof define == "function" && define.amd) {
define(function() {
Expand Down