mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-02-03 00:06:50 +08:00
Compare commits
40 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
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 |
257
README.md
257
README.md
@@ -1,10 +1,15 @@
|
||||
[](https://www.npmjs.com/package/simple-keyboard)
|
||||
[](https://www.jsdelivr.com/package/npm/simple-keyboard)
|
||||
|
||||
<a href="https://franciscohodge.com/simple-keyboard/demo" title="View Demo"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-banner2.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/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.
|
||||
|
||||
Looking for **React** support? Check out [react-simple-keyboard](https://www.npmjs.com/package/react-simple-keyboard) !
|
||||
|
||||
## Installation
|
||||
|
||||
### npm
|
||||
@@ -141,12 +146,28 @@ display: {
|
||||
'{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
|
||||
....
|
||||
}
|
||||
```
|
||||
|
||||
@@ -160,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: [
|
||||
@@ -178,7 +201,6 @@ buttonTheme: [
|
||||
|
||||
[](https://codesandbox.io/s/vj8jvz2q4l?module=%2Fsrc%2Findex.js)
|
||||
|
||||
|
||||
### debug
|
||||
|
||||
> Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
|
||||
@@ -195,14 +217,80 @@ 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"
|
||||
```
|
||||
|
||||
[](https://codesandbox.io/s/43nm6v4xyx?module=%2Fsrc%2Findex.js)
|
||||
|
||||
### 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
|
||||
}
|
||||
```
|
||||
|
||||
[](https://codesandbox.io/s/7wk625q650?module=%2Fsrc%2Findex.js)
|
||||
|
||||
### 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.
|
||||
|
||||
[](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
|
||||
```
|
||||
|
||||
### 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}").
|
||||
@@ -219,6 +307,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.
|
||||
@@ -236,7 +340,6 @@ To access these functions, you need the instance the simple-keyboard component,
|
||||
var keyboard = new Keyboard({
|
||||
...
|
||||
});
|
||||
/>
|
||||
|
||||
// Then, use as follows...
|
||||
keyboard.methodName(params);
|
||||
@@ -252,7 +355,7 @@ keyboard.clearInput();
|
||||
|
||||
// For specific input
|
||||
// Must have been previously set using the "inputName" prop.
|
||||
keyboard.clearInput("inputName");
|
||||
keyboard.clearInput("myInputName");
|
||||
```
|
||||
|
||||
### getInput
|
||||
@@ -265,7 +368,7 @@ 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
|
||||
@@ -278,7 +381,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
|
||||
@@ -291,7 +394,99 @@ keyboard.setOptions({
|
||||
});
|
||||
```
|
||||
|
||||
## Use-cases
|
||||
### dispatch
|
||||
|
||||
> Send a command to all simple-keyboard instances at once (if you have multiple instances).
|
||||
|
||||
```js
|
||||
keyboard.dispatch(instance => {
|
||||
instance.setOptions({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "myClass",
|
||||
buttons: `a b c`
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
[](https://codesandbox.io/s/rjnlp4pp2q?module=%2Fsrc%2Findex.js)
|
||||
|
||||
### 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
|
||||
```
|
||||
|
||||
[](https://codesandbox.io/s/ppol6ok7nq?module=%2Fsrc%2Findex.js)
|
||||
|
||||
### 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:
|
||||
|
||||
[](https://codesandbox.io/s/rjnlp4pp2q?module=%2Fsrc%2Findex.js)
|
||||
|
||||
Here's an example of a full keyboard made out of multiple simple-keyboard instances:
|
||||
|
||||
[](https://codesandbox.io/s/nrxrn5kprp?module=%2Fsrc%2Findex.js)
|
||||
|
||||
### Using several inputs
|
||||
|
||||
@@ -353,10 +548,38 @@ For example:
|
||||
|
||||
There's a number of key layouts available. To apply them, check out [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts).
|
||||
|
||||
<a href="https://github.com/hodgef/simple-keyboard-layouts" title="simple-keyboard-layouts repository"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-banner3layouts.png" align="center"></a>
|
||||
|
||||
If you'd like to contribute your own layouts, please submit your pull request at the simple-keyboard-layouts repository.
|
||||
|
||||
### How to customize my keyboard layout
|
||||
|
||||
If you'd like to create a layout in a language not currently supported by [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts), you definitely can.
|
||||
|
||||
Take following demo as an example:
|
||||
|
||||
[](https://codesandbox.io/s/v388k9zvk0?module=%2Fsrc%2Findex.js)
|
||||
|
||||
If you have issues displaying a character, you might need its unicode code to display it. Here an useful converter tool:
|
||||
|
||||
[r12a Unicode converter](https://r12a.github.io/app-conversion/)
|
||||
|
||||
### Why is the caps lock button working like shift button
|
||||
|
||||
For the sake of simplicity, caps lock and shift do the same action in the main demos.
|
||||
If you'd like to show a different layout when you press caps lock, check out the following demo:
|
||||
|
||||
[](https://codesandbox.io/s/l3n84qn5oq?module=%2Fsrc%2Findex.js)
|
||||
|
||||
### How to display a full keyboard
|
||||
|
||||
You can display a full keyboard by linking together multiple Simple Keyboard instances.
|
||||
This is because you might want different sections of your keyboard to have different spacing and styling.
|
||||
|
||||
Please refer to the documentation on the *[syncInstanceInputs](#syncInstanceInputs)* option, which allows you to sync the input of all your simple-keyboard instances.
|
||||
|
||||
Also, check out this demo:
|
||||
|
||||
[](https://codesandbox.io/s/0ywkn0k7pp?module=%2Fsrc%2Findex.js)
|
||||
|
||||
## Demo
|
||||
|
||||
[https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo)
|
||||
|
||||
@@ -1,2 +1,13 @@
|
||||
body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:manipulation;touch-action:manipulation}.simple-keyboard .hg-row{display:-ms-flexbox;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;-ms-flex-positive:1;flex-grow:1;cursor:pointer}.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.5.5
|
||||
* 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,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,+BAAiC,CAGlC,oDACC,kBAAoB,CAGtB,+DACE,YACA,YACA,sBACI,mBACJ,oBACA,aACA,qBACI,sBAAwB","file":"css/index.css","sourcesContent":["body, html {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.simple-keyboard {\r\n font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n width: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n -ms-touch-action: manipulation;\r\n touch-action: manipulation;\r\n}\r\n\r\n.simple-keyboard .hg-row {\r\n display: -ms-flexbox;\r\n display: flex;\r\n}\r\n\r\n.simple-keyboard .hg-row:not(:last-child) {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\r\n margin-right: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-button {\r\n display: inline-block;\r\n -ms-flex-positive: 1;\r\n flex-grow: 1;\r\n cursor: pointer;\r\n}\r\n\r\n.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,
|
||||
|
||||
4512
package-lock.json
generated
4512
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "2.3.22",
|
||||
"description": "On-screen Virtual Keyboard",
|
||||
"version": "2.5.5",
|
||||
"description": "On-screen Javascript Virtual Keyboard",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"start": "node scripts/start.js",
|
||||
@@ -30,7 +30,8 @@
|
||||
"component",
|
||||
"virtual-keyboard",
|
||||
"touchscreen",
|
||||
"touch-screen"
|
||||
"touch-screen",
|
||||
"osk"
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {},
|
||||
|
||||
@@ -14,20 +14,24 @@ class App {
|
||||
layoutName: this.layoutName,
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button),
|
||||
newLineOnEnter: true
|
||||
newLineOnEnter: true,
|
||||
physicalKeyboardHighlight: true,
|
||||
maxLength: 5
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
150
src/demo/FullKeyboardDemo.js
Normal file
150
src/demo/FullKeyboardDemo.js
Normal file
@@ -0,0 +1,150 @@
|
||||
import Keyboard from '../lib';
|
||||
import './css/FullKeyboardDemo.css';
|
||||
|
||||
class App {
|
||||
constructor(){
|
||||
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
|
||||
this.keyboardSections = [];
|
||||
}
|
||||
|
||||
onDOMLoaded = () => {
|
||||
/**
|
||||
* Adding preview (demo only)
|
||||
* In production, this would be part of your HTML file
|
||||
*/
|
||||
document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
|
||||
<input class="input" placeholder="Tap on the virtual keyboard to start" />
|
||||
|
||||
<div class="keyboardContainer">
|
||||
<div class="simple-keyboard-main"></div>
|
||||
|
||||
<div class="controlArrows">
|
||||
<div class="simple-keyboard-control"></div>
|
||||
<div class="simple-keyboard-arrows"></div>
|
||||
</div>
|
||||
|
||||
<div class="numPad">
|
||||
<div class="simple-keyboard-numpad"></div>
|
||||
<div class="simple-keyboard-numpadEnd"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`);
|
||||
document.querySelector('.simple-keyboard').outerHTML = "";
|
||||
|
||||
|
||||
/**
|
||||
* Start of demo
|
||||
*/
|
||||
this.commonKeyboardOptions = {
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button),
|
||||
theme: "simple-keyboard hg-theme-default hg-layout-default",
|
||||
physicalKeyboardHighlight: true,
|
||||
syncInstanceInputs: true,
|
||||
mergeDisplay: true
|
||||
};
|
||||
|
||||
this.keyboard = new Keyboard(".simple-keyboard-main", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: [
|
||||
"{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
|
||||
"` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
|
||||
"{tab} q w e r t y u i o p [ ] \\",
|
||||
"{capslock} a s d f g h j k l ; ' {enter}",
|
||||
"{shiftleft} z x c v b n m , . / {shiftright}",
|
||||
".com @ {space}"
|
||||
],
|
||||
shift: [
|
||||
"{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
|
||||
"~ ! @ # $ % ^ & * ( ) _ + {backspace}",
|
||||
"{tab} Q W E R T Y U I O P { } |",
|
||||
'{capslock} A S D F G H J K L : " {enter}',
|
||||
"{shiftleft} Z X C V B N M < > ? {shiftright}",
|
||||
".com @ {space}"
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardControlPad = new Keyboard(".simple-keyboard-control", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: [
|
||||
"{prtscr} {scrolllock} {pause}",
|
||||
"{insert} {home} {pageup}",
|
||||
"{delete} {end} {pagedown}"
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardArrows = new Keyboard(".simple-keyboard-arrows", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: ["{arrowup}", "{arrowleft} {arrowdown} {arrowright}"]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardNumPad = new Keyboard(".simple-keyboard-numpad", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: [
|
||||
"{numlock} {numpaddivide} {numpadmultiply}",
|
||||
"{numpad7} {numpad8} {numpad9}",
|
||||
"{numpad4} {numpad5} {numpad6}",
|
||||
"{numpad1} {numpad2} {numpad3}", "{numpad0} {numpaddecimal}"]
|
||||
}
|
||||
});
|
||||
|
||||
this.keyboardNumPadEnd = new Keyboard(".simple-keyboard-numpadEnd", {
|
||||
...this.commonKeyboardOptions,
|
||||
layout: {
|
||||
default: ["{numpadsubtract}", "{numpadadd}", "{numpadenter}"]
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Physical Keyboard support
|
||||
* Whenever the input is changed with the keyboard, updating SimpleKeyboard's internal input
|
||||
*/
|
||||
document.querySelector(".input").addEventListener("keyup", () => {
|
||||
let input = document.querySelector(".input").value;
|
||||
this.keyboard.setInput(input);
|
||||
});
|
||||
|
||||
/*
|
||||
// Uncomment this to test the function keys (f1-12)
|
||||
document.addEventListener("keydown", (event) => {
|
||||
event.preventDefault();
|
||||
});*/
|
||||
}
|
||||
|
||||
onChange = (input) => {
|
||||
document.querySelector(".input").value = input;
|
||||
this.keyboard.setInput(input);
|
||||
|
||||
console.log("Input changed", input);
|
||||
}
|
||||
|
||||
onKeyPress = (button) => {
|
||||
console.log("Button pressed", button);
|
||||
|
||||
/**
|
||||
* If you want to handle the shift and caps lock buttons
|
||||
*/
|
||||
if (button === "{shift}" || button === "{shiftleft}" || button === "{shiftright}" || button === "{capslock}") this.handleShift();
|
||||
}
|
||||
|
||||
handleShift = () => {
|
||||
let currentLayout = this.keyboard.options.layoutName;
|
||||
let shiftToggle = currentLayout === "default" ? "shift" : "default";
|
||||
|
||||
this.keyboard.setOptions({
|
||||
layoutName: shiftToggle
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,6 +1,6 @@
|
||||
#root {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
max-width: 1000px;
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
@@ -8,7 +8,7 @@
|
||||
#root .simple-keyboard-preview {
|
||||
background: rgba(0,0,0,0.8);
|
||||
border: 20px solid rgba(0,0,0,0.1);
|
||||
height: 300px;
|
||||
height: 260px;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
padding: 10px;
|
||||
|
||||
116
src/demo/css/FullKeyboardDemo.css
Normal file
116
src/demo/css/FullKeyboardDemo.css
Normal file
@@ -0,0 +1,116 @@
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
font-size: 20px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.keyboardContainer {
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
justify-content: center;
|
||||
width: 1024px;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-theme-default {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.simple-keyboard-main.simple-keyboard {
|
||||
width: 640px;
|
||||
min-width: 640px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.simple-keyboard-main.simple-keyboard .hg-row:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.simple-keyboard-arrows.simple-keyboard {
|
||||
align-self: flex-end;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.simple-keyboard .hg-button.hg-selectedButton {
|
||||
background: rgba(5, 25, 70, 0.53);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.simple-keyboard .hg-button.emptySpace {
|
||||
pointer-events: none;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.simple-keyboard-arrows .hg-row {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.simple-keyboard-arrows .hg-button {
|
||||
width: 50px;
|
||||
flex-grow: 0;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.controlArrows {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.simple-keyboard-control.simple-keyboard {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.simple-keyboard-control.simple-keyboard .hg-row:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.simple-keyboard-control .hg-button {
|
||||
width: 50px;
|
||||
flex-grow: 0;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.numPad {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpad.simple-keyboard {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpad.simple-keyboard {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpad.simple-keyboard .hg-button {
|
||||
width: 50px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpadEnd.simple-keyboard {
|
||||
width: 50px;
|
||||
background: none;
|
||||
margin: 0;
|
||||
padding: 5px 5px 5px 0;
|
||||
}
|
||||
|
||||
.simple-keyboard-numpadEnd.simple-keyboard .hg-button {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
#root {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
max-width: 1000px;
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
@@ -33,6 +33,8 @@
|
||||
input {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
label {
|
||||
|
||||
@@ -51,6 +51,10 @@ body, html {
|
||||
padding: 5px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #b5b5b5;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-theme-default .hg-button:active {
|
||||
@@ -63,4 +67,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
|
||||
*/
|
||||
@@ -23,6 +29,8 @@ class SimpleKeyboard {
|
||||
this.input = {};
|
||||
this.input[this.options.inputName] = '';
|
||||
this.keyboardDOMClass = keyboardDOMQuery.split('.').join("");
|
||||
this.timers = {};
|
||||
this.buttonElements = {};
|
||||
|
||||
/**
|
||||
* Rendering keyboard
|
||||
@@ -31,11 +39,25 @@ class SimpleKeyboard {
|
||||
this.render();
|
||||
else
|
||||
console.error(`"${keyboardDOMQuery}" was not found in the DOM.`);
|
||||
|
||||
/**
|
||||
* Saving instance
|
||||
* This enables multiple simple-keyboard support with easier management
|
||||
*/
|
||||
if(!window['SimpleKeyboardInstances'])
|
||||
window['SimpleKeyboardInstances'] = {};
|
||||
|
||||
window['SimpleKeyboardInstances'][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 +69,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 +107,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 => {
|
||||
@@ -102,6 +160,174 @@ class SimpleKeyboard {
|
||||
clear = () => {
|
||||
this.keyboardDOM.innerHTML = '';
|
||||
this.keyboardDOM.className = this.keyboardDOMClass;
|
||||
this.buttonElements = {};
|
||||
}
|
||||
|
||||
dispatch = (callback) => {
|
||||
if(!window['SimpleKeyboardInstances']){
|
||||
console.error("SimpleKeyboardInstances is not defined. Dispatch cannot be called.")
|
||||
return false;
|
||||
}
|
||||
|
||||
return Object.keys(window['SimpleKeyboardInstances']).forEach((key) => {
|
||||
callback(window['SimpleKeyboardInstances'][key], key);
|
||||
})
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
if(buttonArray.includes(button)){
|
||||
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");
|
||||
}
|
||||
|
||||
let handler = (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());
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keyup", handler);
|
||||
document.addEventListener("mouseup", handler);
|
||||
document.addEventListener("touchend", handler);
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
@@ -147,7 +373,7 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Iterating through each row
|
||||
*/
|
||||
layout[this.options.layoutName].forEach((row) => {
|
||||
layout[this.options.layoutName].forEach((row, rIndex) => {
|
||||
let rowArray = row.split(' ');
|
||||
|
||||
/**
|
||||
@@ -159,10 +385,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
|
||||
@@ -171,6 +397,18 @@ 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 button label to button
|
||||
*/
|
||||
@@ -178,17 +416,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();
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -196,6 +436,20 @@ class SimpleKeyboard {
|
||||
*/
|
||||
this.keyboardDOM.appendChild(rowDOM);
|
||||
});
|
||||
|
||||
/**
|
||||
* Calling onRender
|
||||
*/
|
||||
this.onRender();
|
||||
|
||||
if(!this.initialized){
|
||||
this.initialized = true;
|
||||
|
||||
/**
|
||||
* Calling onInit
|
||||
*/
|
||||
this.onInit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
78
src/lib/services/PhysicalKeyboard.js
Normal file
78
src/lib/services/PhysicalKeyboard.js
Normal file
@@ -0,0 +1,78 @@
|
||||
class PhysicalKeyboard {
|
||||
constructor(simpleKeyboardInstance){
|
||||
this.simpleKeyboardInstance = simpleKeyboardInstance;
|
||||
|
||||
if(!window['SimpleKeyboardPhysicalKeyboardInit'])
|
||||
window['SimpleKeyboardPhysicalKeyboardInit'] = true;
|
||||
else
|
||||
return false;
|
||||
|
||||
this.initKeyboardListener();
|
||||
}
|
||||
|
||||
initKeyboardListener = () => {
|
||||
// Normal Keyboard
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
|
||||
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||||
|
||||
this.simpleKeyboardInstance.dispatch(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")
|
||||
){
|
||||
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,5 +1,9 @@
|
||||
class Utilities {
|
||||
static normalizeString(string){
|
||||
constructor(simpleKeyboardInstance){
|
||||
this.simpleKeyboardInstance = simpleKeyboardInstance;
|
||||
}
|
||||
|
||||
normalizeString(string){
|
||||
let output;
|
||||
|
||||
if(string === "@")
|
||||
@@ -34,59 +38,266 @@ class Utilities {
|
||||
output = 'closebracket';
|
||||
else if(string === "//")
|
||||
output = 'emptybutton';
|
||||
else if(string === ".com")
|
||||
output = 'com';
|
||||
else
|
||||
output = '';
|
||||
|
||||
return output ? ` hg-button-${output}` : '';
|
||||
}
|
||||
|
||||
static getButtonClass = button => {
|
||||
getButtonClass = button => {
|
||||
let buttonTypeClass = (button.includes("{") && button !== '{//}') ? "functionBtn" : "standardBtn";
|
||||
let buttonWithoutBraces = button.replace("{", "").replace("}", "");
|
||||
|
||||
let buttonNormalized =
|
||||
buttonTypeClass === "standardBtn" ?
|
||||
Utilities.normalizeString(buttonWithoutBraces) : ` hg-button-${buttonWithoutBraces}`;
|
||||
this.normalizeString(buttonWithoutBraces) : ` hg-button-${buttonWithoutBraces}`;
|
||||
|
||||
return `hg-${buttonTypeClass}${buttonNormalized}`;
|
||||
}
|
||||
|
||||
static getDefaultDiplay(){
|
||||
getDefaultDiplay(){
|
||||
return {
|
||||
'{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 === "{numpadadd}")
|
||||
output = this.addStringAt(output, '+', caretPos);
|
||||
|
||||
else if(button === "{numpaddecimal}")
|
||||
output = this.addStringAt(output, '.', 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){
|
||||
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));
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
export default Utilities;
|
||||
Reference in New Issue
Block a user