85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
|
function simulateKeyEvent(eventType, keyCode, charCode) {
|
||
|
|
var e = document.createEventObject ? document.createEventObject() : document.createEvent("Events");
|
||
|
|
if (e.initEvent) e.initEvent(eventType, true, true);
|
||
|
|
|
||
|
|
e.keyCode = keyCode;
|
||
|
|
e.which = keyCode;
|
||
|
|
e.charCode = charCode;
|
||
|
|
|
||
|
|
// Dispatch directly to Emscripten's html5.h API (use this if page uses emscripten/html5.h event handling):
|
||
|
|
if (typeof JSEvents !== 'undefined' && JSEvents.eventHandlers && JSEvents.eventHandlers.length > 0) {
|
||
|
|
for(var i = 0; i < JSEvents.eventHandlers.length; ++i) {
|
||
|
|
if ((JSEvents.eventHandlers[i].target == Module['canvas'] || JSEvents.eventHandlers[i].target == window)
|
||
|
|
&& JSEvents.eventHandlers[i].eventTypeString == eventType) {
|
||
|
|
JSEvents.eventHandlers[i].handlerFunc(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// Dispatch to browser for real (use this if page uses SDL or something else for event handling):
|
||
|
|
Module['canvas'].dispatchEvent ? Module['canvas'].dispatchEvent(e) : Module['canvas'].fireEvent("on" + eventType, e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Mappings
|
||
|
|
const keyMap = {};
|
||
|
|
const keysDown = {};
|
||
|
|
|
||
|
|
/** Add virtual key binding */
|
||
|
|
function bindKey(elem, key) {
|
||
|
|
keyMap[elem] = key;
|
||
|
|
const ne = document.getElementById(elem);
|
||
|
|
|
||
|
|
ne.addEventListener('touchstart', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
simulateKeyEvent('keydown', key);
|
||
|
|
keysDown[e.target.id] = elem;
|
||
|
|
});
|
||
|
|
ne.addEventListener('touchend', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
if (keysDown[e.target.id] && keyMap[keysDown[e.target.id]]) {
|
||
|
|
simulateKeyEvent('keyup', keyMap[keysDown[e.target.id]]);
|
||
|
|
}
|
||
|
|
keysDown[e.target.id] = 0;
|
||
|
|
});
|
||
|
|
|
||
|
|
ne.addEventListener('touchmove', function(event) {
|
||
|
|
const myLocation = event.changedTouches[0];
|
||
|
|
const realTarget = document.elementFromPoint(myLocation.clientX, myLocation.clientY).id;
|
||
|
|
const origTarget = keysDown[myLocation.target.id];
|
||
|
|
|
||
|
|
if (origTarget !== realTarget) {
|
||
|
|
if (origTarget) {
|
||
|
|
simulateKeyEvent('keyup', keyMap[origTarget]);
|
||
|
|
keysDown[myLocation.target.id] = 0;
|
||
|
|
}
|
||
|
|
if (keyMap[realTarget]) {
|
||
|
|
simulateKeyEvent('keydown', keyMap[realTarget]);
|
||
|
|
keysDown[myLocation.target.id] = realTarget;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function is_touch_device() {
|
||
|
|
try {
|
||
|
|
document.createEvent("TouchEvent");
|
||
|
|
return true;
|
||
|
|
} catch (e) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const resize = function() {
|
||
|
|
const el = document.getElementById('canvas');
|
||
|
|
if (window.innerHeight > window.innerWidth) {
|
||
|
|
el.style.height = 'unset';
|
||
|
|
el.style.width = '100%';
|
||
|
|
} else {
|
||
|
|
el.style.width = 'unset';
|
||
|
|
el.style.height = '100%';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('resize', resize);
|
||
|
|
window.addEventListener('load', resize);
|