From 5c40dd31095cd5e5e288d956e550bd117e8493c0 Mon Sep 17 00:00:00 2001 From: Armno Date: Tue, 27 Nov 2018 19:57:08 +0700 Subject: [PATCH 1/8] WIP: create type definition file --- src/lib/@types/index.d.ts | 55 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/lib/@types/index.d.ts diff --git a/src/lib/@types/index.d.ts b/src/lib/@types/index.d.ts new file mode 100644 index 00000000..a8e2a205 --- /dev/null +++ b/src/lib/@types/index.d.ts @@ -0,0 +1,55 @@ +declare module 'simple-keyboard' { + class SimpleKeyboard { + constructor(selector: string, options: SimpleKeyboardOptions); + } + + interface SimpleKeyboardOptions { + /** + * Modify the keyboard layout. + */ + layout: any; + + /** + * Specifies which layout should be used. + */ + layoutName: string; + + /** + * Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”). + */ + display: any; + + /** + * By default, when you set the display property, you replace the default one. This setting merges them instead. + */ + mergeDisplay: boolean; + + /** + * A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space. + */ + theme: string; + + /** + * A prop to add your own css classes to one or several buttons. + */ + buttonTheme: any[]; + + /** + * Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input. + */ + debug: boolean; + + /** + * Specifies whether clicking the “ENTER” button will input a newline (\n) or not. + */ + newLineOnEnter: boolean; + + /** + * Specifies whether clicking the “TAB” button will input a tab character (\t) or not. + */ + tabCharOnTab: boolean; + } + + export default SimpleKeyboard; +} + From b5cbfa780b74f33b3d214989a1671c5a5aca48f2 Mon Sep 17 00:00:00 2001 From: Armno Date: Tue, 27 Nov 2018 23:43:20 +0700 Subject: [PATCH 2/8] add public methods type definitions --- src/lib/@types/index.d.ts | 116 +++++++++++++++++++++++++++++++++++++- 1 file changed, 114 insertions(+), 2 deletions(-) diff --git a/src/lib/@types/index.d.ts b/src/lib/@types/index.d.ts index a8e2a205..0cc55e51 100644 --- a/src/lib/@types/index.d.ts +++ b/src/lib/@types/index.d.ts @@ -1,6 +1,57 @@ -declare module 'simple-keyboard' { +declare module "simple-keyboard" { class SimpleKeyboard { constructor(selector: string, options: SimpleKeyboardOptions); + + /** + * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button. + * @param {string} buttons List of buttons to select (separated by a space). + * @param {string} className Classes to give to the selected buttons (separated by space). + */ + addButtonTheme(buttons: string, className: string): void; + + /** + * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme. + * @param {string} buttons List of buttons to select (separated by a space). + * @param {string} className Classes to give to the selected buttons (separated by space). + */ + removeButtonTheme(buttons: string, className: string): void; + + /** + * Clear the keyboard’s input. + * @param {string} [inputName] optional - the internal input to select + */ + clearInput(inputName: string): void; + + /** + * Get the keyboard’s input (You can also get it from the onChange prop). + * @param {string} [inputName] optional - the internal input to select + */ + getInput(inputName: string): void; + + /** + * Set the keyboard’s input. + * @param {string} input the input value + * @param {string} inputName optional - the internal input to select + */ + setInput(input: string, inputName: string): void; + + /** + * Set new option or modify existing ones after initialization. + * @param {SimpleKeyboardOptions} option The option to set + */ + setOptions(options: SimpleKeyboardOptions): void; + + /** + * Send a command to all simple-keyboard instances at once (if you have multiple instances). + * @param {function(instance: object, key: string)} callback Function to run on every instance + */ + dispatch(callback: (instance: any, key: string) => void): void; + + /** + * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned. + * @param {string} button The button layout name to select + */ + getButtonElement(button: string); } interface SimpleKeyboardOptions { @@ -48,8 +99,69 @@ declare module 'simple-keyboard' { * Specifies whether clicking the “TAB” button will input a tab character (\t) or not. */ tabCharOnTab: boolean; + + /** + * Allows you to use a single simple-keyboard instance for several inputs. + */ + inputName: string; + + /** + * number: Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute. + * any: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute. + */ + // @TODO: specify type for `any`; + maxLength: number | any; + + /** + * When set to true, this option synchronizes the internal input of every simple-keyboard instance. + */ + syncInstanceInputs: boolean; + + /** + * Enable highlighting of keys pressed on physical keyboard. + */ + physicalKeyboardHighlight: boolean; + + /** + * Calling preventDefault for the mousedown events keeps the focus on the input. + */ + preventMouseDownDefault: boolean; + + /** + * Define the text color that the physical keyboard highlighted key should have. + */ + physicalKeyboardHighlightTextColor: string; + + /** + * Define the background color that the physical keyboard highlighted key should have. + */ + physicalKeyboardHighlightBgColor: string; + + /** + * Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”). + */ + onKeyPress: (button: string) => string; + + /** + * Executes the callback function on input change. Returns the current input’s string. + */ + onChange: (input: string) => string; + + /** + * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts). + */ + onRender: () => any; + + /** + * Executes the callback function once simple-keyboard is rendered for the first time (on initialization). + */ + onInit: () => any; + + /** + * Executes the callback function on input change. Returns the input object with all defined inputs. + */ + onChangeAll: (inputs: any) => any; } export default SimpleKeyboard; } - From 10380099e6a3fd793feea68164d49f48d9875bda Mon Sep 17 00:00:00 2001 From: Armno Date: Wed, 28 Nov 2018 11:20:32 +0700 Subject: [PATCH 3/8] add more types --- src/lib/@types/index.d.ts | 255 ++++++++++++++++++++------------------ 1 file changed, 135 insertions(+), 120 deletions(-) diff --git a/src/lib/@types/index.d.ts b/src/lib/@types/index.d.ts index 0cc55e51..3e4dbe24 100644 --- a/src/lib/@types/index.d.ts +++ b/src/lib/@types/index.d.ts @@ -1,6 +1,129 @@ -declare module "simple-keyboard" { - class SimpleKeyboard { - constructor(selector: string, options: SimpleKeyboardOptions); +declare module 'simple-keyboard' { + interface KeyboardLayoutObject { + default: string[]; + shift?: string[]; + } + + interface KeyboardButtonTheme { + class: string; + buttons: string; + } + + export interface KeyboardOptions { + /** + * Modify the keyboard layout. + */ + layout?: KeyboardLayoutObject; + + /** + * Specifies which layout should be used. + */ + layoutName?: string; + + /** + * Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: `backspace`). + */ + display?: { [button: string]: string }; + + /** + * By default, when you set the display property, you replace the default one. This setting merges them instead. + */ + mergeDisplay?: boolean; + + /** + * A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space. + */ + theme?: string; + + /** + * A prop to add your own css classes to one or several buttons. + */ + buttonTheme?: KeyboardButtonTheme[]; + + /** + * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input. + */ + debug?: boolean; + + /** + * Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not. + */ + newLineOnEnter?: boolean; + + /** + * Specifies whether clicking the "TAB" button will input a tab character (`\t`) or not. + */ + tabCharOnTab?: boolean; + + /** + * Allows you to use a single simple-keyboard instance for several inputs. + */ + inputName?: string; + + /** + * `number`: Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute. + * + * `{ [inputName: string]: number }`: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute. + */ + maxLength?: + | number + | { + [inputName: string]: number; + }; + + /** + * When set to true, this option synchronizes the internal input of every simple-keyboard instance. + */ + syncInstanceInputs?: boolean; + + /** + * Enable highlighting of keys pressed on physical keyboard. + */ + physicalKeyboardHighlight?: boolean; + + /** + * Calling preventDefault for the mousedown events keeps the focus on the input. + */ + preventMouseDownDefault?: boolean; + + /** + * Define the text color that the physical keyboard highlighted key should have. + */ + physicalKeyboardHighlightTextColor?: string; + + /** + * Define the background color that the physical keyboard highlighted key should have. + */ + physicalKeyboardHighlightBgColor?: string; + + /** + * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}"). + */ + onKeyPress?: (button: string) => string; + + /** + * Executes the callback function on input change. Returns the current input's string. + */ + onChange?: (input: string) => string; + + /** + * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts). + */ + onRender?: () => void; + + /** + * Executes the callback function once simple-keyboard is rendered for the first time (on initialization). + */ + onInit?: () => void; + + /** + * Executes the callback function on input change. Returns the input object with all defined inputs. + */ + onChangeAll?: (inputs: any) => any; + } + + export class Keyboard { + constructor(selector: string, options: KeyboardOptions); /** * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button. @@ -17,29 +140,30 @@ declare module "simple-keyboard" { removeButtonTheme(buttons: string, className: string): void; /** - * Clear the keyboard’s input. + * Clear the keyboard's input. + * * @param {string} [inputName] optional - the internal input to select */ - clearInput(inputName: string): void; + clearInput(inputName?: string): void; /** * Get the keyboard’s input (You can also get it from the onChange prop). * @param {string} [inputName] optional - the internal input to select */ - getInput(inputName: string): void; + getInput(inputName?: string): void; /** * Set the keyboard’s input. * @param {string} input the input value * @param {string} inputName optional - the internal input to select */ - setInput(input: string, inputName: string): void; + setInput(input: string, inputName?: string): void; /** * Set new option or modify existing ones after initialization. - * @param {SimpleKeyboardOptions} option The option to set + * @param {KeyboardOptions} option The option to set */ - setOptions(options: SimpleKeyboardOptions): void; + setOptions(options: KeyboardOptions): void; /** * Send a command to all simple-keyboard instances at once (if you have multiple instances). @@ -51,117 +175,8 @@ declare module "simple-keyboard" { * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned. * @param {string} button The button layout name to select */ - getButtonElement(button: string); + getButtonElement(button: string): void; } - interface SimpleKeyboardOptions { - /** - * Modify the keyboard layout. - */ - layout: any; - - /** - * Specifies which layout should be used. - */ - layoutName: string; - - /** - * Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”). - */ - display: any; - - /** - * By default, when you set the display property, you replace the default one. This setting merges them instead. - */ - mergeDisplay: boolean; - - /** - * A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space. - */ - theme: string; - - /** - * A prop to add your own css classes to one or several buttons. - */ - buttonTheme: any[]; - - /** - * Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input. - */ - debug: boolean; - - /** - * Specifies whether clicking the “ENTER” button will input a newline (\n) or not. - */ - newLineOnEnter: boolean; - - /** - * Specifies whether clicking the “TAB” button will input a tab character (\t) or not. - */ - tabCharOnTab: boolean; - - /** - * Allows you to use a single simple-keyboard instance for several inputs. - */ - inputName: string; - - /** - * number: Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute. - * any: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute. - */ - // @TODO: specify type for `any`; - maxLength: number | any; - - /** - * When set to true, this option synchronizes the internal input of every simple-keyboard instance. - */ - syncInstanceInputs: boolean; - - /** - * Enable highlighting of keys pressed on physical keyboard. - */ - physicalKeyboardHighlight: boolean; - - /** - * Calling preventDefault for the mousedown events keeps the focus on the input. - */ - preventMouseDownDefault: boolean; - - /** - * Define the text color that the physical keyboard highlighted key should have. - */ - physicalKeyboardHighlightTextColor: string; - - /** - * Define the background color that the physical keyboard highlighted key should have. - */ - physicalKeyboardHighlightBgColor: string; - - /** - * Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”). - */ - onKeyPress: (button: string) => string; - - /** - * Executes the callback function on input change. Returns the current input’s string. - */ - onChange: (input: string) => string; - - /** - * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts). - */ - onRender: () => any; - - /** - * Executes the callback function once simple-keyboard is rendered for the first time (on initialization). - */ - onInit: () => any; - - /** - * Executes the callback function on input change. Returns the input object with all defined inputs. - */ - onChangeAll: (inputs: any) => any; - } - - export default SimpleKeyboard; + export default Keyboard; } From ede2ce04b1cf4b3bb5b70fff842345d4d4d45ca9 Mon Sep 17 00:00:00 2001 From: Armno Date: Wed, 28 Nov 2018 11:56:00 +0700 Subject: [PATCH 4/8] add overloaded constructor type definition --- src/lib/@types/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/@types/index.d.ts b/src/lib/@types/index.d.ts index 3e4dbe24..948b4d84 100644 --- a/src/lib/@types/index.d.ts +++ b/src/lib/@types/index.d.ts @@ -124,6 +124,7 @@ declare module 'simple-keyboard' { export class Keyboard { constructor(selector: string, options: KeyboardOptions); + constructor(options: KeyboardOptions); /** * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button. From ff037ad5b757393fd74a21e57913acb9db09bd90 Mon Sep 17 00:00:00 2001 From: Armno Date: Wed, 28 Nov 2018 12:43:13 +0700 Subject: [PATCH 5/8] remove exporting KeyboardOptions interface --- src/lib/@types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/@types/index.d.ts b/src/lib/@types/index.d.ts index 948b4d84..71b347b6 100644 --- a/src/lib/@types/index.d.ts +++ b/src/lib/@types/index.d.ts @@ -9,7 +9,7 @@ declare module 'simple-keyboard' { buttons: string; } - export interface KeyboardOptions { + interface KeyboardOptions { /** * Modify the keyboard layout. */ From b3b482e86484e3e1746ec3145100fa9e19d59f09 Mon Sep 17 00:00:00 2001 From: Francisco Hodge Date: Wed, 28 Nov 2018 08:52:27 -0500 Subject: [PATCH 6/8] Copy index.d.ts to build folder on build --- config/paths.js | 1 + config/webpack.config.prod.js | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/config/paths.js b/config/paths.js index 7605a4d4..7b5f7cc0 100644 --- a/config/paths.js +++ b/config/paths.js @@ -79,6 +79,7 @@ module.exports = { appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appSrcLib: resolveApp('src/lib'), + appSrcLibTypes: resolveApp('src/lib/@types'), appSrcDemo: resolveApp('src/demo'), appTsConfig: resolveApp('tsconfig.json'), yarnLockFile: resolveApp('yarn.lock'), diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 703bbdb9..3804cb40 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -21,6 +21,7 @@ const getClientEnvironment = require('./env'); const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt'); const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); +const CopyWebpackPlugin = require('copy-webpack-plugin'); const getPackageJson = require('./getPackageJson'); @@ -510,6 +511,12 @@ module.exports = { // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // You can remove this if you don't use Moment.js: new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + new CopyWebpackPlugin([ + { + from: `${paths.appSrcLibTypes}`, + to: paths.appLayoutsBuild + } + ]), // Generate a service worker script that will precache, and keep up to date, // the HTML & assets that are part of the Webpack build. /*new WorkboxWebpackPlugin.GenerateSW({ From e60574d56d19be5bab194dc20aed56c7dc76ad28 Mon Sep 17 00:00:00 2001 From: Francisco Hodge Date: Wed, 28 Nov 2018 08:52:58 -0500 Subject: [PATCH 7/8] Build update --- build/css/index.css | 2 +- build/css/index.css.map | 2 +- build/index.d.ts | 183 ++++++++++++++++++++++++++++++++++++++++ build/index.js | 2 +- 4 files changed, 186 insertions(+), 3 deletions(-) create mode 100644 build/index.d.ts diff --git a/build/css/index.css b/build/css/index.css index 305c478e..1387b77c 100644 --- a/build/css/index.css +++ b/build/css/index.css @@ -1,6 +1,6 @@ /*! * - * simple-keyboard v2.11.5 + * simple-keyboard v2.11.6 * https://github.com/hodgef/simple-keyboard * * Copyright (c) Francisco Hodge (https://github.com/hodgef) diff --git a/build/css/index.css.map b/build/css/index.css.map index ff84f328..aac95d2d 100644 --- a/build/css/index.css.map +++ b/build/css/index.css.map @@ -1 +1 @@ -{"version":3,"sources":["index.css","X:/Dev/simple-keyboard/src/lib/components/X:/Dev/simple-keyboard/src/lib/components/Keyboard.css"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG,ACVH,UACE,SAAU,AACV,SAAW,CACZ,AAED,iBACE,6GAA4H,AAC5H,WAAY,AACZ,yBAAkB,AAAlB,sBAAkB,AAAlB,qBAAkB,AAAlB,iBAAkB,AAClB,sBAAuB,AACvB,gBAAiB,AACjB,yBAA2B,CAC5B,AAED,yBACE,YAAc,CACf,AAED,0CACE,iBAAmB,CACpB,AAED,qDACE,gBAAkB,CACnB,AAED,4BACE,qBAAsB,AACtB,YAAa,AACb,cAAgB,CACjB,AAED,gBACE,eAAiB,CAClB,AAKD,kCACE,gCAAkC,AAClC,YAAa,AACb,iBAAmB,CACnB,AAEF,6CACE,uCAA6C,AAC7C,YAAa,AACb,kBAAmB,AACnB,sBAAuB,AACvB,YAAa,AACb,gBAAkB,AAClB,gCAAiC,AACjC,eAAgB,AAChB,aAAc,AACd,mBAAoB,AACpB,sBAAwB,CACxB,AAED,oDACC,kBAAoB,CACpB,AAEF,+DACE,YAAa,AACb,YAAa,AACb,mBAAoB,AACpB,aAAc,AACd,sBAAwB,CACzB,AAMD,oIACE,WAAa,CACd,AAED,+DACE,WAAa,CACd,AAED,2DACE,cAAgB,CACjB,AAED,yEACE,cAAgB,CACjB,AAED,+DACE,6BAAkC,AAClC,UAAa,CACd,AAED,+EACE,cAAgB,CACjB,AAED,4EACE,cAAgB,CDejB","file":"index.css","sourcesContent":["/*!\n * \n * simple-keyboard v2.11.5\n * https://github.com/hodgef/simple-keyboard\n * \n * Copyright (c) Francisco Hodge (https://github.com/hodgef)\n * \n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n * \n */\nbody, 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 box-sizing: border-box;\r\n overflow: hidden;\r\n touch-action: manipulation;\r\n}\r\n\r\n.simple-keyboard .hg-row {\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 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 box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n height: 40px;\r\n border-radius: 5px;\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: flex;\r\n align-items: 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 align-items: center;\r\n display: flex;\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}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\".com\"] {\r\n max-width: 82px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\"@\"] {\r\n max-width: 60px;\r\n}\n","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 user-select: none;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n touch-action: manipulation;\r\n}\r\n\r\n.simple-keyboard .hg-row {\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 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 box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n height: 40px;\r\n border-radius: 5px;\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: flex;\r\n align-items: 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 align-items: center;\r\n display: flex;\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}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\".com\"] {\r\n max-width: 82px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\"@\"] {\r\n max-width: 60px;\r\n}"]} \ No newline at end of file +{"version":3,"sources":["index.css","C:/Users/FRAHO/workspace/_tests/simple-keyboard/src/lib/components/C:/Users/FRAHO/workspace/_tests/simple-keyboard/src/lib/components/Keyboard.css"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG,ACVH,UACE,SAAU,AACV,SAAW,CACZ,AAED,iBACE,6GAA4H,AAC5H,WAAY,AACZ,yBAAkB,AAAlB,sBAAkB,AAAlB,qBAAkB,AAAlB,iBAAkB,AAClB,sBAAuB,AACvB,gBAAiB,AACjB,yBAA2B,CAC5B,AAED,yBACE,YAAc,CACf,AAED,0CACE,iBAAmB,CACpB,AAED,qDACE,gBAAkB,CACnB,AAED,4BACE,qBAAsB,AACtB,YAAa,AACb,cAAgB,CACjB,AAED,gBACE,eAAiB,CAClB,AAKD,kCACE,gCAAkC,AAClC,YAAa,AACb,iBAAmB,CACnB,AAEF,6CACE,uCAA6C,AAC7C,YAAa,AACb,kBAAmB,AACnB,sBAAuB,AACvB,YAAa,AACb,gBAAkB,AAClB,gCAAiC,AACjC,eAAgB,AAChB,aAAc,AACd,mBAAoB,AACpB,sBAAwB,CACxB,AAED,oDACC,kBAAoB,CACpB,AAEF,+DACE,YAAa,AACb,YAAa,AACb,mBAAoB,AACpB,aAAc,AACd,sBAAwB,CACzB,AAMD,oIACE,WAAa,CACd,AAED,+DACE,WAAa,CACd,AAED,2DACE,cAAgB,CACjB,AAED,yEACE,cAAgB,CACjB,AAED,+DACE,6BAAkC,AAClC,UAAa,CACd,AAED,+EACE,cAAgB,CACjB,AAED,4EACE,cAAgB,CDejB","file":"index.css","sourcesContent":["/*!\n * \n * simple-keyboard v2.11.6\n * https://github.com/hodgef/simple-keyboard\n * \n * Copyright (c) Francisco Hodge (https://github.com/hodgef)\n * \n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n * \n */\nbody, 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 box-sizing: border-box;\r\n overflow: hidden;\r\n touch-action: manipulation;\r\n}\r\n\r\n.simple-keyboard .hg-row {\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 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 box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n height: 40px;\r\n border-radius: 5px;\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: flex;\r\n align-items: 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 align-items: center;\r\n display: flex;\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}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\".com\"] {\r\n max-width: 82px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\"@\"] {\r\n max-width: 60px;\r\n}\n","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 user-select: none;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n touch-action: manipulation;\r\n}\r\n\r\n.simple-keyboard .hg-row {\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 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 box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n height: 40px;\r\n border-radius: 5px;\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: flex;\r\n align-items: 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 align-items: center;\r\n display: flex;\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}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\".com\"] {\r\n max-width: 82px;\r\n}\r\n\r\n.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=\"@\"] {\r\n max-width: 60px;\r\n}"]} \ No newline at end of file diff --git a/build/index.d.ts b/build/index.d.ts new file mode 100644 index 00000000..71b347b6 --- /dev/null +++ b/build/index.d.ts @@ -0,0 +1,183 @@ +declare module 'simple-keyboard' { + interface KeyboardLayoutObject { + default: string[]; + shift?: string[]; + } + + interface KeyboardButtonTheme { + class: string; + buttons: string; + } + + interface KeyboardOptions { + /** + * Modify the keyboard layout. + */ + layout?: KeyboardLayoutObject; + + /** + * Specifies which layout should be used. + */ + layoutName?: string; + + /** + * Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: `backspace`). + */ + display?: { [button: string]: string }; + + /** + * By default, when you set the display property, you replace the default one. This setting merges them instead. + */ + mergeDisplay?: boolean; + + /** + * A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space. + */ + theme?: string; + + /** + * A prop to add your own css classes to one or several buttons. + */ + buttonTheme?: KeyboardButtonTheme[]; + + /** + * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input. + */ + debug?: boolean; + + /** + * Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not. + */ + newLineOnEnter?: boolean; + + /** + * Specifies whether clicking the "TAB" button will input a tab character (`\t`) or not. + */ + tabCharOnTab?: boolean; + + /** + * Allows you to use a single simple-keyboard instance for several inputs. + */ + inputName?: string; + + /** + * `number`: Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute. + * + * `{ [inputName: string]: number }`: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute. + */ + maxLength?: + | number + | { + [inputName: string]: number; + }; + + /** + * When set to true, this option synchronizes the internal input of every simple-keyboard instance. + */ + syncInstanceInputs?: boolean; + + /** + * Enable highlighting of keys pressed on physical keyboard. + */ + physicalKeyboardHighlight?: boolean; + + /** + * Calling preventDefault for the mousedown events keeps the focus on the input. + */ + preventMouseDownDefault?: boolean; + + /** + * Define the text color that the physical keyboard highlighted key should have. + */ + physicalKeyboardHighlightTextColor?: string; + + /** + * Define the background color that the physical keyboard highlighted key should have. + */ + physicalKeyboardHighlightBgColor?: string; + + /** + * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}"). + */ + onKeyPress?: (button: string) => string; + + /** + * Executes the callback function on input change. Returns the current input's string. + */ + onChange?: (input: string) => string; + + /** + * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts). + */ + onRender?: () => void; + + /** + * Executes the callback function once simple-keyboard is rendered for the first time (on initialization). + */ + onInit?: () => void; + + /** + * Executes the callback function on input change. Returns the input object with all defined inputs. + */ + onChangeAll?: (inputs: any) => any; + } + + export class Keyboard { + constructor(selector: string, options: KeyboardOptions); + constructor(options: KeyboardOptions); + + /** + * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button. + * @param {string} buttons List of buttons to select (separated by a space). + * @param {string} className Classes to give to the selected buttons (separated by space). + */ + addButtonTheme(buttons: string, className: string): void; + + /** + * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme. + * @param {string} buttons List of buttons to select (separated by a space). + * @param {string} className Classes to give to the selected buttons (separated by space). + */ + removeButtonTheme(buttons: string, className: string): void; + + /** + * Clear the keyboard's input. + * + * @param {string} [inputName] optional - the internal input to select + */ + clearInput(inputName?: string): void; + + /** + * Get the keyboard’s input (You can also get it from the onChange prop). + * @param {string} [inputName] optional - the internal input to select + */ + getInput(inputName?: string): void; + + /** + * Set the keyboard’s input. + * @param {string} input the input value + * @param {string} inputName optional - the internal input to select + */ + setInput(input: string, inputName?: string): void; + + /** + * Set new option or modify existing ones after initialization. + * @param {KeyboardOptions} option The option to set + */ + setOptions(options: KeyboardOptions): void; + + /** + * Send a command to all simple-keyboard instances at once (if you have multiple instances). + * @param {function(instance: object, key: string)} callback Function to run on every instance + */ + dispatch(callback: (instance: any, key: string) => void): void; + + /** + * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned. + * @param {string} button The button layout name to select + */ + getButtonElement(button: string): void; + } + + export default Keyboard; +} diff --git a/build/index.js b/build/index.js index 6b357ecb..1c6133be 100644 --- a/build/index.js +++ b/build/index.js @@ -1,6 +1,6 @@ /*! * - * simple-keyboard v2.11.5 + * simple-keyboard v2.11.6 * https://github.com/hodgef/simple-keyboard * * Copyright (c) Francisco Hodge (https://github.com/hodgef) From 251af057d86bee08e673adb65c72a1e3b220c66e Mon Sep 17 00:00:00 2001 From: Francisco Hodge Date: Wed, 28 Nov 2018 08:53:06 -0500 Subject: [PATCH 8/8] npm update --- package-lock.json | 125 +++++++++++++++++++++++++++++++++++++++++++++- package.json | 4 +- 2 files changed, 127 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index d9b7f0d4..1c0ea6da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "simple-keyboard", - "version": "2.11.2", + "version": "2.11.6", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -3671,6 +3671,129 @@ "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=", "dev": true }, + "copy-webpack-plugin": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.6.0.tgz", + "integrity": "sha512-Y+SQCF+0NoWQryez2zXn5J5knmr9z/9qSQt7fbL78u83rxmigOy8X5+BFn8CFSuX+nKT8gpYwJX68ekqtQt6ZA==", + "dev": true, + "requires": { + "cacache": "^10.0.4", + "find-cache-dir": "^1.0.0", + "globby": "^7.1.1", + "is-glob": "^4.0.0", + "loader-utils": "^1.1.0", + "minimatch": "^3.0.4", + "p-limit": "^1.0.0", + "serialize-javascript": "^1.4.0" + }, + "dependencies": { + "cacache": { + "version": "10.0.4", + "resolved": "http://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz", + "integrity": "sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==", + "dev": true, + "requires": { + "bluebird": "^3.5.1", + "chownr": "^1.0.1", + "glob": "^7.1.2", + "graceful-fs": "^4.1.11", + "lru-cache": "^4.1.1", + "mississippi": "^2.0.0", + "mkdirp": "^0.5.1", + "move-concurrently": "^1.0.1", + "promise-inflight": "^1.0.1", + "rimraf": "^2.6.2", + "ssri": "^5.2.4", + "unique-filename": "^1.1.0", + "y18n": "^4.0.0" + } + }, + "globby": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/globby/-/globby-7.1.1.tgz", + "integrity": "sha1-+yzP+UAfhgCUXfral0QMypcrhoA=", + "dev": true, + "requires": { + "array-union": "^1.0.1", + "dir-glob": "^2.0.0", + "glob": "^7.1.2", + "ignore": "^3.3.5", + "pify": "^3.0.0", + "slash": "^1.0.0" + } + }, + "ignore": { + "version": "3.3.10", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz", + "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==", + "dev": true + }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", + "dev": true + }, + "is-glob": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz", + "integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=", + "dev": true, + "requires": { + "is-extglob": "^2.1.1" + } + }, + "mississippi": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-2.0.0.tgz", + "integrity": "sha512-zHo8v+otD1J10j/tC+VNoGK9keCuByhKovAvdn74dmxJl9+mWHnx6EMsDN4lgRoMI/eYo2nchAxniIbUPb5onw==", + "dev": true, + "requires": { + "concat-stream": "^1.5.0", + "duplexify": "^3.4.2", + "end-of-stream": "^1.1.0", + "flush-write-stream": "^1.0.0", + "from2": "^2.1.0", + "parallel-transform": "^1.1.0", + "pump": "^2.0.1", + "pumpify": "^1.3.3", + "stream-each": "^1.1.0", + "through2": "^2.0.0" + } + }, + "pify": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", + "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", + "dev": true + }, + "pump": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz", + "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==", + "dev": true, + "requires": { + "end-of-stream": "^1.1.0", + "once": "^1.3.1" + } + }, + "ssri": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz", + "integrity": "sha512-XRSIPqLij52MtgoQavH/x/dU1qVKtWUAAZeOHsR9c2Ddi4XerFy3mc1alf+dLJKl9EUIm/Ht+EowFkTUOA6GAQ==", + "dev": true, + "requires": { + "safe-buffer": "^5.1.1" + } + }, + "y18n": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", + "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", + "dev": true + } + } + }, "core-js": { "version": "2.5.7", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz", diff --git a/package.json b/package.json index 3a7a9192..6cc8c137 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,9 @@ { "name": "simple-keyboard", - "version": "2.11.5", + "version": "2.11.6", "description": "On-screen Javascript Virtual Keyboard", "main": "build/index.js", + "types": "build/index.d.ts", "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", @@ -52,6 +53,7 @@ "bfj": "6.1.1", "case-sensitive-paths-webpack-plugin": "2.1.2", "chalk": "2.4.1", + "copy-webpack-plugin": "^4.6.0", "css-loader": "1.0.1", "dotenv": "6.1.0", "dotenv-expand": "4.2.0",