mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-02-03 00:06:50 +08:00
Compare commits
27 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 |
163
README.md
163
README.md
@@ -6,6 +6,10 @@
|
||||
|
||||
> 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
|
||||
@@ -142,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
|
||||
....
|
||||
}
|
||||
```
|
||||
|
||||
@@ -161,7 +181,9 @@ theme: "hg-theme-default"
|
||||
|
||||
### buttonTheme
|
||||
|
||||
> A prop to add your own css classes _to one or several buttons_. You can add multiple classes separated by a space.
|
||||
A prop to add your own css classes _to one or several buttons_.
|
||||
|
||||
To add or remove individual `buttonTheme` entries, check out the methods `addButtonTheme` and `removeButtonTheme` below.
|
||||
|
||||
```js
|
||||
buttonTheme: [
|
||||
@@ -179,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.
|
||||
@@ -196,14 +217,41 @@ 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.
|
||||
@@ -212,6 +260,37 @@ inputName: "default"
|
||||
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}").
|
||||
@@ -228,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.
|
||||
@@ -245,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);
|
||||
@@ -261,7 +355,7 @@ keyboard.clearInput();
|
||||
|
||||
// For specific input
|
||||
// Must have been previously set using the "inputName" prop.
|
||||
keyboard.clearInput("inputName");
|
||||
keyboard.clearInput("myInputName");
|
||||
```
|
||||
|
||||
### getInput
|
||||
@@ -274,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
|
||||
@@ -287,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
|
||||
@@ -319,10 +413,40 @@ keyboard.dispatch(instance => {
|
||||
|
||||
[](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?
|
||||
### 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:
|
||||
|
||||
@@ -352,9 +476,9 @@ This can come in handy especially when dealing with multiple simple keyboard ins
|
||||
|
||||
### 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`.
|
||||
As shown above, you can run multiple instances of simple-keyboard. To keep their internal inputs in sync, set the *[syncInstanceInputs](#syncinstanceinputs)* option to `true`.
|
||||
|
||||
If you want to send a command to all your simple-keyboard instances at once, you can use the *[dispatch](#syncInstanceInputs)* method.
|
||||
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:
|
||||
|
||||
@@ -364,7 +488,6 @@ Here's an example of a full keyboard made out of multiple simple-keyboard instan
|
||||
|
||||
[](https://codesandbox.io/s/nrxrn5kprp?module=%2Fsrc%2Findex.js)
|
||||
|
||||
|
||||
### Using several inputs
|
||||
|
||||
Set the *[inputName](#inputname)* option for each input you want to handle with simple-keyboard.
|
||||
@@ -427,8 +550,7 @@ There's a number of key layouts available. To apply them, check out [simple-keyb
|
||||
|
||||
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?
|
||||
### 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.
|
||||
|
||||
@@ -440,14 +562,13 @@ If you have issues displaying a character, you might need its unicode code to di
|
||||
|
||||
[r12a Unicode converter](https://r12a.github.io/app-conversion/)
|
||||
|
||||
### Why is the caps lock button working like shift button?
|
||||
### 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.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/*!
|
||||
*
|
||||
* simple-keyboard v2.4.1
|
||||
* simple-keyboard v2.5.5
|
||||
* https://github.com/hodgef/simple-keyboard
|
||||
*
|
||||
* Copyright (c) Francisco Hodge (https://github.com/hodgef)
|
||||
@@ -9,5 +9,5 @@
|
||||
* 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}
|
||||
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,gCACA,eACA,oBACA,aACA,sBACI,mBACJ,qBACI,sBAAwB,CAG7B,oDACC,kBAAoB,CAGtB,+DACE,YACA,YACA,sBACI,mBACJ,oBACA,aACA,qBACI,sBAAwB,CAO9B,oIACE,WAAa,CAGf,+DACE,WAAa,CAGf,2DACE,cAAgB,CAGlB,yEACE,cAAgB","file":"css/index.css","sourcesContent":["body, html {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.simple-keyboard {\r\n font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n width: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n -ms-touch-action: manipulation;\r\n touch-action: manipulation;\r\n}\r\n\r\n.simple-keyboard .hg-row {\r\n display: -ms-flexbox;\r\n display: flex;\r\n}\r\n\r\n.simple-keyboard .hg-row:not(:last-child) {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\r\n margin-right: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-button {\r\n display: inline-block;\r\n -ms-flex-positive: 1;\r\n flex-grow: 1;\r\n cursor: pointer;\r\n}\r\n\r\n.hg-standardBtn {\r\n max-width: 100px;\r\n}\r\n\r\n/**\r\n * hg-theme-default theme\r\n */\r\n.simple-keyboard.hg-theme-default {\r\n background-color: rgba(0,0,0,0.1);\r\n padding: 5px;\r\n border-radius: 5px;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default .hg-button {\r\n -webkit-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n height: 40px;\r\n border-radius: 5px;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n background: white;\r\n border-bottom: 1px solid #b5b5b5;\r\n cursor: pointer;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -ms-flex-pack: center;\r\n justify-content: center;\r\n }\r\n\r\n .simple-keyboard.hg-theme-default .hg-button:active {\r\n background: #e4e4e4;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {\r\n width: 33.3%;\r\n height: 60px;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -ms-flex-pack: center;\r\n justify-content: center;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {\r\n height: 85px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {\r\n height: 85px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {\r\n width: 105px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-button-com {\r\n max-width: 85px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {\r\n max-width: 45px;\r\n}\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Keyboard.css"],"sourceRoot":""}
|
||||
{"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
4512
package-lock.json
generated
4512
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "2.4.1",
|
||||
"version": "2.5.5",
|
||||
"description": "On-screen Javascript Virtual Keyboard",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -87,4 +87,9 @@ body, html {
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -13,6 +13,11 @@ class SimpleKeyboard {
|
||||
if(!options)
|
||||
options = {};
|
||||
|
||||
/**
|
||||
* Initializing Utilities
|
||||
*/
|
||||
this.utilities = new Utilities(this);
|
||||
|
||||
/**
|
||||
* Processing options
|
||||
*/
|
||||
@@ -25,6 +30,7 @@ class SimpleKeyboard {
|
||||
this.input[this.options.inputName] = '';
|
||||
this.keyboardDOMClass = keyboardDOMQuery.split('.').join("");
|
||||
this.timers = {};
|
||||
this.buttonElements = {};
|
||||
|
||||
/**
|
||||
* Rendering keyboard
|
||||
@@ -41,7 +47,7 @@ class SimpleKeyboard {
|
||||
if(!window['SimpleKeyboardInstances'])
|
||||
window['SimpleKeyboardInstances'] = {};
|
||||
|
||||
window['SimpleKeyboardInstances'][Utilities.camelCase(this.keyboardDOMClass)] = this;
|
||||
window['SimpleKeyboardInstances'][this.utilities.camelCase(this.keyboardDOMClass)] = this;
|
||||
|
||||
/**
|
||||
* Physical Keyboard support
|
||||
@@ -51,7 +57,7 @@ class SimpleKeyboard {
|
||||
|
||||
handleButtonClicked = (button) => {
|
||||
let debug = this.options.debug;
|
||||
|
||||
|
||||
/**
|
||||
* Ignoring placeholder buttons
|
||||
*/
|
||||
@@ -63,20 +69,21 @@ 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)
|
||||
@@ -153,6 +160,7 @@ class SimpleKeyboard {
|
||||
clear = () => {
|
||||
this.keyboardDOM.innerHTML = '';
|
||||
this.keyboardDOM.className = this.keyboardDOMClass;
|
||||
this.buttonElements = {};
|
||||
}
|
||||
|
||||
dispatch = (callback) => {
|
||||
@@ -166,6 +174,162 @@ class SimpleKeyboard {
|
||||
})
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
/**
|
||||
* Clear keyboard
|
||||
@@ -209,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(' ');
|
||||
|
||||
/**
|
||||
@@ -221,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, this.options.mergeDisplay);
|
||||
let buttonDisplayName = this.utilities.getButtonDisplayName(button, this.options.display, this.options.mergeDisplay);
|
||||
|
||||
/**
|
||||
* Creating button
|
||||
@@ -233,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
|
||||
*/
|
||||
@@ -240,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();
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -258,6 +436,20 @@ class SimpleKeyboard {
|
||||
*/
|
||||
this.keyboardDOM.appendChild(rowDOM);
|
||||
});
|
||||
|
||||
/**
|
||||
* Calling onRender
|
||||
*/
|
||||
this.onRender();
|
||||
|
||||
if(!this.initialized){
|
||||
this.initialized = true;
|
||||
|
||||
/**
|
||||
* Calling onInit
|
||||
*/
|
||||
this.onInit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -16,15 +16,13 @@ class PhysicalKeyboard {
|
||||
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
|
||||
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||||
|
||||
this.simpleKeyboardInstance.dispatch(section => {
|
||||
section.setOptions({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "hg-selectedButton",
|
||||
buttons: `${buttonPressed} {${buttonPressed}}`
|
||||
}
|
||||
]
|
||||
})
|
||||
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";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -32,11 +30,14 @@ class PhysicalKeyboard {
|
||||
// Removing button style on keyup
|
||||
document.addEventListener("keyup", (event) => {
|
||||
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
|
||||
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
|
||||
|
||||
this.simpleKeyboardInstance.dispatch(section => {
|
||||
section.setOptions({
|
||||
buttonTheme: []
|
||||
})
|
||||
this.simpleKeyboardInstance.dispatch(instance => {
|
||||
let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`);
|
||||
|
||||
if(buttonDOM){
|
||||
buttonDOM.removeAttribute("style");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
class Utilities {
|
||||
static normalizeString(string){
|
||||
constructor(simpleKeyboardInstance){
|
||||
this.simpleKeyboardInstance = simpleKeyboardInstance;
|
||||
}
|
||||
|
||||
normalizeString(string){
|
||||
let output;
|
||||
|
||||
if(string === "@")
|
||||
@@ -42,18 +46,18 @@ class Utilities {
|
||||
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',
|
||||
@@ -117,61 +121,180 @@ class Utilities {
|
||||
};
|
||||
}
|
||||
|
||||
static getButtonDisplayName = (button, display, mergeDisplay) => {
|
||||
getButtonDisplayName = (button, display, mergeDisplay) => {
|
||||
if(mergeDisplay){
|
||||
display = Object.assign({}, Utilities.getDefaultDiplay(), display);
|
||||
display = Object.assign({}, this.getDefaultDiplay(), display);
|
||||
} else {
|
||||
display = display || Utilities.getDefaultDiplay();
|
||||
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}" || button === "{backspace}") && output.length > 0){
|
||||
/**
|
||||
* Emojis are made out of two characters, so we must take a custom approach to trim them.
|
||||
* For more info: https://mathiasbynens.be/notes/javascript-unicode
|
||||
*/
|
||||
let lastTwoChars = output.slice(-2);
|
||||
let emojiMatched = lastTwoChars.match(/([\uD800-\uDBFF][\uDC00-\uDFFF])/g);
|
||||
output = this.removeAt(output, caretPos);
|
||||
|
||||
if(emojiMatched){
|
||||
output = output.slice(0, -2);
|
||||
} else {
|
||||
output = output.slice(0, -1);
|
||||
}
|
||||
} else if(button === "{space}")
|
||||
output = output + ' ';
|
||||
else if(button === "{tab}")
|
||||
output = output + "\t";
|
||||
else if((button === "{enter}" || button === "{numpadenter}") && newLineOnEnter)
|
||||
output = output + "\n";
|
||||
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 = output + button[button.length - 2];
|
||||
output = this.addStringAt(output, button[button.length - 2], caretPos);
|
||||
}
|
||||
else if(button === "{numpaddivide}")
|
||||
output = output + '/';
|
||||
output = this.addStringAt(output, '/', caretPos);
|
||||
|
||||
else if(button === "{numpadmultiply}")
|
||||
output = output + '*';
|
||||
output = this.addStringAt(output, '*', caretPos);
|
||||
else if(button === "{numpadsubtract}")
|
||||
output = output + '-';
|
||||
output = this.addStringAt(output, '-', caretPos);
|
||||
|
||||
else if(button === "{numpadadd}")
|
||||
output = output + '+';
|
||||
output = this.addStringAt(output, '+', caretPos);
|
||||
|
||||
else if(button === "{numpadadd}")
|
||||
output = output + '+';
|
||||
output = this.addStringAt(output, '+', caretPos);
|
||||
|
||||
else if(button === "{numpaddecimal}")
|
||||
output = output + '.';
|
||||
output = this.addStringAt(output, '.', caretPos);
|
||||
|
||||
else if(!button.includes("{") && !button.includes("}"))
|
||||
output = output + button;
|
||||
output = this.addStringAt(output, button, caretPos);
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
static camelCase = (string) => {
|
||||
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));
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user