github/simple-keyboard
github/simple-keyboard
3
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-02-22 01:29:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge

Browse Source
This commit is contained in:
Francisco Hodge 2019-08-17 15:39:38 -04:00
commit eab88f7de3
20 changed files with 4170 additions and 1390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
README.md
View File

@ -1,14 +1,34 @@
<div align="center"> <p>
<a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simplekeyboard-banner_B.png" align="center" width="100%"></a> <a href="https://simple-keyboard.com/demo">
<a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/skdemo-4x2.gif" align="center" width="100%"></a> <img alt="simple-keyboard: Javscript Virtual Keyboard" src="https://i.imgur.com/Po6659n.gif">
<blockquote>The easily customisable and responsive on-screen virtual keyboard for Javascript projects.</blockquote> </a>
<a href="https://www.npmjs.com/package/simple-keyboard" target="_blank"><img src="https://img.shields.io/npm/v/simple-keyboard.svg?style=flat" alt="npm version"></a>
<a href="https://travis-ci.org/hodgef/simple-keyboard" target="_blank"><img src="https://travis-ci.org/hodgef/simple-keyboard.svg?branch=master" alt="Build Status"></a> <a href="https://www.npmjs.com/package/simple-keyboard">
<img src="https://img.shields.io/david/hodgef/js-library-boilerplate.svg" /> <img src="https://badgen.net/npm/v/simple-keyboard?color=blue" alt="npm version">
<a href="https://codecov.io/gh/hodgef/simple-keyboard" target="_blank"><img src="https://img.shields.io/codecov/c/github/hodgef/simple-keyboard/master.svg?style=flat" alt="Coverage Status"></a> </a>
<a href="https://www.codacy.com/app/hodgef/simple-keyboard?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=hodgef/simple-keyboard&amp;utm_campaign=Badge_Grade" target="_blank"><img src="https://api.codacy.com/project/badge/Grade/5778fccc6a894701853d9a1f2fb44a76" alt="Codacy Badge"></a>
</p> <a href="https://bundlephobia.com/result?p=simple-keyboard">
</div> <img src="https://badgen.net/bundlephobia/minzip/simple-keyboard/?color=green" alt="install size">
</a>
<a href="https://travis-ci.org/hodgef/simple-keyboard">
<img src="https://api.travis-ci.org/hodgef/simple-keyboard.svg?branch=master"
alt="build status">
</a>
<a href="https://david-dm.org/hodgef/simple-keyboard">
<img src="https://badgen.net/david/dep/hodgef/simple-keyboard" alt="coverage">
</a>
<a href="https://codecov.io/gh/hodgef/simple-keyboard">
<img src="https://badgen.net/codecov/c/github/hodgef/simple-keyboard" alt="coverage">
</a>
</p>
> The slick virtual keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.
## 🚀 Demo
[Demo Showcase (Vanilla, Angular, React, Vue)](https://simple-keyboard.com/demo)
## 📦 Installation & Usage ## 📦 Installation & Usage
You can use simple-keyboard as a `<script>` tag from a CDN, or install it from npm. You can use simple-keyboard as a `<script>` tag from a CDN, or install it from npm.
@ -20,10 +40,6 @@ Check out the [simple-keyboard documentation](https://simple-keyboard.com/docume
Feel free to browse the [Q&A / Use-cases](https://simple-keyboard.com/qa-use-cases/) page for advanced use-cases. Feel free to browse the [Q&A / Use-cases](https://simple-keyboard.com/qa-use-cases/) page for advanced use-cases.
## 🚀 Demo
[https://simple-keyboard.com/demo](https://simple-keyboard.com/demo)
### To run demo on your own computer ### To run demo on your own computer

10
bin/postinstall
View File

@ -1,10 +0,0 @@
console.log('\x1b[36m%s\x1b[0m', `
______________________________________\n`);
console.log('\x1b[33m%s\x1b[0m', `Thank you for installing simple-keyboard !`);
console.log('\x1b[36m%s\x1b[0m', `
Please consider starring the repository so others can also find it.
https://github.com/hodgef/simple-keyboard/stargazers
______________________________________
`);

2
build/css/index.css
View File

@ -1,6 +1,6 @@
/*! /*!
* *
* simple-keyboard v2.24.1 * simple-keyboard v2.25.3
* https://github.com/hodgef/simple-keyboard * https://github.com/hodgef/simple-keyboard
* *
* Copyright (c) Francisco Hodge (https://github.com/hodgef) * Copyright (c) Francisco Hodge (https://github.com/hodgef)

2
build/css/index.css.map
View File

File diff suppressed because one or more lines are too long

2
build/css/simple-keyboard.css
View File

@ -1,6 +1,6 @@
/*! /*!
* *
* simple-keyboard v2.24.1 (Non-minified build) * simple-keyboard v2.25.3 (Non-minified build)
* https://github.com/hodgef/simple-keyboard * https://github.com/hodgef/simple-keyboard
* *
* Copyright (c) Francisco Hodge (https://github.com/hodgef) * Copyright (c) Francisco Hodge (https://github.com/hodgef)

20
build/index.d.ts vendored
View File

@ -10,6 +10,12 @@ declare module 'simple-keyboard' {
buttons: string; buttons: string;
} }
interface KeyboardButtonAttributes {
attribute: string;
value: string;
buttons: string;
}
interface KeyboardOptions { interface KeyboardOptions {
/** /**
* Modify the keyboard layout. * Modify the keyboard layout.
@ -41,6 +47,11 @@ declare module 'simple-keyboard' {
*/ */
buttonTheme?: KeyboardButtonTheme[]; buttonTheme?: KeyboardButtonTheme[];
/**
* A prop to add your own attributes to one or several buttons.
*/
buttonAttributes?: KeyboardButtonAttributes[];
/** /**
* Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input. * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
*/ */
@ -177,6 +188,10 @@ declare module 'simple-keyboard' {
class Keyboard { class Keyboard {
constructor(selector: string, options: KeyboardOptions); constructor(selector: string, options: KeyboardOptions);
constructor(options: KeyboardOptions); constructor(options: KeyboardOptions);
/**
* Options
*/
options: KeyboardOptions; options: KeyboardOptions;
/** /**
@ -184,6 +199,11 @@ declare module 'simple-keyboard' {
*/ */
utilities?: any; utilities?: any;
/**
* caretPosition
*/
caretPosition?: number;
/** /**
* Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button. * 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} buttons List of buttons to select (separated by a space).

4
build/index.js
View File

File diff suppressed because one or more lines are too long

2
build/index.js.map
View File

File diff suppressed because one or more lines are too long

189
build/simple-keyboard.js
View File

@ -1,6 +1,6 @@
/*! /*!
* *
* simple-keyboard v2.24.1 (Non-minified build) * simple-keyboard v2.25.3 (Non-minified build)
* https://github.com/hodgef/simple-keyboard * https://github.com/hodgef/simple-keyboard
* *
* Copyright (c) Francisco Hodge (https://github.com/hodgef) * Copyright (c) Francisco Hodge (https://github.com/hodgef)
@ -537,18 +537,6 @@
return word.length ? string + word[0].toUpperCase() + word.slice(1) : string; return word.length ? string + word[0].toUpperCase() + word.slice(1) : string;
}); });
} }
/**
* Counts the number of duplicates in a given array
*
* @param {Array} array The haystack to search in
* @param {string} value The needle to search for
*/ }, {
key: "countInArray",
value: function countInArray(array, value) {
return array.reduce(function(n, x) {
return n + (x === value);
}, 0);
}
} ], [ { } ], [ {
key: "bindMethods", key: "bindMethods",
value: function bindMethods(myClass, instance) { value: function bindMethods(myClass, instance) {
@ -719,7 +707,26 @@
}(); }();
/* harmony default export */ var services_KeyboardLayout = KeyboardLayout; /* harmony default export */ var services_KeyboardLayout = KeyboardLayout;
// CONCATENATED MODULE: ./src/lib/components/Keyboard.js // CONCATENATED MODULE: ./src/lib/components/Keyboard.js
function Keyboard_typeof(obj) { function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") {
return Array.from(iter);
}
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
arr2[i] = arr[i];
}
return arr2;
}
}
function Keyboard_typeof(obj) {
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
Keyboard_typeof = function _typeof(obj) { Keyboard_typeof = function _typeof(obj) {
return typeof obj; return typeof obj;
@ -808,6 +815,7 @@
* @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead. * @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.
* @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space. * @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
* @property {Array} buttonTheme A prop to add your own css classes to one or several buttons. * @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.
* @property {Array} buttonAttributes A prop to add your own attributes to one or several buttons.
* @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input. * @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
* @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not. * @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not.
* @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not. * @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not.
@ -1373,35 +1381,43 @@
/** /**
* Process buttonTheme option * Process buttonTheme option
*/ }, { */ }, {
key: "getButtonTheme", key: "getButtonThemeClasses",
value: function getButtonTheme() { value: function getButtonThemeClasses(button) {
var _this7 = this; var buttonTheme = this.options.buttonTheme;
var buttonThemesParsed = {}; var buttonClasses = [];
this.options.buttonTheme.forEach(function(themeObj) { if (Array.isArray(buttonTheme)) {
if (themeObj.buttons && themeObj.class) { buttonTheme.forEach(function(themeObj) {
var themeButtons; if (themeObj.class && typeof themeObj.class === "string" && themeObj.buttons && typeof themeObj.buttons === "string") {
if (typeof themeObj.buttons === "string") { var themeObjClasses = themeObj.class.split(" ");
themeButtons = themeObj.buttons.split(" "); var themeObjButtons = themeObj.buttons.split(" ");
if (themeObjButtons.includes(button)) {
buttonClasses = [].concat(_toConsumableArray(buttonClasses), _toConsumableArray(themeObjClasses));
}
} else {
console.warn('Incorrect "buttonTheme". Please check the documentation.', themeObj);
} }
if (themeButtons) { });
themeButtons.forEach(function(themeButton) { }
var themeParsed = buttonThemesParsed[themeButton]; return buttonClasses;
// If the button has already been added }
if (themeParsed) { /**
// Making sure we don't add duplicate classes, even when buttonTheme has duplicates * Process buttonAttributes option
if (!_this7.utilities.countInArray(themeParsed.split(" "), themeObj.class)) { */ }, {
buttonThemesParsed[themeButton] = "".concat(themeParsed, " ").concat(themeObj.class); key: "setDOMButtonAttributes",
} value: function setDOMButtonAttributes(button, callback) {
} else { var buttonAttributes = this.options.buttonAttributes;
buttonThemesParsed[themeButton] = themeObj.class; if (Array.isArray(buttonAttributes)) {
} buttonAttributes.forEach(function(attrObj) {
}); if (attrObj.attribute && typeof attrObj.attribute === "string" && attrObj.value && typeof attrObj.value === "string" && attrObj.buttons && typeof attrObj.buttons === "string") {
var attrObjButtons = attrObj.buttons.split(" ");
if (attrObjButtons.includes(button)) {
callback(attrObj.attribute, attrObj.value);
}
} else {
console.warn('Incorrect "buttonAttributes". Please check the documentation.', attrObj);
} }
} else { });
console.warn('buttonTheme row is missing the "buttons" or the "class". Please check the documentation.'); }
}
});
return buttonThemesParsed;
} }
}, { }, {
key: "onTouchDeviceDetected", key: "onTouchDeviceDetected",
@ -1515,15 +1531,15 @@
/** /**
* Load modules * Load modules
*/ value: function loadModules() { */ value: function loadModules() {
var _this8 = this; var _this7 = this;
if (Array.isArray(this.options.modules)) { if (Array.isArray(this.options.modules)) {
this.options.modules.forEach(function(Module) { this.options.modules.forEach(function(Module) {
var module = new Module(); var module = new Module();
/* istanbul ignore next */ if (module.constructor.name && module.constructor.name !== "Function") { /* istanbul ignore next */ if (module.constructor.name && module.constructor.name !== "Function") {
var classStr = "module-".concat(_this8.utilities.camelCase(module.constructor.name)); var classStr = "module-".concat(_this7.utilities.camelCase(module.constructor.name));
_this8.keyboardPluginClasses = _this8.keyboardPluginClasses + " ".concat(classStr); _this7.keyboardPluginClasses = _this7.keyboardPluginClasses + " ".concat(classStr);
} }
module.init(_this8); module.init(_this7);
}); });
this.keyboardPluginClasses = this.keyboardPluginClasses + " modules-loaded"; this.keyboardPluginClasses = this.keyboardPluginClasses + " modules-loaded";
this.render(); this.render();
@ -1552,7 +1568,7 @@
*/ }, { */ }, {
key: "parseRowDOMContainers", key: "parseRowDOMContainers",
value: function parseRowDOMContainers(rowDOM, rowIndex, containerStartIndexes, containerEndIndexes) { value: function parseRowDOMContainers(rowDOM, rowIndex, containerStartIndexes, containerEndIndexes) {
var _this9 = this; var _this8 = this;
var rowDOMArray = Array.from(rowDOM.children); var rowDOMArray = Array.from(rowDOM.children);
var removedElements = 0; var removedElements = 0;
if (rowDOMArray.length) { if (rowDOMArray.length) {
@ -1574,7 +1590,7 @@
* Create button container * Create button container
*/ var containerDOM = document.createElement("div"); */ var containerDOM = document.createElement("div");
containerDOM.className += "hg-button-container"; containerDOM.className += "hg-button-container";
var containerUID = "".concat(_this9.options.layoutName, "-r").concat(rowIndex, "c").concat(arrIndex); var containerUID = "".concat(_this8.options.layoutName, "-r").concat(rowIndex, "c").concat(arrIndex);
containerDOM.setAttribute("data-skUID", containerUID); containerDOM.setAttribute("data-skUID", containerUID);
/** /**
* Taking elements due to be inserted into container * Taking elements due to be inserted into container
@ -1596,7 +1612,7 @@
*/ rowDOMArray.forEach(function(element) { */ rowDOMArray.forEach(function(element) {
return rowDOM.appendChild(element); return rowDOM.appendChild(element);
}); });
if (_this9.options.debug) { if (_this8.options.debug) {
console.log("rowDOMContainer", containedElements, updated_startIndex, updated_endIndex, removedElements + 1); console.log("rowDOMContainer", containedElements, updated_startIndex, updated_endIndex, removedElements + 1);
} }
}); });
@ -1608,7 +1624,7 @@
*/ }, { */ }, {
key: "render", key: "render",
value: function render() { value: function render() {
var _this10 = this; var _this9 = this;
/** /**
* Clear keyboard * Clear keyboard
*/ this.clear(); */ this.clear();
@ -1627,9 +1643,6 @@
var useMouseEvents = this.options.useMouseEvents || false; var useMouseEvents = this.options.useMouseEvents || false;
var disableRowButtonContainers = this.options.disableRowButtonContainers; var disableRowButtonContainers = this.options.disableRowButtonContainers;
/** /**
* Account for buttonTheme, if set
*/ var buttonThemesParsed = Array.isArray(this.options.buttonTheme) ? this.getButtonTheme() : {};
/**
* Adding themeClass, layoutClass to keyboardDOM * Adding themeClass, layoutClass to keyboardDOM
*/ this.keyboardDOM.className += " ".concat(this.options.theme, " ").concat(layoutClass, " ").concat(this.keyboardPluginClasses, " ").concat(useTouchEventsClass); */ this.keyboardDOM.className += " ".concat(this.options.theme, " ").concat(layoutClass, " ").concat(this.keyboardPluginClasses, " ").concat(useTouchEventsClass);
/** /**
@ -1647,9 +1660,10 @@
/** /**
* Iterating through each button in row * Iterating through each button in row
*/ rowArray.forEach(function(button, bIndex) { */ rowArray.forEach(function(button, bIndex) {
var _buttonDOM$classList;
/** /**
* Check if button has a container indicator * Check if button has a container indicator
*/ var buttonHasContainerStart = !disableRowButtonContainers && button.includes("[") && button.length > 1; */ var buttonHasContainerStart = !disableRowButtonContainers && button.includes("[") && button.length > 1;
var buttonHasContainerEnd = !disableRowButtonContainers && button.includes("]") && button.length > 1; var buttonHasContainerEnd = !disableRowButtonContainers && button.includes("]") && button.length > 1;
/** /**
* Save container start index, if applicable * Save container start index, if applicable
@ -1667,28 +1681,38 @@
} }
/** /**
* Processing button options * Processing button options
*/ var fctBtnClass = _this10.utilities.getButtonClass(button); */ var fctBtnClass = _this9.utilities.getButtonClass(button);
var buttonThemeClass = buttonThemesParsed[button]; var buttonDisplayName = _this9.utilities.getButtonDisplayName(button, _this9.options.display, _this9.options.mergeDisplay);
var buttonDisplayName = _this10.utilities.getButtonDisplayName(button, _this10.options.display, _this10.options.mergeDisplay);
/** /**
* Creating button * Creating button
*/ var buttonType = _this10.options.useButtonTag ? "button" : "div"; */ var buttonType = _this9.options.useButtonTag ? "button" : "div";
var buttonDOM = document.createElement(buttonType); var buttonDOM = document.createElement(buttonType);
buttonDOM.className += "hg-button ".concat(fctBtnClass).concat(buttonThemeClass ? " " + buttonThemeClass : ""); buttonDOM.className += "hg-button ".concat(fctBtnClass);
/**
* Adding buttonTheme
*/
/**
* Adding buttonTheme
*/ (_buttonDOM$classList = buttonDOM.classList).add.apply(_buttonDOM$classList, _toConsumableArray(_this9.getButtonThemeClasses(button)));
/**
* Adding buttonAttributes
*/ _this9.setDOMButtonAttributes(button, function(attribute, value) {
buttonDOM.setAttribute(attribute, value);
});
/** /**
* Handle button click event * Handle button click event
*/ /* istanbul ignore next */ if (_this10.utilities.pointerEventsSupported() && !useTouchEvents && !useMouseEvents) { */ /* istanbul ignore next */ if (_this9.utilities.pointerEventsSupported() && !useTouchEvents && !useMouseEvents) {
/** /**
* Handle PointerEvents * Handle PointerEvents
*/ buttonDOM.onpointerdown = function(e) { */ buttonDOM.onpointerdown = function(e) {
_this10.handleButtonClicked(button); _this9.handleButtonClicked(button);
_this10.handleButtonMouseDown(button, e); _this9.handleButtonMouseDown(button, e);
}; };
buttonDOM.onpointerup = function() { buttonDOM.onpointerup = function() {
return _this10.handleButtonMouseUp(button); return _this9.handleButtonMouseUp(button);
}; };
buttonDOM.onpointercancel = function() { buttonDOM.onpointercancel = function() {
return _this10.handleButtonMouseUp(button); return _this9.handleButtonMouseUp(button);
}; };
} else { } else {
/** /**
@ -1697,27 +1721,27 @@
/** /**
* Handle touch events * Handle touch events
*/ buttonDOM.ontouchstart = function(e) { */ buttonDOM.ontouchstart = function(e) {
_this10.handleButtonClicked(button); _this9.handleButtonClicked(button);
_this10.handleButtonMouseDown(button, e); _this9.handleButtonMouseDown(button, e);
}; };
buttonDOM.ontouchend = function() { buttonDOM.ontouchend = function() {
return _this10.handleButtonMouseUp(button); return _this9.handleButtonMouseUp(button);
}; };
buttonDOM.ontouchcancel = function() { buttonDOM.ontouchcancel = function() {
return _this10.handleButtonMouseUp(button); return _this9.handleButtonMouseUp(button);
}; };
} else { } else {
/** /**
* Handle mouse events * Handle mouse events
*/ buttonDOM.onclick = function() { */ buttonDOM.onclick = function() {
_this10.isMouseHold = false; _this9.isMouseHold = false;
_this10.handleButtonClicked(button); _this9.handleButtonClicked(button);
}; };
buttonDOM.onmousedown = function(e) { buttonDOM.onmousedown = function(e) {
return _this10.handleButtonMouseDown(button, e); return _this9.handleButtonMouseDown(button, e);
}; };
buttonDOM.onmouseup = function() { buttonDOM.onmouseup = function() {
return _this10.handleButtonMouseUp(button); return _this9.handleButtonMouseUp(button);
}; };
} }
} }
@ -1727,32 +1751,29 @@
/** /**
* Adding unique id * Adding unique id
* Since there's no limit on spawning same buttons, the unique id ensures you can style every button * Since there's no limit on spawning same buttons, the unique id ensures you can style every button
*/ var buttonUID = "".concat(_this10.options.layoutName, "-r").concat(rIndex, "b").concat(bIndex); */ var buttonUID = "".concat(_this9.options.layoutName, "-r").concat(rIndex, "b").concat(bIndex);
buttonDOM.setAttribute("data-skBtnUID", buttonUID); buttonDOM.setAttribute("data-skBtnUID", buttonUID);
/** /**
* Adding display label
*/ buttonDOM.setAttribute("data-displayLabel", buttonDisplayName);
/**
* Adding button label to button * Adding button label to button
*/ var buttonSpanDOM = document.createElement("span"); */ var buttonSpanDOM = document.createElement("span");
buttonSpanDOM.innerHTML = buttonDisplayName; buttonSpanDOM.innerHTML = buttonDisplayName;
buttonDOM.appendChild(buttonSpanDOM); buttonDOM.appendChild(buttonSpanDOM);
/** /**
* Adding to buttonElements * Adding to buttonElements
*/ if (!_this10.buttonElements[button]) { */ if (!_this9.buttonElements[button]) {
_this10.buttonElements[button] = []; _this9.buttonElements[button] = [];
} }
_this10.buttonElements[button].push(buttonDOM); _this9.buttonElements[button].push(buttonDOM);
/** /**
* Appending button to row * Appending button to row
*/ rowDOM.appendChild(buttonDOM); */ rowDOM.appendChild(buttonDOM);
}); });
/** /**
* Parse containers in row * Parse containers in row
*/ rowDOM = _this10.parseRowDOMContainers(rowDOM, rIndex, containerStartIndexes, containerEndIndexes); */ rowDOM = _this9.parseRowDOMContainers(rowDOM, rIndex, containerStartIndexes, containerEndIndexes);
/** /**
* Appending row to keyboard * Appending row to keyboard
*/ _this10.keyboardDOM.appendChild(rowDOM); */ _this9.keyboardDOM.appendChild(rowDOM);
}); });
/** /**
* Calling onRender * Calling onRender
@ -1765,22 +1786,22 @@
* Handling onpointerup * Handling onpointerup
*/ /* istanbul ignore next */ if (this.utilities.pointerEventsSupported() && !useTouchEvents && !useMouseEvents) { */ /* istanbul ignore next */ if (this.utilities.pointerEventsSupported() && !useTouchEvents && !useMouseEvents) {
document.onpointerup = function() { document.onpointerup = function() {
return _this10.handleButtonMouseUp(); return _this9.handleButtonMouseUp();
}; };
} else if (useTouchEvents) { } else if (useTouchEvents) {
/** /**
* Handling ontouchend, ontouchcancel * Handling ontouchend, ontouchcancel
*/ document.ontouchend = function() { */ document.ontouchend = function() {
return _this10.handleButtonMouseUp(); return _this9.handleButtonMouseUp();
}; };
document.ontouchcancel = function() { document.ontouchcancel = function() {
return _this10.handleButtonMouseUp(); return _this9.handleButtonMouseUp();
}; };
} else if (!useTouchEvents) { } else if (!useTouchEvents) {
/** /**
* Handling mouseup * Handling mouseup
*/ document.onmouseup = function() { */ document.onmouseup = function() {
return _this10.handleButtonMouseUp(); return _this9.handleButtonMouseUp();
}; };
} }
/** /**

4883
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

49
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "simple-keyboard", "name": "simple-keyboard",
"version": "2.24.1", "version": "2.25.3",
"description": "On-screen Javascript Virtual Keyboard", "description": "On-screen Javascript Virtual Keyboard",
"main": "build/index.js", "main": "build/index.js",
"types": "build/index.d.ts", "types": "build/index.d.ts",
@ -10,7 +10,6 @@
"demo": "node scripts/demo.js", "demo": "node scripts/demo.js",
"test": "node scripts/test.js", "test": "node scripts/test.js",
"coverage": "node scripts/test.js --coverage --watchAll=false", "coverage": "node scripts/test.js --coverage --watchAll=false",
"postinstall": "node bin/postinstall",
"prepare": "npm run build" "prepare": "npm run build"
}, },
"repository": { "repository": {
@ -40,42 +39,42 @@
], ],
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@babel/core": "7.5.4", "@babel/core": "7.5.5",
"@babel/plugin-proposal-class-properties": "^7.4.4", "@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/preset-env": "^7.4.4", "@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.4.4", "@babel/runtime": "7.5.4",
"@svgr/webpack": "4.3.1", "@svgr/webpack": "4.3.2",
"@typescript-eslint/eslint-plugin": "1.12.0", "@typescript-eslint/eslint-plugin": "1.13.0",
"@typescript-eslint/parser": "1.12.0", "@typescript-eslint/parser": "1.13.0",
"babel-eslint": "10.0.2", "babel-eslint": "10.0.2",
"babel-jest": "24.8.0", "babel-jest": "24.9.0",
"babel-loader": "8.0.6", "babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.2", "babel-plugin-named-asset-import": "^0.3.2",
"babel-preset-react-app": "^9.0.0", "babel-preset-react-app": "^9.0.0",
"case-sensitive-paths-webpack-plugin": "2.2.0", "case-sensitive-paths-webpack-plugin": "2.2.0",
"copy-webpack-plugin": "^5.0.3", "copy-webpack-plugin": "^5.0.3",
"css-loader": "3.0.0", "css-loader": "3.2.0",
"dotenv": "8.0.0", "dotenv": "8.0.0",
"dotenv-expand": "5.1.0", "dotenv-expand": "5.1.0",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-config-react-app": "^4.0.1", "eslint-config-react-app": "^4.0.1",
"eslint-loader": "2.2.1", "eslint-loader": "2.2.1",
"eslint-plugin-flowtype": "3.10.4", "eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.0", "eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.2", "eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.5.0", "eslint-plugin-react-hooks": "^1.5.0",
"file-loader": "4.0.0", "file-loader": "4.2.0",
"fs-extra": "8.1.0", "fs-extra": "8.1.0",
"html-webpack-plugin": "4.0.0-beta.7", "html-webpack-plugin": "4.0.0-beta.8",
"identity-obj-proxy": "3.0.0", "identity-obj-proxy": "3.0.0",
"is-wsl": "^2.0.0", "is-wsl": "^2.0.0",
"jest": "24.8.0", "jest": "24.9.0",
"jest-environment-jsdom-fourteen": "0.1.0", "jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.8.0", "jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.3.1", "jest-watch-typeahead": "0.3.1",
"mini-css-extract-plugin": "0.7.0", "mini-css-extract-plugin": "0.8.0",
"optimize-css-assets-webpack-plugin": "5.0.3", "optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.5.0", "pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0", "postcss-flexbugs-fixes": "4.1.0",
@ -89,15 +88,15 @@
"react-app-polyfill": "^1.0.1", "react-app-polyfill": "^1.0.1",
"react-dev-utils": "^9.0.1", "react-dev-utils": "^9.0.1",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"resolve": "1.11.1", "resolve": "1.12.0",
"sass-loader": "7.1.0", "sass-loader": "7.2.0",
"semver": "6.2.0", "semver": "6.3.0",
"style-loader": "0.23.1", "style-loader": "1.0.0",
"terser-webpack-plugin": "1.3.0", "terser-webpack-plugin": "1.4.1",
"uglifyjs-webpack-plugin": "^2.1.2", "uglifyjs-webpack-plugin": "^2.1.2",
"url-loader": "2.0.1", "url-loader": "2.1.0",
"webpack": "4.35.3", "webpack": "4.39.2",
"webpack-dev-server": "3.7.2", "webpack-dev-server": "3.8.0",
"webpack-manifest-plugin": "2.0.4", "webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1" "workbox-webpack-plugin": "4.3.1"
}, },

73
src/demo/ButtonThemeDemo.js Normal file
View File

@ -0,0 +1,73 @@
import Keyboard from "../lib";
import "./css/ButtonThemeDemo.css";
const setDOM = () => {
document.querySelector("#root").innerHTML = `
<input class="input" placeholder="Tap on the virtual keyboard to start" />
<div class="simple-keyboard"></div>
`;
};
class Demo {
constructor() {
setDOM();
/**
* Demo Start
*/
this.keyboard = new Keyboard({
theme: "hg-theme-default my-theme",
onChange: input => this.onChange(input),
onKeyPress: button => this.onKeyPress(button),
buttonTheme: [
{
class: "my-button",
buttons: "{enter} {bksp} q Q"
},
{
class: "my-button-outline",
buttons: "q Q b B"
}
],
buttonAttributes: [
{
attribute: "aria-label",
value: "bee",
buttons: "b B"
}
]
});
/**
* Update simple-keyboard when input is changed directly
*/
document.querySelector(".input").addEventListener("input", event => {
this.keyboard.setInput(event.target.value);
});
}
onChange(input) {
document.querySelector(".input").value = input;
console.log("Input changed", input);
}
onKeyPress(button) {
console.log("Button pressed", button);
/**
* If you want to handle the shift and caps lock buttons
*/
if (button === "{shift}" || button === "{lock}") this.handleShift();
}
handleShift() {
let currentLayout = this.keyboard.options.layoutName;
let shiftToggle = currentLayout === "default" ? "shift" : "default";
this.keyboard.setOptions({
layoutName: shiftToggle
});
}
}
export default Demo;

26
src/demo/css/ButtonThemeDemo.css Normal file
View File

@ -0,0 +1,26 @@
input {
width: 100%;
height: 100px;
padding: 20px;
font-size: 20px;
border: none;
box-sizing: border-box;
}
.simple-keyboard {
max-width: 850px;
}
.simple-keyboard.my-theme .hg-button.my-button {
background: blue;
color: white;
}
.simple-keyboard.my-theme .hg-button[aria-label] {
background: black;
color: white;
}
.simple-keyboard.my-theme .hg-button.my-button-outline {
border: 2px solid red;
}

1
src/demo/index.js
View File

@ -5,6 +5,7 @@ import "./css/index.css";
*/ */
import BasicDemo from "./BasicDemo"; import BasicDemo from "./BasicDemo";
//import FullKeyboardDemo from "./FullKeyboardDemo"; //import FullKeyboardDemo from "./FullKeyboardDemo";
//import ButtonThemeDemo from "./ButtonThemeDemo";
/** /**
* Selected demo * Selected demo

77
src/demo/tests/ButtonThemeDemo.test.js Normal file
View File

@ -0,0 +1,77 @@
import TestUtility from '../../utils/TestUtility';
import ButtonThemeDemo from '../ButtonThemeDemo';
let testUtil = new TestUtility();
it('Demo will load', () => {
testUtil.setDOM();
let demo = new ButtonThemeDemo();
});
it('Demo onDOMLoaded will work', () => {
testUtil.setDOM();
let demo = new ButtonThemeDemo();
expect(demo.keyboard).toBeTruthy();
});
it('Demo onChange will work', () => {
testUtil.setDOM();
let demo = new ButtonThemeDemo();
demo.onChange("test");
expect(document.body.querySelector('.input').value).toBe("test");
});
it('Demo onChange will work', () => {
testUtil.setDOM();
let demo = new ButtonThemeDemo();
demo.keyboard.getButtonElement("q").onclick();
expect(document.body.querySelector('.input').value).toBe("q");
});
it('Demo input change will work', () => {
testUtil.setDOM();
let demo = new ButtonThemeDemo();
document.body.querySelector('.input').value = "test";
document.body.querySelector('.input').dispatchEvent(new Event('input'));
expect(demo.keyboard.getInput()).toBe("test");
});
it('Demo handleShiftButton will work', () => {
testUtil.setDOM();
let demo = new ButtonThemeDemo();
demo.keyboard.getButtonElement("{shift}")[0].onclick();
expect(demo.keyboard.options.layoutName).toBe("shift");
demo.keyboard.getButtonElement("{shift}")[0].onclick();
expect(demo.keyboard.options.layoutName).toBe("default");
});
it('Demo buttons will have proper attributes and classes', () => {
testUtil.setDOM();
let demo = new ButtonThemeDemo();
let buttonDOM = demo.keyboard.getButtonElement("b");
console.log("buttonDOM", buttonDOM.outerHTML);
let hasAttribute = buttonDOM.hasAttribute("aria-label");
expect(hasAttribute).toBeTruthy();
let hasClass = buttonDOM.classList.contains("my-button-outline");
expect(hasClass).toBeTruthy();
});

20
src/lib/@types/index.d.ts vendored
View File

@ -10,6 +10,12 @@ declare module 'simple-keyboard' {
buttons: string; buttons: string;
} }
interface KeyboardButtonAttributes {
attribute: string;
value: string;
buttons: string;
}
interface KeyboardOptions { interface KeyboardOptions {
/** /**
* Modify the keyboard layout. * Modify the keyboard layout.
@ -41,6 +47,11 @@ declare module 'simple-keyboard' {
*/ */
buttonTheme?: KeyboardButtonTheme[]; buttonTheme?: KeyboardButtonTheme[];
/**
* A prop to add your own attributes to one or several buttons.
*/
buttonAttributes?: KeyboardButtonAttributes[];
/** /**
* Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input. * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
*/ */
@ -177,6 +188,10 @@ declare module 'simple-keyboard' {
class Keyboard { class Keyboard {
constructor(selector: string, options: KeyboardOptions); constructor(selector: string, options: KeyboardOptions);
constructor(options: KeyboardOptions); constructor(options: KeyboardOptions);
/**
* Options
*/
options: KeyboardOptions; options: KeyboardOptions;
/** /**
@ -184,6 +199,11 @@ declare module 'simple-keyboard' {
*/ */
utilities?: any; utilities?: any;
/**
* caretPosition
*/
caretPosition?: number;
/** /**
* Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button. * 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} buttons List of buttons to select (separated by a space).

115
src/lib/components/Keyboard.js
View File

@ -51,6 +51,7 @@ class SimpleKeyboard {
* @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead. * @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.
* @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space. * @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
* @property {Array} buttonTheme A prop to add your own css classes to one or several buttons. * @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.
* @property {Array} buttonAttributes A prop to add your own attributes to one or several buttons.
* @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input. * @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
* @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not. * @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not.
* @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not. * @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not.
@ -733,47 +734,62 @@ class SimpleKeyboard {
/** /**
* Process buttonTheme option * Process buttonTheme option
*/ */
getButtonTheme() { getButtonThemeClasses(button) {
let buttonThemesParsed = {}; let buttonTheme = this.options.buttonTheme;
let buttonClasses = [];
this.options.buttonTheme.forEach(themeObj => { if (Array.isArray(buttonTheme)) {
if (themeObj.buttons && themeObj.class) { buttonTheme.forEach(themeObj => {
let themeButtons; if (
themeObj.class &&
typeof themeObj.class === "string" &&
(themeObj.buttons && typeof themeObj.buttons === "string")
) {
let themeObjClasses = themeObj.class.split(" ");
let themeObjButtons = themeObj.buttons.split(" ");
if (typeof themeObj.buttons === "string") { if (themeObjButtons.includes(button)) {
themeButtons = themeObj.buttons.split(" "); buttonClasses = [...buttonClasses, ...themeObjClasses];
}
} else {
console.warn(
`Incorrect "buttonTheme". Please check the documentation.`,
themeObj
);
} }
});
}
if (themeButtons) { return buttonClasses;
themeButtons.forEach(themeButton => { }
let themeParsed = buttonThemesParsed[themeButton];
// If the button has already been added /**
if (themeParsed) { * Process buttonAttributes option
// Making sure we don't add duplicate classes, even when buttonTheme has duplicates */
if ( setDOMButtonAttributes(button, callback) {
!this.utilities.countInArray( let buttonAttributes = this.options.buttonAttributes;
themeParsed.split(" "),
themeObj.class if (Array.isArray(buttonAttributes)) {
) buttonAttributes.forEach(attrObj => {
) { if (
buttonThemesParsed[ attrObj.attribute &&
themeButton typeof attrObj.attribute === "string" &&
] = `${themeParsed} ${themeObj.class}`; (attrObj.value && typeof attrObj.value === "string") &&
} (attrObj.buttons && typeof attrObj.buttons === "string")
} else { ) {
buttonThemesParsed[themeButton] = themeObj.class; let attrObjButtons = attrObj.buttons.split(" ");
}
}); if (attrObjButtons.includes(button)) {
callback(attrObj.attribute, attrObj.value);
}
} else {
console.warn(
`Incorrect "buttonAttributes". Please check the documentation.`,
attrObj
);
} }
} else { });
console.warn( }
`buttonTheme row is missing the "buttons" or the "class". Please check the documentation.`
);
}
});
return buttonThemesParsed;
} }
onTouchDeviceDetected() { onTouchDeviceDetected() {
@ -1061,13 +1077,6 @@ class SimpleKeyboard {
let useMouseEvents = this.options.useMouseEvents || false; let useMouseEvents = this.options.useMouseEvents || false;
let disableRowButtonContainers = this.options.disableRowButtonContainers; let disableRowButtonContainers = this.options.disableRowButtonContainers;
/**
* Account for buttonTheme, if set
*/
let buttonThemesParsed = Array.isArray(this.options.buttonTheme)
? this.getButtonTheme()
: {};
/** /**
* Adding themeClass, layoutClass to keyboardDOM * Adding themeClass, layoutClass to keyboardDOM
*/ */
@ -1132,7 +1141,6 @@ class SimpleKeyboard {
* Processing button options * Processing button options
*/ */
let fctBtnClass = this.utilities.getButtonClass(button); let fctBtnClass = this.utilities.getButtonClass(button);
let buttonThemeClass = buttonThemesParsed[button];
let buttonDisplayName = this.utilities.getButtonDisplayName( let buttonDisplayName = this.utilities.getButtonDisplayName(
button, button,
this.options.display, this.options.display,
@ -1144,9 +1152,19 @@ class SimpleKeyboard {
*/ */
let buttonType = this.options.useButtonTag ? "button" : "div"; let buttonType = this.options.useButtonTag ? "button" : "div";
let buttonDOM = document.createElement(buttonType); let buttonDOM = document.createElement(buttonType);
buttonDOM.className += `hg-button ${fctBtnClass}${ buttonDOM.className += `hg-button ${fctBtnClass}`;
buttonThemeClass ? " " + buttonThemeClass : ""
}`; /**
* Adding buttonTheme
*/
buttonDOM.classList.add(...this.getButtonThemeClasses(button));
/**
* Adding buttonAttributes
*/
this.setDOMButtonAttributes(button, (attribute, value) => {
buttonDOM.setAttribute(attribute, value);
});
/** /**
* Handle button click event * Handle button click event
@ -1205,11 +1223,6 @@ class SimpleKeyboard {
let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`; let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
buttonDOM.setAttribute("data-skBtnUID", buttonUID); buttonDOM.setAttribute("data-skBtnUID", buttonUID);
/**
* Adding display label
*/
buttonDOM.setAttribute("data-displayLabel", buttonDisplayName);
/** /**
* Adding button label to button * Adding button label to button
*/ */

27
src/lib/components/tests/Keyboard.test.js
View File

@ -1298,4 +1298,31 @@ it('Keyboard onKeyReleased will work', () => {
expect(pressed).toBeTruthy(); expect(pressed).toBeTruthy();
expect(firedTimes).toBe(1); expect(firedTimes).toBe(1);
expect(buttonPressed).toBe("q"); expect(buttonPressed).toBe("q");
});
it('Keyboard buttonAttribute will work', () => {
testUtil.setDOM();
let keyboard = new Keyboard({
buttonAttributes: [
{
attribute: "aria-label",
value: "bee",
buttons: "b B"
}
]
});
});
it('Keyboard buttonAttribute will warn about invalid entries', () => {
testUtil.setDOM();
let keyboard = new Keyboard({
buttonAttributes: [
{
attribute: false,
value: null
}
]
});
}); });

10
src/lib/services/Utilities.js
View File

@ -401,16 +401,6 @@ class Utilities {
word.length ? string + word[0].toUpperCase() + word.slice(1) : string word.length ? string + word[0].toUpperCase() + word.slice(1) : string
); );
} }
/**
* Counts the number of duplicates in a given array
*
* @param {Array} array The haystack to search in
* @param {string} value The needle to search for
*/
countInArray(array, value) {
return array.reduce((n, x) => n + (x === value), 0);
}
} }
export default Utilities; export default Utilities;

2
src/lib/services/tests/Utilities.test.js
View File

@ -13,7 +13,7 @@ it('Keyboard mergeDisplay will work', () => {
} }
}); });
expect(keyboard.getButtonElement("q").getAttribute("data-displaylabel")).toBe("qreplaced"); expect(keyboard.getButtonElement("q").querySelector("span").innerHTML).toBe("qreplaced");
}); });
it('Keyboard function buttons will work', () => { it('Keyboard function buttons will work', () => {