mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-02-03 00:06:50 +08:00
Compare commits
33 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
0533b4c2c2 | ||
|
|
5a7fef7643 | ||
|
|
d88912cd23 | ||
|
|
e138f1fd6f | ||
|
|
0581247fbe | ||
|
|
d8d8d460c2 | ||
|
|
8b8d90f248 | ||
|
|
42e47ef8f9 | ||
|
|
1e16bde389 | ||
|
|
201542b189 | ||
|
|
41b23cca89 | ||
|
|
b2df5cf09e | ||
|
|
10bbcdd89c | ||
|
|
3b75d11b9c | ||
|
|
71136a0d5e | ||
|
|
1aafdeee0a | ||
|
|
41c87430ff | ||
|
|
ff2476a331 | ||
|
|
894483e6a7 | ||
|
|
cbef48eb3c | ||
|
|
2769002ff6 | ||
|
|
04088f63c1 | ||
|
|
69ed611788 | ||
|
|
dbed641621 | ||
|
|
d1e6630247 | ||
|
|
d8e8b6076a | ||
|
|
7c292d04bf | ||
|
|
f91e50a1b2 | ||
|
|
c7eb4ba4d3 | ||
|
|
d407413cce | ||
|
|
f8ebb30d76 | ||
|
|
276a478eb6 | ||
|
|
c239e21625 |
228
README.md
228
README.md
@@ -2,14 +2,10 @@
|
||||
|
||||
[](https://www.npmjs.com/package/simple-keyboard)
|
||||
|
||||
<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="src/demo/images/simple-keyboard.png" align="center"></a>
|
||||
> An easily customisable and responsive on-screen virtual keyboard for Javascript projects.
|
||||
<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard.png" align="center"></a>
|
||||
> The easily customisable and responsive on-screen virtual keyboard for Javascript projects.
|
||||
|
||||
> Want the React.js version? Get [react-simple-keyboard](https://www.npmjs.com/package/react-simple-keyboard) instead!
|
||||
|
||||
<img src="src/demo/images/keyboard.PNG" align="center" width="100%">
|
||||
|
||||
<b>[Live Demo](https://franciscohodge.com/simple-keyboard/demo)</b>
|
||||
<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/k2.png" align="center" width="100%">
|
||||
|
||||
|
||||
## Installation
|
||||
@@ -32,36 +28,30 @@
|
||||
import Keyboard from 'simple-keyboard';
|
||||
import 'simple-keyboard/build/css/index.css';
|
||||
|
||||
class App {
|
||||
constructor(){
|
||||
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
}
|
||||
let keyboard = new Keyboard({
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button)
|
||||
});
|
||||
|
||||
onDOMLoaded = () => {
|
||||
this.keyboard = new Keyboard({
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button)
|
||||
});
|
||||
}
|
||||
|
||||
onChange = input => {
|
||||
console.log("Input changed", input);
|
||||
}
|
||||
|
||||
onKeyPress = button => {
|
||||
console.log("Button pressed", button);
|
||||
}
|
||||
function onChange(input){
|
||||
document.querySelector(".input").value = input;
|
||||
console.log("Input changed", input);
|
||||
}
|
||||
|
||||
export default App;
|
||||
function onKeyPress(button){
|
||||
console.log("Button pressed", button);
|
||||
}
|
||||
````
|
||||
|
||||
### html
|
||||
|
||||
````html
|
||||
<input class="input" />
|
||||
<div class="simple-keyboard"></div>
|
||||
````
|
||||
|
||||
[](https://codesandbox.io/s/krzkx19rr)
|
||||
|
||||
> Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js).
|
||||
|
||||
## Usage from CDN
|
||||
@@ -69,18 +59,44 @@ export default App;
|
||||
### html
|
||||
|
||||
````html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/css/index.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="simple-keyboard"></div>
|
||||
<script src="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/index.js"></script>
|
||||
<input class="input" placeholder="Tap on the virtual keyboard to start" />
|
||||
<div class="simple-keyboard"></div>
|
||||
|
||||
<script src="https://cdn.rawgit.com/hodgef/simple-keyboard/3b75d11b9c1d782d92103d1df0970734e6d6df83/build/index.js"></script>
|
||||
<script src="src/index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
````
|
||||
|
||||
### js (index.js)
|
||||
|
||||
````js
|
||||
let Keyboard = window.SimpleKeyboard.default;
|
||||
|
||||
let myKeyboard = new Keyboard({
|
||||
onChange: input => onChange(input),
|
||||
onKeyPress: button => onKeyPress(button)
|
||||
});
|
||||
|
||||
function onChange(input) {
|
||||
document.querySelector(".input").value = input;
|
||||
console.log("Input changed", input);
|
||||
}
|
||||
|
||||
function onKeyPress(button) {
|
||||
console.log("Button pressed", button);
|
||||
}
|
||||
````
|
||||
|
||||
[](https://codesandbox.io/s/6n0wzxjmjk)
|
||||
|
||||
## Options
|
||||
|
||||
You can customize the Keyboard by passing options to it.
|
||||
@@ -137,12 +153,33 @@ display: {
|
||||
|
||||
### theme
|
||||
|
||||
> A prop to add your own css classes. You can add multiple classes separated by a space.
|
||||
> A prop to add your own css classes _to the keyboard wrapper_. You can add multiple classes separated by a space.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "myCustomClass",
|
||||
buttons: "Q W E R T Y q w e r t y"
|
||||
},
|
||||
{
|
||||
class: "anotherCustomClass",
|
||||
buttons: "Q q"
|
||||
},
|
||||
...
|
||||
]
|
||||
```
|
||||
|
||||
[](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.
|
||||
@@ -159,6 +196,38 @@ debug: false
|
||||
newLineOnEnter: false
|
||||
```
|
||||
|
||||
### inputName
|
||||
|
||||
> Allows you to use a single simple-keyboard instance for several inputs.
|
||||
|
||||
```js
|
||||
inputName: "default"
|
||||
```
|
||||
|
||||
### onKeyPress
|
||||
|
||||
> Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
|
||||
|
||||
```js
|
||||
onKeyPress: (button) => console.log(button)
|
||||
```
|
||||
|
||||
### onChange
|
||||
|
||||
> Executes the callback function on input change. Returns the current input's string.
|
||||
|
||||
```js
|
||||
onChange: (input) => console.log(input)
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
```js
|
||||
onChangeAll: (inputs) => console.log(inputs)
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
simple-keyboard has a few methods you can use to further control it's behavior.
|
||||
@@ -179,7 +248,12 @@ keyboard.methodName(params);
|
||||
> Clear the keyboard's input.
|
||||
|
||||
```js
|
||||
// For default input (i.e. if you have only one)
|
||||
keyboard.clearInput();
|
||||
|
||||
// For specific input
|
||||
// Must have been previously set using the "inputName" prop.
|
||||
keyboard.clearInput("inputName");
|
||||
```
|
||||
|
||||
### getInput
|
||||
@@ -187,7 +261,12 @@ keyboard.clearInput();
|
||||
> Get the keyboard's input (You can also get it from the _onChange_ prop).
|
||||
|
||||
```js
|
||||
// For default input (i.e. if you have only one)
|
||||
let input = keyboard.getInput();
|
||||
|
||||
// For specific input
|
||||
// Must have been previously set using the "inputName" prop.
|
||||
let input = keyboard.getInput("inputName");
|
||||
```
|
||||
|
||||
### setInput
|
||||
@@ -195,17 +274,86 @@ let input = keyboard.getInput();
|
||||
> Set the keyboard's input. Useful if you want the keybord to initialize with a default value, for example.
|
||||
|
||||
```js
|
||||
// For default input (i.e. if you have only one)
|
||||
keyboard.setInput("Hello World!");
|
||||
|
||||
// For specific input
|
||||
// Must have been previously set using the "inputName" prop.
|
||||
keyboard.setInput("Hello World!", "inputName");
|
||||
```
|
||||
|
||||
### setOptions
|
||||
|
||||
> Set new option or modify existing ones after initialization. The changes are applied immediately.
|
||||
|
||||
```js
|
||||
keyboard.setOptions({
|
||||
theme: "my-custom-theme"
|
||||
});
|
||||
```
|
||||
|
||||
## Use-cases
|
||||
|
||||
### Using several inputs
|
||||
|
||||
Set the *[inputName](#inputname)* option for each input you want to handle with simple-keyboard.
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<input class="input" id="input1" value=""/>
|
||||
<input class="input" id="input2" value=""/>
|
||||
```
|
||||
|
||||
```js
|
||||
// Here we'll store the input id that simple-keyboard will be using.
|
||||
var selectedInput;
|
||||
|
||||
// Initialize simple-keyboard as usual
|
||||
var keyboard = new Keyboard({
|
||||
onChange: input => onChange(input)
|
||||
});
|
||||
|
||||
// Add an event listener for the inputs to be tracked
|
||||
document.querySelectorAll('.input')
|
||||
.forEach(input => input.addEventListener('focus', onInputFocus));
|
||||
|
||||
/**
|
||||
* When an input is focused, it will be marked as selected (selectedInput)
|
||||
* This is so we can replace it's value on the onChange function
|
||||
*
|
||||
* Also, we will set the inputName option to a unique string identifying the input (id)
|
||||
* simple-keyboard save the input in this key and report changes through onChange
|
||||
*/
|
||||
onInputFocus = event => {
|
||||
// Setting input as selected
|
||||
selectedInput = `#${event.target.id}`;
|
||||
|
||||
// Set the inputName option on the fly !
|
||||
keyboard.setOptions({
|
||||
inputName: event.target.id
|
||||
});
|
||||
}
|
||||
|
||||
// When the current input is changed, this is called
|
||||
onChange = input => {
|
||||
// If the input is not defined, grabbing the first ".input".
|
||||
let currentInput = selectedInput || '.input';
|
||||
|
||||
// Updating the selected input's value
|
||||
document.querySelector(currentInput).value = input;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
> [See full example](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/MultipleInputsDemo.js).
|
||||
|
||||
## Demo
|
||||
|
||||
<img src="src/demo/images/demo.gif" align="center" width="600">
|
||||
|
||||
### Live demo
|
||||
|
||||
[https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo)
|
||||
|
||||
[](https://codesandbox.io/s/krzkx19rr)
|
||||
|
||||
### To run demo on your own computer
|
||||
|
||||
* Clone this repository
|
||||
@@ -213,7 +361,11 @@ keyboard.setInput("Hello World!");
|
||||
* `npm start`
|
||||
* Visit [http://localhost:3000/](http://localhost:3000/)
|
||||
|
||||
## Note
|
||||
### Other versions
|
||||
|
||||
This is a work in progress. Feel free to submit any issues you have at:
|
||||
* ReactJS - [react-simple-keyboard](https://github.com/hodgef/react-simple-keyboard)
|
||||
|
||||
## Contributing
|
||||
|
||||
PR's and issues are welcome. Feel free to submit any issues you have at:
|
||||
[https://github.com/hodgef/simple-keyboard/issues](https://github.com/hodgef/simple-keyboard/issues)
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.simple-keyboard .hg-row{display:-ms-flexbox;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;-ms-flex-positive:1;flex-grow:1;cursor:pointer}.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn{max-width:100px}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.2);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:1px solid rgba(0,0,0,.25);border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid gray}.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}
|
||||
body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.simple-keyboard .hg-row{display:-ms-flexbox;display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;-ms-flex-positive:1;flex-grow:1;cursor:pointer}.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn{max-width:100px}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{-webkit-box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5}.simple-keyboard.hg-theme-default .hg-button:active{background:#e4e4e4}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}
|
||||
/*# sourceMappingURL=index.css.map*/
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sources":["webpack:///./src/lib/components/Keyboard.css"],"names":[],"mappings":"AAAA,UACE,SACA,SAAW,CAGb,iBACE,6GACA,WACA,yBACG,sBACC,qBACI,iBACR,8BACQ,sBACR,eAAiB,CAGnB,yBACE,oBACA,YAAc,CAGhB,0CACE,iBAAmB,CAGrB,qDACE,gBAAkB,CAGpB,4BACE,qBACA,oBACI,YACJ,cAAgB,CAGlB,6DACE,eAAiB,CAMnB,kCACE,gCACA,YACA,iBAAmB,CAGrB,6CACE,+CACQ,uCACR,YACA,iCACA,kBACA,8BACQ,sBACR,YACA,gBACA,4BAA8B,CAG/B,oDACC,kBAAoB,CAGtB,+DACE,YACA,YACA,sBACI,mBACJ,oBACA,aACA,qBACI,sBAAwB","file":"css/index.css","sourcesContent":["body, html {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.simple-keyboard {\r\n font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n width: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n}\r\n\r\n.simple-keyboard .hg-row {\r\n display: -ms-flexbox;\r\n display: flex;\r\n}\r\n\r\n.simple-keyboard .hg-row:not(:last-child) {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\r\n margin-right: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-button {\r\n display: inline-block;\r\n -ms-flex-positive: 1;\r\n flex-grow: 1;\r\n cursor: pointer;\r\n}\r\n\r\n.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn {\r\n max-width: 100px;\r\n}\r\n\r\n/**\r\n * hg-theme-default theme\r\n */\r\n.simple-keyboard.hg-theme-default {\r\n background-color: rgba(0,0,0,0.2);\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: 1px solid rgba(0,0,0,0.25);\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 gray;\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,eAAiB,CAGnB,yBACE,oBACA,YAAc,CAGhB,0CACE,iBAAmB,CAGrB,qDACE,gBAAkB,CAGpB,4BACE,qBACA,oBACI,YACJ,cAAgB,CAGlB,6DACE,eAAiB,CAMnB,kCACE,gCACA,YACA,iBAAmB,CAGrB,6CACE,+CACQ,uCACR,YACA,kBACA,8BACQ,sBACR,YACA,gBACA,+BAAiC,CAGlC,oDACC,kBAAoB,CAGtB,+DACE,YACA,YACA,sBACI,mBACJ,oBACA,aACA,qBACI,sBAAwB","file":"css/index.css","sourcesContent":["body, html {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.simple-keyboard {\r\n font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n width: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n}\r\n\r\n.simple-keyboard .hg-row {\r\n display: -ms-flexbox;\r\n display: flex;\r\n}\r\n\r\n.simple-keyboard .hg-row:not(:last-child) {\r\n margin-bottom: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\r\n margin-right: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-button {\r\n display: inline-block;\r\n -ms-flex-positive: 1;\r\n flex-grow: 1;\r\n cursor: pointer;\r\n}\r\n\r\n.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn {\r\n max-width: 100px;\r\n}\r\n\r\n/**\r\n * hg-theme-default theme\r\n */\r\n.simple-keyboard.hg-theme-default {\r\n background-color: rgba(0,0,0,0.1);\r\n padding: 5px;\r\n border-radius: 5px;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default .hg-button {\r\n -webkit-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n height: 40px;\r\n border-radius: 5px;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n padding: 5px;\r\n background: white;\r\n border-bottom: 1px solid #b5b5b5;\r\n }\r\n\r\n .simple-keyboard.hg-theme-default .hg-button:active {\r\n background: #e4e4e4;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {\r\n width: 33.3%;\r\n height: 60px;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -ms-flex-pack: center;\r\n justify-content: center;\r\n}\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Keyboard.css"],"sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -60,7 +60,8 @@ module.exports = {
|
||||
// CRL: Updated whole block with library specific info
|
||||
path: paths.appDemoBuild,
|
||||
filename: 'index.js',
|
||||
libraryTarget: 'umd'
|
||||
libraryTarget: 'umd',
|
||||
library: 'SimpleKeyboard'
|
||||
},
|
||||
resolve: {
|
||||
// This allows you to set a fallback for where Webpack should look for modules.
|
||||
|
||||
@@ -57,7 +57,8 @@ module.exports = {
|
||||
// CRL: Updated whole block with library specific info
|
||||
path: paths.appBuild,
|
||||
filename: 'index.js',
|
||||
libraryTarget: 'umd'
|
||||
libraryTarget: 'umd',
|
||||
library: 'SimpleKeyboard'
|
||||
},
|
||||
resolve: {
|
||||
// This allows you to set a fallback for where Webpack should look for modules.
|
||||
|
||||
5611
package-lock.json
generated
5611
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "2.0.3",
|
||||
"version": "2.3.1",
|
||||
"description": "On-screen Virtual Keyboard",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
@@ -35,11 +35,11 @@
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "7.1.6",
|
||||
"babel-core": "6.26.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "7.2.3",
|
||||
"babel-jest": "20.0.3",
|
||||
"babel-loader": "7.1.2",
|
||||
"babel-preset-react-app": "^3.1.0",
|
||||
"babel-preset-react-app": "^3.1.2",
|
||||
"babel-runtime": "6.26.0",
|
||||
"case-sensitive-paths-webpack-plugin": "2.1.1",
|
||||
"chalk": "1.1.3",
|
||||
@@ -62,6 +62,7 @@
|
||||
"postcss-flexbugs-fixes": "3.2.0",
|
||||
"postcss-loader": "2.0.8",
|
||||
"promise": "8.0.1",
|
||||
"prop-types": "^15.6.1",
|
||||
"raf": "3.4.0",
|
||||
"react": "^16.2.0",
|
||||
"react-dev-utils": "^4.2.1",
|
||||
@@ -72,8 +73,7 @@
|
||||
"webpack": "3.8.1",
|
||||
"webpack-dev-server": "2.9.4",
|
||||
"webpack-manifest-plugin": "1.3.2",
|
||||
"whatwg-fetch": "2.0.3",
|
||||
"prop-types": "^15.6.1"
|
||||
"whatwg-fetch": "2.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=0.14",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Keyboard from '../lib';
|
||||
import './App.css';
|
||||
import './css/App.css';
|
||||
|
||||
class App {
|
||||
constructor(){
|
||||
@@ -13,10 +13,20 @@ class App {
|
||||
debug: true,
|
||||
layoutName: this.layoutName,
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button)
|
||||
onKeyPress: button => this.onKeyPress(button),
|
||||
newLineOnEnter: true
|
||||
});
|
||||
|
||||
this.keyboard.setInput("Hello World!");
|
||||
|
||||
/**
|
||||
* Adding preview (demo only)
|
||||
*/
|
||||
document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
|
||||
<div class="simple-keyboard-preview">
|
||||
<textarea class="input" readonly>Hello World!</textarea>
|
||||
</div>
|
||||
`);
|
||||
|
||||
console.log(this.keyboard);
|
||||
}
|
||||
|
||||
77
src/demo/MultipleInputsDemo.js
Normal file
77
src/demo/MultipleInputsDemo.js
Normal file
@@ -0,0 +1,77 @@
|
||||
import Keyboard from '../lib';
|
||||
import './css/MultipleInputsDemo.css';
|
||||
|
||||
class App {
|
||||
constructor(){
|
||||
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
|
||||
this.layoutName = "default";
|
||||
}
|
||||
|
||||
onDOMLoaded = () => {
|
||||
this.keyboard = new Keyboard({
|
||||
debug: true,
|
||||
layoutName: this.layoutName,
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button)
|
||||
});
|
||||
|
||||
/**
|
||||
* Adding preview (demo only)
|
||||
* In production, this would be part of your HTML file
|
||||
*/
|
||||
document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
|
||||
<div>
|
||||
<label>Input 1</label>
|
||||
<input class="input" id="input1" value=""/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Input 2</label>
|
||||
<input class="input" id="input2" value=""/>
|
||||
</div>
|
||||
`);
|
||||
|
||||
/**
|
||||
* Changing active input onFocus
|
||||
*/
|
||||
document.querySelectorAll('.input')
|
||||
.forEach(input => input.addEventListener('focus', this.onInputFocus));
|
||||
|
||||
console.log(this.keyboard);
|
||||
}
|
||||
|
||||
onInputFocus = event => {
|
||||
this.selectedInput = `#${event.target.id}`;
|
||||
|
||||
this.keyboard.setOptions({
|
||||
inputName: event.target.id
|
||||
});
|
||||
}
|
||||
|
||||
onChange = input => {
|
||||
let currentInput = this.selectedInput || '.input';
|
||||
document.querySelector(currentInput).value = input;
|
||||
}
|
||||
|
||||
onKeyPress = button => {
|
||||
console.log("Button pressed", button);
|
||||
|
||||
/**
|
||||
* Shift functionality
|
||||
*/
|
||||
if(button === "{lock}" || button === "{shift}")
|
||||
this.handleShiftButton();
|
||||
}
|
||||
|
||||
handleShiftButton = () => {
|
||||
let layoutName = this.layoutName;
|
||||
let shiftToggle = this.layoutName = layoutName === "default" ? "shift" : "default";
|
||||
|
||||
this.keyboard.setOptions({
|
||||
layoutName: shiftToggle
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
#root .simple-keyboard-preview {
|
||||
background: rgba(0,0,0,0.8);
|
||||
border: 20px solid;
|
||||
border: 20px solid rgba(0,0,0,0.1);
|
||||
height: 300px;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
@@ -16,13 +16,14 @@
|
||||
}
|
||||
|
||||
#root .input {
|
||||
color: white;
|
||||
color: rgba(255,255,255,0.9);
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: monospace;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-layout-custom {
|
||||
40
src/demo/css/MultipleInputsDemo.css
Normal file
40
src/demo/css/MultipleInputsDemo.css
Normal file
@@ -0,0 +1,40 @@
|
||||
#root {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#root .screenContainer {
|
||||
background: rgba(0,0,0,0.8);
|
||||
border: 20px solid;
|
||||
height: 300px;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#root .inputContainer {
|
||||
color: white;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: monospace;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-layout-custom {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
@@ -3,13 +3,4 @@ import App from './App';
|
||||
/**
|
||||
* Initializing demo
|
||||
*/
|
||||
new App();
|
||||
|
||||
/**
|
||||
* Adding preview (demo only)
|
||||
*/
|
||||
document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
|
||||
<div class="simple-keyboard-preview">
|
||||
<textarea class="input" readonly>Hello World!</textarea>
|
||||
</div>
|
||||
`);
|
||||
new App();
|
||||
@@ -37,7 +37,7 @@ body, html {
|
||||
* hg-theme-default theme
|
||||
*/
|
||||
.simple-keyboard.hg-theme-default {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@@ -45,12 +45,11 @@ body, html {
|
||||
.simple-keyboard.hg-theme-default .hg-button {
|
||||
box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);
|
||||
height: 40px;
|
||||
border: 1px solid rgba(0,0,0,0.25);
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
background: white;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom: 1px solid #b5b5b5;
|
||||
}
|
||||
|
||||
.simple-keyboard.hg-theme-default .hg-button:active {
|
||||
|
||||
@@ -17,9 +17,12 @@ class SimpleKeyboard {
|
||||
*/
|
||||
this.keyboardDOM = document.querySelector(keyboardDOMQuery);
|
||||
this.options = options;
|
||||
this.input = '';
|
||||
this.options.layoutName = this.options.layoutName || "default";
|
||||
this.options.theme = this.options.theme || "hg-theme-default";
|
||||
this.options.inputName = this.options.inputName || "default";
|
||||
this.input = {};
|
||||
this.input[this.options.inputName] = '';
|
||||
|
||||
|
||||
/**
|
||||
* Rendering keyboard
|
||||
@@ -52,10 +55,13 @@ class SimpleKeyboard {
|
||||
newLineOnEnter: (this.options.newLineOnEnter === true)
|
||||
}
|
||||
|
||||
let updatedInput = Utilities.getUpdatedInput(button, this.input, options);
|
||||
if(!this.input[this.options.inputName])
|
||||
this.input[this.options.inputName] = '';
|
||||
|
||||
if(this.input !== updatedInput){
|
||||
this.input = updatedInput;
|
||||
let updatedInput = Utilities.getUpdatedInput(button, this.input[this.options.inputName], options);
|
||||
|
||||
if(this.input[this.options.inputName] !== updatedInput){
|
||||
this.input[this.options.inputName] = updatedInput;
|
||||
|
||||
if(debug)
|
||||
console.log('Input changed:', this.input);
|
||||
@@ -64,7 +70,7 @@ class SimpleKeyboard {
|
||||
* Calling onChange
|
||||
*/
|
||||
if(typeof this.options.onChange === "function")
|
||||
this.options.onChange(this.input);
|
||||
this.options.onChange(this.input[this.options.inputName]);
|
||||
}
|
||||
|
||||
if(debug){
|
||||
@@ -72,16 +78,19 @@ class SimpleKeyboard {
|
||||
}
|
||||
}
|
||||
|
||||
clearInput = () => {
|
||||
this.input = '';
|
||||
clearInput = (inputName) => {
|
||||
inputName = inputName || this.options.inputName;
|
||||
this.input[this.options.inputName] = '';
|
||||
}
|
||||
|
||||
getInput = () => {
|
||||
return this.input;
|
||||
getInput = (inputName) => {
|
||||
inputName = inputName || this.options.inputName;
|
||||
return this.input[this.options.inputName];
|
||||
}
|
||||
|
||||
setInput = input => {
|
||||
this.input = input;
|
||||
setInput = (input, inputName) => {
|
||||
inputName = inputName || this.options.inputName;
|
||||
this.input[inputName] = input;
|
||||
}
|
||||
|
||||
setOptions = option => {
|
||||
@@ -103,6 +112,32 @@ class SimpleKeyboard {
|
||||
let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
|
||||
let layout = this.options.layout || KeyboardLayout.getLayout(this.options.layoutName);
|
||||
|
||||
/**
|
||||
* Account for buttonTheme, if set
|
||||
*/
|
||||
let buttonThemesParsed = {};
|
||||
if(Array.isArray(this.options.buttonTheme)){
|
||||
this.options.buttonTheme.forEach(themeObj => {
|
||||
if(themeObj.buttons && themeObj.class){
|
||||
let themeButtons = themeObj.buttons.split(' ');
|
||||
|
||||
if(Array.isArray(themeButtons)){
|
||||
themeButtons.forEach(themeButton => {
|
||||
let themeParsed = buttonThemesParsed[themeButton];
|
||||
|
||||
// If the button has already been added
|
||||
if(themeParsed)
|
||||
buttonThemesParsed[themeButton] = `${themeParsed} ${themeObj.class}`;
|
||||
else
|
||||
buttonThemesParsed[themeButton] = themeObj.class;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.warn(`buttonTheme row is missing the "buttons" or the "class". Please check the documentation.`)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Adding themeClass, layoutClass to keyboardDOM
|
||||
*/
|
||||
@@ -111,7 +146,7 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Iterating through each row
|
||||
*/
|
||||
layout[this.options.layoutName].forEach((row, index) => {
|
||||
layout[this.options.layoutName].forEach((row) => {
|
||||
let rowArray = row.split(' ');
|
||||
|
||||
/**
|
||||
@@ -123,15 +158,16 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Iterating through each button in row
|
||||
*/
|
||||
rowArray.forEach((button, index) => {
|
||||
rowArray.forEach((button) => {
|
||||
let fctBtnClass = Utilities.getButtonClass(button);
|
||||
let buttonThemeClass = buttonThemesParsed[button];
|
||||
let buttonDisplayName = Utilities.getButtonDisplayName(button, this.options.display);
|
||||
|
||||
/**
|
||||
* Creating button
|
||||
*/
|
||||
var buttonDOM = document.createElement('div');
|
||||
buttonDOM.className += `hg-button ${fctBtnClass}`;
|
||||
buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
|
||||
buttonDOM.onclick = () => this.handleButtonClicked(button);
|
||||
|
||||
/**
|
||||
|
||||
@@ -82,7 +82,7 @@ class Utilities {
|
||||
output = output + "\t";
|
||||
else if(button === "{enter}" && newLineOnEnter)
|
||||
output = output + "\n";
|
||||
else if(!button.includes("{") && !button.includes("{"))
|
||||
else if(!button.includes("{") && !button.includes("}"))
|
||||
output = output + button;
|
||||
|
||||
return output;
|
||||
|
||||
Reference in New Issue
Block a user