1.0.0 stable release

Author: hodgef

README.md

@@ -3,4 +3,54 @@
 <a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-layouts-banner2.png" align="center"></a>
 > The multi-language keyboard layout kit for simple-keyboard.
 
-Currently in early development. Features can change or be removed without prior warning.
+## Installation
+
+### npm
+
+> Install simple-keyboard and simple-keyboard-layouts.
+
+`npm install simple-keyboard-layouts --save`
+
+### zip file (self-hosted)
+
+[Click here to download the latest release (zip format).](https://github.com/hodgef/simple-keyboard-layouts/zipball/master)
+
+> Want to use a CDN instead of self-host? Scroll down to the "Usage with CDN" instructions below.
+
+## Usage with npm
+
+
+````js
+import Keyboard from 'simple-keyboard';
+import 'simple-keyboard/build/css/index.css';
+
+/**
+ * Available layouts
+ * https://github.com/hodgef/simple-keyboard-layouts/tree/master/src/lib/layouts
+ */
+import layout from "simple-keyboard-layouts/build/layouts/japanese";
+
+let keyboard = new Keyboard({
+  onChange: input => onChange(input),
+  onKeyPress: button => onKeyPress(button),
+  layout: layout
+});
+
+function onChange(input){
+  document.querySelector(".input").value = input;
+  console.log("Input changed", input);
+}
+
+function onKeyPress(button){
+  console.log("Button pressed", button);
+}
+````
+
+### html
+
+````html
+<input class="input" />
+<div class="simple-keyboard"></div>
+````
+
+[![Edit simple-keyboard-layouts demo - npm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/pk9513441m)

build/layouts/arabic.js

@@ -9,6 +9,7 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const UglifyJS = require('uglify-es');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
@@ -59,7 +60,7 @@ module.exports = {
     path: paths.appBuild,
     filename: 'index.js',
     libraryTarget: 'umd',
-    library: 'SimpleKeyboard'
+    library: 'SimpleKeyboardLayouts'
   },
   resolve: {
     // This allows you to set a fallback for where Webpack should look for modules.
@@ -259,7 +260,16 @@ module.exports = {
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     new CopyWebpackPlugin([
-      { from: `${paths.appLayouts}`, to: paths.appLayoutsBuild },
+      {
+        from: `${paths.appLayouts}`,
+        to: paths.appLayoutsBuild,
+        transform(content, src) {
+          // @param content: Buffer
+          // @param src: String 
+          // @return Buffer
+          return Promise.resolve(Buffer.from(UglifyJS.minify(content.toString()).code, 'utf8'));
+        }
+      }
     ])
   ],
   // CRL: added externals block for library

build/layouts/chinese.js

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard-layouts",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "Layouts module for simple-keyboard",
   "main": "build/index.js",
   "scripts": {
@@ -13,11 +13,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/hodgef/simple-keyboard"
+    "url": "https://github.com/hodgef/simple-keyboard-layouts"
   },
   "author": "Francisco Hodge <[email protected]> (https://github.com/hodgef)",
   "bugs": {
-    "url": "https://github.com/hodgef/simple-keyboard/issues"
+    "url": "https://github.com/hodgef/simple-keyboard-layouts/issues"
   },
   "homepage": "https://franciscohodge.com/simple-keyboard",
   "keywords": [
@@ -30,7 +30,9 @@
     "component",
     "virtual-keyboard",
     "touchscreen",
-    "touch-screen"
+    "touch-screen",
+    "layout",
+    "keyboard-layout"
   ],
   "license": "MIT",
   "dependencies": {
@@ -76,7 +78,8 @@
     "webpack": "3.8.1",
     "webpack-dev-server": "2.9.4",
     "webpack-manifest-plugin": "1.3.2",
-    "whatwg-fetch": "2.0.3"
+    "whatwg-fetch": "2.0.3",
+    "uglify-es": "^3.3.9"
   },
   "jest": {
     "collectCoverageFrom": [

build/layouts/french.js

@@ -2,8 +2,11 @@ import Keyboard from 'simple-keyboard';
 import 'simple-keyboard/build/css/index.css';
 import './css/App.css';
 
-// Layout
-import jp from '../lib/layouts/japanese';
+/**
+ * Available layouts
+ * https://github.com/hodgef/simple-keyboard-layouts/tree/master/src/lib/layouts
+ */
+import layout from '../lib/layouts/arabic';
 
 class App {
   constructor(){
@@ -12,13 +15,13 @@ class App {
     this.layoutName = "default";
   }
 
-  onDOMLoaded = () => {
+  onDOMLoaded = async () => {
     this.keyboard = new Keyboard({
       debug: true,
       onChange: input => this.onChange(input),
       onKeyPress: button => this.onKeyPress(button),
       newLineOnEnter: true,
-      layout: jp
+      layout: layout
     });
 
     /**

build/layouts/german.js

@@ -1,7 +1,33 @@
-/**
- * This class is currently unused.
- * You can include your desired layouts from the ./layouts folder
- */
-class SimpleKeyboardLayouts {}
+import arabic from '../layouts/arabic';
+import chinese from'../layouts/chinese';
+import french from '../layouts/french';
+import german from '../layouts/german';
+import hindi from '../layouts/hindi';
+import japanese from '../layouts/japanese';
+import korean from '../layouts/korean';
+import russian from '../layouts/russian';
+import spanish from '../layouts/spanish';
+import thai from '../layouts/thai';
+
+class SimpleKeyboardLayouts {
+
+  get = async (lang) => {
+    const languages = {
+      arabic,
+      chinese,
+      french,
+      german,
+      hindi,
+      japanese,
+      korean,
+      russian,
+      spanish,
+      thai
+    };
+
+    return languages[lang];
+  }
+  
+}
 
 export default SimpleKeyboardLayouts;

build/layouts/hindi.js

@@ -1,4 +1,4 @@
-export default {
+const arabic = {
   'default' : [
     "\u0630 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
 		"{tab} \u0636 \u0635 \u062B \u0642 \u0641 \u063A \u0639 \u0647 \u062E \u062D \u062C \u062F \\",
@@ -13,4 +13,6 @@ export default {
 		"{shift} ~ \u0652 } { \u0644\u0622 \u0622 \u2019 , . \u061F {shift}",
     '.com @ {space}'
   ]
-}
+}
+
+export default arabic;

build/layouts/japanese.js

@@ -1,4 +1,4 @@
-export default {
+const chinese = {
   'default' : [
     "\u20AC \u3105 \u3109 \u02C7 \u02CB \u3113 \u02CA \u02D9 \u311A \u311E \u3122 \u3126 = {bksp}",
 		"{tab} \u3106 \u310A \u310D \u3110 \u3114 \u3117 \u3127 \u311B \u311F \u3123 [ ] \\",
@@ -13,4 +13,6 @@ export default {
 		'{shift} z x c v b n m , < > ? {shift}',
     '.com @ {space}'
   ]
-}
+}
+
+export default chinese;

build/layouts/korean.js

@@ -1,4 +1,4 @@
-export default {
+const french = {
   'default' : [
     "\u00B2 & \u00E9 \" ' ( - \u00E8 _ \u00E7 \u00E0 ) = {bksp}",
 		"{tab} a z e r t y u i o p ^ $",
@@ -13,4 +13,6 @@ export default {
 		"{shift} > W X C V B N ? . / \u00A7 {shift}",
     '.com @ {space}'
   ]
-}
+}
+
+export default french;

build/layouts/russian.js

@@ -1,4 +1,4 @@
-export default {
+const german = {
   'default' : [
     "^ 1 2 3 4 5 6 7 8 9 0 \u00DF \u00B4 {bksp}",
 		"{tab} q w e r t z u i o p \u00FC +",
@@ -13,4 +13,6 @@ export default {
 		"{shift} > Y X C V B N M ; : _ {shift}",
     '.com @ {space}'
   ]
-}
+}
+
+export default german;

build/layouts/spanish.js

@@ -1,4 +1,4 @@
-export default {
+const hindi = {
   'default' : [
     '` \u090D \u0945 \u094D\u0930 \u0930\u094D \u091C\u094D\u091E \u0924\u094D\u0930 \u0915\u094D\u0937 \u0936\u094D\u0930 \u096F \u0966 - \u0943 {bksp}',
 		'{tab} \u094C \u0948 \u093E \u0940 \u0942 \u092C \u0939 \u0917 \u0926 \u091C \u0921 \u093C \u0949 \\',
@@ -13,4 +13,6 @@ export default {
 		'{shift} "" \u0901 \u0923 \u0928 \u0935 \u0933 \u0936 \u0937 \u0964 \u095F {shift}',
     '.com @ {space}'
   ]
-}
+}
+
+export default hindi;

config/webpack.config.prod.js

@@ -1,4 +1,4 @@
-export default {
+const japanese = {
   'default' : [
     '\u308d \u306c \u3075 \u3042 \u3046 \u3048 \u304a \u3084 \u3086 \u3088 \u308f \u307b \u3078 {bksp}',
     '{tab} \u305f \u3066 \u3044 \u3059 \u304b \u3093 \u306a \u306b \u3089 \u305b \u309b \u309c \u3080',
@@ -13,4 +13,6 @@ export default {
     '{shift} \u3063 \u3055 \u305d \u3072 \u3053 \u307f \u3082 \u3001 \u3002 \u30fb {shift}',
     '.com @ {space}'
   ]
-}
+}
+
+export default japanese;