mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-02-03 00:06:50 +08:00
Compare commits
99 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
79f1dfe562 | ||
|
|
37ba9fd85f | ||
|
|
d45b3329a7 | ||
|
|
1500ba2f2b | ||
|
|
eb31f91b17 | ||
|
|
db95212243 | ||
|
|
0f0ee2233e | ||
|
|
3c5b94abf8 | ||
|
|
48c4e362b3 | ||
|
|
61b896ad77 | ||
|
|
befa988090 | ||
|
|
b08fae64b8 | ||
|
|
17ccf253b4 | ||
|
|
6edfc6efc2 | ||
|
|
025e351583 | ||
|
|
cc85584154 | ||
|
|
5033b345f7 | ||
|
|
5d5aef242c | ||
|
|
71bab13453 | ||
|
|
773a9b5eb3 | ||
|
|
b0d8923a80 | ||
|
|
8728cc6a2a | ||
|
|
fec9d24a19 | ||
|
|
1a08fe74e0 | ||
|
|
b2f7bac585 | ||
|
|
46bf8e0dc3 | ||
|
|
e8216fee35 | ||
|
|
4f5af90d8d | ||
|
|
02fd2223ff | ||
|
|
feb9e51441 | ||
|
|
5c0d1ed63d | ||
|
|
d248a37c70 | ||
|
|
f1d4b77ffb | ||
|
|
7795b98dcc | ||
|
|
e8c17a4050 | ||
|
|
6e83a1f402 | ||
|
|
ba45bbe5ad | ||
|
|
d79fc3b2e3 | ||
|
|
88b804643b | ||
|
|
7b7697841e | ||
|
|
c1cfacfcae | ||
|
|
0b1a25c8d9 | ||
|
|
53611310c0 | ||
|
|
9e521122b5 | ||
|
|
ab6b54dc43 | ||
|
|
0c773151c7 | ||
|
|
9633c99dad | ||
|
|
280956dba3 | ||
|
|
92bae5f3fb | ||
|
|
fa94cf2ba3 | ||
|
|
24de8bcb20 | ||
|
|
cbfba64447 | ||
|
|
5e5c1c4abe | ||
|
|
c980024e71 | ||
|
|
a321ab9b91 | ||
|
|
0f1936b03e | ||
|
|
625a426fef | ||
|
|
2ad0ba8506 | ||
|
|
d923c5d920 | ||
|
|
282e84941a | ||
|
|
e95ebc1b9e | ||
|
|
0dffe921ff | ||
|
|
26e7970b41 | ||
|
|
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 | ||
|
|
94c14df816 | ||
|
|
4206e02ca2 | ||
|
|
3b1e9c131a | ||
|
|
e7b604f6b1 | ||
|
|
66ae70f29a | ||
|
|
470bdc8e74 |
17
.github/ISSUE_TEMPLATE/bug_report.md
vendored
Normal file
17
.github/ISSUE_TEMPLATE/bug_report.md
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help improve simple-keyboard
|
||||
|
||||
---
|
||||
|
||||
** simple-keyboard version you are using **
|
||||
As some bugs have been addressed in later versions, please ensure you are running the latest.
|
||||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
**Create a sandbox example**
|
||||
Edit [this sandbox example](https://codesandbox.io/s/krzkx19rr) and provide the new link.
|
||||
|
||||
**Screenshots**
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
17
.github/ISSUE_TEMPLATE/feature_request.md
vendored
Normal file
17
.github/ISSUE_TEMPLATE/feature_request.md
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea you'd like to see in simple-keyboard
|
||||
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.**
|
||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like**
|
||||
A clear and concise description of what you want to happen.
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
A clear and concise description of any alternative solutions or features you've considered.
|
||||
|
||||
**Additional context**
|
||||
Add any other context or screenshots about the feature request here.
|
||||
4
.github/github.md
vendored
Normal file
4
.github/github.md
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
# About .github
|
||||
|
||||
This directory handles special features to be used on simple-keyboard's Github repository.
|
||||
It is not needed for simple-keyboard to run and can be safely removed.
|
||||
14
.travis.yml
14
.travis.yml
@@ -1,5 +1,17 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "node"
|
||||
install:
|
||||
- npm install -g codecov
|
||||
- npm install
|
||||
script:
|
||||
- npm run test
|
||||
- npm run test -- --coverage
|
||||
- codecov
|
||||
after_success:
|
||||
- wget https://raw.githubusercontent.com/DiscordHooks/travis-ci-discord-webhook/master/send.sh
|
||||
- chmod +x send.sh
|
||||
- ./send.sh success $WEBHOOK_URL
|
||||
after_failure:
|
||||
- wget https://raw.githubusercontent.com/DiscordHooks/travis-ci-discord-webhook/master/send.sh
|
||||
- chmod +x send.sh
|
||||
- ./send.sh failure $WEBHOOK_URL
|
||||
308
README.md
308
README.md
@@ -1,12 +1,16 @@
|
||||
# simple-keyboard
|
||||
[](https://www.npmjs.com/package/simple-keyboard)
|
||||
[](https://travis-ci.org/hodgef/simple-keyboard)
|
||||
[](https://codecov.io/gh/hodgef/simple-keyboard)
|
||||
[](http://franciscohodge.com/simple-keyboard/chat/join)
|
||||
|
||||
[](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.
|
||||
|
||||
<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/k2.png" align="center" width="100%">
|
||||
This package works with <a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard" title="View Vanilla JS Demo" target="_blank">**Vanilla JS**</a> projects, yet it is also compatible with <a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_angular-js" title="View Angular Demo" target="_blank">**Angular**</a>, <a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_vue-js" title="View Vue Demo" target="_blank">**Vue**</a>, and other libraries and frameworks.
|
||||
|
||||
Looking for **React** support? Check out [react-simple-keyboard](https://www.npmjs.com/package/react-simple-keyboard) !
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -18,7 +22,7 @@
|
||||
|
||||
[Click here to download the latest release (zip format).](https://github.com/hodgef/simple-keyboard/zipball/master)
|
||||
|
||||
> Want to use a CDN instead of self-host? Scroll down to the "Usage from CDN" instructions below.
|
||||
> Want to use a CDN instead of self-host? Scroll down to the "Usage with CDN" instructions below.
|
||||
|
||||
## Usage with npm
|
||||
|
||||
@@ -29,8 +33,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){
|
||||
@@ -50,25 +54,23 @@ function onKeyPress(button){
|
||||
<div class="simple-keyboard"></div>
|
||||
````
|
||||
|
||||
[](https://codesandbox.io/s/krzkx19rr)
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
> Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js).
|
||||
|
||||
## Usage from CDN
|
||||
## Usage with CDN
|
||||
|
||||
### html
|
||||
|
||||
````html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/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/3b75d11b9c1d782d92103d1df0970734e6d6df83/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>
|
||||
|
||||
@@ -95,7 +97,7 @@ function onKeyPress(button) {
|
||||
}
|
||||
````
|
||||
|
||||
[](https://codesandbox.io/s/6n0wzxjmjk)
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_cdn_simple-keyboard" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
## Options
|
||||
|
||||
@@ -125,6 +127,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,19 +139,35 @@ 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',
|
||||
'{tab}': 'tab',
|
||||
'{lock}': 'caps',
|
||||
'{accept}': 'Submit',
|
||||
'{space}': ' ',
|
||||
'{//}': ' '
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
### mergeDisplay
|
||||
|
||||
By default, when you set the `display` property, you replace the default one. This setting merges them instead.
|
||||
|
||||
```js
|
||||
mergeDisplay: true,
|
||||
|
||||
display: {
|
||||
'{bksp}': 'delete',
|
||||
'{enter}': 'submit',
|
||||
}
|
||||
|
||||
// Result:
|
||||
{
|
||||
'{bksp}': 'delete'
|
||||
'{enter}': 'submit',
|
||||
'{shift}': 'shift', // < Merged from default among others
|
||||
....
|
||||
}
|
||||
```
|
||||
|
||||
@@ -161,7 +181,9 @@ theme: "hg-theme-default"
|
||||
|
||||
### buttonTheme
|
||||
|
||||
> A prop to add your own css classes _to one or several buttons_. You can add multiple classes separated by a space.
|
||||
A prop to add your own css classes _to one or several buttons_.
|
||||
|
||||
To add or remove individual `buttonTheme` entries, check out the methods `addButtonTheme` and `removeButtonTheme` below.
|
||||
|
||||
```js
|
||||
buttonTheme: [
|
||||
@@ -177,7 +199,7 @@ buttonTheme: [
|
||||
]
|
||||
```
|
||||
|
||||
[](https://codesandbox.io/s/vj8jvz2q4l?module=%2Fsrc%2Findex.js)
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_customization" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
|
||||
### debug
|
||||
@@ -196,14 +218,82 @@ debug: false
|
||||
newLineOnEnter: false
|
||||
```
|
||||
|
||||
### tabCharOnTab
|
||||
|
||||
> Specifies whether clicking the "TAB" button will input a tab character (`\t`) or not.
|
||||
|
||||
```js
|
||||
tabCharOnTab: true
|
||||
```
|
||||
|
||||
### inputName
|
||||
|
||||
> Allows you to use a single simple-keyboard instance for several inputs.
|
||||
> Allows you to use a single simple-keyboard instance for several inputs.
|
||||
|
||||
```js
|
||||
inputName: "default"
|
||||
```
|
||||
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_multiple-inputs" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
|
||||
### maxLength
|
||||
|
||||
> Restrains simple-keyboard's input to a certain length. This should be used in addition to the input element's `maxlength` attribute.
|
||||
|
||||
```js
|
||||
// Applies to all internal inputs
|
||||
maxLength: 5
|
||||
|
||||
// Specifies different limiters for each input set, in case you are using the "inputName" option
|
||||
maxLength: {
|
||||
'default': 5,
|
||||
'myFancyInput': 10
|
||||
}
|
||||
```
|
||||
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_max-length" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
|
||||
### syncInstanceInputs
|
||||
|
||||
> When set to true, this option synchronizes the internal input of every simple-keyboard instance.
|
||||
|
||||
```js
|
||||
syncInstanceInputs: false
|
||||
```
|
||||
|
||||
### physicalKeyboardHighlight
|
||||
|
||||
Enable highlighting of keys pressed on physical keyboard.
|
||||
|
||||
For functional keys such as `shift`, note that the key's `event.code` is used. In that instance, pressing the left key will result in the code `ShiftLeft`. Therefore, the key must be named `{shiftleft}`.
|
||||
[Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/lib/services/Utilities.js#L58) for some of keys supported out of the box.
|
||||
|
||||
If in doubt, you can also set the `debug` option to `true` to see the key events.
|
||||
|
||||
```js
|
||||
physicalKeyboardHighlight: true
|
||||
```
|
||||
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_cdn_simple-keyboard_extended-full-keyboard" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
### physicalKeyboardHighlightTextColor
|
||||
|
||||
Define the text color that the physical keyboard highlighted key should have. Used when `physicalKeyboardHighlight` is set to true.
|
||||
|
||||
```js
|
||||
physicalKeyboardHighlightTextColor: "white"
|
||||
```
|
||||
|
||||
### physicalKeyboardHighlightBgColor
|
||||
|
||||
Define the background color that the physical keyboard highlighted key should have. Used when `physicalKeyboardHighlight` is set to true.
|
||||
|
||||
```js
|
||||
physicalKeyboardHighlightBgColor: "#9ab4d0"
|
||||
```
|
||||
|
||||
### onKeyPress
|
||||
|
||||
> Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
|
||||
@@ -220,6 +310,22 @@ onKeyPress: (button) => console.log(button)
|
||||
onChange: (input) => console.log(input)
|
||||
```
|
||||
|
||||
### onRender
|
||||
|
||||
> Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
|
||||
|
||||
```js
|
||||
onRender: () => console.log("simple-keyboard refreshed")
|
||||
```
|
||||
|
||||
### onInit
|
||||
|
||||
> Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
|
||||
|
||||
```js
|
||||
onInit: () => console.log("simple-keyboard initialized")
|
||||
```
|
||||
|
||||
### onChangeAll
|
||||
|
||||
> Executes the callback function on input change. Returns the input object with all defined inputs. This is useful if you're handling several inputs with simple-keyboard, as specified in the "*[Using several inputs](#using-several-inputs)*" guide.
|
||||
@@ -237,7 +343,6 @@ To access these functions, you need the instance the simple-keyboard component,
|
||||
var keyboard = new Keyboard({
|
||||
...
|
||||
});
|
||||
/>
|
||||
|
||||
// Then, use as follows...
|
||||
keyboard.methodName(params);
|
||||
@@ -253,7 +358,7 @@ keyboard.clearInput();
|
||||
|
||||
// For specific input
|
||||
// Must have been previously set using the "inputName" prop.
|
||||
keyboard.clearInput("inputName");
|
||||
keyboard.clearInput("myInputName");
|
||||
```
|
||||
|
||||
### getInput
|
||||
@@ -266,12 +371,12 @@ let input = keyboard.getInput();
|
||||
|
||||
// For specific input
|
||||
// Must have been previously set using the "inputName" prop.
|
||||
let input = keyboard.getInput("inputName");
|
||||
let input = keyboard.getInput("myInputName");
|
||||
```
|
||||
|
||||
### setInput
|
||||
|
||||
> Set the keyboard's input. Useful if you want the keybord to initialize with a default value, for example.
|
||||
> Set the keyboard's input. Useful if you want to track input changes made outside simple-keyboard.
|
||||
|
||||
```js
|
||||
// For default input (i.e. if you have only one)
|
||||
@@ -279,7 +384,7 @@ keyboard.setInput("Hello World!");
|
||||
|
||||
// For specific input
|
||||
// Must have been previously set using the "inputName" prop.
|
||||
keyboard.setInput("Hello World!", "inputName");
|
||||
keyboard.setInput("Hello World!", "myInputName");
|
||||
```
|
||||
|
||||
### setOptions
|
||||
@@ -292,7 +397,102 @@ 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`
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_dispatch-method" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
|
||||
### getButtonElement
|
||||
|
||||
> Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
|
||||
|
||||
```js
|
||||
this.keyboard.getButtonElement('a'); // Gets the "a" key as per your layout
|
||||
this.keyboard.getButtonElement('{shift}') // Gets all keys with that name in an array
|
||||
```
|
||||
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_get-button-element" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
|
||||
### addButtonTheme
|
||||
|
||||
Adds an entry to the `buttonTheme`. Basically a way to add a class to a button.
|
||||
|
||||
Unlike the `buttonTheme` property, which replaces entries, `addButtonTheme` creates entries or modifies existing ones.
|
||||
|
||||
```js
|
||||
this.keyboard.addButtonTheme("a b c {enter}", "myClass1 myClass2");
|
||||
```
|
||||
|
||||
### removeButtonTheme
|
||||
|
||||
Removes an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through `buttonTheme` or `addButtonTheme`.
|
||||
|
||||
Unlike the `buttonTheme` property, which replaces entries, `removeButtonTheme` removes entries or modifies existing ones.
|
||||
|
||||
```js
|
||||
this.keyboard.removeButtonTheme("b c", "myClass1 myClass2");
|
||||
```
|
||||
|
||||
## 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](#dispatch)* method.
|
||||
|
||||
Here's a demo with both these features in action:
|
||||
|
||||
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_dispatch-method" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
Here's an example of a full keyboard made out of multiple simple-keyboard instances:
|
||||
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_cdn_simple-keyboard_extended-full-keyboard" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
### Using several inputs
|
||||
|
||||
@@ -346,13 +546,51 @@ For example:
|
||||
|
||||
```
|
||||
|
||||
> [See full example](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/MultipleInputsDemo.js).
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_multiple-inputs" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
|
||||
### 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:
|
||||
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_customization" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
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:
|
||||
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard_handling-shift-caps-lock" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
|
||||
### 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:
|
||||
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_cdn_simple-keyboard_extended-full-keyboard" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
## Demo
|
||||
|
||||
[https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo)
|
||||
|
||||
[](https://codesandbox.io/s/krzkx19rr)
|
||||
<a href="https://codesandbox.io/s/github/hodgef/demo_npm_simple-keyboard" title="run demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/rundemo200.png" width="150" align="center"></a>
|
||||
|
||||
### To run demo on your own computer
|
||||
|
||||
@@ -365,6 +603,10 @@ For example:
|
||||
|
||||
* ReactJS - [react-simple-keyboard](https://github.com/hodgef/react-simple-keyboard)
|
||||
|
||||
### Questions?
|
||||
|
||||
<a href="http://franciscohodge.com/simple-keyboard/chat/join" title="Join our Discord chat" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/discord.png" align="center" width="200"></a>
|
||||
|
||||
## Contributing
|
||||
|
||||
PR's and issues are welcome. Feel free to submit any issues you have at:
|
||||
|
||||
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}.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.6.0
|
||||
* 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}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}
|
||||
/*# 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,eAAiB,CAGnB,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}\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,CAGlB,+DACE,6BACA,UAAa","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}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {\r\n background: rgba(5, 25, 70, 0.53);\r\n color: white;\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,
|
||||
|
||||
1425
package-lock.json
generated
1425
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@@ -1,13 +1,14 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "2.3.1",
|
||||
"description": "On-screen Virtual Keyboard",
|
||||
"version": "2.6.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": {},
|
||||
@@ -57,6 +59,9 @@
|
||||
"file-loader": "1.1.5",
|
||||
"fs-extra": "3.0.1",
|
||||
"html-webpack-plugin": "2.29.0",
|
||||
"istanbul": "^0.4.5",
|
||||
"istanbul-api": "^2.0.6",
|
||||
"istanbul-reports": "^2.0.1",
|
||||
"jest": "20.0.4",
|
||||
"object-assign": "4.1.1",
|
||||
"postcss-flexbugs-fixes": "3.2.0",
|
||||
@@ -75,13 +80,10 @@
|
||||
"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}"
|
||||
"src/**/*.{js,jsx,mjs}",
|
||||
"!**/tests/**"
|
||||
],
|
||||
"setupFiles": [
|
||||
"<rootDir>/config/polyfills.js"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta name="theme-color" content="#000000">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
@@ -20,6 +20,16 @@
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>simple-keyboard</title>
|
||||
<style>
|
||||
/**
|
||||
* Disabling double-tap to zoom in iOS 10+
|
||||
* as it interferes with simple-keyboard
|
||||
*/
|
||||
body,
|
||||
html {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
@@ -4,7 +4,6 @@ import './css/App.css';
|
||||
class App {
|
||||
constructor(){
|
||||
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
|
||||
this.layoutName = "default";
|
||||
}
|
||||
|
||||
@@ -14,20 +13,23 @@ class App {
|
||||
layoutName: this.layoutName,
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button),
|
||||
newLineOnEnter: true
|
||||
newLineOnEnter: true,
|
||||
physicalKeyboardHighlight: true,
|
||||
});
|
||||
|
||||
this.keyboard.setInput("Hello World!");
|
||||
|
||||
/**
|
||||
* Adding preview (demo only)
|
||||
*/
|
||||
document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
|
||||
<div class="simple-keyboard-preview">
|
||||
<textarea class="input" readonly>Hello World!</textarea>
|
||||
<textarea class="input"></textarea>
|
||||
</div>
|
||||
`);
|
||||
|
||||
document.querySelector('.input').addEventListener('change', (event) => {
|
||||
this.keyboard.setInput(event.target.value);
|
||||
});
|
||||
|
||||
console.log(this.keyboard);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
import Keyboard from '../lib';
|
||||
import './css/MultipleInputsDemo.css';
|
||||
|
||||
class App {
|
||||
constructor(){
|
||||
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
|
||||
this.layoutName = "default";
|
||||
}
|
||||
|
||||
onDOMLoaded = () => {
|
||||
this.keyboard = new Keyboard({
|
||||
debug: true,
|
||||
layoutName: this.layoutName,
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button)
|
||||
});
|
||||
|
||||
/**
|
||||
* Adding preview (demo only)
|
||||
* In production, this would be part of your HTML file
|
||||
*/
|
||||
document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
|
||||
<div>
|
||||
<label>Input 1</label>
|
||||
<input class="input" id="input1" value=""/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Input 2</label>
|
||||
<input class="input" id="input2" value=""/>
|
||||
</div>
|
||||
`);
|
||||
|
||||
/**
|
||||
* Changing active input onFocus
|
||||
*/
|
||||
document.querySelectorAll('.input')
|
||||
.forEach(input => input.addEventListener('focus', this.onInputFocus));
|
||||
|
||||
console.log(this.keyboard);
|
||||
}
|
||||
|
||||
onInputFocus = event => {
|
||||
this.selectedInput = `#${event.target.id}`;
|
||||
|
||||
this.keyboard.setOptions({
|
||||
inputName: event.target.id
|
||||
});
|
||||
}
|
||||
|
||||
onChange = input => {
|
||||
let currentInput = this.selectedInput || '.input';
|
||||
document.querySelector(currentInput).value = input;
|
||||
}
|
||||
|
||||
onKeyPress = button => {
|
||||
console.log("Button pressed", button);
|
||||
|
||||
/**
|
||||
* Shift functionality
|
||||
*/
|
||||
if(button === "{lock}" || button === "{shift}")
|
||||
this.handleShiftButton();
|
||||
}
|
||||
|
||||
handleShiftButton = () => {
|
||||
let layoutName = this.layoutName;
|
||||
let shiftToggle = this.layoutName = layoutName === "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 {
|
||||
|
||||
67
src/demo/tests/App.test.js
Normal file
67
src/demo/tests/App.test.js
Normal file
@@ -0,0 +1,67 @@
|
||||
import TestUtility from '../../lib/tests/TestUtility';
|
||||
import Index from '../index';
|
||||
import App from '../App';
|
||||
|
||||
let testUtil = new TestUtility();
|
||||
|
||||
it('Demo will load', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
});
|
||||
|
||||
it('Demo onDOMLoaded will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
demo.onDOMLoaded();
|
||||
|
||||
expect(demo.keyboard).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Demo onChange will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
demo.onDOMLoaded();
|
||||
|
||||
demo.onChange("test");
|
||||
|
||||
expect(document.body.querySelector('.input').value).toBe("test");
|
||||
});
|
||||
|
||||
it('Demo onChange will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
demo.onDOMLoaded();
|
||||
|
||||
demo.keyboard.getButtonElement("q").onclick();
|
||||
|
||||
expect(document.body.querySelector('.input').value).toBe("q");
|
||||
});
|
||||
|
||||
it('Demo input change will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
demo.onDOMLoaded();
|
||||
|
||||
document.body.querySelector('.input').value = "test";
|
||||
document.body.querySelector('.input').dispatchEvent(new Event('change'));
|
||||
|
||||
expect(demo.keyboard.getInput()).toBe("test");
|
||||
});
|
||||
|
||||
it('Demo handleShiftButton will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let demo = new App();
|
||||
demo.onDOMLoaded();
|
||||
|
||||
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");
|
||||
});
|
||||
@@ -9,6 +9,7 @@ body, html {
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.simple-keyboard .hg-row {
|
||||
@@ -29,7 +30,7 @@ body, html {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn {
|
||||
.hg-standardBtn {
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
@@ -50,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 {
|
||||
@@ -62,4 +67,29 @@ 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;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
|
||||
background: rgba(5, 25, 70, 0.53);
|
||||
color: white;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import './Keyboard.css';
|
||||
|
||||
// Services
|
||||
import PhysicalKeyboard from '../services/PhysicalKeyboard';
|
||||
import KeyboardLayout from '../services/KeyboardLayout';
|
||||
import Utilities from '../services/Utilities';
|
||||
|
||||
@@ -12,6 +13,11 @@ class SimpleKeyboard {
|
||||
if(!options)
|
||||
options = {};
|
||||
|
||||
/**
|
||||
* Initializing Utilities
|
||||
*/
|
||||
this.utilities = new Utilities(this);
|
||||
|
||||
/**
|
||||
* Processing options
|
||||
*/
|
||||
@@ -22,20 +28,38 @@ class SimpleKeyboard {
|
||||
this.options.inputName = this.options.inputName || "default";
|
||||
this.input = {};
|
||||
this.input[this.options.inputName] = '';
|
||||
|
||||
this.keyboardDOMClass = keyboardDOMQuery.split('.').join("");
|
||||
this.timers = {};
|
||||
this.buttonElements = {};
|
||||
|
||||
/**
|
||||
* Rendering keyboard
|
||||
*/
|
||||
if(this.keyboardDOM)
|
||||
this.render();
|
||||
else
|
||||
console.error(`"${keyboardDOMQuery}" was not found in the DOM.`);
|
||||
else {
|
||||
console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`);
|
||||
throw new Error("KEYBOARD_DOM_ERROR");
|
||||
}
|
||||
|
||||
/**
|
||||
* Saving instance
|
||||
* This enables multiple simple-keyboard support with easier management
|
||||
*/
|
||||
if(!window['SimpleKeyboardInstances'])
|
||||
window['SimpleKeyboardInstances'] = {};
|
||||
|
||||
window['SimpleKeyboardInstances'][this.utilities.camelCase(this.keyboardDOMClass)] = this;
|
||||
|
||||
/**
|
||||
* Physical Keyboard support
|
||||
*/
|
||||
this.physicalKeyboardInterface = new PhysicalKeyboard(this);
|
||||
}
|
||||
|
||||
handleButtonClicked = (button) => {
|
||||
let debug = this.options.debug;
|
||||
|
||||
|
||||
/**
|
||||
* Ignoring placeholder buttons
|
||||
*/
|
||||
@@ -47,25 +71,32 @@ class SimpleKeyboard {
|
||||
*/
|
||||
if(typeof this.options.onKeyPress === "function")
|
||||
this.options.onKeyPress(button);
|
||||
|
||||
/**
|
||||
* Updating input
|
||||
*/
|
||||
let options = {
|
||||
newLineOnEnter: (this.options.newLineOnEnter === true)
|
||||
}
|
||||
|
||||
if(!this.input[this.options.inputName])
|
||||
this.input[this.options.inputName] = '';
|
||||
|
||||
let updatedInput = Utilities.getUpdatedInput(button, this.input[this.options.inputName], options);
|
||||
let updatedInput = this.utilities.getUpdatedInput(button, this.input[this.options.inputName], this.options, this.caretPosition);
|
||||
|
||||
if(this.input[this.options.inputName] !== updatedInput){
|
||||
|
||||
/**
|
||||
* If maxLength and handleMaxLength yield true, halting
|
||||
*/
|
||||
if(this.options.maxLength && this.utilities.handleMaxLength(this.input, this.options, updatedInput)){
|
||||
return false;
|
||||
}
|
||||
|
||||
this.input[this.options.inputName] = updatedInput;
|
||||
|
||||
if(debug)
|
||||
console.log('Input changed:', this.input);
|
||||
|
||||
/**
|
||||
* syncInstanceInputs
|
||||
*/
|
||||
if(this.options.syncInstanceInputs)
|
||||
this.syncInstanceInputs(this.input);
|
||||
|
||||
/**
|
||||
* Calling onChange
|
||||
*/
|
||||
@@ -78,19 +109,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 +161,171 @@ class SimpleKeyboard {
|
||||
|
||||
clear = () => {
|
||||
this.keyboardDOM.innerHTML = '';
|
||||
this.keyboardDOM.className = this.keyboardDOMClass;
|
||||
this.buttonElements = {};
|
||||
}
|
||||
|
||||
dispatch = (callback) => {
|
||||
if(!window['SimpleKeyboardInstances']){
|
||||
console.warn(`SimpleKeyboardInstances is not defined. Dispatch cannot be called.`);
|
||||
throw new Error("INSTANCES_VAR_ERROR");
|
||||
}
|
||||
|
||||
return Object.keys(window['SimpleKeyboardInstances']).forEach((key) => {
|
||||
callback(window['SimpleKeyboardInstances'][key], key);
|
||||
})
|
||||
}
|
||||
|
||||
addButtonTheme = (buttons, className) => {
|
||||
if(!className || !buttons)
|
||||
return false;
|
||||
|
||||
buttons.split(" ").forEach(button => {
|
||||
className.split(" ").forEach(classNameItem => {
|
||||
if(!this.options.buttonTheme)
|
||||
this.options.buttonTheme = [];
|
||||
|
||||
let classNameFound = false;
|
||||
|
||||
/**
|
||||
* If class is already defined, we add button to class definition
|
||||
*/
|
||||
this.options.buttonTheme.map(buttonTheme => {
|
||||
|
||||
if(buttonTheme.class.split(" ").includes(classNameItem)){
|
||||
classNameFound = true;
|
||||
|
||||
let buttonThemeArray = buttonTheme.buttons.split(" ");
|
||||
if(!buttonThemeArray.includes(button)){
|
||||
classNameFound = true;
|
||||
buttonThemeArray.push(button);
|
||||
buttonTheme.buttons = buttonThemeArray.join(" ");
|
||||
}
|
||||
}
|
||||
return buttonTheme;
|
||||
});
|
||||
|
||||
/**
|
||||
* If class is not defined, we create a new entry
|
||||
*/
|
||||
if(!classNameFound){
|
||||
this.options.buttonTheme.push({
|
||||
class: classNameItem,
|
||||
buttons: buttons
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
removeButtonTheme = (buttons, className) => {
|
||||
/**
|
||||
* When called with empty parameters, remove all button themes
|
||||
*/
|
||||
if(!buttons && !className){
|
||||
this.options.buttonTheme = [];
|
||||
this.render();
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* If buttons are passed and buttonTheme has items
|
||||
*/
|
||||
if(buttons && Array.isArray(this.options.buttonTheme) && this.options.buttonTheme.length){
|
||||
let buttonArray = buttons.split(" ");
|
||||
buttonArray.forEach((button, key) => {
|
||||
this.options.buttonTheme.map((buttonTheme, index) => {
|
||||
|
||||
/**
|
||||
* If className is set, we affect the buttons only for that class
|
||||
* Otherwise, we afect all classes
|
||||
*/
|
||||
if(
|
||||
(className && className.includes(buttonTheme.class)) ||
|
||||
!className
|
||||
){
|
||||
let filteredButtonArray = buttonTheme.buttons.split(" ").filter(item => item !== button);
|
||||
|
||||
/**
|
||||
* If buttons left, return them, otherwise, remove button Theme
|
||||
*/
|
||||
if(filteredButtonArray.length){
|
||||
buttonTheme.buttons = filteredButtonArray.join(" ");
|
||||
} else {
|
||||
this.options.buttonTheme.splice(index, 1);
|
||||
buttonTheme = null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return buttonTheme;
|
||||
});
|
||||
});
|
||||
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
getButtonElement = (button) => {
|
||||
let output;
|
||||
|
||||
let buttonArr = this.buttonElements[button];
|
||||
if(buttonArr){
|
||||
if(buttonArr.length > 1){
|
||||
output = buttonArr;
|
||||
} else {
|
||||
output = buttonArr[0];
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
handleCaret = () => {
|
||||
if(this.options.debug){
|
||||
console.log("Caret handling started");
|
||||
}
|
||||
|
||||
document.addEventListener("keyup", this.caretEventHandler);
|
||||
document.addEventListener("mouseup", this.caretEventHandler);
|
||||
document.addEventListener("touchend", this.caretEventHandler);
|
||||
}
|
||||
|
||||
caretEventHandler = (event) => {
|
||||
let targetTagName = event.target.tagName.toLowerCase();
|
||||
|
||||
if(
|
||||
targetTagName === "textarea" ||
|
||||
targetTagName === "input"
|
||||
){
|
||||
this.caretPosition = event.target.selectionStart;
|
||||
|
||||
if(this.options.debug){
|
||||
console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onInit = () => {
|
||||
if(this.options.debug){
|
||||
console.log("Initialized");
|
||||
}
|
||||
|
||||
/**
|
||||
* Caret handling
|
||||
*/
|
||||
this.handleCaret();
|
||||
|
||||
if(typeof this.options.onInit === "function")
|
||||
this.options.onInit();
|
||||
}
|
||||
|
||||
onRender = () => {
|
||||
if(typeof this.options.onRender === "function")
|
||||
this.options.onRender();
|
||||
}
|
||||
|
||||
render = () => {
|
||||
@@ -110,7 +335,7 @@ class SimpleKeyboard {
|
||||
this.clear();
|
||||
|
||||
let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
|
||||
let layout = this.options.layout || KeyboardLayout.getLayout(this.options.layoutName);
|
||||
let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
|
||||
|
||||
/**
|
||||
* Account for buttonTheme, if set
|
||||
@@ -119,17 +344,25 @@ class SimpleKeyboard {
|
||||
if(Array.isArray(this.options.buttonTheme)){
|
||||
this.options.buttonTheme.forEach(themeObj => {
|
||||
if(themeObj.buttons && themeObj.class){
|
||||
let themeButtons = themeObj.buttons.split(' ');
|
||||
let themeButtons;
|
||||
|
||||
if(Array.isArray(themeButtons)){
|
||||
if(typeof themeObj.buttons === "string"){
|
||||
themeButtons = themeObj.buttons.split(' ');
|
||||
}
|
||||
|
||||
if(themeButtons){
|
||||
themeButtons.forEach(themeButton => {
|
||||
let themeParsed = buttonThemesParsed[themeButton];
|
||||
|
||||
// If the button has already been added
|
||||
if(themeParsed)
|
||||
buttonThemesParsed[themeButton] = `${themeParsed} ${themeObj.class}`;
|
||||
else
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
@@ -146,7 +379,7 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Iterating through each row
|
||||
*/
|
||||
layout[this.options.layoutName].forEach((row) => {
|
||||
layout[this.options.layoutName].forEach((row, rIndex) => {
|
||||
let rowArray = row.split(' ');
|
||||
|
||||
/**
|
||||
@@ -158,10 +391,10 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Iterating through each button in row
|
||||
*/
|
||||
rowArray.forEach((button) => {
|
||||
let fctBtnClass = Utilities.getButtonClass(button);
|
||||
rowArray.forEach((button, bIndex) => {
|
||||
let fctBtnClass = this.utilities.getButtonClass(button);
|
||||
let buttonThemeClass = buttonThemesParsed[button];
|
||||
let buttonDisplayName = Utilities.getButtonDisplayName(button, this.options.display);
|
||||
let buttonDisplayName = this.utilities.getButtonDisplayName(button, this.options.display, this.options.mergeDisplay);
|
||||
|
||||
/**
|
||||
* Creating button
|
||||
@@ -170,6 +403,23 @@ class SimpleKeyboard {
|
||||
buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
|
||||
buttonDOM.onclick = () => this.handleButtonClicked(button);
|
||||
|
||||
/**
|
||||
* Adding identifier
|
||||
*/
|
||||
buttonDOM.setAttribute("data-skBtn", button);
|
||||
|
||||
/**
|
||||
* Adding unique id
|
||||
* Since there's no limit on spawning same buttons, the unique id ensures you can style every button
|
||||
*/
|
||||
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
|
||||
*/
|
||||
@@ -177,17 +427,19 @@ class SimpleKeyboard {
|
||||
buttonSpanDOM.innerHTML = buttonDisplayName;
|
||||
buttonDOM.appendChild(buttonSpanDOM);
|
||||
|
||||
/**
|
||||
* Adding to buttonElements
|
||||
*/
|
||||
if(!this.buttonElements[button])
|
||||
this.buttonElements[button] = [];
|
||||
|
||||
this.buttonElements[button].push(buttonDOM);
|
||||
|
||||
/**
|
||||
* Appending button to row
|
||||
*/
|
||||
rowDOM.appendChild(buttonDOM);
|
||||
|
||||
/**
|
||||
* Calling onInit
|
||||
*/
|
||||
if(typeof this.options.onInit === "function")
|
||||
this.options.onInit();
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -195,6 +447,20 @@ class SimpleKeyboard {
|
||||
*/
|
||||
this.keyboardDOM.appendChild(rowDOM);
|
||||
});
|
||||
|
||||
/**
|
||||
* Calling onRender
|
||||
*/
|
||||
this.onRender();
|
||||
|
||||
if(!this.initialized){
|
||||
this.initialized = true;
|
||||
|
||||
/**
|
||||
* Calling onInit
|
||||
*/
|
||||
this.onInit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Keyboard from './Keyboard';
|
||||
|
||||
it('Keyboard renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<Keyboard />, div);
|
||||
});
|
||||
709
src/lib/components/tests/Keyboard.test.js
Normal file
709
src/lib/components/tests/Keyboard.test.js
Normal file
@@ -0,0 +1,709 @@
|
||||
import Keyboard from '../Keyboard';
|
||||
import TestUtility from '../../tests/TestUtility';
|
||||
|
||||
let testUtil = new TestUtility();
|
||||
|
||||
it('Keyboard will not render without target element', () => {
|
||||
try {
|
||||
new Keyboard();
|
||||
expect(true).toBe(false);
|
||||
} catch (e) {
|
||||
expect(e.message).toBe("KEYBOARD_DOM_ERROR");
|
||||
}
|
||||
});
|
||||
|
||||
it('Keyboard will run without options', () => {
|
||||
// Prepare target DOM element
|
||||
testUtil.setDOM();
|
||||
|
||||
// No options
|
||||
new Keyboard();
|
||||
});
|
||||
|
||||
it('Keyboard will run with empty options', () => {
|
||||
// Prepare target DOM element
|
||||
testUtil.setDOM();
|
||||
|
||||
// No options
|
||||
new Keyboard({});
|
||||
});
|
||||
|
||||
it('Keyboard will run with custom DOM target', () => {
|
||||
testUtil.setDOM("myTestDiv");
|
||||
|
||||
new Keyboard(".myTestDiv");
|
||||
expect(document.body.querySelector(".myTestDiv")).toBeDefined();
|
||||
});
|
||||
|
||||
it('Keyboard will run with debug option set', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
debug: true
|
||||
});
|
||||
|
||||
expect(keyboard.options.debug).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Keyboard standard buttons will work', () => {
|
||||
testUtil.setDOM();
|
||||
let keyboard = new Keyboard({
|
||||
maxLength: {
|
||||
"default": 10
|
||||
}
|
||||
});
|
||||
|
||||
testUtil.testLayoutStdButtons(keyboard);
|
||||
});
|
||||
|
||||
|
||||
it('Keyboard shift buttons will work', () => {
|
||||
testUtil.setDOM();
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.setOptions({
|
||||
layoutName: "shift",
|
||||
maxLength: 42
|
||||
});
|
||||
|
||||
testUtil.testLayoutStdButtons(keyboard);
|
||||
});
|
||||
|
||||
it('Keyboard setOptions will work without a param', () => {
|
||||
testUtil.setDOM();
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.setOptions();
|
||||
});
|
||||
|
||||
it('Keyboard empty buttons wont do anything as expected', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
layout: {
|
||||
default: [
|
||||
"{//} {button} d",
|
||||
"a b c d e f g h i j",
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
keyboard.getButtonElement("{//}").onclick();
|
||||
});
|
||||
|
||||
it('Keyboard onKeyPress will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let pressed = false;
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
onKeyPress: () => {
|
||||
pressed = true;
|
||||
},
|
||||
debug: true
|
||||
});
|
||||
|
||||
keyboard.getButtonElement("q").onclick();
|
||||
|
||||
expect(pressed).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Keyboard standard function buttons will not change input', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
testUtil.iterateButtons((button) => {
|
||||
if(button.getAttribute("data-skbtn") === "{shift}"){
|
||||
button.onclick();
|
||||
}
|
||||
});
|
||||
|
||||
expect(keyboard.getInput()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard syncInstanceInputs will work', () => {
|
||||
testUtil.clear();
|
||||
|
||||
document.body.innerHTML = `
|
||||
<div class="keyboard1"></div>
|
||||
<div class="keyboard2"></div>
|
||||
`;
|
||||
|
||||
let sharedOptions = {
|
||||
syncInstanceInputs: true
|
||||
};
|
||||
|
||||
let keyboard1 = new Keyboard(".keyboard1", sharedOptions);
|
||||
let keyboard2 = new Keyboard(".keyboard2", sharedOptions);
|
||||
|
||||
keyboard1.getButtonElement("q").onclick();
|
||||
|
||||
expect(keyboard2.getInput()).toBe("q");
|
||||
});
|
||||
|
||||
it('Keyboard onChange will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let output = false;
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
onChange: (input) => {
|
||||
output = input;
|
||||
}
|
||||
});
|
||||
|
||||
keyboard.getButtonElement("q").onclick();
|
||||
|
||||
expect(output).toBe("q");
|
||||
});
|
||||
|
||||
it('Keyboard clearInput will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.input = {
|
||||
"default": "hello"
|
||||
};
|
||||
|
||||
keyboard.clearInput();
|
||||
|
||||
expect(keyboard.getInput()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard clearInput will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
/**
|
||||
* Avoid setInput for this test
|
||||
*/
|
||||
keyboard.input = {
|
||||
"default": "hello"
|
||||
};
|
||||
|
||||
keyboard.clearInput();
|
||||
|
||||
expect(keyboard.getInput()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard clearInput will work with syncInstanceInputs', () => {
|
||||
testUtil.clear();
|
||||
|
||||
document.body.innerHTML = `
|
||||
<div class="keyboard1"></div>
|
||||
<div class="keyboard2"></div>
|
||||
`;
|
||||
|
||||
let sharedOptions = {
|
||||
syncInstanceInputs: true
|
||||
};
|
||||
|
||||
let keyboard1 = new Keyboard(".keyboard1", sharedOptions);
|
||||
let keyboard2 = new Keyboard(".keyboard2", sharedOptions);
|
||||
|
||||
/**
|
||||
* Avoid setInput for this test
|
||||
*/
|
||||
keyboard1.input = {
|
||||
"default": "hello"
|
||||
};
|
||||
|
||||
keyboard2.clearInput();
|
||||
|
||||
expect(keyboard1.getInput()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard setInput will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.setInput("hello");
|
||||
|
||||
expect(keyboard.getInput()).toBe("hello");
|
||||
});
|
||||
|
||||
it('Keyboard setInput will work with syncInstanceInputs', () => {
|
||||
testUtil.clear();
|
||||
|
||||
document.body.innerHTML = `
|
||||
<div class="keyboard1"></div>
|
||||
<div class="keyboard2"></div>
|
||||
`;
|
||||
|
||||
let sharedOptions = {
|
||||
syncInstanceInputs: true
|
||||
};
|
||||
|
||||
let keyboard1 = new Keyboard(".keyboard1", sharedOptions);
|
||||
let keyboard2 = new Keyboard(".keyboard2", sharedOptions);
|
||||
|
||||
keyboard1.setInput("hello");
|
||||
|
||||
expect(keyboard2.getInput()).toBe("hello");
|
||||
});
|
||||
|
||||
it('Keyboard dispatch will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
document.body.innerHTML = `
|
||||
<div class="keyboard1"></div>
|
||||
<div class="keyboard2"></div>
|
||||
`;
|
||||
|
||||
let keyboard1 = new Keyboard(".keyboard1");
|
||||
let keyboard2 = new Keyboard(".keyboard2");
|
||||
|
||||
keyboard1.dispatch(instance => {
|
||||
instance.setOptions({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "myCustomClass",
|
||||
buttons: "Q"
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
expect(keyboard2.options.buttonTheme[0].class).toBe("myCustomClass");
|
||||
});
|
||||
|
||||
it('Keyboard dispatch will not work without SimpleKeyboardInstances', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
document.body.innerHTML = `
|
||||
<div class="keyboard1"></div>
|
||||
<div class="keyboard2"></div>
|
||||
`;
|
||||
|
||||
let keyboard1 = new Keyboard(".keyboard1");
|
||||
let keyboard2 = new Keyboard(".keyboard2");
|
||||
|
||||
window['SimpleKeyboardInstances'] = null;
|
||||
|
||||
try {
|
||||
keyboard1.dispatch(instance => {
|
||||
instance.setOptions({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "myCustomClass",
|
||||
buttons: "Q"
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
expect(true).toBe(false);
|
||||
} catch (e) {
|
||||
expect(e.message).toBe("INSTANCES_VAR_ERROR");
|
||||
}
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
let returnVal = keyboard.addButtonTheme("q", "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme[0].class).toBe("test");
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will not work without params', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
let returnVal = keyboard.addButtonTheme();
|
||||
|
||||
expect(returnVal).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will amend a buttonTheme', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: "s"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.addButtonTheme("q", "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme[0].class).toBe("test");
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will create a buttonTheme', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "blurb",
|
||||
buttons: "s"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.addButtonTheme("q", "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme[1].class).toBe("test");
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will ignore a repeated buttonTheme', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: "s a"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.addButtonTheme("a", "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme[0].buttons).toBe("s a");
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will amend a buttonTheme', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: "s"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.addButtonTheme("q", "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme[0].buttons).toBe("s q");
|
||||
});
|
||||
|
||||
|
||||
it('Keyboard removeButtonTheme without params will remove all button themes', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: "s"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.removeButtonTheme();
|
||||
|
||||
expect(keyboard.options.buttonTheme.length).toBe(0);
|
||||
});
|
||||
|
||||
|
||||
it('Keyboard removeButtonTheme will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: "s"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.removeButtonTheme("s", "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme.length).toBe(0);
|
||||
});
|
||||
|
||||
it('Keyboard removeButtonTheme will work wihtout a class', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: "s"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.removeButtonTheme("s");
|
||||
|
||||
expect(keyboard.options.buttonTheme.length).toBe(0);
|
||||
});
|
||||
|
||||
it('Keyboard removeButtonTheme will do nothing without a button param', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: "s"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.removeButtonTheme(null, "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme.length).toBe(1);
|
||||
});
|
||||
|
||||
it('Keyboard removeButtonTheme does nothing if req button doesnt have a buttonTheme', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: "a"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.removeButtonTheme("s", "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme.length).toBe(1);
|
||||
});
|
||||
|
||||
it('Keyboard removeButtonTheme does nothing if buttonTheme class does not exist', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "testy",
|
||||
buttons: "a"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.removeButtonTheme("a", "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme.length).toBe(1);
|
||||
});
|
||||
|
||||
it('Keyboard removeButtonTheme does nothing if buttonTheme doesnt have the requested buttons', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: "a b c d e f"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
keyboard.removeButtonTheme("g", "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme[0].buttons).toBe("a b c d e f");
|
||||
});
|
||||
|
||||
it('Keyboard getButtonElement will not return anything if empty match', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
layout: {
|
||||
default: [
|
||||
"{//} {button} d",
|
||||
"a b c d e f g h i j",
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
expect(keyboard.getButtonElement("{waldo}")).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard getButtonElement will return multiple matched buttons', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
expect(keyboard.getButtonElement("{shift}").length).toBe(2);
|
||||
});
|
||||
|
||||
it('Keyboard will receive physical keyboard events', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
new Keyboard({
|
||||
debug: true,
|
||||
physicalKeyboardHighlight: true
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {
|
||||
charCode: 0,
|
||||
code: "KeyF",
|
||||
key: "f",
|
||||
which: 70,
|
||||
target: {
|
||||
tagName: "input"
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
it('Keyboard caretEventHandler will detect input, textarea focus', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.caretEventHandler({
|
||||
charCode: 0,
|
||||
code: "KeyF",
|
||||
key: "f",
|
||||
which: 70,
|
||||
target: {
|
||||
tagName: "input",
|
||||
selectionStart: 3
|
||||
}
|
||||
});
|
||||
|
||||
expect(keyboard.caretPosition).toBe(3);
|
||||
});
|
||||
|
||||
it('Keyboard caretEventHandler ignore positioning if input, textarea is blur', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.caretEventHandler({
|
||||
charCode: 0,
|
||||
code: "KeyF",
|
||||
key: "f",
|
||||
which: 70,
|
||||
target: {
|
||||
tagName: "div",
|
||||
selectionStart: 4
|
||||
}
|
||||
});
|
||||
|
||||
expect(keyboard.caretPosition).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard caretEventHandler will work with debug', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
debug: true
|
||||
});
|
||||
|
||||
keyboard.caretEventHandler({
|
||||
charCode: 0,
|
||||
code: "KeyF",
|
||||
key: "f",
|
||||
which: 70,
|
||||
target: {
|
||||
tagName: "input",
|
||||
selectionStart: 3
|
||||
}
|
||||
});
|
||||
|
||||
expect(keyboard.caretPosition).toBe(3);
|
||||
});
|
||||
|
||||
it('Keyboard onInit will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let passed = false;
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
onInit: () => {
|
||||
passed = true
|
||||
}
|
||||
});
|
||||
|
||||
expect(passed).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Keyboard onRender will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let passed = false;
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
onRender: () => {
|
||||
passed = true
|
||||
}
|
||||
});
|
||||
|
||||
expect(passed).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Keyboard buttonTheme that is invalid will be ignored and not throw', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: null,
|
||||
buttons: null
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
it('Keyboard buttonTheme buttons that are invalid will be ignored and not throw', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: null,
|
||||
buttons: undefined
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
it('Keyboard buttonTheme will be ignored if buttons param not a string', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: {
|
||||
wrong: true
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
it('Keyboard buttonTheme will be ignored if already added', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
buttons: "a b c"
|
||||
},
|
||||
{
|
||||
class: "test",
|
||||
buttons: "c"
|
||||
},
|
||||
{
|
||||
class: "anotherclass",
|
||||
buttons: "c"
|
||||
},
|
||||
{
|
||||
class: "yetAnotherclass",
|
||||
buttons: "c"
|
||||
},
|
||||
{
|
||||
class: "anotherclass",
|
||||
buttons: "c"
|
||||
},
|
||||
]
|
||||
});
|
||||
});
|
||||
@@ -1,37 +1,22 @@
|
||||
class KeyboardLayout {
|
||||
|
||||
static getLayout = layout => {
|
||||
if(layout === "qwerty"){
|
||||
return {
|
||||
'default': [
|
||||
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
|
||||
'{tab} q w e r t y u i o p [ ] \\',
|
||||
'{lock} a s d f g h j k l ; \' {enter}',
|
||||
'{shift} z x c v b n m , . / {shift}',
|
||||
'.com @ {space}'
|
||||
],
|
||||
'shift': [
|
||||
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
|
||||
'{tab} Q W E R T Y U I O P { } |',
|
||||
'{lock} A S D F G H J K L : " {enter}',
|
||||
'{shift} Z X C V B N M < > ? {shift}',
|
||||
'.com @ {space}'
|
||||
]
|
||||
};
|
||||
} else if(layout === "numeric"){
|
||||
return {
|
||||
'default': [
|
||||
'1 2 3',
|
||||
'4 5 6',
|
||||
'7 8 9',
|
||||
'{//} 0 {bksp}'
|
||||
]
|
||||
};
|
||||
} else {
|
||||
return KeyboardLayout.getLayout("qwerty");
|
||||
}
|
||||
static getDefaultLayout = () => {
|
||||
return {
|
||||
'default': [
|
||||
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
|
||||
'{tab} q w e r t y u i o p [ ] \\',
|
||||
'{lock} a s d f g h j k l ; \' {enter}',
|
||||
'{shift} z x c v b n m , . / {shift}',
|
||||
'.com @ {space}'
|
||||
],
|
||||
'shift': [
|
||||
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
|
||||
'{tab} Q W E R T Y U I O P { } |',
|
||||
'{lock} A S D F G H J K L : " {enter}',
|
||||
'{shift} Z X C V B N M < > ? {shift}',
|
||||
'.com @ {space}'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default KeyboardLayout;
|
||||
76
src/lib/services/PhysicalKeyboard.js
Normal file
76
src/lib/services/PhysicalKeyboard.js
Normal file
@@ -0,0 +1,76 @@
|
||||
class PhysicalKeyboard {
|
||||
constructor(simpleKeyboardInstance){
|
||||
this.simpleKeyboardInstance = simpleKeyboardInstance;
|
||||
|
||||
this.initKeyboardListener();
|
||||
}
|
||||
|
||||
initKeyboardListener = () => {
|
||||
// Normal Keyboard
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
|
||||
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||||
|
||||
this.simpleKeyboardInstance.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";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Removing button style on keyup
|
||||
document.addEventListener("keyup", (event) => {
|
||||
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
|
||||
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||||
|
||||
this.simpleKeyboardInstance.dispatch(instance => {
|
||||
let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`);
|
||||
|
||||
if(buttonDOM){
|
||||
buttonDOM.removeAttribute("style");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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") ||
|
||||
event.code.includes("Control") ||
|
||||
event.code.includes("Alt") ||
|
||||
event.code.includes("Meta")
|
||||
){
|
||||
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;
|
||||
@@ -1,92 +1,268 @@
|
||||
class Utilities {
|
||||
static normalizeString(string){
|
||||
let output;
|
||||
|
||||
if(string === "@")
|
||||
output = 'at';
|
||||
else if(string === ",")
|
||||
output = 'comma';
|
||||
else if(string === ".")
|
||||
output = 'dot';
|
||||
else if(string === "\\")
|
||||
output = 'backslash';
|
||||
else if(string === "/")
|
||||
output = 'fordardslash';
|
||||
else if(string === "*")
|
||||
output = 'asterisk';
|
||||
else if(string === "&")
|
||||
output = 'ampersand';
|
||||
else if(string === "$")
|
||||
output = 'dollarsign';
|
||||
else if(string === "=")
|
||||
output = 'equals';
|
||||
else if(string === "+")
|
||||
output = 'plus';
|
||||
else if(string === "-")
|
||||
output = 'minus';
|
||||
else if(string === "'")
|
||||
output = 'apostrophe';
|
||||
else if(string === ";")
|
||||
output = 'colon';
|
||||
else if(string === "[")
|
||||
output = 'openbracket';
|
||||
else if(string === "]")
|
||||
output = 'closebracket';
|
||||
else if(string === "//")
|
||||
output = 'emptybutton';
|
||||
else
|
||||
output = '';
|
||||
|
||||
return output ? ` hg-button-${output}` : '';
|
||||
constructor(simpleKeyboardInstance){
|
||||
this.simpleKeyboardInstance = simpleKeyboardInstance;
|
||||
}
|
||||
|
||||
static getButtonClass = button => {
|
||||
let buttonTypeClass = (button.includes("{") && button !== '{//}') ? "functionBtn" : "standardBtn";
|
||||
getButtonClass = button => {
|
||||
let buttonTypeClass = (button.includes("{") && button.includes("}") && button !== '{//}') ? "functionBtn" : "standardBtn";
|
||||
let buttonWithoutBraces = button.replace("{", "").replace("}", "");
|
||||
let buttonNormalized = '';
|
||||
|
||||
let buttonNormalized =
|
||||
buttonTypeClass === "standardBtn" ?
|
||||
Utilities.normalizeString(buttonWithoutBraces) : ` hg-button-${buttonWithoutBraces}`;
|
||||
if(buttonTypeClass !== "standardBtn")
|
||||
buttonNormalized = ` hg-button-${buttonWithoutBraces}`;
|
||||
|
||||
return `hg-${buttonTypeClass}${buttonNormalized}`;
|
||||
}
|
||||
|
||||
static getDefaultDiplay(){
|
||||
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();
|
||||
getButtonDisplayName = (button, display, mergeDisplay) => {
|
||||
if(mergeDisplay){
|
||||
display = Object.assign({}, this.getDefaultDiplay(), display);
|
||||
} else {
|
||||
display = display || this.getDefaultDiplay();
|
||||
}
|
||||
|
||||
return display[button] || button;
|
||||
}
|
||||
|
||||
static getUpdatedInput = (button, input, options) => {
|
||||
getUpdatedInput = (button, input, options, caretPos) => {
|
||||
|
||||
let output = input;
|
||||
let newLineOnEnter = options.newLineOnEnter;
|
||||
|
||||
if(button === "{bksp}" && output.length > 0)
|
||||
output = output.slice(0, -1);
|
||||
else if(button === "{space}")
|
||||
output = output + ' ';
|
||||
else if(button === "{tab}")
|
||||
output = output + "\t";
|
||||
else if(button === "{enter}" && newLineOnEnter)
|
||||
output = output + "\n";
|
||||
if((button === "{bksp}" || button === "{backspace}") && output.length > 0){
|
||||
output = this.removeAt(output, caretPos);
|
||||
|
||||
} else if(button === "{space}")
|
||||
output = this.addStringAt(output, " ", caretPos);
|
||||
|
||||
else if(button === "{tab}" && !(typeof options.tabCharOnTab === "boolean" && options.tabCharOnTab === false)){
|
||||
output = this.addStringAt(output, "\t", caretPos);
|
||||
|
||||
} else if((button === "{enter}" || button === "{numpadenter}") && options.newLineOnEnter)
|
||||
output = this.addStringAt(output, "\n", caretPos);
|
||||
|
||||
else if(button.includes("numpad") && Number.isInteger(Number(button[button.length - 2]))){
|
||||
output = this.addStringAt(output, button[button.length - 2], caretPos);
|
||||
}
|
||||
else if(button === "{numpaddivide}")
|
||||
output = this.addStringAt(output, '/', caretPos);
|
||||
|
||||
else if(button === "{numpadmultiply}")
|
||||
output = this.addStringAt(output, '*', caretPos);
|
||||
else if(button === "{numpadsubtract}")
|
||||
output = this.addStringAt(output, '-', caretPos);
|
||||
|
||||
else if(button === "{numpadadd}")
|
||||
output = this.addStringAt(output, '+', caretPos);
|
||||
|
||||
else if(button === "{numpaddecimal}")
|
||||
output = this.addStringAt(output, '.', caretPos);
|
||||
|
||||
else if(button === "{" || button === "}")
|
||||
output = this.addStringAt(output, button, caretPos);
|
||||
|
||||
else if(!button.includes("{") && !button.includes("}"))
|
||||
output = output + button;
|
||||
output = this.addStringAt(output, button, caretPos);
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
updateCaretPos = (length, minus) => {
|
||||
if(minus){
|
||||
if(this.simpleKeyboardInstance.caretPosition > 0)
|
||||
this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition - length
|
||||
} else {
|
||||
this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition + length;
|
||||
}
|
||||
}
|
||||
|
||||
addStringAt(source, string, position){
|
||||
let output;
|
||||
|
||||
if(this.simpleKeyboardInstance.options.debug){
|
||||
console.log("Caret at:", position);
|
||||
}
|
||||
|
||||
if(!position && position !== 0){
|
||||
output = source + string;
|
||||
} else {
|
||||
output = [source.slice(0, position), string, source.slice(position)].join('');
|
||||
|
||||
/**
|
||||
* Avoid caret position change when maxLength is set
|
||||
*/
|
||||
if(!this.isMaxLengthReached()){
|
||||
this.updateCaretPos(string.length);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
removeAt(source, position){
|
||||
if(this.simpleKeyboardInstance.caretPosition === 0){
|
||||
return source;
|
||||
}
|
||||
|
||||
let output;
|
||||
let prevTwoChars;
|
||||
let emojiMatched;
|
||||
let emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
if(position && position >= 0){
|
||||
prevTwoChars = source.substring(position - 2, position)
|
||||
emojiMatched = prevTwoChars.match(emojiMatchedReg);
|
||||
|
||||
if(emojiMatched){
|
||||
output = source.substr(0, (position - 2)) + source.substr(position);
|
||||
this.updateCaretPos(2, true);
|
||||
} else {
|
||||
output = source.substr(0, (position - 1)) + source.substr(position);
|
||||
this.updateCaretPos(1, true);
|
||||
}
|
||||
} else {
|
||||
prevTwoChars = source.slice(-2);
|
||||
emojiMatched = prevTwoChars.match(emojiMatchedReg);
|
||||
|
||||
if(emojiMatched){
|
||||
output = source.slice(0, -2);
|
||||
this.updateCaretPos(2, true);
|
||||
} else {
|
||||
output = source.slice(0, -1);
|
||||
this.updateCaretPos(1, true);
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
handleMaxLength(inputObj, options, updatedInput){
|
||||
let maxLength = options.maxLength;
|
||||
let currentInput = inputObj[options.inputName];
|
||||
let condition = currentInput.length === maxLength;
|
||||
|
||||
|
||||
if(
|
||||
/**
|
||||
* If pressing this button won't add more characters
|
||||
* We exit out of this limiter function
|
||||
*/
|
||||
updatedInput.length <= currentInput.length
|
||||
){
|
||||
return false;
|
||||
}
|
||||
|
||||
if(Number.isInteger(maxLength)){
|
||||
if(options.debug){
|
||||
console.log("maxLength (num) reached:", condition);
|
||||
}
|
||||
|
||||
if(condition){
|
||||
this.maxLengthReached = true;
|
||||
return true;
|
||||
} else {
|
||||
this.maxLengthReached = false;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if(typeof maxLength === "object"){
|
||||
let condition = currentInput.length === maxLength[options.inputName];
|
||||
|
||||
if(options.debug){
|
||||
console.log("maxLength (obj) reached:", condition);
|
||||
}
|
||||
|
||||
if(condition){
|
||||
this.maxLengthReached = true;
|
||||
return true;
|
||||
} else {
|
||||
this.maxLengthReached = false;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isMaxLengthReached = () => {
|
||||
return Boolean(this.maxLengthReached);
|
||||
}
|
||||
|
||||
camelCase = (string) => {
|
||||
return string.toLowerCase().trim().split(/[.\-_\s]/g).reduce((string, word) => string + word[0].toUpperCase() + word.slice(1));
|
||||
};
|
||||
|
||||
countInArray = (array, value) => {
|
||||
return array.reduce((n, x) => n + (x === value), 0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Utilities;
|
||||
118
src/lib/services/tests/PhysicalKeyboard.test.js
Normal file
118
src/lib/services/tests/PhysicalKeyboard.test.js
Normal file
@@ -0,0 +1,118 @@
|
||||
import Keyboard from '../../components/Keyboard';
|
||||
import TestUtility from '../../tests/TestUtility';
|
||||
|
||||
let testUtil = new TestUtility();
|
||||
|
||||
it('PhysicalKeyboard keydown will be handled with physicalKeyboardHighlight', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
physicalKeyboardHighlight: true
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {
|
||||
code: "KeyF",
|
||||
key: "f",
|
||||
target: {
|
||||
tagName: "input"
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
it('PhysicalKeyboard keydown will be handled without physicalKeyboardHighlight', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
physicalKeyboardHighlight: false
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {
|
||||
code: "KeyF",
|
||||
key: "f",
|
||||
target: {
|
||||
tagName: "input"
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
it('PhysicalKeyboard keydown will not style non-existent buttons', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
physicalKeyboardHighlight: true
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', {
|
||||
code: "WRONG",
|
||||
key: "WRONG",
|
||||
target: {
|
||||
tagName: "input"
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
it('PhysicalKeyboard keyup will be handled with physicalKeyboardHighlight', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
physicalKeyboardHighlight: true
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {
|
||||
code: "KeyF",
|
||||
key: "f",
|
||||
target: {
|
||||
tagName: "input"
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
it('PhysicalKeyboard keyup will be handle special buttons', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
physicalKeyboardHighlight: true
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {
|
||||
code: "Shift",
|
||||
key: "Shift",
|
||||
target: {
|
||||
tagName: "input"
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
it('PhysicalKeyboard keyup will not style non-existent buttons', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
physicalKeyboardHighlight: true,
|
||||
debug: true
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {
|
||||
code: "WRONG",
|
||||
key: "WRONG",
|
||||
target: {
|
||||
tagName: "input"
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
it('PhysicalKeyboard will work with F1-F12 keys', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
physicalKeyboardHighlight: true,
|
||||
debug: true
|
||||
});
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keyup', {
|
||||
code: "F12",
|
||||
key: "F12",
|
||||
target: {
|
||||
tagName: "input"
|
||||
}
|
||||
}));
|
||||
});
|
||||
456
src/lib/services/tests/Utilities.test.js
Normal file
456
src/lib/services/tests/Utilities.test.js
Normal file
@@ -0,0 +1,456 @@
|
||||
import Keyboard from '../../components/Keyboard';
|
||||
import TestUtility from '../../tests/TestUtility';
|
||||
|
||||
let testUtil = new TestUtility();
|
||||
|
||||
it('Keyboard mergeDisplay will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
mergeDisplay: true,
|
||||
display: {
|
||||
"q": "qreplaced"
|
||||
}
|
||||
});
|
||||
|
||||
expect(keyboard.getButtonElement("q").getAttribute("data-displaylabel")).toBe("qreplaced");
|
||||
});
|
||||
|
||||
it('Keyboard function buttons will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
new Keyboard();
|
||||
|
||||
testUtil.testLayoutFctButtons((fctBtnCount, fctBtnHasOnclickCount) => {
|
||||
expect(fctBtnCount).toBe(fctBtnHasOnclickCount);
|
||||
});
|
||||
});
|
||||
|
||||
it('Keyboard {bksp} button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{bksp}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("tes");
|
||||
});
|
||||
|
||||
it('Keyboard {space} button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{space}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test ");
|
||||
});
|
||||
|
||||
it('Keyboard {tab} button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{tab}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test\t");
|
||||
});
|
||||
|
||||
it('Keyboard {tab} button will work with tabCharOnTab:false', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
tabCharOnTab: false
|
||||
});
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{tab}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test");
|
||||
});
|
||||
|
||||
it('Keyboard {enter} button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{enter}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test");
|
||||
});
|
||||
|
||||
it('Keyboard {enter} button will work with newLineOnEnter:true', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
newLineOnEnter: true
|
||||
});
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{enter}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test\n");
|
||||
});
|
||||
|
||||
it('Keyboard {numpadX} buttons will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
for(let i = 0;i<=9;i++){
|
||||
let output = keyboard.utilities.getUpdatedInput(`{numpad${i}}`, "test", keyboard.options);
|
||||
expect(output).toBe(`test${i}`);
|
||||
}
|
||||
});
|
||||
|
||||
it('Keyboard {numpaddivide} button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpaddivide}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test/");
|
||||
});
|
||||
|
||||
it('Keyboard {numpadmultiply} button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadmultiply}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test*");
|
||||
});
|
||||
|
||||
it('Keyboard {numpadsubtract} button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadsubtract}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test-");
|
||||
});
|
||||
|
||||
it('Keyboard {numpadadd} button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test+");
|
||||
});
|
||||
|
||||
it('Keyboard {numpadadd} button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test+");
|
||||
});
|
||||
|
||||
it('Keyboard {numpaddecimal} button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{numpaddecimal}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test.");
|
||||
});
|
||||
|
||||
it('Keyboard custom function buttons will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
layout: {
|
||||
default: [
|
||||
"{randombuttontest}"
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{randombuttontest}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test");
|
||||
expect(keyboard.getButtonElement("{randombuttontest}").onclick).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Keyboard "{" button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("{", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test{");
|
||||
});
|
||||
|
||||
it('Keyboard "}" button will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.getUpdatedInput("}", "test", keyboard.options);
|
||||
|
||||
expect(output).toBe("test}");
|
||||
});
|
||||
|
||||
it('Keyboard standard button will affect input', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
for (let i = 65; i <= 90; i++) {
|
||||
let char = String.fromCharCode(i);
|
||||
let output = keyboard.utilities.getUpdatedInput(char, "test", keyboard.options);
|
||||
expect(output).toBe(`test${char}`);
|
||||
}
|
||||
});
|
||||
|
||||
it('Keyboard updateCaretPos will work with minus', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.caretPosition = 5;
|
||||
keyboard.utilities.updateCaretPos(2, true);
|
||||
|
||||
expect(keyboard.caretPosition).toBe(3);
|
||||
});
|
||||
|
||||
it('Keyboard updateCaretPos will work with plus', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.caretPosition = 5;
|
||||
keyboard.utilities.updateCaretPos(2);
|
||||
|
||||
expect(keyboard.caretPosition).toBe(7);
|
||||
});
|
||||
|
||||
it('Keyboard addStringAt will work with debug', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
debug: true
|
||||
});
|
||||
|
||||
keyboard.getButtonElement("q").onclick();
|
||||
|
||||
expect(keyboard.getInput()).toBe("q");
|
||||
});
|
||||
|
||||
it('Keyboard addStringAt will work with position', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
debug: true
|
||||
});
|
||||
|
||||
keyboard.setInput("test");
|
||||
keyboard.caretPosition = 4;
|
||||
|
||||
keyboard.getButtonElement("q").onclick();
|
||||
|
||||
expect(keyboard.getInput()).toBe("testq");
|
||||
});
|
||||
|
||||
it('Keyboard addStringAt will respect maxLength', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
debug: true,
|
||||
maxLength: 4
|
||||
});
|
||||
|
||||
keyboard.setInput("test");
|
||||
keyboard.caretPosition = 4;
|
||||
|
||||
keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq")
|
||||
keyboard.utilities.addStringAt("test", "q", 4);
|
||||
|
||||
expect(keyboard.caretPosition).toBe(4);
|
||||
});
|
||||
|
||||
it('Keyboard handleMaxLength will exit out on same updatedInput', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
debug: true
|
||||
});
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "test")
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard handleMaxLength will work with object maxLength', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
maxLength: {
|
||||
default: 4
|
||||
}
|
||||
});
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
|
||||
expect(output).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
maxLength: {
|
||||
default: 4
|
||||
},
|
||||
debug: true
|
||||
});
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
|
||||
expect(output).toBeTruthy();
|
||||
});
|
||||
|
||||
it('Keyboard handleMaxLength will return false if obj maxLength not reached', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
maxLength: {
|
||||
default: 7
|
||||
}
|
||||
});
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
|
||||
|
||||
it('Keyboard handleMaxLength will work without debug', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
maxLength: 4
|
||||
});
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
|
||||
expect(output).toBeTruthy();
|
||||
});
|
||||
|
||||
|
||||
it('Keyboard handleMaxLength will work with numeric maxLength', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
maxLength: 3
|
||||
});
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard handleMaxLength wont work with non numeric or object maxLength', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
maxLength: "wrong"
|
||||
});
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard handleMaxLength wont work with non numeric or object maxLength (with debug)', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
maxLength: "wrong",
|
||||
debug: true
|
||||
});
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
let output = keyboard.utilities.handleMaxLength(keyboard.input, keyboard.options, "testq");
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard isMaxLengthReached will work', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard({
|
||||
maxLength: 5
|
||||
});
|
||||
|
||||
let output = keyboard.utilities.isMaxLengthReached();
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard removeAt will exit out on caretPosition:0', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.setInput("test");
|
||||
|
||||
keyboard.caretPosition = 0;
|
||||
keyboard.utilities.removeAt(keyboard.getInput(), 0);
|
||||
|
||||
expect(keyboard.getInput()).toBe("test");
|
||||
});
|
||||
|
||||
it('Keyboard removeAt will remove multi-byte unicodes with caretPos>0', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.caretPosition = 6;
|
||||
let output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6);
|
||||
|
||||
expect(output).toBe("test");
|
||||
});
|
||||
|
||||
it('Keyboard removeAt will not remove multi-byte unicodes with caretPos:0', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
let output = keyboard.utilities.removeAt("\uD83D\uDE00");
|
||||
|
||||
expect(output).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard removeAt will remove regular strings', () => {
|
||||
testUtil.setDOM();
|
||||
|
||||
let keyboard = new Keyboard();
|
||||
|
||||
keyboard.caretPosition = 6;
|
||||
let output = keyboard.utilities.removeAt("testie", 6);
|
||||
|
||||
expect(output).toBe("testi");
|
||||
});
|
||||
93
src/lib/tests/TestUtility.js
Normal file
93
src/lib/tests/TestUtility.js
Normal file
@@ -0,0 +1,93 @@
|
||||
export default class TestUtility {
|
||||
/**
|
||||
* FUNCTIONS
|
||||
*/
|
||||
|
||||
setDOM = (divClass) => {
|
||||
this.clear();
|
||||
const div = document.createElement('div');
|
||||
div.className += divClass || "simple-keyboard";
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
|
||||
clear = () => {
|
||||
document.body.innerHTML = "";
|
||||
}
|
||||
|
||||
testLayoutStdButtons = (keyboard) => {
|
||||
let stdBtnCount = 0;
|
||||
let fullInput = '';
|
||||
|
||||
this.iterateButtons((button) => {
|
||||
let label = button.getAttribute("data-skbtn");
|
||||
|
||||
if(label.includes("{"))
|
||||
return false;
|
||||
|
||||
// Click all standard buttons, respects maxLength
|
||||
button.onclick();
|
||||
|
||||
// Recording fullInput, bypasses maxLength
|
||||
fullInput = keyboard.utilities.getUpdatedInput(label, fullInput, keyboard.options, null);
|
||||
|
||||
stdBtnCount += label.length;
|
||||
});
|
||||
|
||||
/**
|
||||
* Check if maxLength is respected
|
||||
*/
|
||||
if(
|
||||
(
|
||||
typeof keyboard.options.maxLength === "object" &&
|
||||
keyboard.getInput().length !== keyboard.options.maxLength[keyboard.options.layoutName]
|
||||
) ||
|
||||
(
|
||||
typeof keyboard.options.maxLength !== "object" &&
|
||||
keyboard.getInput().length !== keyboard.options.maxLength
|
||||
)
|
||||
)
|
||||
throw new Error("MAX_LENGTH_ISSUE");
|
||||
else
|
||||
console.log("MAX_LENGTH PASSED:", keyboard.options.layoutName, keyboard.getInput().length, keyboard.options.maxLength);
|
||||
|
||||
/**
|
||||
* Check if all standard buttons are inputting something
|
||||
* (Regardless of maxLength)
|
||||
*/
|
||||
if(stdBtnCount !== fullInput.length)
|
||||
throw new Error("STANDARD_BUTTONS_ISSUE");
|
||||
else
|
||||
console.log("STANDARD_BUTTONS PASSED:", keyboard.options.layoutName, stdBtnCount, fullInput.length);
|
||||
}
|
||||
|
||||
testLayoutFctButtons = (callback) => {
|
||||
let fctBtnCount = 0;
|
||||
let fctBtnHasOnclickCount = 0;
|
||||
|
||||
this.iterateButtons((button) => {
|
||||
let label = button.getAttribute("data-skbtn");
|
||||
|
||||
if(!label.includes("{") && !label.includes("}"))
|
||||
return false;
|
||||
|
||||
fctBtnCount++;
|
||||
|
||||
if(button.onclick){
|
||||
button.onclick();
|
||||
fctBtnHasOnclickCount++;
|
||||
}
|
||||
|
||||
callback(fctBtnCount, fctBtnHasOnclickCount);
|
||||
});
|
||||
}
|
||||
|
||||
iterateButtons = (callback, selector) => {
|
||||
let rows = document.body.querySelector(selector || '.simple-keyboard').children;
|
||||
|
||||
Array.from(rows).forEach(row => {
|
||||
Array.from(row.children).forEach((button) => {
|
||||
callback(button);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user