feat(Keyboard): add touch events

Can be enabled passing `useTouchEvents` option to the Keyboard constructor.
This commit is contained in:
Julien Sergent
2018-11-15 16:49:22 +01:00
parent 2d8799367a
commit f8fb18e244
5 changed files with 47 additions and 9 deletions
+19 -6
View File
@@ -635,6 +635,7 @@ class SimpleKeyboard {
let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
let useTouchEvents = this.options.useTouchEvents || false
/**
* Account for buttonTheme, if set
@@ -700,12 +701,22 @@ class SimpleKeyboard {
*/
var buttonDOM = document.createElement('div');
buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
buttonDOM.onclick = () => {
this.isMouseHold = false;
this.handleButtonClicked(button);
if (useTouchEvents) {
buttonDOM.ontouchstart = (e) => {
this.handleButtonClicked(button);
this.handleButtonMouseDown(button, e);
}
buttonDOM.ontouchend = e => this.handleButtonMouseUp();
buttonDOM.ontouchcancel = e => this.handleButtonMouseUp();
} else {
buttonDOM.onclick = () => {
this.isMouseHold = false;
this.handleButtonClicked(button);
}
buttonDOM.onmousedown = (e) => this.handleButtonMouseDown(button, e);
}
buttonDOM.onmousedown = (e) => this.handleButtonMouseDown(button, e);
/**
* Adding identifier
*/
@@ -759,7 +770,9 @@ class SimpleKeyboard {
/**
* Handling mouseup
*/
document.onmouseup = () => this.handleButtonMouseUp();
if (!useTouchEvents) {
document.onmouseup = () => this.handleButtonMouseUp();
}
if(!this.initialized){
/**
+25
View File
@@ -45,6 +45,31 @@ it('Keyboard will run with debug option set', () => {
expect(keyboard.options.debug).toBeTruthy();
});
it('Keyboard will use touch events', () => {
let touched = false
testUtil.clear()
document.body.innerHTML = `
<div id="keyboard"></div>
`;
const keyboard = new Keyboard('#keyboard', {
useTouchEvents: true,
onChange: () => touched = true,
layout: {
default: ["q"]
}
});
keyboard.getButtonElement("q").ontouchstart();
keyboard.getButtonElement("q").ontouchend();
expect(keyboard.options.useTouchEvents).toBeTruthy();
expect(touched).toBeTruthy();
expect(keyboard.getInput()).toBe('q');
})
it('Keyboard standard buttons will work', () => {
testUtil.setDOM();
let keyboard = new Keyboard({