mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-02-15 00:07:43 +08:00
Compare commits
30 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
36df4e83cc | ||
|
|
1c98cf85f6 | ||
|
|
a1d6bf4fe0 | ||
|
|
345f22827b | ||
|
|
f0ef1e8e7b | ||
|
|
1cc5b9b0ee | ||
|
|
7d6e933a4e | ||
|
|
3f4248737f | ||
|
|
572498022c | ||
|
|
8a85b92f8f | ||
|
|
36123371fb | ||
|
|
15c929316d | ||
|
|
30603e76b5 | ||
|
|
ad17363173 | ||
|
|
1fe93ba6dd | ||
|
|
7e968e07b8 | ||
|
|
6c5026da34 | ||
|
|
38f178cc18 | ||
|
|
8e3b0e18c0 | ||
|
|
c32a8a9568 | ||
|
|
705b5acf53 | ||
|
|
d4886c1f6f | ||
|
|
6ba68a21e6 | ||
|
|
958019199a | ||
|
|
65bf9362bd | ||
|
|
f4a5d946d6 | ||
|
|
12fcae865e | ||
|
|
5b84982812 | ||
|
|
be6d1b0f93 | ||
|
|
0f5dad0527 |
135
README.md
135
README.md
@@ -1,13 +1,11 @@
|
||||
# simple-keyboard
|
||||
[](https://www.npmjs.com/package/simple-keyboard)
|
||||
[](https://www.jsdelivr.com/package/npm/simple-keyboard)
|
||||
|
||||
[](https://www.npmjs.com/package/simple-keyboard)
|
||||
<a href="https://franciscohodge.com/simple-keyboard/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simplekeyboard-banner_B.png" align="center" width="100%"></a>
|
||||
<a href="https://franciscohodge.com/simple-keyboard/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-240-demo-2.gif" align="center" width="100%"></a>
|
||||
|
||||
<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard.png" align="center"></a>
|
||||
> The easily customisable and responsive on-screen virtual keyboard for Javascript projects.
|
||||
|
||||
<a href="https://franciscohodge.com/simple-keyboard/demo" title="View Demo"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/k2.png" align="center" width="100%"></a>
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
### npm
|
||||
@@ -29,8 +27,8 @@ import Keyboard from 'simple-keyboard';
|
||||
import 'simple-keyboard/build/css/index.css';
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button)
|
||||
onChange: input => onChange(input),
|
||||
onKeyPress: button => onKeyPress(button)
|
||||
});
|
||||
|
||||
function onChange(input){
|
||||
@@ -61,14 +59,14 @@ function onKeyPress(button){
|
||||
````html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/0581247fbeda4b2fb670ceaf3facebd3258fa04f/build/css/index.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input class="input" placeholder="Tap on the virtual keyboard to start" />
|
||||
<div class="simple-keyboard"></div>
|
||||
|
||||
<script src="https://cdn.rawgit.com/hodgef/simple-keyboard/d88912cd23d224a22a38da34cac7b645c6a8560c/build/index.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>
|
||||
<script src="src/index.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -125,6 +123,8 @@ layout: {
|
||||
}
|
||||
```
|
||||
|
||||
> Looking for keyboard layouts in other languages? **Check out [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts) !**
|
||||
|
||||
### layoutName
|
||||
|
||||
> Specifies which layout should be used.
|
||||
@@ -135,11 +135,11 @@ layoutName: "default"
|
||||
|
||||
### display
|
||||
|
||||
> Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: "delete").
|
||||
> Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: "backspace").
|
||||
|
||||
```js
|
||||
display: {
|
||||
'{bksp}': 'delete',
|
||||
'{bksp}': 'backspace',
|
||||
'{enter}': '< enter',
|
||||
'{shift}': 'shift',
|
||||
'{s}': 'shift',
|
||||
@@ -204,6 +204,14 @@ newLineOnEnter: false
|
||||
inputName: "default"
|
||||
```
|
||||
|
||||
### syncInstanceInputs
|
||||
|
||||
> When set to true, this option synchronizes the internal input of every simple-keyboard instance.
|
||||
|
||||
```js
|
||||
syncInstanceInputs: false
|
||||
```
|
||||
|
||||
### onKeyPress
|
||||
|
||||
> Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
|
||||
@@ -292,7 +300,70 @@ keyboard.setOptions({
|
||||
});
|
||||
```
|
||||
|
||||
## Use-cases
|
||||
### dispatch
|
||||
|
||||
> Send a command to all simple-keyboard instances at once (if you have multiple instances).
|
||||
|
||||
```js
|
||||
keyboard.dispatch(instance => {
|
||||
instance.setOptions({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "myClass",
|
||||
buttons: `a b c`
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
[](https://codesandbox.io/s/rjnlp4pp2q?module=%2Fsrc%2Findex.js)
|
||||
|
||||
|
||||
## Q&A / Use-cases
|
||||
|
||||
### How to give a different base class to my keyboard?
|
||||
|
||||
As you may have seen on the code samples, this is the default setup that simple-keyboard uses:
|
||||
|
||||
```html
|
||||
<div class="simple-keyboard"></div>
|
||||
```
|
||||
|
||||
```js
|
||||
let keyboard = new Keyboard({
|
||||
// Add options here
|
||||
});
|
||||
```
|
||||
|
||||
You can however change this by setting up simple-keyboard like so:
|
||||
|
||||
```html
|
||||
<div class="myFavouriteClass"></div>
|
||||
```
|
||||
|
||||
```js
|
||||
let keyboard = new Keyboard(".myFavouriteClass", {
|
||||
// Add options here
|
||||
});
|
||||
```
|
||||
|
||||
This can come in handy especially when dealing with multiple simple keyboard instances.
|
||||
|
||||
### How to syncronize multiple instances of simple-keyboard
|
||||
|
||||
As shown above, you can run multiple instances of simple-keyboard. To keep their internal inputs in sync, set the *[syncInstanceInputs](#syncInstanceInputs)* option to `true`.
|
||||
|
||||
If you want to send a command to all your simple-keyboard instances at once, you can use the *[dispatch](#syncInstanceInputs)* method.
|
||||
|
||||
Here's a demo with both these features in action:
|
||||
|
||||
[](https://codesandbox.io/s/rjnlp4pp2q?module=%2Fsrc%2Findex.js)
|
||||
|
||||
Here's an example of a full keyboard made out of multiple simple-keyboard instances:
|
||||
|
||||
[](https://codesandbox.io/s/nrxrn5kprp?module=%2Fsrc%2Findex.js)
|
||||
|
||||
|
||||
### Using several inputs
|
||||
|
||||
@@ -350,6 +421,44 @@ For example:
|
||||
|
||||
[](https://codesandbox.io/s/43nm6v4xyx?module=%2Fsrc%2Findex.js)
|
||||
|
||||
### Having keys in a different language configuration
|
||||
|
||||
There's a number of key layouts available. To apply them, check out [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts).
|
||||
|
||||
If you'd like to contribute your own layouts, please submit your pull request at the simple-keyboard-layouts repository.
|
||||
|
||||
|
||||
### How to customize my keyboard layout?
|
||||
|
||||
If you'd like to create a layout in a language not currently supported by [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts), you definitely can.
|
||||
|
||||
Take following demo as an example:
|
||||
|
||||
[](https://codesandbox.io/s/v388k9zvk0?module=%2Fsrc%2Findex.js)
|
||||
|
||||
If you have issues displaying a character, you might need its unicode code to display it. Here an useful converter tool:
|
||||
|
||||
[r12a Unicode converter](https://r12a.github.io/app-conversion/)
|
||||
|
||||
### Why is the caps lock button working like shift button?
|
||||
|
||||
For the sake of simplicity, caps lock and shift do the same action in the main demos.
|
||||
If you'd like to show a different layout when you press caps lock, check out the following demo:
|
||||
|
||||
[](https://codesandbox.io/s/l3n84qn5oq?module=%2Fsrc%2Findex.js)
|
||||
|
||||
|
||||
### How to display a full keyboard
|
||||
|
||||
You can display a full keyboard by linking together multiple Simple Keyboard instances.
|
||||
This is because you might want different sections of your keyboard to have different spacing and styling.
|
||||
|
||||
Please refer to the documentation on the *[syncInstanceInputs](#syncInstanceInputs)* option, which allows you to sync the input of all your simple-keyboard instances.
|
||||
|
||||
Also, check out this demo:
|
||||
|
||||
[](https://codesandbox.io/s/0ywkn0k7pp?module=%2Fsrc%2Findex.js)
|
||||
|
||||
## Demo
|
||||
|
||||
[https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo)
|
||||
|
||||
10
bin/postinstall
Normal file
10
bin/postinstall
Normal file
@@ -0,0 +1,10 @@
|
||||
console.log('\x1b[36m%s\x1b[0m', `
|
||||
______________________________________\n`);
|
||||
|
||||
console.log('\x1b[33m%s\x1b[0m', `Thank you for installing simple-keyboard !`);
|
||||
|
||||
console.log('\x1b[36m%s\x1b[0m', `
|
||||
Please consider starring the repository so others can also find it.
|
||||
https://github.com/hodgef/simple-keyboard/stargazers
|
||||
______________________________________
|
||||
`);
|
||||
@@ -1,2 +1,13 @@
|
||||
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;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:manipulation;touch-action:manipulation}.simple-keyboard .hg-row{display:-ms-flexbox;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;-ms-flex-positive:1;flex-grow:1;cursor:pointer}.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn{max-width:100px}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{-webkit-box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5}.simple-keyboard.hg-theme-default .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}
|
||||
/*!
|
||||
*
|
||||
* simple-keyboard v2.4.1
|
||||
* https://github.com/hodgef/simple-keyboard
|
||||
*
|
||||
* Copyright (c) Francisco Hodge (https://github.com/hodgef)
|
||||
*
|
||||
* 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;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:manipulation;touch-action:manipulation}.simple-keyboard .hg-row{display:-ms-flexbox;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;-ms-flex-positive:1;flex-grow:1;cursor:pointer}.hg-standardBtn{max-width:100px}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{-webkit-box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.simple-keyboard.hg-theme-default .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;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}
|
||||
/*# sourceMappingURL=index.css.map*/
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sources":["webpack:///./src/lib/components/Keyboard.css"],"names":[],"mappings":"AAAA,UACE,SACA,SAAW,CAGb,iBACE,6GACA,WACA,yBACG,sBACC,qBACI,iBACR,8BACQ,sBACR,gBACA,8BACI,yBAA2B,CAGjC,yBACE,oBACA,YAAc,CAGhB,0CACE,iBAAmB,CAGrB,qDACE,gBAAkB,CAGpB,4BACE,qBACA,oBACI,YACJ,cAAgB,CAGlB,6DACE,eAAiB,CAMnB,kCACE,gCACA,YACA,iBAAmB,CAGrB,6CACE,+CACQ,uCACR,YACA,kBACA,8BACQ,sBACR,YACA,gBACA,+BAAiC,CAGlC,oDACC,kBAAoB,CAGtB,+DACE,YACA,YACA,sBACI,mBACJ,oBACA,aACA,qBACI,sBAAwB","file":"css/index.css","sourcesContent":["body, html {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.simple-keyboard {\r\n font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n width: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n -ms-touch-action: manipulation;\r\n touch-action: manipulation;\r\n}\r\n\r\n.simple-keyboard .hg-row {\r\n display: -ms-flexbox;\r\n display: flex;\r\n}\r\n\r\n.simple-keyboard .hg-row:not(:last-child) {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\r\n margin-right: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-button {\r\n display: inline-block;\r\n -ms-flex-positive: 1;\r\n flex-grow: 1;\r\n cursor: pointer;\r\n}\r\n\r\n.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn {\r\n max-width: 100px;\r\n}\r\n\r\n/**\r\n * hg-theme-default theme\r\n */\r\n.simple-keyboard.hg-theme-default {\r\n background-color: rgba(0,0,0,0.1);\r\n padding: 5px;\r\n border-radius: 5px;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default .hg-button {\r\n -webkit-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n height: 40px;\r\n border-radius: 5px;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n background: white;\r\n border-bottom: 1px solid #b5b5b5;\r\n }\r\n\r\n .simple-keyboard.hg-theme-default .hg-button:active {\r\n background: #e4e4e4;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {\r\n width: 33.3%;\r\n height: 60px;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -ms-flex-pack: center;\r\n justify-content: center;\r\n}\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Keyboard.css"],"sourceRoot":""}
|
||||
{"version":3,"sources":["webpack:///./src/lib/components/Keyboard.css"],"names":[],"mappings":";;;;;;;;;;;AAAA,UACE,SACA,SAAW,CAGb,iBACE,6GACA,WACA,yBACG,sBACC,qBACI,iBACR,8BACQ,sBACR,gBACA,8BACI,yBAA2B,CAGjC,yBACE,oBACA,YAAc,CAGhB,0CACE,iBAAmB,CAGrB,qDACE,gBAAkB,CAGpB,4BACE,qBACA,oBACI,YACJ,cAAgB,CAGlB,gBACE,eAAiB,CAMnB,kCACE,gCACA,YACA,iBAAmB,CAGrB,6CACE,+CACQ,uCACR,YACA,kBACA,8BACQ,sBACR,YACA,gBACA,gCACA,eACA,oBACA,aACA,sBACI,mBACJ,qBACI,sBAAwB,CAG7B,oDACC,kBAAoB,CAGtB,+DACE,YACA,YACA,sBACI,mBACJ,oBACA,aACA,qBACI,sBAAwB,CAO9B,oIACE,WAAa,CAGf,+DACE,WAAa,CAGf,2DACE,cAAgB,CAGlB,yEACE,cAAgB","file":"css/index.css","sourcesContent":["body, html {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.simple-keyboard {\r\n font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n width: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n -ms-touch-action: manipulation;\r\n touch-action: manipulation;\r\n}\r\n\r\n.simple-keyboard .hg-row {\r\n display: -ms-flexbox;\r\n display: flex;\r\n}\r\n\r\n.simple-keyboard .hg-row:not(:last-child) {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\r\n margin-right: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-button {\r\n display: inline-block;\r\n -ms-flex-positive: 1;\r\n flex-grow: 1;\r\n cursor: pointer;\r\n}\r\n\r\n.hg-standardBtn {\r\n max-width: 100px;\r\n}\r\n\r\n/**\r\n * hg-theme-default theme\r\n */\r\n.simple-keyboard.hg-theme-default {\r\n background-color: rgba(0,0,0,0.1);\r\n padding: 5px;\r\n border-radius: 5px;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default .hg-button {\r\n -webkit-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n height: 40px;\r\n border-radius: 5px;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n background: white;\r\n border-bottom: 1px solid #b5b5b5;\r\n cursor: pointer;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -ms-flex-pack: center;\r\n justify-content: center;\r\n }\r\n\r\n .simple-keyboard.hg-theme-default .hg-button:active {\r\n background: #e4e4e4;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {\r\n width: 33.3%;\r\n height: 60px;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -ms-flex-pack: center;\r\n justify-content: center;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {\r\n height: 85px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {\r\n height: 85px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {\r\n width: 105px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-com {\r\n max-width: 85px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {\r\n max-width: 45px;\r\n}\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Keyboard.css"],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
25
config/getPackageJson.js
Normal file
25
config/getPackageJson.js
Normal file
@@ -0,0 +1,25 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
/**
|
||||
* A module to get package informations from package.json
|
||||
* @module getPackageJson
|
||||
* @param {...string} keys from package.json if no arguments passed it returns package.json content as object
|
||||
* @returns {object} with given keys or content of package.json as object
|
||||
*/
|
||||
|
||||
/**
|
||||
* Returns package info
|
||||
*/
|
||||
const getPackageJson = function(...args) {
|
||||
const packageJSON = JSON.parse(fs.readFileSync(path.join(__dirname, '../package.json')));
|
||||
if (!args.length) {
|
||||
return packageJSON;
|
||||
}
|
||||
return args.reduce((out, key) => {
|
||||
out[key] = packageJSON[key];
|
||||
return out;
|
||||
}, {});
|
||||
};
|
||||
|
||||
module.exports = getPackageJson;
|
||||
@@ -8,6 +8,7 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter');
|
||||
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
|
||||
const paths = require('./paths');
|
||||
const getClientEnvironment = require('./env');
|
||||
const getPackageJson = require('./getPackageJson');
|
||||
|
||||
// Webpack uses `publicPath` to determine where the app is being served from.
|
||||
// It requires a trailing slash, or the file assets will get an incorrect path.
|
||||
@@ -42,6 +43,24 @@ const extractTextPluginOptions = shouldUseRelativeAssetPaths
|
||||
{ publicPath: Array(cssFilename.split('/').length).join('../') }
|
||||
: {};
|
||||
|
||||
const {
|
||||
version,
|
||||
name,
|
||||
license,
|
||||
repository,
|
||||
author,
|
||||
} = getPackageJson('version', 'name', 'license', 'repository', 'author');
|
||||
|
||||
const banner = `
|
||||
${name} v${version}
|
||||
${repository.url}
|
||||
|
||||
Copyright (c) ${author.replace(/ *\<[^)]*\> */g, " ")}
|
||||
|
||||
This source code is licensed under the ${license} license found in the
|
||||
LICENSE file in the root directory of this source tree.
|
||||
`;
|
||||
|
||||
// This is the production configuration.
|
||||
// It compiles slowly and is focused on producing a fast and minimal bundle.
|
||||
// The development configuration is different and lives in a separate file.
|
||||
@@ -247,6 +266,10 @@ module.exports = {
|
||||
},
|
||||
sourceMap: shouldUseSourceMap,
|
||||
}),
|
||||
new webpack.BannerPlugin({
|
||||
banner: banner,
|
||||
entryOnly: true
|
||||
}),
|
||||
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
|
||||
new ExtractTextPlugin({
|
||||
filename: cssFilename,
|
||||
|
||||
753
package-lock.json
generated
753
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@@ -1,13 +1,14 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "2.3.7",
|
||||
"description": "On-screen Virtual Keyboard",
|
||||
"version": "2.4.1",
|
||||
"description": "On-screen Javascript Virtual Keyboard",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"start": "node scripts/start.js",
|
||||
"build": "node scripts/build.js",
|
||||
"demo": "node scripts/demo.js",
|
||||
"test": "node scripts/test.js --env=jsdom",
|
||||
"postinstall": "node bin/postinstall",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
@@ -29,7 +30,8 @@
|
||||
"component",
|
||||
"virtual-keyboard",
|
||||
"touchscreen",
|
||||
"touch-screen"
|
||||
"touch-screen",
|
||||
"osk"
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {},
|
||||
@@ -75,10 +77,6 @@
|
||||
"webpack-manifest-plugin": "1.3.2",
|
||||
"whatwg-fetch": "2.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=0.14",
|
||||
"react-dom": ">=0.14"
|
||||
},
|
||||
"jest": {
|
||||
"collectCoverageFrom": [
|
||||
"src/**/*.{js,jsx,mjs}"
|
||||
|
||||
150
src/demo/FullKeyboardDemo.js
Normal file
150
src/demo/FullKeyboardDemo.js
Normal file
@@ -0,0 +1,150 @@
|
||||
import Keyboard from '../lib';
|
||||
import './css/FullKeyboardDemo.css';
|
||||
|
||||
class App {
|
||||
constructor(){
|
||||
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
|
||||
this.keyboardSections = [];
|
||||
}
|
||||
|
||||
onDOMLoaded = () => {
|
||||
/**
|
||||
* Adding preview (demo only)
|
||||
* In production, this would be part of your HTML file
|
||||
*/
|
||||
document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
|
||||
<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>
|
||||
`);
|
||||
document.querySelector('.simple-keyboard').outerHTML = "";
|
||||
|
||||
|
||||
/**
|
||||
* Start of demo
|
||||
*/
|
||||
this.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
|
||||
};
|
||||
|
||||
this.keyboard = new Keyboard(".simple-keyboard-main", {
|
||||
...this.commonKeyboardOptions,
|
||||
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}",
|
||||
".com @ {space}"
|
||||
],
|
||||
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}",
|
||||
".com @ {space}"
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardControlPad = new Keyboard(".simple-keyboard-control", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: [
|
||||
"{prtscr} {scrolllock} {pause}",
|
||||
"{insert} {home} {pageup}",
|
||||
"{delete} {end} {pagedown}"
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardArrows = new Keyboard(".simple-keyboard-arrows", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: ["{arrowup}", "{arrowleft} {arrowdown} {arrowright}"]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardNumPad = new Keyboard(".simple-keyboard-numpad", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: [
|
||||
"{numlock} {numpaddivide} {numpadmultiply}",
|
||||
"{numpad7} {numpad8} {numpad9}",
|
||||
"{numpad4} {numpad5} {numpad6}",
|
||||
"{numpad1} {numpad2} {numpad3}", "{numpad0} {numpaddecimal}"]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardNumPadEnd = new Keyboard(".simple-keyboard-numpadEnd", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: ["{numpadsubtract}", "{numpadadd}", "{numpadenter}"]
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Physical Keyboard support
|
||||
* Whenever the input is changed with the keyboard, updating SimpleKeyboard's internal input
|
||||
*/
|
||||
document.querySelector(".input").addEventListener("keyup", () => {
|
||||
let input = document.querySelector(".input").value;
|
||||
this.keyboard.setInput(input);
|
||||
});
|
||||
|
||||
/*
|
||||
// Uncomment this to test the function keys (f1-12)
|
||||
document.addEventListener("keydown", (event) => {
|
||||
event.preventDefault();
|
||||
});*/
|
||||
}
|
||||
|
||||
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 App;
|
||||
@@ -1,6 +1,6 @@
|
||||
#root {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
max-width: 1000px;
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
@@ -8,7 +8,7 @@
|
||||
#root .simple-keyboard-preview {
|
||||
background: rgba(0,0,0,0.8);
|
||||
border: 20px solid rgba(0,0,0,0.1);
|
||||
height: 300px;
|
||||
height: 260px;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
padding: 10px;
|
||||
|
||||
116
src/demo/css/FullKeyboardDemo.css
Normal file
116
src/demo/css/FullKeyboardDemo.css
Normal file
@@ -0,0 +1,116 @@
|
||||
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;
|
||||
margin: 0 auto;
|
||||
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.hg-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;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
#root {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
max-width: 1000px;
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
@@ -33,6 +33,8 @@
|
||||
input {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
label {
|
||||
|
||||
@@ -30,7 +30,7 @@ body, html {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn {
|
||||
.hg-standardBtn {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
@@ -51,6 +51,10 @@ body, html {
|
||||
padding: 5px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #b5b5b5;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-theme-default .hg-button:active {
|
||||
@@ -63,4 +67,24 @@ body, html {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {
|
||||
height: 85px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import './Keyboard.css';
|
||||
|
||||
// Services
|
||||
import PhysicalKeyboard from '../services/PhysicalKeyboard';
|
||||
import KeyboardLayout from '../services/KeyboardLayout';
|
||||
import Utilities from '../services/Utilities';
|
||||
|
||||
@@ -22,7 +23,8 @@ class SimpleKeyboard {
|
||||
this.options.inputName = this.options.inputName || "default";
|
||||
this.input = {};
|
||||
this.input[this.options.inputName] = '';
|
||||
|
||||
this.keyboardDOMClass = keyboardDOMQuery.split('.').join("");
|
||||
this.timers = {};
|
||||
|
||||
/**
|
||||
* Rendering keyboard
|
||||
@@ -31,6 +33,20 @@ class SimpleKeyboard {
|
||||
this.render();
|
||||
else
|
||||
console.error(`"${keyboardDOMQuery}" was not found in the DOM.`);
|
||||
|
||||
/**
|
||||
* Saving instance
|
||||
* This enables multiple simple-keyboard support with easier management
|
||||
*/
|
||||
if(!window['SimpleKeyboardInstances'])
|
||||
window['SimpleKeyboardInstances'] = {};
|
||||
|
||||
window['SimpleKeyboardInstances'][Utilities.camelCase(this.keyboardDOMClass)] = this;
|
||||
|
||||
/**
|
||||
* Physical Keyboard support
|
||||
*/
|
||||
this.physicalKeyboardInterface = new PhysicalKeyboard(this);
|
||||
}
|
||||
|
||||
handleButtonClicked = (button) => {
|
||||
@@ -66,6 +82,12 @@ class SimpleKeyboard {
|
||||
if(debug)
|
||||
console.log('Input changed:', this.input);
|
||||
|
||||
/**
|
||||
* syncInstanceInputs
|
||||
*/
|
||||
if(this.options.syncInstanceInputs)
|
||||
this.syncInstanceInputs(this.input);
|
||||
|
||||
/**
|
||||
* Calling onChange
|
||||
*/
|
||||
@@ -78,19 +100,48 @@ class SimpleKeyboard {
|
||||
}
|
||||
}
|
||||
|
||||
syncInstanceInputs = () => {
|
||||
this.dispatch((section) => {
|
||||
section.replaceInput(this.input);
|
||||
});
|
||||
}
|
||||
|
||||
clearInput = (inputName) => {
|
||||
inputName = inputName || this.options.inputName;
|
||||
this.input[this.options.inputName] = '';
|
||||
|
||||
/**
|
||||
* syncInstanceInputs
|
||||
*/
|
||||
if(this.options.syncInstanceInputs)
|
||||
this.syncInstanceInputs(this.input);
|
||||
}
|
||||
|
||||
getInput = (inputName) => {
|
||||
inputName = inputName || this.options.inputName;
|
||||
|
||||
/**
|
||||
* syncInstanceInputs
|
||||
*/
|
||||
if(this.options.syncInstanceInputs)
|
||||
this.syncInstanceInputs(this.input);
|
||||
|
||||
return this.input[this.options.inputName];
|
||||
}
|
||||
|
||||
setInput = (input, inputName) => {
|
||||
inputName = inputName || this.options.inputName;
|
||||
this.input[inputName] = input;
|
||||
|
||||
/**
|
||||
* syncInstanceInputs
|
||||
*/
|
||||
if(this.options.syncInstanceInputs)
|
||||
this.syncInstanceInputs(this.input);
|
||||
}
|
||||
|
||||
replaceInput = (inputObj) => {
|
||||
this.input = inputObj;
|
||||
}
|
||||
|
||||
setOptions = option => {
|
||||
@@ -101,6 +152,18 @@ class SimpleKeyboard {
|
||||
|
||||
clear = () => {
|
||||
this.keyboardDOM.innerHTML = '';
|
||||
this.keyboardDOM.className = this.keyboardDOMClass;
|
||||
}
|
||||
|
||||
dispatch = (callback) => {
|
||||
if(!window['SimpleKeyboardInstances']){
|
||||
console.error("SimpleKeyboardInstances is not defined. Dispatch cannot be called.")
|
||||
return false;
|
||||
}
|
||||
|
||||
return Object.keys(window['SimpleKeyboardInstances']).forEach((key) => {
|
||||
callback(window['SimpleKeyboardInstances'][key], key);
|
||||
})
|
||||
}
|
||||
|
||||
render = () => {
|
||||
@@ -161,7 +224,7 @@ class SimpleKeyboard {
|
||||
rowArray.forEach((button) => {
|
||||
let fctBtnClass = Utilities.getButtonClass(button);
|
||||
let buttonThemeClass = buttonThemesParsed[button];
|
||||
let buttonDisplayName = Utilities.getButtonDisplayName(button, this.options.display);
|
||||
let buttonDisplayName = Utilities.getButtonDisplayName(button, this.options.display, this.options.mergeDisplay);
|
||||
|
||||
/**
|
||||
* Creating button
|
||||
|
||||
77
src/lib/services/PhysicalKeyboard.js
Normal file
77
src/lib/services/PhysicalKeyboard.js
Normal file
@@ -0,0 +1,77 @@
|
||||
class PhysicalKeyboard {
|
||||
constructor(simpleKeyboardInstance){
|
||||
this.simpleKeyboardInstance = simpleKeyboardInstance;
|
||||
|
||||
if(!window['SimpleKeyboardPhysicalKeyboardInit'])
|
||||
window['SimpleKeyboardPhysicalKeyboardInit'] = true;
|
||||
else
|
||||
return false;
|
||||
|
||||
this.initKeyboardListener();
|
||||
}
|
||||
|
||||
initKeyboardListener = () => {
|
||||
// Normal Keyboard
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
|
||||
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||||
|
||||
this.simpleKeyboardInstance.dispatch(section => {
|
||||
section.setOptions({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "hg-selectedButton",
|
||||
buttons: `${buttonPressed} {${buttonPressed}}`
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Removing button style on keyup
|
||||
document.addEventListener("keyup", (event) => {
|
||||
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
|
||||
|
||||
this.simpleKeyboardInstance.dispatch(section => {
|
||||
section.setOptions({
|
||||
buttonTheme: []
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getSimpleKeyboardLayoutKey = (event) => {
|
||||
if(this.simpleKeyboardInstance.options.debug){
|
||||
console.log(event);
|
||||
}
|
||||
|
||||
let output;
|
||||
|
||||
if(
|
||||
event.code.includes("Numpad") ||
|
||||
event.code.includes("Shift") ||
|
||||
event.code.includes("Space") ||
|
||||
event.code.includes("Backspace")
|
||||
){
|
||||
output = event.code;
|
||||
} else {
|
||||
output = event.key;
|
||||
}
|
||||
|
||||
/**
|
||||
* If button is not uppercase, casting to lowercase
|
||||
*/
|
||||
if (
|
||||
output !== output.toUpperCase() ||
|
||||
(event.code[0] === "F" && Number.isInteger(Number(event.code[1])) && event.code.length <= 3)
|
||||
) {
|
||||
output = output.toLowerCase();
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
}
|
||||
|
||||
export default PhysicalKeyboard;
|
||||
@@ -34,6 +34,8 @@ class Utilities {
|
||||
output = 'closebracket';
|
||||
else if(string === "//")
|
||||
output = 'emptybutton';
|
||||
else if(string === ".com")
|
||||
output = 'com';
|
||||
else
|
||||
output = '';
|
||||
|
||||
@@ -53,20 +55,75 @@ class Utilities {
|
||||
|
||||
static getDefaultDiplay(){
|
||||
return {
|
||||
'{bksp}': 'delete',
|
||||
'{bksp}': 'backspace',
|
||||
'{backspace}': 'backspace',
|
||||
'{enter}': '< enter',
|
||||
'{shift}': 'shift',
|
||||
'{shiftleft}': 'shift',
|
||||
'{shiftright}': 'shift',
|
||||
'{alt}': 'alt',
|
||||
'{s}': 'shift',
|
||||
'{tab}': 'tab',
|
||||
'{lock}': 'caps',
|
||||
'{capslock}': 'caps',
|
||||
'{accept}': 'Submit',
|
||||
'{space}': ' ',
|
||||
'{//}': ' '
|
||||
'{//}': ' ',
|
||||
"{esc}": "esc",
|
||||
"{escape}": "esc",
|
||||
"{f1}": "f1",
|
||||
"{f2}": "f2",
|
||||
"{f3}": "f3",
|
||||
"{f4}": "f4",
|
||||
"{f5}": "f5",
|
||||
"{f6}": "f6",
|
||||
"{f7}": "f7",
|
||||
"{f8}": "f8",
|
||||
"{f9}": "f9",
|
||||
"{f10}": "f10",
|
||||
"{f11}": "f11",
|
||||
"{f12}": "f12",
|
||||
'{numpaddivide}': '/',
|
||||
'{numlock}': 'lock',
|
||||
"{arrowup}": "↑",
|
||||
"{arrowleft}": "←",
|
||||
"{arrowdown}": "↓",
|
||||
"{arrowright}": "→",
|
||||
"{prtscr}": "print",
|
||||
"{scrolllock}": "scroll",
|
||||
"{pause}": "pause",
|
||||
"{insert}": "ins",
|
||||
"{home}": "home",
|
||||
"{pageup}": "up",
|
||||
"{delete}": "del",
|
||||
"{end}": "end",
|
||||
"{pagedown}": "down",
|
||||
"{numpadmultiply}": "*",
|
||||
"{numpadsubtract}": "-",
|
||||
"{numpadadd}": "+",
|
||||
"{numpadenter}": "enter",
|
||||
"{period}": ".",
|
||||
"{numpaddecimal}": ".",
|
||||
"{numpad0}": "0",
|
||||
"{numpad1}": "1",
|
||||
"{numpad2}": "2",
|
||||
"{numpad3}": "3",
|
||||
"{numpad4}": "4",
|
||||
"{numpad5}": "5",
|
||||
"{numpad6}": "6",
|
||||
"{numpad7}": "7",
|
||||
"{numpad8}": "8",
|
||||
"{numpad9}": "9",
|
||||
};
|
||||
}
|
||||
|
||||
static getButtonDisplayName = (button, display) => {
|
||||
display = display || Utilities.getDefaultDiplay();
|
||||
static getButtonDisplayName = (button, display, mergeDisplay) => {
|
||||
if(mergeDisplay){
|
||||
display = Object.assign({}, Utilities.getDefaultDiplay(), display);
|
||||
} else {
|
||||
display = display || Utilities.getDefaultDiplay();
|
||||
}
|
||||
|
||||
return display[button] || button;
|
||||
}
|
||||
|
||||
@@ -74,19 +131,50 @@ class Utilities {
|
||||
let output = input;
|
||||
let newLineOnEnter = options.newLineOnEnter;
|
||||
|
||||
if(button === "{bksp}" && output.length > 0)
|
||||
output = output.slice(0, -1);
|
||||
else if(button === "{space}")
|
||||
if((button === "{bksp}" || button === "{backspace}") && output.length > 0){
|
||||
/**
|
||||
* Emojis are made out of two characters, so we must take a custom approach to trim them.
|
||||
* For more info: https://mathiasbynens.be/notes/javascript-unicode
|
||||
*/
|
||||
let lastTwoChars = output.slice(-2);
|
||||
let emojiMatched = lastTwoChars.match(/([\uD800-\uDBFF][\uDC00-\uDFFF])/g);
|
||||
|
||||
if(emojiMatched){
|
||||
output = output.slice(0, -2);
|
||||
} else {
|
||||
output = output.slice(0, -1);
|
||||
}
|
||||
} else if(button === "{space}")
|
||||
output = output + ' ';
|
||||
else if(button === "{tab}")
|
||||
output = output + "\t";
|
||||
else if(button === "{enter}" && newLineOnEnter)
|
||||
else if((button === "{enter}" || button === "{numpadenter}") && newLineOnEnter)
|
||||
output = output + "\n";
|
||||
else if(button.includes("numpad") && Number.isInteger(Number(button[button.length - 2]))){
|
||||
output = output + button[button.length - 2];
|
||||
}
|
||||
else if(button === "{numpaddivide}")
|
||||
output = output + '/';
|
||||
else if(button === "{numpadmultiply}")
|
||||
output = output + '*';
|
||||
else if(button === "{numpadsubtract}")
|
||||
output = output + '-';
|
||||
else if(button === "{numpadadd}")
|
||||
output = output + '+';
|
||||
else if(button === "{numpadadd}")
|
||||
output = output + '+';
|
||||
else if(button === "{numpaddecimal}")
|
||||
output = output + '.';
|
||||
else if(!button.includes("{") && !button.includes("}"))
|
||||
output = output + button;
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
static camelCase = (string) => {
|
||||
return string.toLowerCase().trim().split(/[.\-_\s]/g).reduce((string, word) => string + word[0].toUpperCase() + word.slice(1));
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
export default Utilities;
|
||||
Reference in New Issue
Block a user