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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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,11 +701,21 @@ 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){
/**

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({