mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-04-30 00:00:04 +08:00
feat(Keyboard): add touch events
Can be enabled passing `useTouchEvents` option to the Keyboard constructor.
This commit is contained in:
@@ -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){
|
||||
/**
|
||||
|
||||
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user