mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-02-15 00:07:43 +08:00
Compare commits
36 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 |
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
|
||||
52
README.md
52
README.md
@@ -1,12 +1,14 @@
|
||||
[](https://www.npmjs.com/package/simple-keyboard)
|
||||
[](https://www.jsdelivr.com/package/npm/simple-keyboard)
|
||||
[](https://travis-ci.org/hodgef/simple-keyboard)
|
||||
[](https://codecov.io/gh/hodgef/simple-keyboard)
|
||||
[](http://franciscohodge.com/simple-keyboard/chat/join)
|
||||
|
||||
<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>
|
||||
|
||||
> The easily customisable and responsive on-screen virtual keyboard for Javascript projects.
|
||||
|
||||
This package works with <a href="https://codesandbox.io/s/krzkx19rr" title="View Vanilla JS Demo" target="_blank">**Vanilla JS**</a> projects, yet it is also compatible with <a href="https://codesandbox.io/s/48qqy8mn84" title="View Angular Demo" target="_blank">**Angular**</a>, <a href="https://codesandbox.io/s/53orr7mmq4" title="View Vue Demo" target="_blank">**Vue**</a>, and other libraries and frameworks.
|
||||
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) !
|
||||
|
||||
@@ -52,9 +54,7 @@ function onKeyPress(button){
|
||||
<div class="simple-keyboard"></div>
|
||||
````
|
||||
|
||||
[](https://codesandbox.io/s/krzkx19rr)
|
||||
|
||||
> Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js).
|
||||
<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>
|
||||
|
||||
## Usage with CDN
|
||||
|
||||
@@ -97,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
|
||||
|
||||
@@ -199,7 +199,8 @@ 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
|
||||
|
||||
@@ -233,7 +234,8 @@ tabCharOnTab: true
|
||||
inputName: "default"
|
||||
```
|
||||
|
||||
[](https://codesandbox.io/s/43nm6v4xyx?module=%2Fsrc%2Findex.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>
|
||||
|
||||
|
||||
### maxLength
|
||||
|
||||
@@ -250,7 +252,8 @@ maxLength: {
|
||||
}
|
||||
```
|
||||
|
||||
[](https://codesandbox.io/s/7wk625q650?module=%2Fsrc%2Findex.js)
|
||||
<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
|
||||
|
||||
@@ -267,14 +270,14 @@ 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.
|
||||
|
||||
[](https://codesandbox.io/s/nrxrn5kprp?module=%2Fsrc%2Findex.js)
|
||||
|
||||
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.
|
||||
@@ -411,7 +414,8 @@ keyboard.dispatch(instance => {
|
||||
});
|
||||
```
|
||||
|
||||
[](https://codesandbox.io/s/rjnlp4pp2q?module=%2Fsrc%2Findex.js)
|
||||
<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
|
||||
|
||||
@@ -422,7 +426,8 @@ 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
|
||||
```
|
||||
|
||||
[](https://codesandbox.io/s/ppol6ok7nq?module=%2Fsrc%2Findex.js)
|
||||
<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
|
||||
|
||||
@@ -482,11 +487,12 @@ If you want to send a command to all your simple-keyboard instances at once, you
|
||||
|
||||
Here's a demo with both these features in action:
|
||||
|
||||
[](https://codesandbox.io/s/rjnlp4pp2q?module=%2Fsrc%2Findex.js)
|
||||
|
||||
<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:
|
||||
|
||||
[](https://codesandbox.io/s/nrxrn5kprp?module=%2Fsrc%2Findex.js)
|
||||
<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
|
||||
|
||||
@@ -540,9 +546,8 @@ 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>
|
||||
|
||||
[](https://codesandbox.io/s/43nm6v4xyx?module=%2Fsrc%2Findex.js)
|
||||
|
||||
### Having keys in a different language configuration
|
||||
|
||||
@@ -556,7 +561,7 @@ If you'd like to create a layout in a language not currently supported by [simpl
|
||||
|
||||
Take following demo as an example:
|
||||
|
||||
[](https://codesandbox.io/s/v388k9zvk0?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>
|
||||
|
||||
If you have issues displaying a character, you might need its unicode code to display it. Here an useful converter tool:
|
||||
|
||||
@@ -567,7 +572,8 @@ If you have issues displaying a character, you might need its unicode code to di
|
||||
For the sake of simplicity, caps lock and shift do the same action in the main demos.
|
||||
If you'd like to show a different layout when you press caps lock, check out the following demo:
|
||||
|
||||
[](https://codesandbox.io/s/l3n84qn5oq?module=%2Fsrc%2Findex.js)
|
||||
<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
|
||||
|
||||
@@ -578,13 +584,13 @@ Please refer to the documentation on the *[syncInstanceInputs](#syncInstanceInpu
|
||||
|
||||
Also, check out this demo:
|
||||
|
||||
[](https://codesandbox.io/s/0ywkn0k7pp?module=%2Fsrc%2Findex.js)
|
||||
<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
|
||||
|
||||
@@ -597,6 +603,10 @@ Also, check out this demo:
|
||||
|
||||
* 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:
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/*!
|
||||
*
|
||||
* simple-keyboard v2.5.5
|
||||
* simple-keyboard v2.6.0
|
||||
* https://github.com/hodgef/simple-keyboard
|
||||
*
|
||||
* Copyright (c) Francisco Hodge (https://github.com/hodgef)
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
5146
package-lock.json
generated
5146
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "2.5.5",
|
||||
"version": "2.6.1",
|
||||
"description": "On-screen Javascript Virtual Keyboard",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
@@ -59,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",
|
||||
@@ -79,7 +82,8 @@
|
||||
},
|
||||
"jest": {
|
||||
"collectCoverageFrom": [
|
||||
"src/**/*.{js,jsx,mjs}"
|
||||
"src/**/*.{js,jsx,mjs}",
|
||||
"!**/tests/**"
|
||||
],
|
||||
"setupFiles": [
|
||||
"<rootDir>/config/polyfills.js"
|
||||
|
||||
@@ -4,7 +4,6 @@ import './css/App.css';
|
||||
class App {
|
||||
constructor(){
|
||||
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
|
||||
this.layoutName = "default";
|
||||
}
|
||||
|
||||
@@ -16,7 +15,6 @@ class App {
|
||||
onKeyPress: button => this.onKeyPress(button),
|
||||
newLineOnEnter: true,
|
||||
physicalKeyboardHighlight: true,
|
||||
maxLength: 5
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
import Keyboard from '../lib';
|
||||
import './css/FullKeyboardDemo.css';
|
||||
|
||||
class App {
|
||||
constructor(){
|
||||
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
|
||||
this.keyboardSections = [];
|
||||
}
|
||||
|
||||
onDOMLoaded = () => {
|
||||
/**
|
||||
* Adding preview (demo only)
|
||||
* In production, this would be part of your HTML file
|
||||
*/
|
||||
document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
|
||||
<input class="input" placeholder="Tap on the virtual keyboard to start" />
|
||||
|
||||
<div class="keyboardContainer">
|
||||
<div class="simple-keyboard-main"></div>
|
||||
|
||||
<div class="controlArrows">
|
||||
<div class="simple-keyboard-control"></div>
|
||||
<div class="simple-keyboard-arrows"></div>
|
||||
</div>
|
||||
|
||||
<div class="numPad">
|
||||
<div class="simple-keyboard-numpad"></div>
|
||||
<div class="simple-keyboard-numpadEnd"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`);
|
||||
document.querySelector('.simple-keyboard').outerHTML = "";
|
||||
|
||||
|
||||
/**
|
||||
* Start of demo
|
||||
*/
|
||||
this.commonKeyboardOptions = {
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button),
|
||||
theme: "simple-keyboard hg-theme-default hg-layout-default",
|
||||
physicalKeyboardHighlight: true,
|
||||
syncInstanceInputs: true,
|
||||
mergeDisplay: true
|
||||
};
|
||||
|
||||
this.keyboard = new Keyboard(".simple-keyboard-main", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: [
|
||||
"{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
|
||||
"` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
|
||||
"{tab} q w e r t y u i o p [ ] \\",
|
||||
"{capslock} a s d f g h j k l ; ' {enter}",
|
||||
"{shiftleft} z x c v b n m , . / {shiftright}",
|
||||
".com @ {space}"
|
||||
],
|
||||
shift: [
|
||||
"{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
|
||||
"~ ! @ # $ % ^ & * ( ) _ + {backspace}",
|
||||
"{tab} Q W E R T Y U I O P { } |",
|
||||
'{capslock} A S D F G H J K L : " {enter}',
|
||||
"{shiftleft} Z X C V B N M < > ? {shiftright}",
|
||||
".com @ {space}"
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardControlPad = new Keyboard(".simple-keyboard-control", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: [
|
||||
"{prtscr} {scrolllock} {pause}",
|
||||
"{insert} {home} {pageup}",
|
||||
"{delete} {end} {pagedown}"
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardArrows = new Keyboard(".simple-keyboard-arrows", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: ["{arrowup}", "{arrowleft} {arrowdown} {arrowright}"]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardNumPad = new Keyboard(".simple-keyboard-numpad", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: [
|
||||
"{numlock} {numpaddivide} {numpadmultiply}",
|
||||
"{numpad7} {numpad8} {numpad9}",
|
||||
"{numpad4} {numpad5} {numpad6}",
|
||||
"{numpad1} {numpad2} {numpad3}", "{numpad0} {numpaddecimal}"]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardNumPadEnd = new Keyboard(".simple-keyboard-numpadEnd", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: ["{numpadsubtract}", "{numpadadd}", "{numpadenter}"]
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Physical Keyboard support
|
||||
* Whenever the input is changed with the keyboard, updating SimpleKeyboard's internal input
|
||||
*/
|
||||
document.querySelector(".input").addEventListener("keyup", () => {
|
||||
let input = document.querySelector(".input").value;
|
||||
this.keyboard.setInput(input);
|
||||
});
|
||||
|
||||
/*
|
||||
// Uncomment this to test the function keys (f1-12)
|
||||
document.addEventListener("keydown", (event) => {
|
||||
event.preventDefault();
|
||||
});*/
|
||||
}
|
||||
|
||||
onChange = (input) => {
|
||||
document.querySelector(".input").value = input;
|
||||
this.keyboard.setInput(input);
|
||||
|
||||
console.log("Input changed", input);
|
||||
}
|
||||
|
||||
onKeyPress = (button) => {
|
||||
console.log("Button pressed", button);
|
||||
|
||||
/**
|
||||
* If you want to handle the shift and caps lock buttons
|
||||
*/
|
||||
if (button === "{shift}" || button === "{shiftleft}" || button === "{shiftright}" || button === "{capslock}") this.handleShift();
|
||||
}
|
||||
|
||||
handleShift = () => {
|
||||
let currentLayout = this.keyboard.options.layoutName;
|
||||
let shiftToggle = currentLayout === "default" ? "shift" : "default";
|
||||
|
||||
this.keyboard.setOptions({
|
||||
layoutName: shiftToggle
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,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;
|
||||
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");
|
||||
});
|
||||
@@ -37,8 +37,10 @@ class SimpleKeyboard {
|
||||
*/
|
||||
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
|
||||
@@ -165,8 +167,8 @@ class SimpleKeyboard {
|
||||
|
||||
dispatch = (callback) => {
|
||||
if(!window['SimpleKeyboardInstances']){
|
||||
console.error("SimpleKeyboardInstances is not defined. Dispatch cannot be called.")
|
||||
return false;
|
||||
console.warn(`SimpleKeyboardInstances is not defined. Dispatch cannot be called.`);
|
||||
throw new Error("INSTANCES_VAR_ERROR");
|
||||
}
|
||||
|
||||
return Object.keys(window['SimpleKeyboardInstances']).forEach((key) => {
|
||||
@@ -245,11 +247,7 @@ class SimpleKeyboard {
|
||||
(className && className.includes(buttonTheme.class)) ||
|
||||
!className
|
||||
){
|
||||
let filteredButtonArray;
|
||||
|
||||
if(buttonArray.includes(button)){
|
||||
filteredButtonArray = buttonTheme.buttons.split(" ").filter(item => item !== button);
|
||||
}
|
||||
let filteredButtonArray = buttonTheme.buttons.split(" ").filter(item => item !== button);
|
||||
|
||||
/**
|
||||
* If buttons left, return them, otherwise, remove button Theme
|
||||
@@ -291,24 +289,24 @@ class SimpleKeyboard {
|
||||
console.log("Caret handling started");
|
||||
}
|
||||
|
||||
let handler = (event) => {
|
||||
let targetTagName = event.target.tagName.toLowerCase();
|
||||
document.addEventListener("keyup", this.caretEventHandler);
|
||||
document.addEventListener("mouseup", this.caretEventHandler);
|
||||
document.addEventListener("touchend", this.caretEventHandler);
|
||||
}
|
||||
|
||||
if(
|
||||
targetTagName === "textarea" ||
|
||||
targetTagName === "input"
|
||||
){
|
||||
this.caretPosition = event.target.selectionStart;
|
||||
caretEventHandler = (event) => {
|
||||
let targetTagName = event.target.tagName.toLowerCase();
|
||||
|
||||
if(this.options.debug){
|
||||
console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase());
|
||||
}
|
||||
}
|
||||
};
|
||||
if(
|
||||
targetTagName === "textarea" ||
|
||||
targetTagName === "input"
|
||||
){
|
||||
this.caretPosition = event.target.selectionStart;
|
||||
|
||||
document.addEventListener("keyup", handler);
|
||||
document.addEventListener("mouseup", handler);
|
||||
document.addEventListener("touchend", handler);
|
||||
if(this.options.debug){
|
||||
console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onInit = () => {
|
||||
@@ -337,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
|
||||
@@ -346,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 {
|
||||
@@ -409,6 +415,11 @@ class SimpleKeyboard {
|
||||
let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
|
||||
buttonDOM.setAttribute("data-skBtnUID", buttonUID);
|
||||
|
||||
/**
|
||||
* Adding display label
|
||||
*/
|
||||
buttonDOM.setAttribute("data-displayLabel", buttonDisplayName);
|
||||
|
||||
/**
|
||||
* Adding button label to button
|
||||
*/
|
||||
|
||||
@@ -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;
|
||||
@@ -2,11 +2,6 @@ class PhysicalKeyboard {
|
||||
constructor(simpleKeyboardInstance){
|
||||
this.simpleKeyboardInstance = simpleKeyboardInstance;
|
||||
|
||||
if(!window['SimpleKeyboardPhysicalKeyboardInit'])
|
||||
window['SimpleKeyboardPhysicalKeyboardInit'] = true;
|
||||
else
|
||||
return false;
|
||||
|
||||
this.initKeyboardListener();
|
||||
}
|
||||
|
||||
@@ -54,7 +49,10 @@ class PhysicalKeyboard {
|
||||
event.code.includes("Numpad") ||
|
||||
event.code.includes("Shift") ||
|
||||
event.code.includes("Space") ||
|
||||
event.code.includes("Backspace")
|
||||
event.code.includes("Backspace") ||
|
||||
event.code.includes("Control") ||
|
||||
event.code.includes("Alt") ||
|
||||
event.code.includes("Meta")
|
||||
){
|
||||
output = event.code;
|
||||
} else {
|
||||
|
||||
@@ -3,56 +3,13 @@ class Utilities {
|
||||
this.simpleKeyboardInstance = simpleKeyboardInstance;
|
||||
}
|
||||
|
||||
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 if(string === ".com")
|
||||
output = 'com';
|
||||
else
|
||||
output = '';
|
||||
|
||||
return output ? ` hg-button-${output}` : '';
|
||||
}
|
||||
|
||||
getButtonClass = button => {
|
||||
let buttonTypeClass = (button.includes("{") && button !== '{//}') ? "functionBtn" : "standardBtn";
|
||||
let buttonTypeClass = (button.includes("{") && button.includes("}") && button !== '{//}') ? "functionBtn" : "standardBtn";
|
||||
let buttonWithoutBraces = button.replace("{", "").replace("}", "");
|
||||
let buttonNormalized = '';
|
||||
|
||||
let buttonNormalized =
|
||||
buttonTypeClass === "standardBtn" ?
|
||||
this.normalizeString(buttonWithoutBraces) : ` hg-button-${buttonWithoutBraces}`;
|
||||
if(buttonTypeClass !== "standardBtn")
|
||||
buttonNormalized = ` hg-button-${buttonWithoutBraces}`;
|
||||
|
||||
return `hg-${buttonTypeClass}${buttonNormalized}`;
|
||||
}
|
||||
@@ -161,12 +118,12 @@ class Utilities {
|
||||
else if(button === "{numpadadd}")
|
||||
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 = this.addStringAt(output, button, caretPos);
|
||||
|
||||
@@ -207,6 +164,10 @@ class Utilities {
|
||||
}
|
||||
|
||||
removeAt(source, position){
|
||||
if(this.simpleKeyboardInstance.caretPosition === 0){
|
||||
return source;
|
||||
}
|
||||
|
||||
let output;
|
||||
let prevTwoChars;
|
||||
let emojiMatched;
|
||||
@@ -298,6 +259,10 @@ class Utilities {
|
||||
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