mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-08-02 00:00:07 +08:00
Compare commits
+2
-2
@@ -1,6 +1,6 @@
|
||||
/*!
|
||||
*
|
||||
* simple-keyboard v2.23.0
|
||||
* simple-keyboard v2.25.0
|
||||
* https://github.com/hodgef/simple-keyboard
|
||||
*
|
||||
* Copyright (c) Francisco Hodge (https://github.com/hodgef)
|
||||
@@ -8,5 +8,5 @@
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
*/body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:flex}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default:not(.hg-touch-events) .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
|
||||
*/body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:flex}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
/*!
|
||||
*
|
||||
* simple-keyboard v2.23.0 (Non-minified build)
|
||||
* simple-keyboard v2.25.0 (Non-minified build)
|
||||
* https://github.com/hodgef/simple-keyboard
|
||||
*
|
||||
* Copyright (c) Francisco Hodge (https://github.com/hodgef)
|
||||
@@ -8,4 +8,4 @@
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
*/body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:flex}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default:not(.hg-touch-events) .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
|
||||
*/body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:flex}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
|
||||
Vendored
+25
@@ -10,6 +10,12 @@ declare module 'simple-keyboard' {
|
||||
buttons: string;
|
||||
}
|
||||
|
||||
interface KeyboardButtonAttributes {
|
||||
attribute: string;
|
||||
value: string;
|
||||
buttons: string;
|
||||
}
|
||||
|
||||
interface KeyboardOptions {
|
||||
/**
|
||||
* Modify the keyboard layout.
|
||||
@@ -41,6 +47,11 @@ declare module 'simple-keyboard' {
|
||||
*/
|
||||
buttonTheme?: KeyboardButtonTheme[];
|
||||
|
||||
/**
|
||||
* A prop to add your own attributes to one or several buttons.
|
||||
*/
|
||||
buttonAttributes?: KeyboardButtonAttributes[];
|
||||
|
||||
/**
|
||||
* Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
|
||||
*/
|
||||
@@ -133,6 +144,11 @@ declare module 'simple-keyboard' {
|
||||
*/
|
||||
onKeyPress?: (button: string) => any;
|
||||
|
||||
/**
|
||||
* Executes the callback function on key release.
|
||||
*/
|
||||
onKeyReleased?: (button: string) => any;
|
||||
|
||||
/**
|
||||
* Executes the callback function on input change. Returns the current input's string.
|
||||
*/
|
||||
@@ -167,6 +183,10 @@ declare module 'simple-keyboard' {
|
||||
class Keyboard {
|
||||
constructor(selector: string, options: KeyboardOptions);
|
||||
constructor(options: KeyboardOptions);
|
||||
|
||||
/**
|
||||
* Options
|
||||
*/
|
||||
options: KeyboardOptions;
|
||||
|
||||
/**
|
||||
@@ -174,6 +194,11 @@ declare module 'simple-keyboard' {
|
||||
*/
|
||||
utilities?: any;
|
||||
|
||||
/**
|
||||
* caretPosition
|
||||
*/
|
||||
caretPosition?: number;
|
||||
|
||||
/**
|
||||
* Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
|
||||
* @param {string} buttons List of buttons to select (separated by a space).
|
||||
|
||||
+2
-2
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+392
-309
File diff suppressed because it is too large
Load Diff
Generated
+1648
-1064
File diff suppressed because it is too large
Load Diff
+30
-30
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "2.23.0",
|
||||
"version": "2.25.0",
|
||||
"description": "On-screen Javascript Virtual Keyboard",
|
||||
"main": "build/index.js",
|
||||
"types": "build/index.d.ts",
|
||||
@@ -40,48 +40,48 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.4.5",
|
||||
"@babel/core": "7.5.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.4.4",
|
||||
"@babel/preset-env": "^7.4.4",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@svgr/webpack": "4.3.0",
|
||||
"@typescript-eslint/eslint-plugin": "1.9.0",
|
||||
"@typescript-eslint/parser": "1.9.0",
|
||||
"babel-eslint": "10.0.1",
|
||||
"@babel/runtime": "7.5.4",
|
||||
"@svgr/webpack": "4.3.2",
|
||||
"@typescript-eslint/eslint-plugin": "1.13.0",
|
||||
"@typescript-eslint/parser": "1.13.0",
|
||||
"babel-eslint": "10.0.2",
|
||||
"babel-jest": "24.8.0",
|
||||
"babel-loader": "8.0.6",
|
||||
"babel-plugin-named-asset-import": "^0.3.2",
|
||||
"babel-preset-react-app": "^9.0.0",
|
||||
"case-sensitive-paths-webpack-plugin": "2.2.0",
|
||||
"copy-webpack-plugin": "^5.0.3",
|
||||
"css-loader": "2.1.1",
|
||||
"css-loader": "3.2.0",
|
||||
"dotenv": "8.0.0",
|
||||
"dotenv-expand": "5.1.0",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-config-react-app": "^4.0.1",
|
||||
"eslint-loader": "2.1.2",
|
||||
"eslint-plugin-flowtype": "3.9.1",
|
||||
"eslint-plugin-import": "2.17.3",
|
||||
"eslint-plugin-jsx-a11y": "6.2.1",
|
||||
"eslint-plugin-react": "7.13.0",
|
||||
"eslint-loader": "2.2.1",
|
||||
"eslint-plugin-flowtype": "3.13.0",
|
||||
"eslint-plugin-import": "2.18.2",
|
||||
"eslint-plugin-jsx-a11y": "6.2.3",
|
||||
"eslint-plugin-react": "7.14.3",
|
||||
"eslint-plugin-react-hooks": "^1.5.0",
|
||||
"file-loader": "3.0.1",
|
||||
"fs-extra": "8.0.1",
|
||||
"html-webpack-plugin": "4.0.0-beta.5",
|
||||
"file-loader": "4.2.0",
|
||||
"fs-extra": "8.1.0",
|
||||
"html-webpack-plugin": "4.0.0-beta.8",
|
||||
"identity-obj-proxy": "3.0.0",
|
||||
"is-wsl": "^2.0.0",
|
||||
"jest": "24.8.0",
|
||||
"jest-environment-jsdom-fourteen": "0.1.0",
|
||||
"jest-resolve": "24.8.0",
|
||||
"jest-watch-typeahead": "0.3.1",
|
||||
"mini-css-extract-plugin": "0.7.0",
|
||||
"optimize-css-assets-webpack-plugin": "5.0.1",
|
||||
"pnp-webpack-plugin": "1.4.3",
|
||||
"mini-css-extract-plugin": "0.8.0",
|
||||
"optimize-css-assets-webpack-plugin": "5.0.3",
|
||||
"pnp-webpack-plugin": "1.5.0",
|
||||
"postcss-flexbugs-fixes": "4.1.0",
|
||||
"postcss-loader": "3.0.0",
|
||||
"postcss-normalize": "7.0.0",
|
||||
"postcss-preset-env": "6.6.0",
|
||||
"postcss-normalize": "8.0.1",
|
||||
"postcss-preset-env": "6.7.0",
|
||||
"postcss-safe-parser": "4.0.1",
|
||||
"prettier": "^1.17.0",
|
||||
"prettier-webpack-plugin": "^1.2.0",
|
||||
@@ -89,15 +89,15 @@
|
||||
"react-app-polyfill": "^1.0.1",
|
||||
"react-dev-utils": "^9.0.1",
|
||||
"react-dom": "^16.8.6",
|
||||
"resolve": "1.11.1",
|
||||
"sass-loader": "7.1.0",
|
||||
"semver": "6.1.1",
|
||||
"style-loader": "0.23.1",
|
||||
"terser-webpack-plugin": "1.3.0",
|
||||
"resolve": "1.12.0",
|
||||
"sass-loader": "7.2.0",
|
||||
"semver": "6.3.0",
|
||||
"style-loader": "1.0.0",
|
||||
"terser-webpack-plugin": "1.4.1",
|
||||
"uglifyjs-webpack-plugin": "^2.1.2",
|
||||
"url-loader": "1.1.2",
|
||||
"webpack": "4.33.0",
|
||||
"webpack-dev-server": "3.5.1",
|
||||
"url-loader": "2.1.0",
|
||||
"webpack": "4.39.1",
|
||||
"webpack-dev-server": "3.8.0",
|
||||
"webpack-manifest-plugin": "2.0.4",
|
||||
"workbox-webpack-plugin": "4.3.1"
|
||||
},
|
||||
@@ -126,7 +126,7 @@
|
||||
"jest": {
|
||||
"collectCoverageFrom": [
|
||||
"src/**/*.{js,jsx,ts,tsx}",
|
||||
"!src/lib/index.js",
|
||||
"!src/**/index.js",
|
||||
"!src/utils/**",
|
||||
"!src/**/*.d.ts",
|
||||
"!**/tests/**"
|
||||
|
||||
+1
-3
@@ -23,8 +23,6 @@
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root">
|
||||
<div class="simple-keyboard"></div>
|
||||
</div>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
import Keyboard from "../lib";
|
||||
import "./css/App.css";
|
||||
|
||||
/**
|
||||
* simple-keyboard demo
|
||||
*/
|
||||
class App {
|
||||
/**
|
||||
* Instantiates the demo class
|
||||
*/
|
||||
constructor() {
|
||||
document.addEventListener("DOMContentLoaded", this.onDOMLoaded);
|
||||
|
||||
/**
|
||||
* Default input name
|
||||
* @type {string}
|
||||
*/
|
||||
this.layoutName = "default";
|
||||
}
|
||||
|
||||
/**
|
||||
* Executed when the DOM is ready
|
||||
*/
|
||||
onDOMLoaded = () => {
|
||||
/**
|
||||
* Creates a new simple-keyboard instance
|
||||
*/
|
||||
this.keyboard = new Keyboard({
|
||||
debug: true,
|
||||
layoutName: this.layoutName,
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button),
|
||||
newLineOnEnter: true,
|
||||
physicalKeyboardHighlight: true
|
||||
});
|
||||
|
||||
/**
|
||||
* Adding preview (demo only)
|
||||
*/
|
||||
document.querySelector(".simple-keyboard").insertAdjacentHTML(
|
||||
"beforebegin",
|
||||
`
|
||||
<div class="simple-keyboard-preview">
|
||||
<textarea class="input"></textarea>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
document.querySelector(".input").addEventListener("input", event => {
|
||||
this.keyboard.setInput(event.target.value);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles shift functionality
|
||||
*/
|
||||
handleShiftButton = () => {
|
||||
let layoutName = this.layoutName;
|
||||
let shiftToggle = (this.layoutName =
|
||||
layoutName === "default" ? "shift" : "default");
|
||||
|
||||
this.keyboard.setOptions({
|
||||
layoutName: shiftToggle
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Called when simple-keyboard input has changed
|
||||
*/
|
||||
onChange = input => {
|
||||
document.querySelector(".input").value = input;
|
||||
};
|
||||
|
||||
/**
|
||||
* Called when a simple-keyboard key is pressed
|
||||
*/
|
||||
onKeyPress = button => {
|
||||
console.log("Button pressed", button);
|
||||
|
||||
/**
|
||||
* Shift functionality
|
||||
*/
|
||||
if (button === "{lock}" || button === "{shift}") this.handleShiftButton();
|
||||
};
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,55 @@
|
||||
import Keyboard from "../lib";
|
||||
import "./css/BasicDemo.css";
|
||||
|
||||
const setDOM = () => {
|
||||
document.querySelector("#root").innerHTML = `
|
||||
<input class="input" placeholder="Tap on the virtual keyboard to start" />
|
||||
<div class="simple-keyboard"></div>
|
||||
`;
|
||||
};
|
||||
|
||||
class Demo {
|
||||
constructor() {
|
||||
setDOM();
|
||||
|
||||
/**
|
||||
* Demo Start
|
||||
*/
|
||||
this.keyboard = new Keyboard({
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button)
|
||||
});
|
||||
|
||||
/**
|
||||
* Update simple-keyboard when input is changed directly
|
||||
*/
|
||||
document.querySelector(".input").addEventListener("input", event => {
|
||||
this.keyboard.setInput(event.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
onChange(input) {
|
||||
document.querySelector(".input").value = input;
|
||||
console.log("Input changed", input);
|
||||
}
|
||||
|
||||
onKeyPress(button) {
|
||||
console.log("Button pressed", button);
|
||||
|
||||
/**
|
||||
* If you want to handle the shift and caps lock buttons
|
||||
*/
|
||||
if (button === "{shift}" || button === "{lock}") this.handleShift();
|
||||
}
|
||||
|
||||
handleShift() {
|
||||
let currentLayout = this.keyboard.options.layoutName;
|
||||
let shiftToggle = currentLayout === "default" ? "shift" : "default";
|
||||
|
||||
this.keyboard.setOptions({
|
||||
layoutName: shiftToggle
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo;
|
||||
@@ -0,0 +1,73 @@
|
||||
import Keyboard from "../lib";
|
||||
import "./css/ButtonThemeDemo.css";
|
||||
|
||||
const setDOM = () => {
|
||||
document.querySelector("#root").innerHTML = `
|
||||
<input class="input" placeholder="Tap on the virtual keyboard to start" />
|
||||
<div class="simple-keyboard"></div>
|
||||
`;
|
||||
};
|
||||
|
||||
class Demo {
|
||||
constructor() {
|
||||
setDOM();
|
||||
|
||||
/**
|
||||
* Demo Start
|
||||
*/
|
||||
this.keyboard = new Keyboard({
|
||||
theme: "hg-theme-default my-theme",
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button),
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "my-button",
|
||||
buttons: "{enter} {bksp} q Q"
|
||||
},
|
||||
{
|
||||
class: "my-button-outline",
|
||||
buttons: "q Q b B"
|
||||
}
|
||||
],
|
||||
buttonAttributes: [
|
||||
{
|
||||
attribute: "aria-label",
|
||||
value: "bee",
|
||||
buttons: "b B"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/**
|
||||
* Update simple-keyboard when input is changed directly
|
||||
*/
|
||||
document.querySelector(".input").addEventListener("input", event => {
|
||||
this.keyboard.setInput(event.target.value);
|
||||
});
|
||||
}
|
||||
|
||||
onChange(input) {
|
||||
document.querySelector(".input").value = input;
|
||||
console.log("Input changed", input);
|
||||
}
|
||||
|
||||
onKeyPress(button) {
|
||||
console.log("Button pressed", button);
|
||||
|
||||
/**
|
||||
* If you want to handle the shift and caps lock buttons
|
||||
*/
|
||||
if (button === "{shift}" || button === "{lock}") this.handleShift();
|
||||
}
|
||||
|
||||
handleShift() {
|
||||
let currentLayout = this.keyboard.options.layoutName;
|
||||
let shiftToggle = currentLayout === "default" ? "shift" : "default";
|
||||
|
||||
this.keyboard.setOptions({
|
||||
layoutName: shiftToggle
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo;
|
||||
@@ -0,0 +1,157 @@
|
||||
import Keyboard from "../lib";
|
||||
import "./css/FullKeyboardDemo.css";
|
||||
|
||||
const setDOM = () => {
|
||||
document.querySelector("#root").innerHTML = `
|
||||
<input class="input" placeholder="Tap on the virtual keyboard to start" />
|
||||
<div class="keyboardContainer">
|
||||
<div class="simple-keyboard-main"></div>
|
||||
|
||||
<div class="controlArrows">
|
||||
<div class="simple-keyboard-control"></div>
|
||||
<div class="simple-keyboard-arrows"></div>
|
||||
</div>
|
||||
|
||||
<div class="numPad">
|
||||
<div class="simple-keyboard-numpad"></div>
|
||||
<div class="simple-keyboard-numpadEnd"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
class Demo {
|
||||
constructor() {
|
||||
setDOM();
|
||||
|
||||
/**
|
||||
* Demo Start
|
||||
*/
|
||||
let commonKeyboardOptions = {
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button),
|
||||
theme: "simple-keyboard hg-theme-default hg-layout-default",
|
||||
physicalKeyboardHighlight: true,
|
||||
syncInstanceInputs: true,
|
||||
mergeDisplay: true,
|
||||
debug: true
|
||||
};
|
||||
|
||||
this.keyboard = new Keyboard(".simple-keyboard-main", {
|
||||
...commonKeyboardOptions,
|
||||
/**
|
||||
* Layout by:
|
||||
* Sterling Butters (https://github.com/SterlingButters)
|
||||
*/
|
||||
layout: {
|
||||
default: [
|
||||
"{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
|
||||
"` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
|
||||
"{tab} q w e r t y u i o p [ ] \\",
|
||||
"{capslock} a s d f g h j k l ; ' {enter}",
|
||||
"{shiftleft} z x c v b n m , . / {shiftright}",
|
||||
"{controlleft} {altleft} {metaleft} {space} {metaright} {altright}"
|
||||
],
|
||||
shift: [
|
||||
"{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
|
||||
"~ ! @ # $ % ^ & * ( ) _ + {backspace}",
|
||||
"{tab} Q W E R T Y U I O P { } |",
|
||||
'{capslock} A S D F G H J K L : " {enter}',
|
||||
"{shiftleft} Z X C V B N M < > ? {shiftright}",
|
||||
"{controlleft} {altleft} {metaleft} {space} {metaright} {altright}"
|
||||
]
|
||||
},
|
||||
display: {
|
||||
"{escape}": "esc ⎋",
|
||||
"{tab}": "tab ⇥",
|
||||
"{backspace}": "backspace ⌫",
|
||||
"{enter}": "enter ↵",
|
||||
"{capslock}": "caps lock ⇪",
|
||||
"{shiftleft}": "shift ⇧",
|
||||
"{shiftright}": "shift ⇧",
|
||||
"{controlleft}": "ctrl ⌃",
|
||||
"{controlright}": "ctrl ⌃",
|
||||
"{altleft}": "alt ⌥",
|
||||
"{altright}": "alt ⌥",
|
||||
"{metaleft}": "cmd ⌘",
|
||||
"{metaright}": "cmd ⌘"
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardControlPad = new Keyboard(".simple-keyboard-control", {
|
||||
...commonKeyboardOptions,
|
||||
layout: {
|
||||
default: [
|
||||
"{prtscr} {scrolllock} {pause}",
|
||||
"{insert} {home} {pageup}",
|
||||
"{delete} {end} {pagedown}"
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardArrows = new Keyboard(".simple-keyboard-arrows", {
|
||||
...commonKeyboardOptions,
|
||||
layout: {
|
||||
default: ["{arrowup}", "{arrowleft} {arrowdown} {arrowright}"]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardNumPad = new Keyboard(".simple-keyboard-numpad", {
|
||||
...commonKeyboardOptions,
|
||||
layout: {
|
||||
default: [
|
||||
"{numlock} {numpaddivide} {numpadmultiply}",
|
||||
"{numpad7} {numpad8} {numpad9}",
|
||||
"{numpad4} {numpad5} {numpad6}",
|
||||
"{numpad1} {numpad2} {numpad3}",
|
||||
"{numpad0} {numpaddecimal}"
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardNumPadEnd = new Keyboard(".simple-keyboard-numpadEnd", {
|
||||
...commonKeyboardOptions,
|
||||
layout: {
|
||||
default: ["{numpadsubtract}", "{numpadadd}", "{numpadenter}"]
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector(".input").addEventListener("input", event => {
|
||||
let input = document.querySelector(".input").value;
|
||||
this.keyboard.setInput(input);
|
||||
});
|
||||
}
|
||||
|
||||
onChange(input) {
|
||||
document.querySelector(".input").value = input;
|
||||
this.keyboard.setInput(input);
|
||||
|
||||
console.log("Input changed", input);
|
||||
}
|
||||
|
||||
onKeyPress(button) {
|
||||
console.log("Button pressed", button);
|
||||
|
||||
/**
|
||||
* If you want to handle the shift and caps lock buttons
|
||||
*/
|
||||
if (
|
||||
button === "{shift}" ||
|
||||
button === "{shiftleft}" ||
|
||||
button === "{shiftright}" ||
|
||||
button === "{capslock}"
|
||||
)
|
||||
this.handleShift();
|
||||
}
|
||||
|
||||
handleShift() {
|
||||
let currentLayout = this.keyboard.options.layoutName;
|
||||
let shiftToggle = currentLayout === "default" ? "shift" : "default";
|
||||
|
||||
this.keyboard.setOptions({
|
||||
layoutName: shiftToggle
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo;
|
||||
@@ -1,33 +0,0 @@
|
||||
#root {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
|
||||
Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#root .simple-keyboard-preview {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border: 20px solid rgba(0, 0, 0, 0.1);
|
||||
height: 200px;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#root .input {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: monospace;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-layout-custom {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.simple-keyboard {
|
||||
max-width: 850px;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.simple-keyboard {
|
||||
max-width: 850px;
|
||||
}
|
||||
|
||||
.simple-keyboard.my-theme .hg-button.my-button {
|
||||
background: blue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.simple-keyboard.my-theme .hg-button[aria-label] {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.simple-keyboard.my-theme .hg-button.my-button-outline {
|
||||
border: 2px solid red;
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.keyboardContainer {
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
justify-content: center;
|
||||
width: 1024px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-theme-default {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.simple-keyboard-main.simple-keyboard {
|
||||
width: 640px;
|
||||
min-width: 640px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.simple-keyboard-main.simple-keyboard .hg-row:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.simple-keyboard-arrows.simple-keyboard {
|
||||
align-self: flex-end;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.simple-keyboard .hg-button.selectedButton {
|
||||
background: rgba(5, 25, 70, 0.53);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.simple-keyboard .hg-button.emptySpace {
|
||||
pointer-events: none;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.simple-keyboard-arrows .hg-row {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.simple-keyboard-arrows .hg-button {
|
||||
width: 50px;
|
||||
flex-grow: 0;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.controlArrows {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.simple-keyboard-control.simple-keyboard {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.simple-keyboard-control.simple-keyboard .hg-row:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.simple-keyboard-control .hg-button {
|
||||
width: 50px;
|
||||
flex-grow: 0;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.numPad {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpad.simple-keyboard {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpad.simple-keyboard {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpad.simple-keyboard .hg-button {
|
||||
width: 50px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpadEnd.simple-keyboard {
|
||||
width: 50px;
|
||||
background: none;
|
||||
margin: 0;
|
||||
padding: 5px 5px 5px 0;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpadEnd.simple-keyboard .hg-button {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpadEnd .hg-button.hg-standardBtn.hg-button-plus {
|
||||
height: 85px;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpadEnd.simple-keyboard .hg-button.hg-button-enter {
|
||||
height: 85px;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
|
||||
background: rgba(5, 25, 70, 0.53);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hg-button.hg-functionBtn.hg-button-space {
|
||||
width: 350px;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#root {
|
||||
padding: 0px 40px;
|
||||
}
|
||||
+15
-3
@@ -1,6 +1,18 @@
|
||||
import App from "./App";
|
||||
import "./css/index.css";
|
||||
|
||||
/**
|
||||
* Initializing demo
|
||||
* Demos
|
||||
*/
|
||||
new App();
|
||||
import BasicDemo from "./BasicDemo";
|
||||
//import FullKeyboardDemo from "./FullKeyboardDemo";
|
||||
//import ButtonThemeDemo from "./ButtonThemeDemo";
|
||||
|
||||
/**
|
||||
* Selected demo
|
||||
*/
|
||||
const SELECTED_DEMO = BasicDemo;
|
||||
|
||||
/**
|
||||
* Bootstrap
|
||||
*/
|
||||
new SELECTED_DEMO();
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
import TestUtility from '../../utils/TestUtility';
|
||||
import Index from '../index';
|
||||
import App from '../App';
|
||||
import BasicDemo from '../BasicDemo';
|
||||
|
||||
let testUtil = new TestUtility();
|
||||
|
||||
it('Demo will load', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
let demo = new BasicDemo();
|
||||
});
|
||||
|
||||
it('Demo onDOMLoaded will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
demo.onDOMLoaded();
|
||||
let demo = new BasicDemo();
|
||||
|
||||
expect(demo.keyboard).toBeTruthy();
|
||||
});
|
||||
@@ -22,8 +20,7 @@ it('Demo onDOMLoaded will work', () => {
|
||||
it('Demo onChange will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
demo.onDOMLoaded();
|
||||
let demo = new BasicDemo();
|
||||
|
||||
demo.onChange("test");
|
||||
|
||||
@@ -33,8 +30,7 @@ it('Demo onChange will work', () => {
|
||||
it('Demo onChange will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
demo.onDOMLoaded();
|
||||
let demo = new BasicDemo();
|
||||
|
||||
demo.keyboard.getButtonElement("q").onclick();
|
||||
|
||||
@@ -44,8 +40,7 @@ it('Demo onChange will work', () => {
|
||||
it('Demo input change will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
demo.onDOMLoaded();
|
||||
let demo = new BasicDemo();
|
||||
|
||||
document.body.querySelector('.input').value = "test";
|
||||
document.body.querySelector('.input').dispatchEvent(new Event('input'));
|
||||
@@ -56,8 +51,7 @@ it('Demo input change will work', () => {
|
||||
it('Demo handleShiftButton will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
demo.onDOMLoaded();
|
||||
let demo = new BasicDemo();
|
||||
|
||||
demo.keyboard.getButtonElement("{shift}")[0].onclick();
|
||||
expect(demo.keyboard.options.layoutName).toBe("shift");
|
||||
@@ -0,0 +1,77 @@
|
||||
import TestUtility from '../../utils/TestUtility';
|
||||
import ButtonThemeDemo from '../ButtonThemeDemo';
|
||||
|
||||
let testUtil = new TestUtility();
|
||||
|
||||
it('Demo will load', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new ButtonThemeDemo();
|
||||
});
|
||||
|
||||
it('Demo onDOMLoaded will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new ButtonThemeDemo();
|
||||
|
||||
expect(demo.keyboard).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Demo onChange will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new ButtonThemeDemo();
|
||||
|
||||
demo.onChange("test");
|
||||
|
||||
expect(document.body.querySelector('.input').value).toBe("test");
|
||||
});
|
||||
|
||||
it('Demo onChange will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new ButtonThemeDemo();
|
||||
|
||||
demo.keyboard.getButtonElement("q").onclick();
|
||||
|
||||
expect(document.body.querySelector('.input').value).toBe("q");
|
||||
});
|
||||
|
||||
it('Demo input change will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new ButtonThemeDemo();
|
||||
|
||||
document.body.querySelector('.input').value = "test";
|
||||
document.body.querySelector('.input').dispatchEvent(new Event('input'));
|
||||
|
||||
expect(demo.keyboard.getInput()).toBe("test");
|
||||
});
|
||||
|
||||
it('Demo handleShiftButton will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new ButtonThemeDemo();
|
||||
|
||||
demo.keyboard.getButtonElement("{shift}")[0].onclick();
|
||||
expect(demo.keyboard.options.layoutName).toBe("shift");
|
||||
|
||||
demo.keyboard.getButtonElement("{shift}")[0].onclick();
|
||||
expect(demo.keyboard.options.layoutName).toBe("default");
|
||||
});
|
||||
|
||||
it('Demo buttons will have proper attributes and classes', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new ButtonThemeDemo();
|
||||
|
||||
let buttonDOM = demo.keyboard.getButtonElement("b");
|
||||
|
||||
console.log("buttonDOM", buttonDOM.outerHTML);
|
||||
|
||||
let hasAttribute = buttonDOM.hasAttribute("aria-label");
|
||||
expect(hasAttribute).toBeTruthy();
|
||||
|
||||
let hasClass = buttonDOM.classList.contains("my-button-outline");
|
||||
expect(hasClass).toBeTruthy();
|
||||
});
|
||||
@@ -0,0 +1,62 @@
|
||||
import TestUtility from '../../utils/TestUtility';
|
||||
import FullKeyboardDemo from '../FullKeyboardDemo';
|
||||
|
||||
let testUtil = new TestUtility();
|
||||
|
||||
it('Demo will load', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new FullKeyboardDemo();
|
||||
});
|
||||
|
||||
it('Demo onDOMLoaded will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new FullKeyboardDemo();
|
||||
|
||||
expect(demo.keyboard).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Demo onChange will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new FullKeyboardDemo();
|
||||
|
||||
demo.onChange("test");
|
||||
|
||||
expect(document.body.querySelector('.input').value).toBe("test");
|
||||
});
|
||||
|
||||
it('Demo onChange will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new FullKeyboardDemo();
|
||||
|
||||
demo.keyboard.getButtonElement("q").onclick();
|
||||
|
||||
expect(document.body.querySelector('.input').value).toBe("q");
|
||||
});
|
||||
|
||||
it('Demo input change will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new FullKeyboardDemo();
|
||||
|
||||
document.body.querySelector('.input').value = "test";
|
||||
document.body.querySelector('.input').dispatchEvent(new Event('input'));
|
||||
|
||||
expect(demo.keyboard.getInput()).toBe("test");
|
||||
expect(demo.keyboardNumPad.getInput()).toBe("test");
|
||||
});
|
||||
|
||||
it('Demo handleShiftButton will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new FullKeyboardDemo();
|
||||
|
||||
demo.keyboard.getButtonElement("{shiftleft}").onclick();
|
||||
expect(demo.keyboard.options.layoutName).toBe("shift");
|
||||
|
||||
demo.keyboard.getButtonElement("{shiftright}").onclick();
|
||||
expect(demo.keyboard.options.layoutName).toBe("default");
|
||||
});
|
||||
Vendored
+25
@@ -10,6 +10,12 @@ declare module 'simple-keyboard' {
|
||||
buttons: string;
|
||||
}
|
||||
|
||||
interface KeyboardButtonAttributes {
|
||||
attribute: string;
|
||||
value: string;
|
||||
buttons: string;
|
||||
}
|
||||
|
||||
interface KeyboardOptions {
|
||||
/**
|
||||
* Modify the keyboard layout.
|
||||
@@ -41,6 +47,11 @@ declare module 'simple-keyboard' {
|
||||
*/
|
||||
buttonTheme?: KeyboardButtonTheme[];
|
||||
|
||||
/**
|
||||
* A prop to add your own attributes to one or several buttons.
|
||||
*/
|
||||
buttonAttributes?: KeyboardButtonAttributes[];
|
||||
|
||||
/**
|
||||
* Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
|
||||
*/
|
||||
@@ -133,6 +144,11 @@ declare module 'simple-keyboard' {
|
||||
*/
|
||||
onKeyPress?: (button: string) => any;
|
||||
|
||||
/**
|
||||
* Executes the callback function on key release.
|
||||
*/
|
||||
onKeyReleased?: (button: string) => any;
|
||||
|
||||
/**
|
||||
* Executes the callback function on input change. Returns the current input's string.
|
||||
*/
|
||||
@@ -167,6 +183,10 @@ declare module 'simple-keyboard' {
|
||||
class Keyboard {
|
||||
constructor(selector: string, options: KeyboardOptions);
|
||||
constructor(options: KeyboardOptions);
|
||||
|
||||
/**
|
||||
* Options
|
||||
*/
|
||||
options: KeyboardOptions;
|
||||
|
||||
/**
|
||||
@@ -174,6 +194,11 @@ declare module 'simple-keyboard' {
|
||||
*/
|
||||
utilities?: any;
|
||||
|
||||
/**
|
||||
* caretPosition
|
||||
*/
|
||||
caretPosition?: number;
|
||||
|
||||
/**
|
||||
* Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
|
||||
* @param {string} buttons List of buttons to select (separated by a space).
|
||||
|
||||
@@ -78,10 +78,6 @@ html {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-theme-default:not(.hg-touch-events) .hg-button:active {
|
||||
background: #e4e4e4;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
|
||||
width: 33.3%;
|
||||
height: 60px;
|
||||
|
||||
+175
-105
@@ -27,7 +27,16 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Initializing Utilities
|
||||
*/
|
||||
this.utilities = new Utilities(this);
|
||||
this.utilities = new Utilities({
|
||||
getOptions: this.getOptions,
|
||||
getCaretPosition: this.getCaretPosition,
|
||||
dispatch: this.dispatch
|
||||
});
|
||||
|
||||
/**
|
||||
* Caret position
|
||||
*/
|
||||
this.caretPosition = null;
|
||||
|
||||
/**
|
||||
* Processing options
|
||||
@@ -42,6 +51,7 @@ class SimpleKeyboard {
|
||||
* @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.
|
||||
* @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
|
||||
* @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.
|
||||
* @property {Array} buttonAttributes A prop to add your own attributes to one or several buttons.
|
||||
* @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
|
||||
* @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not.
|
||||
* @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not.
|
||||
@@ -66,6 +76,7 @@ class SimpleKeyboard {
|
||||
* @property {boolean} useMouseEvents Opt out of PointerEvents handling, falling back to the prior mouse event logic.
|
||||
* @property {function} destroy Clears keyboard listeners and DOM elements.
|
||||
* @property {boolean} disableButtonHold Disable button hold action.
|
||||
* @property {function} onKeyReleased Executes the callback function on key release.
|
||||
*/
|
||||
this.options = options;
|
||||
this.options.layoutName = this.options.layoutName || "default";
|
||||
@@ -112,16 +123,7 @@ class SimpleKeyboard {
|
||||
this.buttonElements = {};
|
||||
|
||||
/**
|
||||
* Rendering keyboard
|
||||
*/
|
||||
if (this.keyboardDOM) this.render();
|
||||
else {
|
||||
console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`);
|
||||
throw new Error("KEYBOARD_DOM_ERROR");
|
||||
}
|
||||
|
||||
/**
|
||||
* Saving instance
|
||||
* Simple-keyboard Instances
|
||||
* This enables multiple simple-keyboard support with easier management
|
||||
*/
|
||||
if (!window["SimpleKeyboardInstances"])
|
||||
@@ -131,10 +133,31 @@ class SimpleKeyboard {
|
||||
this.utilities.camelCase(this.keyboardDOMClass)
|
||||
] = this;
|
||||
|
||||
/**
|
||||
* Instance vars
|
||||
*/
|
||||
this.allKeyboardInstances = window["SimpleKeyboardInstances"];
|
||||
this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);
|
||||
this.keyboardInstanceNames = Object.keys(window["SimpleKeyboardInstances"]);
|
||||
this.isFirstKeyboardInstance =
|
||||
this.keyboardInstanceNames[0] === this.currentInstanceName;
|
||||
|
||||
/**
|
||||
* Physical Keyboard support
|
||||
*/
|
||||
this.physicalKeyboardInterface = new PhysicalKeyboard(this);
|
||||
this.physicalKeyboard = new PhysicalKeyboard({
|
||||
dispatch: this.dispatch,
|
||||
getOptions: this.getOptions
|
||||
});
|
||||
|
||||
/**
|
||||
* Rendering keyboard
|
||||
*/
|
||||
if (this.keyboardDOM) this.render();
|
||||
else {
|
||||
console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`);
|
||||
throw new Error("KEYBOARD_DOM_ERROR");
|
||||
}
|
||||
|
||||
/**
|
||||
* Modules
|
||||
@@ -143,6 +166,12 @@ class SimpleKeyboard {
|
||||
this.loadModules();
|
||||
}
|
||||
|
||||
/**
|
||||
* Getters
|
||||
*/
|
||||
getOptions = () => this.options;
|
||||
getCaretPosition = () => this.caretPosition;
|
||||
|
||||
/**
|
||||
* Handles clicks made to keyboard buttons
|
||||
* @param {string} button The button's layout name.
|
||||
@@ -167,7 +196,6 @@ class SimpleKeyboard {
|
||||
let updatedInput = this.utilities.getUpdatedInput(
|
||||
button,
|
||||
this.input[this.options.inputName],
|
||||
this.options,
|
||||
this.caretPosition
|
||||
);
|
||||
|
||||
@@ -185,7 +213,7 @@ class SimpleKeyboard {
|
||||
*/
|
||||
if (
|
||||
this.options.maxLength &&
|
||||
this.utilities.handleMaxLength(this.input, this.options, updatedInput)
|
||||
this.utilities.handleMaxLength(this.input, updatedInput)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
@@ -193,7 +221,6 @@ class SimpleKeyboard {
|
||||
this.input[this.options.inputName] = this.utilities.getUpdatedInput(
|
||||
button,
|
||||
this.input[this.options.inputName],
|
||||
this.options,
|
||||
this.caretPosition,
|
||||
true
|
||||
);
|
||||
@@ -269,9 +296,15 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Handles button mouseup
|
||||
*/
|
||||
handleButtonMouseUp() {
|
||||
handleButtonMouseUp(button) {
|
||||
this.isMouseHold = false;
|
||||
if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
|
||||
|
||||
/**
|
||||
* Calling onKeyReleased
|
||||
*/
|
||||
if (button && typeof this.options.onKeyReleased === "function")
|
||||
this.options.onKeyReleased(button);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -584,33 +617,63 @@ class SimpleKeyboard {
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves the current cursor position within a input or textarea (if any)
|
||||
* Handles simple-keyboard event listeners
|
||||
*/
|
||||
handleCaret() {
|
||||
setEventListeners() {
|
||||
/**
|
||||
* Only first instance should insall the caret handling events
|
||||
* Only first instance should set the event listeners
|
||||
*/
|
||||
this.caretPosition = null;
|
||||
let simpleKeyboardInstances = window["SimpleKeyboardInstances"];
|
||||
|
||||
if (
|
||||
(simpleKeyboardInstances &&
|
||||
Object.keys(simpleKeyboardInstances)[0] ===
|
||||
this.utilities.camelCase(this.keyboardDOMClass)) ||
|
||||
!simpleKeyboardInstances
|
||||
) {
|
||||
if (this.isFirstKeyboardInstance || !this.allKeyboardInstances) {
|
||||
if (this.options.debug) {
|
||||
console.log(`Caret handling started (${this.keyboardDOMClass})`);
|
||||
}
|
||||
|
||||
document.addEventListener("keyup", this.caretEventHandler);
|
||||
document.addEventListener("mouseup", this.caretEventHandler);
|
||||
document.addEventListener("touchend", this.caretEventHandler);
|
||||
/**
|
||||
* Event Listeners
|
||||
*/
|
||||
document.addEventListener("keyup", this.handleKeyUp);
|
||||
document.addEventListener("keydown", this.handleKeyDown);
|
||||
document.addEventListener("mouseup", this.handleMouseUp);
|
||||
document.addEventListener("touchend", this.handleTouchEnd);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by {@link handleCaret} when an event that warrants a cursor position update is triggered
|
||||
* Event Handler: KeyUp
|
||||
*/
|
||||
handleKeyUp(event) {
|
||||
this.caretEventHandler(event);
|
||||
|
||||
if (this.options.physicalKeyboardHighlight) {
|
||||
this.physicalKeyboard.handleHighlightKeyUp(event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Event Handler: KeyDown
|
||||
*/
|
||||
handleKeyDown(event) {
|
||||
if (this.options.physicalKeyboardHighlight) {
|
||||
this.physicalKeyboard.handleHighlightKeyDown(event);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Event Handler: MouseUp
|
||||
*/
|
||||
handleMouseUp(event) {
|
||||
this.caretEventHandler(event);
|
||||
}
|
||||
|
||||
/**
|
||||
* Event Handler: TouchEnd
|
||||
*/
|
||||
handleTouchEnd(event) {
|
||||
this.caretEventHandler(event);
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
|
||||
*/
|
||||
caretEventHandler(event) {
|
||||
let targetTagName;
|
||||
@@ -657,9 +720,10 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Remove listeners
|
||||
*/
|
||||
document.removeEventListener("keyup", this.caretEventHandler);
|
||||
document.removeEventListener("mouseup", this.caretEventHandler);
|
||||
document.removeEventListener("touchend", this.caretEventHandler);
|
||||
document.removeEventListener("keyup", this.handleKeyUp);
|
||||
document.removeEventListener("keydown", this.handleKeyDown);
|
||||
document.removeEventListener("mouseup", this.handleMouseUp);
|
||||
document.removeEventListener("touchend", this.handleTouchEnd);
|
||||
|
||||
/**
|
||||
* Clear DOM
|
||||
@@ -670,47 +734,62 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Process buttonTheme option
|
||||
*/
|
||||
getButtonTheme() {
|
||||
let buttonThemesParsed = {};
|
||||
getButtonThemeClasses(button) {
|
||||
let buttonTheme = this.options.buttonTheme;
|
||||
let buttonClasses = [];
|
||||
|
||||
this.options.buttonTheme.forEach(themeObj => {
|
||||
if (themeObj.buttons && themeObj.class) {
|
||||
let themeButtons;
|
||||
if (Array.isArray(buttonTheme)) {
|
||||
buttonTheme.forEach(themeObj => {
|
||||
if (
|
||||
themeObj.class &&
|
||||
typeof themeObj.class === "string" &&
|
||||
(themeObj.buttons && typeof themeObj.buttons === "string")
|
||||
) {
|
||||
let themeObjClasses = themeObj.class.split(" ");
|
||||
let themeObjButtons = themeObj.buttons.split(" ");
|
||||
|
||||
if (typeof themeObj.buttons === "string") {
|
||||
themeButtons = themeObj.buttons.split(" ");
|
||||
if (themeObjButtons.includes(button)) {
|
||||
buttonClasses = [...buttonClasses, ...themeObjClasses];
|
||||
}
|
||||
} else {
|
||||
console.warn(
|
||||
`Incorrect "buttonTheme". Please check the documentation.`,
|
||||
themeObj
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (themeButtons) {
|
||||
themeButtons.forEach(themeButton => {
|
||||
let themeParsed = buttonThemesParsed[themeButton];
|
||||
return buttonClasses;
|
||||
}
|
||||
|
||||
// If the button has already been added
|
||||
if (themeParsed) {
|
||||
// Making sure we don't add duplicate classes, even when buttonTheme has duplicates
|
||||
if (
|
||||
!this.utilities.countInArray(
|
||||
themeParsed.split(" "),
|
||||
themeObj.class
|
||||
)
|
||||
) {
|
||||
buttonThemesParsed[themeButton] = `${themeParsed} ${
|
||||
themeObj.class
|
||||
}`;
|
||||
}
|
||||
} else {
|
||||
buttonThemesParsed[themeButton] = themeObj.class;
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Process buttonAttributes option
|
||||
*/
|
||||
setDOMButtonAttributes(button, callback) {
|
||||
let buttonAttributes = this.options.buttonAttributes;
|
||||
|
||||
if (Array.isArray(buttonAttributes)) {
|
||||
buttonAttributes.forEach(attrObj => {
|
||||
if (
|
||||
attrObj.attribute &&
|
||||
typeof attrObj.attribute === "string" &&
|
||||
(attrObj.value && typeof attrObj.value === "string") &&
|
||||
(attrObj.buttons && typeof attrObj.buttons === "string")
|
||||
) {
|
||||
let attrObjButtons = attrObj.buttons.split(" ");
|
||||
|
||||
if (attrObjButtons.includes(button)) {
|
||||
callback(attrObj.attribute, attrObj.value);
|
||||
}
|
||||
} else {
|
||||
console.warn(
|
||||
`Incorrect "buttonAttributes". Please check the documentation.`,
|
||||
attrObj
|
||||
);
|
||||
}
|
||||
} else {
|
||||
console.warn(
|
||||
`buttonTheme row is missing the "buttons" or the "class". Please check the documentation.`
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return buttonThemesParsed;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onTouchDeviceDetected() {
|
||||
@@ -763,9 +842,9 @@ class SimpleKeyboard {
|
||||
}
|
||||
|
||||
/**
|
||||
* Caret handling
|
||||
* setEventListeners
|
||||
*/
|
||||
this.handleCaret();
|
||||
this.setEventListeners();
|
||||
|
||||
if (typeof this.options.onInit === "function") this.options.onInit();
|
||||
}
|
||||
@@ -788,6 +867,7 @@ class SimpleKeyboard {
|
||||
* Notify about PointerEvents usage
|
||||
*/
|
||||
if (
|
||||
this.isFirstKeyboardInstance &&
|
||||
this.utilities.pointerEventsSupported() &&
|
||||
!this.options.useTouchEvents &&
|
||||
!this.options.useMouseEvents
|
||||
@@ -922,9 +1002,7 @@ class SimpleKeyboard {
|
||||
*/
|
||||
let containerDOM = document.createElement("div");
|
||||
containerDOM.className += "hg-button-container";
|
||||
let containerUID = `${
|
||||
this.options.layoutName
|
||||
}-r${rowIndex}c${arrIndex}`;
|
||||
let containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`;
|
||||
containerDOM.setAttribute("data-skUID", containerUID);
|
||||
|
||||
/**
|
||||
@@ -999,19 +1077,10 @@ class SimpleKeyboard {
|
||||
let useMouseEvents = this.options.useMouseEvents || false;
|
||||
let disableRowButtonContainers = this.options.disableRowButtonContainers;
|
||||
|
||||
/**
|
||||
* Account for buttonTheme, if set
|
||||
*/
|
||||
let buttonThemesParsed = Array.isArray(this.options.buttonTheme)
|
||||
? this.getButtonTheme()
|
||||
: {};
|
||||
|
||||
/**
|
||||
* Adding themeClass, layoutClass to keyboardDOM
|
||||
*/
|
||||
this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${
|
||||
this.keyboardPluginClasses
|
||||
} ${useTouchEventsClass}`;
|
||||
this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${this.keyboardPluginClasses} ${useTouchEventsClass}`;
|
||||
|
||||
/**
|
||||
* Iterating through each row
|
||||
@@ -1072,7 +1141,6 @@ class SimpleKeyboard {
|
||||
* Processing button options
|
||||
*/
|
||||
let fctBtnClass = this.utilities.getButtonClass(button);
|
||||
let buttonThemeClass = buttonThemesParsed[button];
|
||||
let buttonDisplayName = this.utilities.getButtonDisplayName(
|
||||
button,
|
||||
this.options.display,
|
||||
@@ -1084,9 +1152,19 @@ class SimpleKeyboard {
|
||||
*/
|
||||
let buttonType = this.options.useButtonTag ? "button" : "div";
|
||||
let buttonDOM = document.createElement(buttonType);
|
||||
buttonDOM.className += `hg-button ${fctBtnClass}${
|
||||
buttonThemeClass ? " " + buttonThemeClass : ""
|
||||
}`;
|
||||
buttonDOM.className += `hg-button ${fctBtnClass}`;
|
||||
|
||||
/**
|
||||
* Adding buttonTheme
|
||||
*/
|
||||
buttonDOM.classList.add(...this.getButtonThemeClasses(button));
|
||||
|
||||
/**
|
||||
* Adding buttonAttributes
|
||||
*/
|
||||
this.setDOMButtonAttributes(button, (attribute, value) => {
|
||||
buttonDOM.setAttribute(attribute, value);
|
||||
});
|
||||
|
||||
/**
|
||||
* Handle button click event
|
||||
@@ -1104,10 +1182,8 @@ class SimpleKeyboard {
|
||||
this.handleButtonClicked(button);
|
||||
this.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.onpointerup = e => {
|
||||
this.handleButtonMouseUp();
|
||||
};
|
||||
buttonDOM.onpointercancel = e => this.handleButtonMouseUp();
|
||||
buttonDOM.onpointerup = () => this.handleButtonMouseUp(button);
|
||||
buttonDOM.onpointercancel = () => this.handleButtonMouseUp(button);
|
||||
} else {
|
||||
/**
|
||||
* Fallback for browsers not supporting PointerEvents
|
||||
@@ -1120,8 +1196,8 @@ class SimpleKeyboard {
|
||||
this.handleButtonClicked(button);
|
||||
this.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.ontouchend = e => this.handleButtonMouseUp();
|
||||
buttonDOM.ontouchcancel = e => this.handleButtonMouseUp();
|
||||
buttonDOM.ontouchend = () => this.handleButtonMouseUp(button);
|
||||
buttonDOM.ontouchcancel = () => this.handleButtonMouseUp(button);
|
||||
} else {
|
||||
/**
|
||||
* Handle mouse events
|
||||
@@ -1130,9 +1206,8 @@ class SimpleKeyboard {
|
||||
this.isMouseHold = false;
|
||||
this.handleButtonClicked(button);
|
||||
};
|
||||
buttonDOM.onmousedown = e => {
|
||||
this.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.onmousedown = e => this.handleButtonMouseDown(button, e);
|
||||
buttonDOM.onmouseup = () => this.handleButtonMouseUp(button);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1148,11 +1223,6 @@ class SimpleKeyboard {
|
||||
let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
|
||||
buttonDOM.setAttribute("data-skBtnUID", buttonUID);
|
||||
|
||||
/**
|
||||
* Adding display label
|
||||
*/
|
||||
buttonDOM.setAttribute("data-displayLabel", buttonDisplayName);
|
||||
|
||||
/**
|
||||
* Adding button label to button
|
||||
*/
|
||||
@@ -1214,8 +1284,8 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Handling ontouchend, ontouchcancel
|
||||
*/
|
||||
document.ontouchend = e => this.handleButtonMouseUp();
|
||||
document.ontouchcancel = e => this.handleButtonMouseUp();
|
||||
document.ontouchend = () => this.handleButtonMouseUp();
|
||||
document.ontouchcancel = () => this.handleButtonMouseUp();
|
||||
} else if (!useTouchEvents) {
|
||||
/**
|
||||
* Handling mouseup
|
||||
|
||||
@@ -1242,4 +1242,87 @@ it('Keyboard disableButtonHold will work', () => {
|
||||
});
|
||||
|
||||
expect(keyboard.options.disableButtonHold).toBe(true);
|
||||
});
|
||||
|
||||
it('Keyboard caretEventHandler will be triggered on mouseup and ontouchend', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
disableCaretPositioning: true
|
||||
});
|
||||
|
||||
keyboard.caretPosition = 6;
|
||||
|
||||
document.dispatchEvent(new MouseEvent('mouseup', {
|
||||
target: {
|
||||
tagName: "input"
|
||||
}
|
||||
}));
|
||||
|
||||
expect(keyboard.caretPosition).toBe(null);
|
||||
|
||||
keyboard.setOptions({
|
||||
disableCaretPositioning: false
|
||||
})
|
||||
|
||||
keyboard.caretPosition = 10;
|
||||
|
||||
document.dispatchEvent(new TouchEvent('touchend', {
|
||||
target: {
|
||||
tagName: "input"
|
||||
}
|
||||
}));
|
||||
|
||||
expect(keyboard.caretPosition).toBe(10);
|
||||
});
|
||||
|
||||
it('Keyboard onKeyReleased will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let pressed = false;
|
||||
let firedTimes = 0;
|
||||
let buttonPressed;
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
onKeyReleased: button => {
|
||||
pressed = true;
|
||||
buttonPressed = button;
|
||||
firedTimes++;
|
||||
},
|
||||
debug: true
|
||||
});
|
||||
|
||||
keyboard.getButtonElement("q").onpointerdown();
|
||||
keyboard.getButtonElement("q").onpointerup();
|
||||
|
||||
expect(pressed).toBeTruthy();
|
||||
expect(firedTimes).toBe(1);
|
||||
expect(buttonPressed).toBe("q");
|
||||
});
|
||||
|
||||
it('Keyboard buttonAttribute will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonAttributes: [
|
||||
{
|
||||
attribute: "aria-label",
|
||||
value: "bee",
|
||||
buttons: "b B"
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
it('Keyboard buttonAttribute will warn about invalid entries', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonAttributes: [
|
||||
{
|
||||
attribute: false,
|
||||
value: null
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
@@ -1,3 +1,5 @@
|
||||
import Utilities from "../services/Utilities";
|
||||
|
||||
/**
|
||||
* Physical Keyboard Service
|
||||
*/
|
||||
@@ -5,66 +7,47 @@ class PhysicalKeyboard {
|
||||
/**
|
||||
* Creates an instance of the PhysicalKeyboard service
|
||||
*/
|
||||
constructor(simpleKeyboardInstance) {
|
||||
constructor({ dispatch, getOptions }) {
|
||||
/**
|
||||
* @type {object} A simple-keyboard instance
|
||||
*/
|
||||
this.simpleKeyboardInstance = simpleKeyboardInstance;
|
||||
this.dispatch = dispatch;
|
||||
this.getOptions = getOptions;
|
||||
|
||||
/**
|
||||
* Bindings
|
||||
*/
|
||||
this.initKeyboardListener = this.initKeyboardListener.bind(this);
|
||||
this.getSimpleKeyboardLayoutKey = this.getSimpleKeyboardLayoutKey.bind(
|
||||
this
|
||||
);
|
||||
|
||||
/**
|
||||
* Initialize key listeners
|
||||
*/
|
||||
this.initKeyboardListener();
|
||||
Utilities.bindMethods(PhysicalKeyboard, this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes key event listeners
|
||||
*/
|
||||
initKeyboardListener() {
|
||||
// Adding button style on keydown
|
||||
document.addEventListener("keydown", event => {
|
||||
if (this.simpleKeyboardInstance.options.physicalKeyboardHighlight) {
|
||||
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||||
handleHighlightKeyDown(event) {
|
||||
let options = this.getOptions();
|
||||
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||||
|
||||
this.simpleKeyboardInstance.dispatch(instance => {
|
||||
let buttonDOM =
|
||||
instance.getButtonElement(buttonPressed) ||
|
||||
instance.getButtonElement(`{${buttonPressed}}`);
|
||||
this.dispatch(instance => {
|
||||
let buttonDOM =
|
||||
instance.getButtonElement(buttonPressed) ||
|
||||
instance.getButtonElement(`{${buttonPressed}}`);
|
||||
|
||||
if (buttonDOM) {
|
||||
buttonDOM.style.backgroundColor =
|
||||
this.simpleKeyboardInstance.options
|
||||
.physicalKeyboardHighlightBgColor || "#9ab4d0";
|
||||
buttonDOM.style.color =
|
||||
this.simpleKeyboardInstance.options
|
||||
.physicalKeyboardHighlightTextColor || "white";
|
||||
}
|
||||
});
|
||||
if (buttonDOM) {
|
||||
buttonDOM.style.backgroundColor =
|
||||
options.physicalKeyboardHighlightBgColor || "#9ab4d0";
|
||||
buttonDOM.style.color =
|
||||
options.physicalKeyboardHighlightTextColor || "white";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Removing button style on keyup
|
||||
document.addEventListener("keyup", event => {
|
||||
if (this.simpleKeyboardInstance.options.physicalKeyboardHighlight) {
|
||||
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||||
handleHighlightKeyUp(event) {
|
||||
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||||
|
||||
this.simpleKeyboardInstance.dispatch(instance => {
|
||||
let buttonDOM =
|
||||
instance.getButtonElement(buttonPressed) ||
|
||||
instance.getButtonElement(`{${buttonPressed}}`);
|
||||
this.dispatch(instance => {
|
||||
let buttonDOM =
|
||||
instance.getButtonElement(buttonPressed) ||
|
||||
instance.getButtonElement(`{${buttonPressed}}`);
|
||||
|
||||
if (buttonDOM && buttonDOM.removeAttribute) {
|
||||
buttonDOM.removeAttribute("style");
|
||||
}
|
||||
});
|
||||
if (buttonDOM && buttonDOM.removeAttribute) {
|
||||
buttonDOM.removeAttribute("style");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -5,11 +5,10 @@ class Utilities {
|
||||
/**
|
||||
* Creates an instance of the Utility service
|
||||
*/
|
||||
constructor(simpleKeyboardInstance) {
|
||||
/**
|
||||
* @type {object} A simple-keyboard instance
|
||||
*/
|
||||
this.simpleKeyboardInstance = simpleKeyboardInstance;
|
||||
constructor({ getOptions, getCaretPosition, dispatch }) {
|
||||
this.getOptions = getOptions;
|
||||
this.getCaretPosition = getCaretPosition;
|
||||
this.dispatch = dispatch;
|
||||
|
||||
/**
|
||||
* Bindings
|
||||
@@ -125,11 +124,11 @@ class Utilities {
|
||||
*
|
||||
* @param {string} button The button's layout name
|
||||
* @param {string} input The input string
|
||||
* @param {object} options The simple-keyboard options object
|
||||
* @param {number} caretPos The cursor's current position
|
||||
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
|
||||
*/
|
||||
getUpdatedInput(button, input, options, caretPos, moveCaret) {
|
||||
getUpdatedInput(button, input, caretPos, moveCaret) {
|
||||
let options = this.getOptions();
|
||||
let output = input;
|
||||
|
||||
if (
|
||||
@@ -187,43 +186,34 @@ class Utilities {
|
||||
* @param {boolean} minus Whether the cursor should be moved to the left or not.
|
||||
*/
|
||||
updateCaretPos(length, minus) {
|
||||
let newCaretPos = this.updateCaretPosAction(
|
||||
this.simpleKeyboardInstance,
|
||||
length,
|
||||
minus
|
||||
);
|
||||
let newCaretPos = this.updateCaretPosAction(length, minus);
|
||||
|
||||
if (this.simpleKeyboardInstance.options.syncInstanceInputs) {
|
||||
this.simpleKeyboardInstance.dispatch(instance => {
|
||||
instance.caretPosition = newCaretPos;
|
||||
});
|
||||
}
|
||||
this.dispatch(instance => {
|
||||
instance.caretPosition = newCaretPos;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Action method of updateCaretPos
|
||||
*
|
||||
* @param {object} instance The instance whose position should be updated
|
||||
* @param {number} length Represents by how many characters the input should be moved
|
||||
* @param {boolean} minus Whether the cursor should be moved to the left or not.
|
||||
*/
|
||||
updateCaretPosAction(instance, length, minus) {
|
||||
updateCaretPosAction(length, minus) {
|
||||
let options = this.getOptions();
|
||||
let caretPosition = this.getCaretPosition();
|
||||
|
||||
if (minus) {
|
||||
if (instance.caretPosition > 0)
|
||||
instance.caretPosition = instance.caretPosition - length;
|
||||
if (caretPosition > 0) caretPosition = caretPosition - length;
|
||||
} else {
|
||||
instance.caretPosition = instance.caretPosition + length;
|
||||
caretPosition = caretPosition + length;
|
||||
}
|
||||
|
||||
if (this.simpleKeyboardInstance.options.debug) {
|
||||
console.log(
|
||||
"Caret at:",
|
||||
instance.caretPosition,
|
||||
`(${instance.keyboardDOMClass})`
|
||||
);
|
||||
if (options.debug) {
|
||||
console.log("Caret at:", caretPosition, `(${this.keyboardDOMClass})`);
|
||||
}
|
||||
|
||||
return instance.caretPosition;
|
||||
return caretPosition;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -263,7 +253,9 @@ class Utilities {
|
||||
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
|
||||
*/
|
||||
removeAt(source, position, moveCaret) {
|
||||
if (this.simpleKeyboardInstance.caretPosition === 0) {
|
||||
let caretPosition = this.getCaretPosition();
|
||||
|
||||
if (caretPosition === 0) {
|
||||
return source;
|
||||
}
|
||||
|
||||
@@ -306,10 +298,10 @@ class Utilities {
|
||||
* Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
|
||||
*
|
||||
* @param {object} inputObj
|
||||
* @param {object} options
|
||||
* @param {string} updatedInput
|
||||
*/
|
||||
handleMaxLength(inputObj, options, updatedInput) {
|
||||
handleMaxLength(inputObj, updatedInput) {
|
||||
let options = this.getOptions();
|
||||
let maxLength = options.maxLength;
|
||||
let currentInput = inputObj[options.inputName];
|
||||
let condition = currentInput.length === maxLength;
|
||||
@@ -399,6 +391,8 @@ class Utilities {
|
||||
* @param {string} string The string to transform.
|
||||
*/
|
||||
camelCase(string) {
|
||||
if (!string) return false;
|
||||
|
||||
return string
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
@@ -407,16 +401,6 @@ class Utilities {
|
||||
word.length ? string + word[0].toUpperCase() + word.slice(1) : string
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Counts the number of duplicates in a given array
|
||||
*
|
||||
* @param {Array} array The haystack to search in
|
||||
* @param {string} value The needle to search for
|
||||
*/
|
||||
countInArray(array, value) {
|
||||
return array.reduce((n, x) => n + (x === value), 0);
|
||||
}
|
||||
}
|
||||
|
||||
export default Utilities;
|
||||
|
||||
@@ -13,7 +13,7 @@ it('Keyboard mergeDisplay will work', () => {
|
||||
}
|
||||
});
|
||||
|
||||
expect(keyboard.getButtonElement("q").getAttribute("data-displaylabel")).toBe("qreplaced");
|
||||
expect(keyboard.getButtonElement("q").querySelector("span").innerHTML).toBe("qreplaced");
|
||||
});
|
||||
|
||||
it('Keyboard function buttons will work', () => {
|
||||
@@ -31,7 +31,7 @@ it('Keyboard {bksp} button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{bksp}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{bksp}", "test");
|
||||
|
||||
expect(output).toBe("tes");
|
||||
});
|
||||
@@ -41,7 +41,7 @@ it('Keyboard {space} button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{space}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{space}", "test");
|
||||
|
||||
expect(output).toBe("test ");
|
||||
});
|
||||
@@ -51,7 +51,7 @@ it('Keyboard {tab} button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{tab}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{tab}", "test");
|
||||
|
||||
expect(output).toBe("test\t");
|
||||
});
|
||||
@@ -63,7 +63,7 @@ it('Keyboard {tab} button will work with tabCharOnTab:false', () => {
|
||||
tabCharOnTab: false
|
||||
});
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{tab}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{tab}", "test");
|
||||
|
||||
expect(output).toBe("test");
|
||||
});
|
||||
@@ -73,7 +73,7 @@ it('Keyboard {enter} button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{enter}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{enter}", "test");
|
||||
|
||||
expect(output).toBe("test");
|
||||
});
|
||||
@@ -85,7 +85,7 @@ it('Keyboard {enter} button will work with newLineOnEnter:true', () => {
|
||||
newLineOnEnter: true
|
||||
});
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{enter}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{enter}", "test");
|
||||
|
||||
expect(output).toBe("test\n");
|
||||
});
|
||||
@@ -96,7 +96,7 @@ it('Keyboard {numpadX} buttons will work', () => {
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
for(let i = 0;i<=9;i++){
|
||||
let output = keyboard.utilities.getUpdatedInput(`{numpad${i}}`, "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput(`{numpad${i}}`, "test");
|
||||
expect(output).toBe(`test${i}`);
|
||||
}
|
||||
});
|
||||
@@ -106,7 +106,7 @@ it('Keyboard {numpaddivide} button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpaddivide}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpaddivide}", "test");
|
||||
|
||||
expect(output).toBe("test/");
|
||||
});
|
||||
@@ -116,7 +116,7 @@ it('Keyboard {numpadmultiply} button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadmultiply}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadmultiply}", "test");
|
||||
|
||||
expect(output).toBe("test*");
|
||||
});
|
||||
@@ -126,7 +126,7 @@ it('Keyboard {numpadsubtract} button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadsubtract}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadsubtract}", "test");
|
||||
|
||||
expect(output).toBe("test-");
|
||||
});
|
||||
@@ -136,7 +136,7 @@ it('Keyboard {numpadadd} button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
|
||||
|
||||
expect(output).toBe("test+");
|
||||
});
|
||||
@@ -146,7 +146,7 @@ it('Keyboard {numpadadd} button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
|
||||
|
||||
expect(output).toBe("test+");
|
||||
});
|
||||
@@ -156,7 +156,7 @@ it('Keyboard {numpaddecimal} button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpaddecimal}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpaddecimal}", "test");
|
||||
|
||||
expect(output).toBe("test.");
|
||||
});
|
||||
@@ -172,7 +172,7 @@ it('Keyboard custom function buttons will work', () => {
|
||||
}
|
||||
});
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{randombuttontest}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{randombuttontest}", "test");
|
||||
|
||||
expect(output).toBe("test");
|
||||
expect(keyboard.getButtonElement("{randombuttontest}").onclick).toBeTruthy();
|
||||
@@ -183,7 +183,7 @@ it('Keyboard "{" button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("{", "test");
|
||||
|
||||
expect(output).toBe("test{");
|
||||
});
|
||||
@@ -193,7 +193,7 @@ it('Keyboard "}" button will work', () => {
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("}", "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput("}", "test");
|
||||
|
||||
expect(output).toBe("test}");
|
||||
});
|
||||
@@ -205,7 +205,7 @@ it('Keyboard standard button will affect input', () => {
|
||||
|
||||
for (let i = 65; i <= 90; i++) {
|
||||
let char = String.fromCharCode(i);
|
||||
let output = keyboard.utilities.getUpdatedInput(char, "test", keyboard.options);
|
||||
let output = keyboard.utilities.getUpdatedInput(char, "test");
|
||||
expect(output).toBe(`test${char}`);
|
||||
}
|
||||
});
|
||||
@@ -213,8 +213,9 @@ it('Keyboard standard button will affect input', () => {
|
||||
it('Keyboard updateCaretPos will work with minus', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
keyboard.options.syncInstanceInputs = true;
|
||||
let keyboard = new Keyboard({
|
||||
syncInstanceInputs: true
|
||||
});
|
||||
|
||||
keyboard.caretPosition = 5;
|
||||
keyboard.utilities.updateCaretPos(2, true);
|
||||
@@ -282,7 +283,7 @@ it('Keyboard addStringAt will respect maxLength', () => {
|
||||
keyboard.setInput("test");
|
||||
keyboard.caretPosition = 4;
|
||||
|
||||
keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq")
|
||||
keyboard.utilities.handleMaxLength(keyboard.input, "testq")
|
||||
keyboard.utilities.addStringAt("test", "q", 4);
|
||||
|
||||
expect(keyboard.caretPosition).toBe(4);
|
||||
@@ -297,7 +298,7 @@ it('Keyboard handleMaxLength will exit out on same updatedInput', () => {
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "test")
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, "test")
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
@@ -313,7 +314,7 @@ it('Keyboard handleMaxLength will work with object maxLength', () => {
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
|
||||
|
||||
expect(output).toBeTruthy();
|
||||
});
|
||||
@@ -330,7 +331,7 @@ it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
|
||||
|
||||
expect(output).toBeTruthy();
|
||||
});
|
||||
@@ -346,7 +347,7 @@ it('Keyboard handleMaxLength will return false if obj maxLength not reached', ()
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
@@ -361,7 +362,7 @@ it('Keyboard handleMaxLength will work without debug', () => {
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
|
||||
|
||||
expect(output).toBeTruthy();
|
||||
});
|
||||
@@ -376,7 +377,7 @@ it('Keyboard handleMaxLength will work with numeric maxLength', () => {
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
@@ -390,7 +391,7 @@ it('Keyboard handleMaxLength wont work with non numeric or object maxLength', ()
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
@@ -405,7 +406,7 @@ it('Keyboard handleMaxLength wont work with non numeric or object maxLength (wit
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
@@ -483,4 +484,10 @@ it('Keyboard will work with custom (and weird) class', () => {
|
||||
testUtil.setDOM("my--weird--class");
|
||||
let keyboard = new Keyboard(".my--weird--class");
|
||||
expect(keyboard.keyboardDOMClass).toBe("my--weird--class");
|
||||
});
|
||||
|
||||
it('Keyboard camelCase will work with empty strings', () => {
|
||||
testUtil.setDOM();
|
||||
let keyboard = new Keyboard();
|
||||
expect(keyboard.utilities.camelCase()).toBeFalsy();
|
||||
});
|
||||
@@ -7,9 +7,14 @@ export default class TestUtility {
|
||||
*/
|
||||
setDOM = (divClass) => {
|
||||
this.clear();
|
||||
const div = document.createElement('div');
|
||||
div.className += divClass || "simple-keyboard";
|
||||
document.body.appendChild(div);
|
||||
const wrapperDOM = document.createElement('div');
|
||||
wrapperDOM.setAttribute("id", "root");
|
||||
|
||||
const keyboardDOM = document.createElement('div');
|
||||
keyboardDOM.className = divClass || "simple-keyboard";
|
||||
|
||||
wrapperDOM.appendChild(keyboardDOM);
|
||||
document.body.appendChild(wrapperDOM);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user