mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-08-02 00:00:07 +08:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Francisco Hodge
|
0c76aef3fb | ||
|
Francisco Hodge
|
d1eabe0167 | ||
|
Francisco Hodge
|
988b8a0f64 | ||
|
Francisco Hodge
|
a097b0f470 | ||
|
Francisco Hodge
|
073a6d467e | ||
|
Francisco Hodge
|
0087765e48 | ||
|
Francisco Hodge
|
21072757cd | ||
|
Francisco Hodge
|
89b0987a34 | ||
|
Francisco Hodge
|
a7f25df1ac | ||
|
Francisco Hodge
|
e94669ac06 | ||
|
Francisco Hodge
|
7e09513534 | ||
|
Francisco Hodge
|
960537d7a6 | ||
|
Francisco Hodge
|
d88be11a42 | ||
|
Francisco Hodge
|
e2ee5a4158 | ||
|
Francisco Hodge
|
4b162eaec7 | ||
|
Francisco Hodge
|
715a9c4a90 | ||
|
Francisco Hodge
|
df32ed440e | ||
|
Francisco Hodge
|
12fe2cca75 | ||
|
Francisco Hodge
|
dddd45a220 | ||
|
Francisco Hodge
|
857942811c | ||
|
Francisco Hodge
|
832ecbaa2c | ||
|
Francisco Hodge
|
ad5284ceb3 | ||
|
Francisco Hodge
|
9a47421260 | ||
|
Francisco Hodge
|
d27b94c6d9 | ||
|
Francisco Hodge
|
e1cfcdd673 | ||
|
Francisco Hodge
|
3c3a049b3f | ||
|
Francisco Hodge
|
a8c5ffd401 | ||
|
Francisco Hodge
|
d06baf7222 | ||
|
Francisco Hodge
|
afbdddb008 | ||
|
Francisco Hodge
|
41b1ae2941 | ||
|
Francisco Hodge
|
e7411c6845 | ||
|
Francisco Hodge
|
4f1111b49e | ||
|
Francisco HodgeandGitHub
|
a47a855912 |
@@ -4,6 +4,7 @@
|
||||
/node_modules
|
||||
|
||||
# production
|
||||
/build
|
||||
/demo
|
||||
|
||||
# testing
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
# simple-keyboard
|
||||
|
||||
[](https://www.npmjs.com/package/simple-keyboard)
|
||||
[](https://www.npmjs.com/package/simple-keyboard)
|
||||
[](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.
|
||||
|
||||
> Want the React.js version? Get [react-simple-keyboard](https://www.npmjs.com/package/react-simple-keyboard) instead!
|
||||
> An easily customisable and responsive on-screen virtual keyboard for React.js projects.
|
||||
|
||||
<img src="src/demo/images/keyboard.PNG" align="center" width="100%">
|
||||
|
||||
@@ -14,76 +14,45 @@
|
||||
|
||||
## Installation
|
||||
|
||||
### npm
|
||||
|
||||
`npm install simple-keyboard --save`
|
||||
|
||||
### zip file (self-hosted)
|
||||
|
||||
[Click here to download the latest release (zip format).](https://github.com/hodgef/simple-keyboard/zipball/master)
|
||||
|
||||
> Want to use a CDN instead of self-host? Scroll down to the "Usage from CDN" instructions below.
|
||||
|
||||
## Usage with npm
|
||||
|
||||
### js
|
||||
## Usage
|
||||
|
||||
````js
|
||||
import React, {Component} from 'react';
|
||||
import Keyboard from 'simple-keyboard';
|
||||
import 'simple-keyboard/build/css/index.css';
|
||||
|
||||
class App {
|
||||
constructor(){
|
||||
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
}
|
||||
class App extends Component {
|
||||
|
||||
onDOMLoaded = () => {
|
||||
this.keyboard = new Keyboard({
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button)
|
||||
});
|
||||
}
|
||||
|
||||
onChange = input => {
|
||||
onChange = (input) => {
|
||||
console.log("Input changed", input);
|
||||
}
|
||||
|
||||
onKeyPress = button => {
|
||||
onKeyPress = (button) => {
|
||||
console.log("Button pressed", button);
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<Keyboard
|
||||
onChange={input =>
|
||||
this.onChange(input)}
|
||||
onKeyPress={button =>
|
||||
this.onKeyPress(button)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
````
|
||||
|
||||
### html
|
||||
|
||||
````html
|
||||
<div class="simple-keyboard"></div>
|
||||
````
|
||||
|
||||
> Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js).
|
||||
|
||||
## Usage from CDN
|
||||
|
||||
### html
|
||||
|
||||
````html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
````
|
||||
|
||||
## Options
|
||||
|
||||
You can customize the Keyboard by passing options to it.
|
||||
You can customize the Keyboard by passing options (props) to it.
|
||||
Here are the available options (the code examples are the defaults):
|
||||
|
||||
### layout
|
||||
@@ -91,7 +60,7 @@ Here are the available options (the code examples are the defaults):
|
||||
> Modify the keyboard layout
|
||||
|
||||
```js
|
||||
layout: {
|
||||
layout={{
|
||||
'default': [
|
||||
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
|
||||
'{tab} q w e r t y u i o p [ ] \\',
|
||||
@@ -106,7 +75,7 @@ layout: {
|
||||
'{shift} Z X C V B N M < > ? {shift}',
|
||||
'.com @ {space}'
|
||||
]
|
||||
}
|
||||
}}
|
||||
```
|
||||
|
||||
### layoutName
|
||||
@@ -114,7 +83,7 @@ layout: {
|
||||
> Specifies which layout should be used.
|
||||
|
||||
```js
|
||||
layoutName: "default"
|
||||
layoutName={"default"}
|
||||
```
|
||||
|
||||
### display
|
||||
@@ -122,7 +91,7 @@ layoutName: "default"
|
||||
> Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: "delete").
|
||||
|
||||
```js
|
||||
display: {
|
||||
display={{
|
||||
'{bksp}': 'delete',
|
||||
'{enter}': '< enter',
|
||||
'{shift}': 'shift',
|
||||
@@ -132,7 +101,7 @@ display: {
|
||||
'{accept}': 'Submit',
|
||||
'{space}': ' ',
|
||||
'{//}': ' '
|
||||
}
|
||||
}}
|
||||
```
|
||||
|
||||
### theme
|
||||
@@ -140,7 +109,7 @@ display: {
|
||||
> A prop to add your own css classes. You can add multiple classes separated by a space.
|
||||
|
||||
```js
|
||||
theme: "hg-theme-default"
|
||||
theme={"hg-theme-default"}
|
||||
```
|
||||
|
||||
### debug
|
||||
@@ -148,7 +117,7 @@ theme: "hg-theme-default"
|
||||
> Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
|
||||
|
||||
```js
|
||||
debug: false
|
||||
debug={false}
|
||||
```
|
||||
|
||||
### newLineOnEnter
|
||||
@@ -156,22 +125,22 @@ debug: false
|
||||
> Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not.
|
||||
|
||||
```js
|
||||
newLineOnEnter: false
|
||||
newLineOnEnter={false}
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
simple-keyboard has a few methods you can use to further control it's behavior.
|
||||
To access these functions, you need the instance the simple-keyboard component, like so:
|
||||
simple-keybord has a few methods you can use to further control it's behavior.
|
||||
To access these functions, you need a `ref` of the simple-keyboard component, like so:
|
||||
|
||||
```js
|
||||
var keyboard = new Keyboard({
|
||||
...
|
||||
});
|
||||
<Keyboard
|
||||
ref={r => this.keyboard = r}
|
||||
[...]
|
||||
/>
|
||||
|
||||
// Then, use as follows...
|
||||
keyboard.methodName(params);
|
||||
// Then, on componentDidMount ..
|
||||
this.keyboard.methodName(params);
|
||||
```
|
||||
|
||||
### clearInput
|
||||
@@ -179,7 +148,7 @@ keyboard.methodName(params);
|
||||
> Clear the keyboard's input.
|
||||
|
||||
```js
|
||||
keyboard.clearInput();
|
||||
this.keyboard.clearInput();
|
||||
```
|
||||
|
||||
### getInput
|
||||
@@ -187,7 +156,7 @@ keyboard.clearInput();
|
||||
> Get the keyboard's input (You can also get it from the _onChange_ prop).
|
||||
|
||||
```js
|
||||
let input = keyboard.getInput();
|
||||
let input = this.keyboard.getInput();
|
||||
```
|
||||
|
||||
### setInput
|
||||
@@ -195,7 +164,17 @@ let input = keyboard.getInput();
|
||||
> Set the keyboard's input. Useful if you want the keybord to initialize with a default value, for example.
|
||||
|
||||
```js
|
||||
keyboard.setInput("Hello World!");
|
||||
this.keyboard.setInput("Hello World!");
|
||||
```
|
||||
|
||||
It returns a promise, so if you want to run something after it's applied, call it as so:
|
||||
|
||||
```js
|
||||
let inputSetPromise = this.keyboard.setInput("Hello World!");
|
||||
|
||||
inputSetPromise.then((result) => {
|
||||
console.log("Input set");
|
||||
});
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
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}
|
||||
/*# sourceMappingURL=index.css.map*/
|
||||
@@ -1 +0,0 @@
|
||||
{"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":""}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Generated
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "2.0.0",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
+4
-4
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "2.0.3",
|
||||
"description": "On-screen Virtual Keyboard",
|
||||
"version": "1.1.9",
|
||||
"description": "React.js Virtual Keyboard",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"start": "node scripts/start.js",
|
||||
@@ -20,8 +20,8 @@
|
||||
},
|
||||
"homepage": "https://franciscohodge.com/simple-keyboard",
|
||||
"keywords": [
|
||||
"javascript",
|
||||
"es6",
|
||||
"react",
|
||||
"reactjs",
|
||||
"digital",
|
||||
"keyboard",
|
||||
"onscreen",
|
||||
|
||||
+1
-5
@@ -25,11 +25,7 @@
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root">
|
||||
<div class="simple-keyboard"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
+3
-3
@@ -1,11 +1,11 @@
|
||||
#root {
|
||||
.demoPage {
|
||||
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 .simple-keyboard-preview {
|
||||
.demoPage .screenContainer {
|
||||
background: rgba(0,0,0,0.8);
|
||||
border: 20px solid;
|
||||
height: 300px;
|
||||
@@ -15,7 +15,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#root .input {
|
||||
.demoPage .inputContainer {
|
||||
color: white;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
+77
-32
@@ -1,49 +1,94 @@
|
||||
import React, {Component} from 'react';
|
||||
import Keyboard from '../lib';
|
||||
import './App.css';
|
||||
|
||||
class App {
|
||||
constructor(){
|
||||
document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
|
||||
this.layoutName = "default";
|
||||
class App extends Component {
|
||||
state = {
|
||||
input: '',
|
||||
layoutName: "default"
|
||||
}
|
||||
|
||||
onDOMLoaded = () => {
|
||||
this.keyboard = new Keyboard({
|
||||
debug: true,
|
||||
layoutName: this.layoutName,
|
||||
onChange: input => this.onChange(input),
|
||||
onKeyPress: button => this.onKeyPress(button)
|
||||
componentDidMount(){
|
||||
this.keyboard.setInput("Hello World!")
|
||||
.then(input => {
|
||||
this.setState({input: input});
|
||||
});
|
||||
}
|
||||
|
||||
onChange = (input) => {
|
||||
this.setState({
|
||||
input: input
|
||||
}, () => {
|
||||
console.log("Input changed", input);
|
||||
});
|
||||
|
||||
this.keyboard.setInput("Hello World!");
|
||||
|
||||
console.log(this.keyboard);
|
||||
}
|
||||
|
||||
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({
|
||||
let layoutName = this.state.layoutName;
|
||||
let shiftToggle = layoutName === "default" ? "shift" : "default";
|
||||
|
||||
this.setState({
|
||||
layoutName: shiftToggle
|
||||
});
|
||||
}
|
||||
|
||||
onChange = input => {
|
||||
document.querySelector('.input').value = input;
|
||||
}
|
||||
|
||||
onKeyPress = button => {
|
||||
console.log("Button pressed", button);
|
||||
|
||||
/**
|
||||
* Shift functionality
|
||||
*/
|
||||
if(button === "{lock}" || button === "{shift}")
|
||||
this.handleShiftButton();
|
||||
render(){
|
||||
return (
|
||||
<div className={"demoPage"}>
|
||||
<div className={"screenContainer"}>
|
||||
<textarea className={"inputContainer"} value={this.state.input} />
|
||||
</div>
|
||||
<Keyboard
|
||||
ref={r => this.keyboard = r}
|
||||
onChange={input => this.onChange(input)}
|
||||
onKeyPress={button => this.onKeyPress(button)}
|
||||
layoutName={this.state.layoutName}
|
||||
newLineOnEnter={true}
|
||||
layout={{
|
||||
'default': [
|
||||
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
|
||||
'{tab} q w e r t y u i o p [ ] \\',
|
||||
'{lock} a s d f g h j k l ; \' {enter}',
|
||||
'{shift} z x c v b n m , . / {shift}',
|
||||
'.com @ {space}'
|
||||
],
|
||||
'shift': [
|
||||
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
|
||||
'{tab} Q W E R T Y U I O P { } |',
|
||||
'{lock} A S D F G H J K L : " {enter}',
|
||||
'{shift} Z X C V B N M < > ? {shift}',
|
||||
'.com @ {space}'
|
||||
]
|
||||
}}
|
||||
theme={"hg-layout-default hg-theme-default"}
|
||||
debug={true}
|
||||
display={{
|
||||
'{bksp}': 'delete',
|
||||
'{enter}': '< enter',
|
||||
'{shift}': 'shift',
|
||||
'{s}': 'shift',
|
||||
'{tab}': 'tab',
|
||||
'{lock}': 'caps',
|
||||
'{accept}': 'Submit',
|
||||
'{space}': ' ',
|
||||
'{//}': ' '
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default App;
|
||||
+3
-13
@@ -1,15 +1,5 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
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>
|
||||
`);
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
|
||||
+95
-122
@@ -1,37 +1,53 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Keyboard.css';
|
||||
|
||||
// Services
|
||||
import KeyboardLayout from '../services/KeyboardLayout';
|
||||
import Utilities from '../services/Utilities';
|
||||
|
||||
class SimpleKeyboard {
|
||||
constructor(...params){
|
||||
let keyboardDOMQuery = typeof params[0] === "string" ? params[0] : '.simple-keyboard';
|
||||
let options = typeof params[0] === "object" ? params[0] : params[1];
|
||||
class App extends Component {
|
||||
state = {
|
||||
input: ''
|
||||
}
|
||||
|
||||
if(!options)
|
||||
options = {};
|
||||
componentWillReceiveProps = (nextProps) => {
|
||||
if(
|
||||
this.props !== nextProps
|
||||
){
|
||||
this.setState({
|
||||
layoutName: nextProps.layoutName,
|
||||
layout: nextProps.layout,
|
||||
themeClass: nextProps.theme
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Processing options
|
||||
*/
|
||||
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";
|
||||
clearInput = () => {
|
||||
this.setState({
|
||||
input: ''
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Rendering keyboard
|
||||
*/
|
||||
if(this.keyboardDOM)
|
||||
this.render();
|
||||
else
|
||||
console.error(`"${keyboardDOMQuery}" was not found in the DOM.`);
|
||||
getInput = () => {
|
||||
return this.state.input;
|
||||
}
|
||||
|
||||
setInput = input => {
|
||||
return new Promise(resolve => {
|
||||
this.setState({
|
||||
input: input
|
||||
}, () => {
|
||||
resolve(input);
|
||||
});
|
||||
})
|
||||
.catch(reason => {
|
||||
console.warn(reason);
|
||||
});
|
||||
}
|
||||
|
||||
handleButtonClicked = (button) => {
|
||||
let debug = this.options.debug;
|
||||
let debug = this.props.debug;
|
||||
|
||||
/**
|
||||
* Ignoring placeholder buttons
|
||||
@@ -42,29 +58,32 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Calling onKeyPress
|
||||
*/
|
||||
if(typeof this.options.onKeyPress === "function")
|
||||
this.options.onKeyPress(button);
|
||||
if(typeof this.props.onKeyPress === "function")
|
||||
this.props.onKeyPress(button);
|
||||
|
||||
/**
|
||||
* Updating input
|
||||
*/
|
||||
let options = {
|
||||
newLineOnEnter: (this.options.newLineOnEnter === true)
|
||||
newLineOnEnter: (this.props.newLineOnEnter === true)
|
||||
}
|
||||
|
||||
let updatedInput = Utilities.getUpdatedInput(button, this.input, options);
|
||||
let updatedInput = Utilities.getUpdatedInput(button, this.state.input, options);
|
||||
|
||||
if(this.input !== updatedInput){
|
||||
this.input = updatedInput;
|
||||
|
||||
if(debug)
|
||||
console.log('Input changed:', this.input);
|
||||
|
||||
/**
|
||||
* Calling onChange
|
||||
*/
|
||||
if(typeof this.options.onChange === "function")
|
||||
this.options.onChange(this.input);
|
||||
if(this.state.input !== updatedInput){
|
||||
this.setState({
|
||||
input: updatedInput
|
||||
}, () => {
|
||||
if(debug){
|
||||
console.log('Input changed:', this.state.input);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calling onChange
|
||||
*/
|
||||
if(typeof this.props.onChange === "function")
|
||||
this.props.onChange(this.state.input);
|
||||
});
|
||||
}
|
||||
|
||||
if(debug){
|
||||
@@ -72,94 +91,48 @@ class SimpleKeyboard {
|
||||
}
|
||||
}
|
||||
|
||||
clearInput = () => {
|
||||
this.input = '';
|
||||
}
|
||||
render() {
|
||||
let layoutName = this.props.layoutName || "default";
|
||||
let layout = this.props.layout || KeyboardLayout.getLayout(layoutName);
|
||||
let themeClass = this.props.theme || "hg-theme-default";
|
||||
let layoutClass = this.props.layout ? "hg-layout-custom" : `hg-layout-${layoutName}`;
|
||||
|
||||
getInput = () => {
|
||||
return this.input;
|
||||
}
|
||||
return (
|
||||
<div className={`simple-keyboard ${themeClass} ${layoutClass}`}>
|
||||
{layout[layoutName].map((row, index) => {
|
||||
let rowArray = row.split(' ');
|
||||
|
||||
setInput = input => {
|
||||
this.input = input;
|
||||
}
|
||||
return (
|
||||
<div key={`hg-row-${index}`} className="hg-row">
|
||||
{rowArray.map((button, index) => {
|
||||
let fctBtnClass = Utilities.getButtonClass(button);
|
||||
let buttonDisplayName = Utilities.getButtonDisplayName(button, this.props.display);
|
||||
|
||||
setOptions = option => {
|
||||
option = option || {};
|
||||
this.options = Object.assign(this.options, option);
|
||||
this.render();
|
||||
}
|
||||
|
||||
clear = () => {
|
||||
this.keyboardDOM.innerHTML = '';
|
||||
}
|
||||
|
||||
render = () => {
|
||||
/**
|
||||
* Clear keyboard
|
||||
*/
|
||||
this.clear();
|
||||
|
||||
let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
|
||||
let layout = this.options.layout || KeyboardLayout.getLayout(this.options.layoutName);
|
||||
|
||||
/**
|
||||
* Adding themeClass, layoutClass to keyboardDOM
|
||||
*/
|
||||
this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass}`;
|
||||
|
||||
/**
|
||||
* Iterating through each row
|
||||
*/
|
||||
layout[this.options.layoutName].forEach((row, index) => {
|
||||
let rowArray = row.split(' ');
|
||||
|
||||
/**
|
||||
* Creating empty row
|
||||
*/
|
||||
var rowDOM = document.createElement('div');
|
||||
rowDOM.className += "hg-row";
|
||||
|
||||
/**
|
||||
* Iterating through each button in row
|
||||
*/
|
||||
rowArray.forEach((button, index) => {
|
||||
let fctBtnClass = Utilities.getButtonClass(button);
|
||||
let buttonDisplayName = Utilities.getButtonDisplayName(button, this.options.display);
|
||||
|
||||
/**
|
||||
* Creating button
|
||||
*/
|
||||
var buttonDOM = document.createElement('div');
|
||||
buttonDOM.className += `hg-button ${fctBtnClass}`;
|
||||
buttonDOM.onclick = () => this.handleButtonClicked(button);
|
||||
|
||||
/**
|
||||
* Adding button label to button
|
||||
*/
|
||||
var buttonSpanDOM = document.createElement('span');
|
||||
buttonSpanDOM.innerHTML = buttonDisplayName;
|
||||
buttonDOM.appendChild(buttonSpanDOM);
|
||||
|
||||
/**
|
||||
* Appending button to row
|
||||
*/
|
||||
rowDOM.appendChild(buttonDOM);
|
||||
|
||||
/**
|
||||
* Calling onInit
|
||||
*/
|
||||
if(typeof this.options.onInit === "function")
|
||||
this.options.onInit();
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* Appending row to keyboard
|
||||
*/
|
||||
this.keyboardDOM.appendChild(rowDOM);
|
||||
});
|
||||
return (
|
||||
<div
|
||||
key={`hg-button-${index}`}
|
||||
className={`hg-button ${fctBtnClass}`}
|
||||
onClick={() => this.handleButtonClicked(button)}
|
||||
><span>{buttonDisplayName}</span></div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SimpleKeyboard;
|
||||
App.propTypes = {
|
||||
layoutName: PropTypes.string,
|
||||
layout: PropTypes.object,
|
||||
theme: PropTypes.string,
|
||||
display: PropTypes.object,
|
||||
onChange: PropTypes.func,
|
||||
onKeyPress: PropTypes.func,
|
||||
debug: PropTypes.bool
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
+2
-2
@@ -1,2 +1,2 @@
|
||||
import SimpleKeyboard from './components/Keyboard';
|
||||
export default SimpleKeyboard;
|
||||
import Keyboard from './components/Keyboard';
|
||||
export default Keyboard;
|
||||
|
||||
Reference in New Issue
Block a user