diff --git a/src/demo/BasicDemo.js b/src/demo/BasicDemo.js index ced4c18de..6b10093ef 100644 --- a/src/demo/BasicDemo.js +++ b/src/demo/BasicDemo.js @@ -16,8 +16,9 @@ class Demo { * Demo Start */ this.keyboard = new Keyboard({ - onChange: input => this.onChange(input), - onKeyPress: button => this.onKeyPress(button) + onChange: this.onChange, + onKeyPress: this.onKeyPress, + useMouseEvents: true }); /** @@ -28,13 +29,13 @@ class Demo { }); } - onChange(input) { + onChange = (input) => { document.querySelector(".input").value = input; console.log("Input changed", input); } - onKeyPress(button) { - console.log("Button pressed", button); + onKeyPress = (button, e) => { + console.log("Button pressed", button, e); /** * If you want to handle the shift and caps lock buttons @@ -42,7 +43,11 @@ class Demo { if (button === "{shift}" || button === "{lock}") this.handleShift(); } - handleShift() { + onKeyReleased = (button, e) => { + console.log("Button released", button, e); + } + + handleShift = () => { const currentLayout = this.keyboard.options.layoutName; const shiftToggle = currentLayout === "default" ? "shift" : "default"; diff --git a/src/demo/index.js b/src/demo/index.js index e774ef525..fd5912d84 100644 --- a/src/demo/index.js +++ b/src/demo/index.js @@ -3,18 +3,18 @@ import "./css/index.css"; /** * Demos */ -//import BasicDemo from "./BasicDemo"; +import BasicDemo from "./BasicDemo"; //import RTLDemo from "./RTLDemo"; //import ButtonThemeDemo from "./ButtonThemeDemo"; //import DOMElementDemo from "./DOMElementDemo"; //import FullKeyboardDemo from "./FullKeyboardDemo"; //import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo"; -import CandidateBoxDemo from "./CandidateBoxDemo"; +//import CandidateBoxDemo from "./CandidateBoxDemo"; /** * Selected demo */ -const SELECTED_DEMO = CandidateBoxDemo; +const SELECTED_DEMO = BasicDemo; /** * Bootstrap diff --git a/src/lib/components/Keyboard.ts b/src/lib/components/Keyboard.ts index 072e46ca5..a738ced74 100644 --- a/src/lib/components/Keyboard.ts +++ b/src/lib/components/Keyboard.ts @@ -138,6 +138,7 @@ class SimpleKeyboard { * @property {boolean} disableCandidateNormalization Disables the automatic normalization for selected layout candidates * @property {boolean} enableLayoutCandidatesKeyPress Enables onKeyPress triggering for layoutCandidate items * @property {boolean} updateCaretOnSelectionChange Updates caret when selectionchange event is fired + * @property {boolean} clickOnMouseDown When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown */ this.options = { layoutName: "default", @@ -1948,7 +1949,10 @@ class SimpleKeyboard { * This fires handler before onKeyReleased, therefore when that option is set we will fire the handler * in onmousedown instead */ - if (typeof this.options.onKeyReleased !== "function") { + if ( + typeof this.options.onKeyReleased !== "function" && + !(this.options.useMouseEvents && this.options.clickOnMouseDown) + ) { this.handleButtonClicked(button, e); } }; @@ -1957,7 +1961,10 @@ class SimpleKeyboard { * Fire button handler for onKeyReleased use-case */ if ( - typeof this.options.onKeyReleased === "function" && + ( + typeof this.options.onKeyReleased === "function" || + (this.options.useMouseEvents && this.options.clickOnMouseDown) + ) && !this.isMouseHold ) { this.handleButtonClicked(button, e); diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts index d23676a10..736eb3dd5 100644 --- a/src/lib/interfaces.ts +++ b/src/lib/interfaces.ts @@ -270,6 +270,11 @@ export interface KeyboardOptions { */ updateCaretOnSelectionChange?: boolean; + /** + * When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown + */ + clickOnMouseDown?: boolean; + /** * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts). */