github/simple-keyboard
github/simple-keyboard
3
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-01-19 16:52:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Using PointerEvents on browsers that support it

Browse Source
This commit is contained in:
Francisco Hodge 2019-03-07 07:32:07 -05:00
parent 47ddf0b1e8
commit 5ab58f2528
2 changed files with 66 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/lib/components/Keyboard.js
View File

@ -717,6 +717,29 @@ class SimpleKeyboard {
if (typeof this.options.beforeFirstRender === "function")
this.options.beforeFirstRender();
/**
* Notify about PointerEvents usage
*/
if (
this.utilities.pointerEventsSupported() &&
!this.options.useTouchEvents
) {
if (this.options.debug) {
console.log("Using PointerEvents as it is supported by this browser");
}
}
/**
* Notify about touch events usage
*/
if (this.options.useTouchEvents) {
if (this.options.debug) {
console.log(
"useTouchEvents has been enabled. Only touch events will be used."
);
}
}
}
/**
@ -868,22 +891,45 @@ class SimpleKeyboard {
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 => {
/**
* Handle button click event
*/
/* istanbul ignore next */
if (this.utilities.pointerEventsSupported() && !useTouchEvents) {
/**
* PointerEvents support
*/
buttonDOM.onpointerdown = e => {
if (this.options.preventMouseDownDefault) e.preventDefault();
this.handleButtonClicked(button);
this.handleButtonMouseDown(button, e);
};
buttonDOM.onpointerup = e => {
if (this.options.preventMouseDownDefault) e.preventDefault();
this.handleButtonMouseUp();
};
buttonDOM.onpointercancel = e => this.handleButtonMouseUp();
} else {
/**
* Fallback for browsers not supporting PointerEvents
*/
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 => {
if (this.options.preventMouseDownDefault) e.preventDefault();
this.handleButtonMouseDown(button, e);
};
}
}
/**

7
src/lib/services/Utilities.js
View File

@ -372,6 +372,13 @@ class Utilities {
return "ontouchstart" in window || navigator.maxTouchPoints;
}
/**
* Determines whether pointer events are supported
*/
pointerEventsSupported() {
return window.PointerEvent;
}
/**
* Bind all methods in a given class
*/