mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2025-02-21 00:23:02 +08:00
Merge
This commit is contained in:
Francisco Hodge
commit
eab88f7de3
46
README.md
46
README.md
@ -1,14 +1,34 @@
|
||||
<div align="center">
|
||||
<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" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/skdemo-4x2.gif" align="center" width="100%"></a>
|
||||
<blockquote>The easily customisable and responsive on-screen virtual keyboard for Javascript projects.</blockquote>
|
||||
<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>
|
||||
<img src="https://img.shields.io/david/hodgef/js-library-boilerplate.svg" />
|
||||
<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 href="https://www.codacy.com/app/hodgef/simple-keyboard?utm_source=github.com&utm_medium=referral&utm_content=hodgef/simple-keyboard&utm_campaign=Badge_Grade" target="_blank"><img src="https://api.codacy.com/project/badge/Grade/5778fccc6a894701853d9a1f2fb44a76" alt="Codacy Badge"></a>
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
<a href="https://simple-keyboard.com/demo">
|
||||
<img alt="simple-keyboard: Javscript Virtual Keyboard" src="https://i.imgur.com/Po6659n.gif">
|
||||
</a>
|
||||
|
||||
<a href="https://www.npmjs.com/package/simple-keyboard">
|
||||
<img src="https://badgen.net/npm/v/simple-keyboard?color=blue" alt="npm version">
|
||||
</a>
|
||||
|
||||
<a href="https://bundlephobia.com/result?p=simple-keyboard">
|
||||
<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
|
||||
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.
|
||||
|
||||
## 🚀 Demo
|
||||
|
||||
[https://simple-keyboard.com/demo](https://simple-keyboard.com/demo)
|
||||
|
||||
|
||||
### To run demo on your own computer
|
||||
|
||||
|
||||
@ -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
|
||||
______________________________________
|
||||
`);
|
||||
@ -1,6 +1,6 @@
|
||||
/*!
|
||||
*
|
||||
* simple-keyboard v2.24.1
|
||||
* simple-keyboard v2.25.3
|
||||
* https://github.com/hodgef/simple-keyboard
|
||||
*
|
||||
* Copyright (c) Francisco Hodge (https://github.com/hodgef)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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
|
||||
*
|
||||
* Copyright (c) Francisco Hodge (https://github.com/hodgef)
|
||||
|
||||
20
build/index.d.ts
vendored
20
build/index.d.ts
vendored
@ -10,6 +10,12 @@ declare module 'simple-keyboard' {
|
||||
buttons: string;
|
||||
}
|
||||
|
||||
interface KeyboardButtonAttributes {
|
||||
attribute: string;
|
||||
value: string;
|
||||
buttons: string;
|
||||
}
|
||||
|
||||
interface KeyboardOptions {
|
||||
/**
|
||||
* Modify the keyboard layout.
|
||||
@ -41,6 +47,11 @@ declare module 'simple-keyboard' {
|
||||
*/
|
||||
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.
|
||||
*/
|
||||
@ -177,6 +188,10 @@ declare module 'simple-keyboard' {
|
||||
class Keyboard {
|
||||
constructor(selector: string, options: KeyboardOptions);
|
||||
constructor(options: KeyboardOptions);
|
||||
|
||||
/**
|
||||
* Options
|
||||
*/
|
||||
options: KeyboardOptions;
|
||||
|
||||
/**
|
||||
@ -184,6 +199,11 @@ declare module 'simple-keyboard' {
|
||||
*/
|
||||
utilities?: any;
|
||||
|
||||
/**
|
||||
* caretPosition
|
||||
*/
|
||||
caretPosition?: number;
|
||||
|
||||
/**
|
||||
* 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).
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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
|
||||
*
|
||||
* Copyright (c) Francisco Hodge (https://github.com/hodgef)
|
||||
@ -537,18 +537,6 @@
|
||||
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",
|
||||
value: function bindMethods(myClass, instance) {
|
||||
@ -719,7 +707,26 @@
|
||||
}();
|
||||
/* harmony default export */ var services_KeyboardLayout = KeyboardLayout;
|
||||
// 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") {
|
||||
Keyboard_typeof = function _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 {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} 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} 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.
|
||||
@ -1373,35 +1381,43 @@
|
||||
/**
|
||||
* Process buttonTheme option
|
||||
*/ }, {
|
||||
key: "getButtonTheme",
|
||||
value: function getButtonTheme() {
|
||||
var _this7 = this;
|
||||
var buttonThemesParsed = {};
|
||||
this.options.buttonTheme.forEach(function(themeObj) {
|
||||
if (themeObj.buttons && themeObj.class) {
|
||||
var themeButtons;
|
||||
if (typeof themeObj.buttons === "string") {
|
||||
themeButtons = themeObj.buttons.split(" ");
|
||||
key: "getButtonThemeClasses",
|
||||
value: function getButtonThemeClasses(button) {
|
||||
var buttonTheme = this.options.buttonTheme;
|
||||
var buttonClasses = [];
|
||||
if (Array.isArray(buttonTheme)) {
|
||||
buttonTheme.forEach(function(themeObj) {
|
||||
if (themeObj.class && typeof themeObj.class === "string" && themeObj.buttons && typeof themeObj.buttons === "string") {
|
||||
var themeObjClasses = themeObj.class.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];
|
||||
// If the button has already been added
|
||||
if (themeParsed) {
|
||||
// Making sure we don't add duplicate classes, even when buttonTheme has duplicates
|
||||
if (!_this7.utilities.countInArray(themeParsed.split(" "), themeObj.class)) {
|
||||
buttonThemesParsed[themeButton] = "".concat(themeParsed, " ").concat(themeObj.class);
|
||||
}
|
||||
} else {
|
||||
buttonThemesParsed[themeButton] = themeObj.class;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
return buttonClasses;
|
||||
}
|
||||
/**
|
||||
* Process buttonAttributes option
|
||||
*/ }, {
|
||||
key: "setDOMButtonAttributes",
|
||||
value: function setDOMButtonAttributes(button, callback) {
|
||||
var buttonAttributes = this.options.buttonAttributes;
|
||||
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",
|
||||
@ -1515,15 +1531,15 @@
|
||||
/**
|
||||
* Load modules
|
||||
*/ value: function loadModules() {
|
||||
var _this8 = this;
|
||||
var _this7 = this;
|
||||
if (Array.isArray(this.options.modules)) {
|
||||
this.options.modules.forEach(function(Module) {
|
||||
var module = new Module();
|
||||
/* istanbul ignore next */ if (module.constructor.name && module.constructor.name !== "Function") {
|
||||
var classStr = "module-".concat(_this8.utilities.camelCase(module.constructor.name));
|
||||
_this8.keyboardPluginClasses = _this8.keyboardPluginClasses + " ".concat(classStr);
|
||||
var classStr = "module-".concat(_this7.utilities.camelCase(module.constructor.name));
|
||||
_this7.keyboardPluginClasses = _this7.keyboardPluginClasses + " ".concat(classStr);
|
||||
}
|
||||
module.init(_this8);
|
||||
module.init(_this7);
|
||||
});
|
||||
this.keyboardPluginClasses = this.keyboardPluginClasses + " modules-loaded";
|
||||
this.render();
|
||||
@ -1552,7 +1568,7 @@
|
||||
*/ }, {
|
||||
key: "parseRowDOMContainers",
|
||||
value: function parseRowDOMContainers(rowDOM, rowIndex, containerStartIndexes, containerEndIndexes) {
|
||||
var _this9 = this;
|
||||
var _this8 = this;
|
||||
var rowDOMArray = Array.from(rowDOM.children);
|
||||
var removedElements = 0;
|
||||
if (rowDOMArray.length) {
|
||||
@ -1574,7 +1590,7 @@
|
||||
* Create button container
|
||||
*/ var containerDOM = document.createElement("div");
|
||||
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);
|
||||
/**
|
||||
* Taking elements due to be inserted into container
|
||||
@ -1596,7 +1612,7 @@
|
||||
*/ rowDOMArray.forEach(function(element) {
|
||||
return rowDOM.appendChild(element);
|
||||
});
|
||||
if (_this9.options.debug) {
|
||||
if (_this8.options.debug) {
|
||||
console.log("rowDOMContainer", containedElements, updated_startIndex, updated_endIndex, removedElements + 1);
|
||||
}
|
||||
});
|
||||
@ -1608,7 +1624,7 @@
|
||||
*/ }, {
|
||||
key: "render",
|
||||
value: function render() {
|
||||
var _this10 = this;
|
||||
var _this9 = this;
|
||||
/**
|
||||
* Clear keyboard
|
||||
*/ this.clear();
|
||||
@ -1627,9 +1643,6 @@
|
||||
var useMouseEvents = this.options.useMouseEvents || false;
|
||||
var disableRowButtonContainers = this.options.disableRowButtonContainers;
|
||||
/**
|
||||
* Account for buttonTheme, if set
|
||||
*/ var buttonThemesParsed = Array.isArray(this.options.buttonTheme) ? this.getButtonTheme() : {};
|
||||
/**
|
||||
* Adding themeClass, layoutClass to keyboardDOM
|
||||
*/ this.keyboardDOM.className += " ".concat(this.options.theme, " ").concat(layoutClass, " ").concat(this.keyboardPluginClasses, " ").concat(useTouchEventsClass);
|
||||
/**
|
||||
@ -1647,9 +1660,10 @@
|
||||
/**
|
||||
* Iterating through each button in row
|
||||
*/ rowArray.forEach(function(button, bIndex) {
|
||||
var _buttonDOM$classList;
|
||||
/**
|
||||
* 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;
|
||||
/**
|
||||
* Save container start index, if applicable
|
||||
@ -1667,28 +1681,38 @@
|
||||
}
|
||||
/**
|
||||
* Processing button options
|
||||
*/ var fctBtnClass = _this10.utilities.getButtonClass(button);
|
||||
var buttonThemeClass = buttonThemesParsed[button];
|
||||
var buttonDisplayName = _this10.utilities.getButtonDisplayName(button, _this10.options.display, _this10.options.mergeDisplay);
|
||||
*/ var fctBtnClass = _this9.utilities.getButtonClass(button);
|
||||
var buttonDisplayName = _this9.utilities.getButtonDisplayName(button, _this9.options.display, _this9.options.mergeDisplay);
|
||||
/**
|
||||
* Creating button
|
||||
*/ var buttonType = _this10.options.useButtonTag ? "button" : "div";
|
||||
*/ var buttonType = _this9.options.useButtonTag ? "button" : "div";
|
||||
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
|
||||
*/ /* istanbul ignore next */ if (_this10.utilities.pointerEventsSupported() && !useTouchEvents && !useMouseEvents) {
|
||||
*/ /* istanbul ignore next */ if (_this9.utilities.pointerEventsSupported() && !useTouchEvents && !useMouseEvents) {
|
||||
/**
|
||||
* Handle PointerEvents
|
||||
*/ buttonDOM.onpointerdown = function(e) {
|
||||
_this10.handleButtonClicked(button);
|
||||
_this10.handleButtonMouseDown(button, e);
|
||||
_this9.handleButtonClicked(button);
|
||||
_this9.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.onpointerup = function() {
|
||||
return _this10.handleButtonMouseUp(button);
|
||||
return _this9.handleButtonMouseUp(button);
|
||||
};
|
||||
buttonDOM.onpointercancel = function() {
|
||||
return _this10.handleButtonMouseUp(button);
|
||||
return _this9.handleButtonMouseUp(button);
|
||||
};
|
||||
} else {
|
||||
/**
|
||||
@ -1697,27 +1721,27 @@
|
||||
/**
|
||||
* Handle touch events
|
||||
*/ buttonDOM.ontouchstart = function(e) {
|
||||
_this10.handleButtonClicked(button);
|
||||
_this10.handleButtonMouseDown(button, e);
|
||||
_this9.handleButtonClicked(button);
|
||||
_this9.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.ontouchend = function() {
|
||||
return _this10.handleButtonMouseUp(button);
|
||||
return _this9.handleButtonMouseUp(button);
|
||||
};
|
||||
buttonDOM.ontouchcancel = function() {
|
||||
return _this10.handleButtonMouseUp(button);
|
||||
return _this9.handleButtonMouseUp(button);
|
||||
};
|
||||
} else {
|
||||
/**
|
||||
* Handle mouse events
|
||||
*/ buttonDOM.onclick = function() {
|
||||
_this10.isMouseHold = false;
|
||||
_this10.handleButtonClicked(button);
|
||||
_this9.isMouseHold = false;
|
||||
_this9.handleButtonClicked(button);
|
||||
};
|
||||
buttonDOM.onmousedown = function(e) {
|
||||
return _this10.handleButtonMouseDown(button, e);
|
||||
return _this9.handleButtonMouseDown(button, e);
|
||||
};
|
||||
buttonDOM.onmouseup = function() {
|
||||
return _this10.handleButtonMouseUp(button);
|
||||
return _this9.handleButtonMouseUp(button);
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -1727,32 +1751,29 @@
|
||||
/**
|
||||
* Adding unique id
|
||||
* 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);
|
||||
/**
|
||||
* Adding display label
|
||||
*/ buttonDOM.setAttribute("data-displayLabel", buttonDisplayName);
|
||||
/**
|
||||
* Adding button label to button
|
||||
*/ var buttonSpanDOM = document.createElement("span");
|
||||
buttonSpanDOM.innerHTML = buttonDisplayName;
|
||||
buttonDOM.appendChild(buttonSpanDOM);
|
||||
/**
|
||||
* Adding to buttonElements
|
||||
*/ if (!_this10.buttonElements[button]) {
|
||||
_this10.buttonElements[button] = [];
|
||||
*/ if (!_this9.buttonElements[button]) {
|
||||
_this9.buttonElements[button] = [];
|
||||
}
|
||||
_this10.buttonElements[button].push(buttonDOM);
|
||||
_this9.buttonElements[button].push(buttonDOM);
|
||||
/**
|
||||
* Appending button to row
|
||||
*/ rowDOM.appendChild(buttonDOM);
|
||||
});
|
||||
/**
|
||||
* Parse containers in row
|
||||
*/ rowDOM = _this10.parseRowDOMContainers(rowDOM, rIndex, containerStartIndexes, containerEndIndexes);
|
||||
*/ rowDOM = _this9.parseRowDOMContainers(rowDOM, rIndex, containerStartIndexes, containerEndIndexes);
|
||||
/**
|
||||
* Appending row to keyboard
|
||||
*/ _this10.keyboardDOM.appendChild(rowDOM);
|
||||
*/ _this9.keyboardDOM.appendChild(rowDOM);
|
||||
});
|
||||
/**
|
||||
* Calling onRender
|
||||
@ -1765,22 +1786,22 @@
|
||||
* Handling onpointerup
|
||||
*/ /* istanbul ignore next */ if (this.utilities.pointerEventsSupported() && !useTouchEvents && !useMouseEvents) {
|
||||
document.onpointerup = function() {
|
||||
return _this10.handleButtonMouseUp();
|
||||
return _this9.handleButtonMouseUp();
|
||||
};
|
||||
} else if (useTouchEvents) {
|
||||
/**
|
||||
* Handling ontouchend, ontouchcancel
|
||||
*/ document.ontouchend = function() {
|
||||
return _this10.handleButtonMouseUp();
|
||||
return _this9.handleButtonMouseUp();
|
||||
};
|
||||
document.ontouchcancel = function() {
|
||||
return _this10.handleButtonMouseUp();
|
||||
return _this9.handleButtonMouseUp();
|
||||
};
|
||||
} else if (!useTouchEvents) {
|
||||
/**
|
||||
* Handling mouseup
|
||||
*/ document.onmouseup = function() {
|
||||
return _this10.handleButtonMouseUp();
|
||||
return _this9.handleButtonMouseUp();
|
||||
};
|
||||
}
|
||||
/**
|
||||
|
||||
4883
package-lock.json
generated
4883
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
49
package.json
49
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-keyboard",
|
||||
"version": "2.24.1",
|
||||
"version": "2.25.3",
|
||||
"description": "On-screen Javascript Virtual Keyboard",
|
||||
"main": "build/index.js",
|
||||
"types": "build/index.d.ts",
|
||||
@ -10,7 +10,6 @@
|
||||
"demo": "node scripts/demo.js",
|
||||
"test": "node scripts/test.js",
|
||||
"coverage": "node scripts/test.js --coverage --watchAll=false",
|
||||
"postinstall": "node bin/postinstall",
|
||||
"prepare": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
@ -40,42 +39,42 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.5.4",
|
||||
"@babel/core": "7.5.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.4.4",
|
||||
"@babel/preset-env": "^7.4.4",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@svgr/webpack": "4.3.1",
|
||||
"@typescript-eslint/eslint-plugin": "1.12.0",
|
||||
"@typescript-eslint/parser": "1.12.0",
|
||||
"@babel/runtime": "7.5.4",
|
||||
"@svgr/webpack": "4.3.2",
|
||||
"@typescript-eslint/eslint-plugin": "1.13.0",
|
||||
"@typescript-eslint/parser": "1.13.0",
|
||||
"babel-eslint": "10.0.2",
|
||||
"babel-jest": "24.8.0",
|
||||
"babel-jest": "24.9.0",
|
||||
"babel-loader": "8.0.6",
|
||||
"babel-plugin-named-asset-import": "^0.3.2",
|
||||
"babel-preset-react-app": "^9.0.0",
|
||||
"case-sensitive-paths-webpack-plugin": "2.2.0",
|
||||
"copy-webpack-plugin": "^5.0.3",
|
||||
"css-loader": "3.0.0",
|
||||
"css-loader": "3.2.0",
|
||||
"dotenv": "8.0.0",
|
||||
"dotenv-expand": "5.1.0",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-config-react-app": "^4.0.1",
|
||||
"eslint-loader": "2.2.1",
|
||||
"eslint-plugin-flowtype": "3.10.4",
|
||||
"eslint-plugin-import": "2.18.0",
|
||||
"eslint-plugin-flowtype": "3.13.0",
|
||||
"eslint-plugin-import": "2.18.2",
|
||||
"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",
|
||||
"file-loader": "4.0.0",
|
||||
"file-loader": "4.2.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",
|
||||
"is-wsl": "^2.0.0",
|
||||
"jest": "24.8.0",
|
||||
"jest": "24.9.0",
|
||||
"jest-environment-jsdom-fourteen": "0.1.0",
|
||||
"jest-resolve": "24.8.0",
|
||||
"jest-resolve": "24.9.0",
|
||||
"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",
|
||||
"pnp-webpack-plugin": "1.5.0",
|
||||
"postcss-flexbugs-fixes": "4.1.0",
|
||||
@ -89,15 +88,15 @@
|
||||
"react-app-polyfill": "^1.0.1",
|
||||
"react-dev-utils": "^9.0.1",
|
||||
"react-dom": "^16.8.6",
|
||||
"resolve": "1.11.1",
|
||||
"sass-loader": "7.1.0",
|
||||
"semver": "6.2.0",
|
||||
"style-loader": "0.23.1",
|
||||
"terser-webpack-plugin": "1.3.0",
|
||||
"resolve": "1.12.0",
|
||||
"sass-loader": "7.2.0",
|
||||
"semver": "6.3.0",
|
||||
"style-loader": "1.0.0",
|
||||
"terser-webpack-plugin": "1.4.1",
|
||||
"uglifyjs-webpack-plugin": "^2.1.2",
|
||||
"url-loader": "2.0.1",
|
||||
"webpack": "4.35.3",
|
||||
"webpack-dev-server": "3.7.2",
|
||||
"url-loader": "2.1.0",
|
||||
"webpack": "4.39.2",
|
||||
"webpack-dev-server": "3.8.0",
|
||||
"webpack-manifest-plugin": "2.0.4",
|
||||
"workbox-webpack-plugin": "4.3.1"
|
||||
},
|
||||
|
||||
73
src/demo/ButtonThemeDemo.js
Normal file
73
src/demo/ButtonThemeDemo.js
Normal 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
26
src/demo/css/ButtonThemeDemo.css
Normal 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;
|
||||
}
|
||||
@ -5,6 +5,7 @@ import "./css/index.css";
|
||||
*/
|
||||
import BasicDemo from "./BasicDemo";
|
||||
//import FullKeyboardDemo from "./FullKeyboardDemo";
|
||||
//import ButtonThemeDemo from "./ButtonThemeDemo";
|
||||
|
||||
/**
|
||||
* Selected demo
|
||||
|
||||
77
src/demo/tests/ButtonThemeDemo.test.js
Normal file
77
src/demo/tests/ButtonThemeDemo.test.js
Normal 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
20
src/lib/@types/index.d.ts
vendored
@ -10,6 +10,12 @@ declare module 'simple-keyboard' {
|
||||
buttons: string;
|
||||
}
|
||||
|
||||
interface KeyboardButtonAttributes {
|
||||
attribute: string;
|
||||
value: string;
|
||||
buttons: string;
|
||||
}
|
||||
|
||||
interface KeyboardOptions {
|
||||
/**
|
||||
* Modify the keyboard layout.
|
||||
@ -41,6 +47,11 @@ declare module 'simple-keyboard' {
|
||||
*/
|
||||
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.
|
||||
*/
|
||||
@ -177,6 +188,10 @@ declare module 'simple-keyboard' {
|
||||
class Keyboard {
|
||||
constructor(selector: string, options: KeyboardOptions);
|
||||
constructor(options: KeyboardOptions);
|
||||
|
||||
/**
|
||||
* Options
|
||||
*/
|
||||
options: KeyboardOptions;
|
||||
|
||||
/**
|
||||
@ -184,6 +199,11 @@ declare module 'simple-keyboard' {
|
||||
*/
|
||||
utilities?: any;
|
||||
|
||||
/**
|
||||
* caretPosition
|
||||
*/
|
||||
caretPosition?: number;
|
||||
|
||||
/**
|
||||
* 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).
|
||||
|
||||
@ -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 {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} 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} 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.
|
||||
@ -733,47 +734,62 @@ class SimpleKeyboard {
|
||||
/**
|
||||
* Process buttonTheme option
|
||||
*/
|
||||
getButtonTheme() {
|
||||
let buttonThemesParsed = {};
|
||||
getButtonThemeClasses(button) {
|
||||
let buttonTheme = this.options.buttonTheme;
|
||||
let buttonClasses = [];
|
||||
|
||||
this.options.buttonTheme.forEach(themeObj => {
|
||||
if (themeObj.buttons && themeObj.class) {
|
||||
let themeButtons;
|
||||
if (Array.isArray(buttonTheme)) {
|
||||
buttonTheme.forEach(themeObj => {
|
||||
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") {
|
||||
themeButtons = themeObj.buttons.split(" ");
|
||||
if (themeObjButtons.includes(button)) {
|
||||
buttonClasses = [...buttonClasses, ...themeObjClasses];
|
||||
}
|
||||
} else {
|
||||
console.warn(
|
||||
`Incorrect "buttonTheme". Please check the documentation.`,
|
||||
themeObj
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (themeButtons) {
|
||||
themeButtons.forEach(themeButton => {
|
||||
let 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
|
||||
if (
|
||||
!this.utilities.countInArray(
|
||||
themeParsed.split(" "),
|
||||
themeObj.class
|
||||
)
|
||||
) {
|
||||
buttonThemesParsed[
|
||||
themeButton
|
||||
] = `${themeParsed} ${themeObj.class}`;
|
||||
}
|
||||
} else {
|
||||
buttonThemesParsed[themeButton] = themeObj.class;
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Process buttonAttributes option
|
||||
*/
|
||||
setDOMButtonAttributes(button, callback) {
|
||||
let buttonAttributes = this.options.buttonAttributes;
|
||||
|
||||
if (Array.isArray(buttonAttributes)) {
|
||||
buttonAttributes.forEach(attrObj => {
|
||||
if (
|
||||
attrObj.attribute &&
|
||||
typeof attrObj.attribute === "string" &&
|
||||
(attrObj.value && typeof attrObj.value === "string") &&
|
||||
(attrObj.buttons && typeof attrObj.buttons === "string")
|
||||
) {
|
||||
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() {
|
||||
@ -1061,13 +1077,6 @@ class SimpleKeyboard {
|
||||
let useMouseEvents = this.options.useMouseEvents || false;
|
||||
let disableRowButtonContainers = this.options.disableRowButtonContainers;
|
||||
|
||||
/**
|
||||
* Account for buttonTheme, if set
|
||||
*/
|
||||
let buttonThemesParsed = Array.isArray(this.options.buttonTheme)
|
||||
? this.getButtonTheme()
|
||||
: {};
|
||||
|
||||
/**
|
||||
* Adding themeClass, layoutClass to keyboardDOM
|
||||
*/
|
||||
@ -1132,7 +1141,6 @@ class SimpleKeyboard {
|
||||
* Processing button options
|
||||
*/
|
||||
let fctBtnClass = this.utilities.getButtonClass(button);
|
||||
let buttonThemeClass = buttonThemesParsed[button];
|
||||
let buttonDisplayName = this.utilities.getButtonDisplayName(
|
||||
button,
|
||||
this.options.display,
|
||||
@ -1144,9 +1152,19 @@ class SimpleKeyboard {
|
||||
*/
|
||||
let buttonType = this.options.useButtonTag ? "button" : "div";
|
||||
let buttonDOM = document.createElement(buttonType);
|
||||
buttonDOM.className += `hg-button ${fctBtnClass}${
|
||||
buttonThemeClass ? " " + buttonThemeClass : ""
|
||||
}`;
|
||||
buttonDOM.className += `hg-button ${fctBtnClass}`;
|
||||
|
||||
/**
|
||||
* Adding buttonTheme
|
||||
*/
|
||||
buttonDOM.classList.add(...this.getButtonThemeClasses(button));
|
||||
|
||||
/**
|
||||
* Adding buttonAttributes
|
||||
*/
|
||||
this.setDOMButtonAttributes(button, (attribute, value) => {
|
||||
buttonDOM.setAttribute(attribute, value);
|
||||
});
|
||||
|
||||
/**
|
||||
* Handle button click event
|
||||
@ -1205,11 +1223,6 @@ class SimpleKeyboard {
|
||||
let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
|
||||
buttonDOM.setAttribute("data-skBtnUID", buttonUID);
|
||||
|
||||
/**
|
||||
* Adding display label
|
||||
*/
|
||||
buttonDOM.setAttribute("data-displayLabel", buttonDisplayName);
|
||||
|
||||
/**
|
||||
* Adding button label to button
|
||||
*/
|
||||
|
||||
@ -1298,4 +1298,31 @@ it('Keyboard onKeyReleased will work', () => {
|
||||
expect(pressed).toBeTruthy();
|
||||
expect(firedTimes).toBe(1);
|
||||
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
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
@ -401,16 +401,6 @@ class Utilities {
|
||||
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;
|
||||
|
||||
@ -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', () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user