mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2025-01-19 16:52:59 +08:00
feat(Keyboard): add touch events
Can be enabled passing `useTouchEvents` option to the Keyboard constructor.
This commit is contained in:
parent
2d8799367a
commit
f8fb18e244
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
@ -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 : ""}`;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adding identifier
|
||||
@ -759,7 +770,9 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Handling mouseup
|
||||
*/
|
||||
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({
|
||||
|
Loading…
Reference in New Issue
Block a user