mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2026-04-30 00:00:04 +08:00
Update types, tests
This commit is contained in:
Francisco Hodge
@@ -8,6 +8,11 @@
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
touch-action: manipulation;
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
|
||||
Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
background-color: #ececec;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.hg-theme-default .hg-button span {
|
||||
@@ -21,14 +26,6 @@
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.hg-theme-default {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
|
||||
Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
background-color: #ececec;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.hg-theme-default .hg-button {
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
@@ -74,7 +71,14 @@
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.hg-theme-default .hg-button.hg-activeButton {
|
||||
.hg-theme-default .hg-button.hg-standardBtn {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.hg-theme-default
|
||||
.hg-button.hg-functionBtn
|
||||
.hg-theme-default
|
||||
.hg-button.hg-activeButton {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,17 @@
|
||||
import Keyboard from '../Keyboard';
|
||||
import { setDOM, clearDOM, testLayoutStdButtons, iterateButtons, triggerDocumentPointerUp, triggerDocumentPointerDown } from '../../../utils/TestUtility';
|
||||
import { setDOM, clearDOM, testLayoutStdButtons, triggerDocumentPointerUp } from '../../../utils/TestUtility';
|
||||
|
||||
beforeEach(() => {
|
||||
setDOM();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
clearDOM();
|
||||
});
|
||||
|
||||
it('Keyboard will not render without target element', () => {
|
||||
clearDOM();
|
||||
|
||||
try {
|
||||
new Keyboard();
|
||||
expect(true).toBe(false);
|
||||
@@ -10,18 +20,29 @@ it('Keyboard will not render without target element', () => {
|
||||
}
|
||||
});
|
||||
|
||||
it('Keyboard will run without options', () => {
|
||||
// Prepare target DOM element
|
||||
setDOM();
|
||||
describe('When window is undefined', () => {
|
||||
const { window } = global;
|
||||
beforeAll(() => {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
delete global.window;
|
||||
});
|
||||
afterAll(() => {
|
||||
global.window = window;
|
||||
});
|
||||
|
||||
it('Keyboard will return early if window is undefined', () => {
|
||||
const keyboard = new Keyboard();
|
||||
expect(keyboard.initialized).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
it('Keyboard will run without options', () => {
|
||||
// No options
|
||||
new Keyboard();
|
||||
});
|
||||
|
||||
it('Keyboard will run with empty options', () => {
|
||||
// Prepare target DOM element
|
||||
setDOM();
|
||||
|
||||
// No options
|
||||
new Keyboard({});
|
||||
});
|
||||
@@ -101,9 +122,7 @@ it('Keyboard setOptions will work without a param', () => {
|
||||
});
|
||||
|
||||
it('Keyboard empty buttons wont do anything as expected', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
layout: {
|
||||
default: [
|
||||
"{//} {button} d",
|
||||
@@ -116,9 +135,7 @@ it('Keyboard empty buttons wont do anything as expected', () => {
|
||||
});
|
||||
|
||||
it('Keyboard onKeyPress will work', () => {
|
||||
setDOM();
|
||||
|
||||
let pressed = false;
|
||||
let pressed = false;
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
onKeyPress: () => {
|
||||
@@ -133,13 +150,11 @@ it('Keyboard onKeyPress will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard standard function buttons will not change input', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
useButtonTag: true
|
||||
});
|
||||
|
||||
iterateButtons((button) => {
|
||||
keyboard.recurseButtons((button) => {
|
||||
if(button.getAttribute("data-skbtn") === "{shift}"){
|
||||
button.onclick();
|
||||
}
|
||||
@@ -189,9 +204,7 @@ it('Keyboard syncInstanceInputs will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard onChange will work', () => {
|
||||
setDOM();
|
||||
|
||||
let output = false;
|
||||
let output = false;
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
onChange: (input) => {
|
||||
@@ -206,9 +219,7 @@ it('Keyboard onChange will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard onChangeAll will work', () => {
|
||||
setDOM();
|
||||
|
||||
let output;
|
||||
let output;
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
onChangeAll: (input) => {
|
||||
@@ -223,9 +234,7 @@ it('Keyboard onChangeAll will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard clearInput will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
/**
|
||||
* Avoid setInput for this test
|
||||
@@ -267,9 +276,7 @@ it('Keyboard clearInput will work with syncInstanceInputs', () => {
|
||||
});
|
||||
|
||||
it('Keyboard setInput will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
keyboard.setInput("hello");
|
||||
|
||||
@@ -297,9 +304,7 @@ it('Keyboard setInput will work with syncInstanceInputs', () => {
|
||||
});
|
||||
|
||||
it('Keyboard dispatch will work', () => {
|
||||
setDOM();
|
||||
|
||||
document.body.innerHTML = `
|
||||
document.body.innerHTML = `
|
||||
<div class="keyboard1"></div>
|
||||
<div class="keyboard2"></div>
|
||||
`;
|
||||
@@ -322,9 +327,7 @@ it('Keyboard dispatch will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard dispatch will not work without SimpleKeyboardInstances', () => {
|
||||
setDOM();
|
||||
|
||||
document.body.innerHTML = `
|
||||
document.body.innerHTML = `
|
||||
<div class="keyboard1"></div>
|
||||
<div class="keyboard2"></div>
|
||||
`;
|
||||
@@ -353,27 +356,21 @@ it('Keyboard dispatch will not work without SimpleKeyboardInstances', () => {
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
keyboard.addButtonTheme("q", "test");
|
||||
|
||||
expect(keyboard.options.buttonTheme[0].class).toBe("test");
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will not work without params', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
const returnVal = keyboard.addButtonTheme();
|
||||
|
||||
expect(returnVal).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will amend a buttonTheme', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -388,9 +385,7 @@ it('Keyboard addButtonTheme will amend a buttonTheme', () => {
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will create a buttonTheme', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "blurb",
|
||||
@@ -405,9 +400,7 @@ it('Keyboard addButtonTheme will create a buttonTheme', () => {
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will ignore a repeated buttonTheme', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -422,9 +415,7 @@ it('Keyboard addButtonTheme will ignore a repeated buttonTheme', () => {
|
||||
});
|
||||
|
||||
it('Keyboard addButtonTheme will amend a buttonTheme', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -440,9 +431,7 @@ it('Keyboard addButtonTheme will amend a buttonTheme', () => {
|
||||
|
||||
|
||||
it('Keyboard removeButtonTheme without params will remove all button themes', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -458,9 +447,7 @@ it('Keyboard removeButtonTheme without params will remove all button themes', ()
|
||||
|
||||
|
||||
it('Keyboard removeButtonTheme will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -475,9 +462,7 @@ it('Keyboard removeButtonTheme will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard removeButtonTheme will work wihtout a class', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -492,9 +477,7 @@ it('Keyboard removeButtonTheme will work wihtout a class', () => {
|
||||
});
|
||||
|
||||
it('Keyboard removeButtonTheme will do nothing without a button param', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -509,9 +492,7 @@ it('Keyboard removeButtonTheme will do nothing without a button param', () => {
|
||||
});
|
||||
|
||||
it('Keyboard removeButtonTheme does nothing if req button doesnt have a buttonTheme', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -526,9 +507,7 @@ it('Keyboard removeButtonTheme does nothing if req button doesnt have a buttonTh
|
||||
});
|
||||
|
||||
it('Keyboard removeButtonTheme does nothing if buttonTheme class does not exist', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "testy",
|
||||
@@ -543,9 +522,7 @@ it('Keyboard removeButtonTheme does nothing if buttonTheme class does not exist'
|
||||
});
|
||||
|
||||
it('Keyboard removeButtonTheme does nothing if buttonTheme doesnt have the requested buttons', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -560,9 +537,7 @@ it('Keyboard removeButtonTheme does nothing if buttonTheme doesnt have the reque
|
||||
});
|
||||
|
||||
it('Keyboard getButtonElement will not return anything if empty match', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
layout: {
|
||||
default: [
|
||||
"{//} {button} d",
|
||||
@@ -575,17 +550,13 @@ it('Keyboard getButtonElement will not return anything if empty match', () => {
|
||||
});
|
||||
|
||||
it('Keyboard getButtonElement will return multiple matched buttons', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
expect(keyboard.getButtonElement("{shift}").length).toBe(2);
|
||||
});
|
||||
|
||||
it('Keyboard will receive physical keyboard events', () => {
|
||||
setDOM();
|
||||
|
||||
new Keyboard({
|
||||
new Keyboard({
|
||||
debug: true,
|
||||
physicalKeyboardHighlight: true
|
||||
});
|
||||
@@ -602,9 +573,7 @@ it('Keyboard will receive physical keyboard events', () => {
|
||||
});
|
||||
|
||||
it('Keyboard caretEventHandler will detect input, textarea focus', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
const myInput = document.createElement('input');
|
||||
|
||||
keyboard.caretEventHandler({
|
||||
@@ -619,9 +588,7 @@ it('Keyboard caretEventHandler will detect input, textarea focus', () => {
|
||||
});
|
||||
|
||||
it('Keyboard caretEventHandler will not set caretPosition on disableCaretPositioning', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
const myInput = document.createElement('input');
|
||||
|
||||
keyboard.caretEventHandler({
|
||||
@@ -650,9 +617,7 @@ it('Keyboard caretEventHandler will not set caretPosition on disableCaretPositio
|
||||
});
|
||||
|
||||
it('Keyboard caretEventHandler ignore positioning if input, textarea is blur', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
keyboard.isMouseHold = true;
|
||||
|
||||
@@ -668,9 +633,7 @@ it('Keyboard caretEventHandler ignore positioning if input, textarea is blur', (
|
||||
});
|
||||
|
||||
it('Keyboard caretEventHandler will work with debug', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
debug: true
|
||||
});
|
||||
|
||||
@@ -693,9 +656,7 @@ it('Keyboard caretEventHandler will work with debug', () => {
|
||||
});
|
||||
|
||||
it('Keyboard onInit will work', () => {
|
||||
setDOM();
|
||||
|
||||
let passed = false;
|
||||
let passed = false;
|
||||
|
||||
new Keyboard({
|
||||
onInit: () => {
|
||||
@@ -707,9 +668,7 @@ it('Keyboard onInit will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard onRender will work', () => {
|
||||
setDOM();
|
||||
|
||||
let passed = false;
|
||||
let passed = false;
|
||||
|
||||
new Keyboard({
|
||||
onRender: () => {
|
||||
@@ -721,9 +680,7 @@ it('Keyboard onRender will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard buttonTheme that is invalid will be ignored and not throw', () => {
|
||||
setDOM();
|
||||
|
||||
new Keyboard({
|
||||
new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: null,
|
||||
@@ -734,9 +691,7 @@ it('Keyboard buttonTheme that is invalid will be ignored and not throw', () => {
|
||||
});
|
||||
|
||||
it('Keyboard buttonTheme buttons that are invalid will be ignored and not throw', () => {
|
||||
setDOM();
|
||||
|
||||
new Keyboard({
|
||||
new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: null,
|
||||
@@ -747,9 +702,7 @@ it('Keyboard buttonTheme buttons that are invalid will be ignored and not throw'
|
||||
});
|
||||
|
||||
it('Keyboard buttonTheme will be ignored if buttons param not a string', () => {
|
||||
setDOM();
|
||||
|
||||
new Keyboard({
|
||||
new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -762,9 +715,7 @@ it('Keyboard buttonTheme will be ignored if buttons param not a string', () => {
|
||||
});
|
||||
|
||||
it('Keyboard buttonTheme will be ignored if already added', () => {
|
||||
setDOM();
|
||||
|
||||
new Keyboard({
|
||||
new Keyboard({
|
||||
buttonTheme: [
|
||||
{
|
||||
class: "test",
|
||||
@@ -791,9 +742,7 @@ it('Keyboard buttonTheme will be ignored if already added', () => {
|
||||
});
|
||||
|
||||
it('Keyboard can set a module', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
keyboard.registerModule(
|
||||
"test",
|
||||
@@ -806,9 +755,7 @@ it('Keyboard can set a module', () => {
|
||||
});
|
||||
|
||||
it('Keyboard registerModule will return current module tree', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
keyboard.modules.test = {
|
||||
testy: "test"
|
||||
@@ -826,9 +773,7 @@ it('Keyboard registerModule will return current module tree', () => {
|
||||
});
|
||||
|
||||
it('Keyboard can set a module by amending the modules tree', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
keyboard.modules = {
|
||||
testman: {
|
||||
@@ -847,17 +792,13 @@ it('Keyboard can set a module by amending the modules tree', () => {
|
||||
});
|
||||
|
||||
it('Keyboard will not retrieve an option for an inexistent module', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
expect(keyboard.getModuleProp("test", "foo")).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Keyboard will get a list of modules', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
keyboard.registerModule(
|
||||
"test",
|
||||
@@ -870,9 +811,7 @@ it('Keyboard will get a list of modules', () => {
|
||||
});
|
||||
|
||||
it('Keyboard loadModules will load a simple module', () => {
|
||||
setDOM();
|
||||
|
||||
class myClass {
|
||||
class myClass {
|
||||
init = (module) => {
|
||||
module.foo = "bar";
|
||||
};
|
||||
@@ -886,9 +825,7 @@ it('Keyboard loadModules will load a simple module', () => {
|
||||
});
|
||||
|
||||
it('Keyboard handleButtonMouseUp will set isMouseHold to false', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
keyboard.isMouseHold = true;
|
||||
|
||||
@@ -900,9 +837,7 @@ it('Keyboard handleButtonMouseUp will set isMouseHold to false', () => {
|
||||
});
|
||||
|
||||
it('Keyboard handleButtonMouseUp clear holdInteractionTimeout', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
keyboard.isMouseHold = true;
|
||||
keyboard.holdInteractionTimeout = setTimeout(() => {}, 10000);
|
||||
@@ -913,9 +848,7 @@ it('Keyboard handleButtonMouseUp clear holdInteractionTimeout', () => {
|
||||
});
|
||||
|
||||
it('Keyboard handleButtonMouseDown will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({ useMouseEvents: true });
|
||||
const keyboard = new Keyboard({ useMouseEvents: true });
|
||||
|
||||
console.log(keyboard.getButtonElement("q"))
|
||||
keyboard.getButtonElement("q").onclick();
|
||||
@@ -927,9 +860,7 @@ it('Keyboard handleButtonMouseDown will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
preventMouseDownDefault: true,
|
||||
stopMouseDownPropagation: true
|
||||
});
|
||||
@@ -958,9 +889,7 @@ it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () =
|
||||
});
|
||||
|
||||
it('Keyboard handleButtonMouseUp will work with preventMouseUpDefault and stopMouseUpPropagation', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
preventMouseUpDefault: true,
|
||||
stopMouseUpPropagation: true
|
||||
});
|
||||
@@ -987,9 +916,7 @@ it('Keyboard handleButtonMouseUp will work with preventMouseUpDefault and stopMo
|
||||
});
|
||||
|
||||
it('Keyboard onModulesLoaded will work', () => {
|
||||
setDOM();
|
||||
|
||||
class myClass {
|
||||
class myClass {
|
||||
init = (module) => {
|
||||
module.foo = "bar";
|
||||
};
|
||||
@@ -1010,9 +937,7 @@ it('Keyboard onModulesLoaded will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard inputPattern will work globally', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
inputPattern: /^\d+$/,
|
||||
useMouseEvents: true
|
||||
});
|
||||
@@ -1027,9 +952,7 @@ it('Keyboard inputPattern will work globally', () => {
|
||||
});
|
||||
|
||||
it('Keyboard inputPattern will work by input name', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
debug: true,
|
||||
inputName: "test1",
|
||||
inputPattern: {
|
||||
@@ -1054,9 +977,7 @@ it('Keyboard inputPattern will work by input name', () => {
|
||||
});
|
||||
|
||||
it('Keyboard processAutoTouchEvents will work', () => {
|
||||
setDOM();
|
||||
|
||||
navigator.maxTouchPoints = true;
|
||||
navigator.maxTouchPoints = true;
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
autoUseTouchEvents: true
|
||||
@@ -1066,9 +987,7 @@ it('Keyboard processAutoTouchEvents will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard processAutoTouchEvents will work with debugging enabled', () => {
|
||||
setDOM();
|
||||
|
||||
navigator.maxTouchPoints = true;
|
||||
navigator.maxTouchPoints = true;
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
autoUseTouchEvents: true,
|
||||
@@ -1079,9 +998,7 @@ it('Keyboard processAutoTouchEvents will work with debugging enabled', () => {
|
||||
});
|
||||
|
||||
it('Keyboard beforeFirstRender method will work', () => {
|
||||
setDOM();
|
||||
|
||||
let timesCalled = 0;
|
||||
let timesCalled = 0;
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
beforeFirstRender: () => {
|
||||
@@ -1100,9 +1017,7 @@ it('Keyboard beforeFirstRender method will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard beforeFirstRender will show PointerEvents warning', () => {
|
||||
setDOM();
|
||||
|
||||
let timesCalled = 0;
|
||||
let timesCalled = 0;
|
||||
|
||||
window.PointerEvent = window.PointerEvent ? window.PointerEvent : () => {};
|
||||
|
||||
@@ -1117,9 +1032,7 @@ it('Keyboard beforeFirstRender will show PointerEvents warning', () => {
|
||||
});
|
||||
|
||||
it('Keyboard beforeRender method will work', () => {
|
||||
setDOM();
|
||||
|
||||
let timesCalled = 0;
|
||||
let timesCalled = 0;
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
beforeRender: () => {
|
||||
@@ -1138,9 +1051,7 @@ it('Keyboard beforeRender method will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard parseRowDOMContainers will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
layout: {
|
||||
'default': [
|
||||
'` [1 2 3 4 5 6 7 8 9] 0 - = {bksp}',
|
||||
@@ -1171,9 +1082,7 @@ it('Keyboard parseRowDOMContainers will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard parseRowDOMContainers will ignore empty rows', () => {
|
||||
setDOM();
|
||||
|
||||
let failed = false;
|
||||
let failed = false;
|
||||
|
||||
try {
|
||||
const keyboard = new Keyboard();
|
||||
@@ -1189,9 +1098,7 @@ it('Keyboard parseRowDOMContainers will ignore empty rows', () => {
|
||||
|
||||
|
||||
it('Keyboard parseRowDOMContainers will ignore missing endIndex or endIndex before startIndex', () => {
|
||||
setDOM();
|
||||
|
||||
new Keyboard({
|
||||
new Keyboard({
|
||||
layout: {
|
||||
'default': [
|
||||
'` [1 2 3 4 5 6 7 8 9 0 - = {bksp}',
|
||||
@@ -1206,9 +1113,7 @@ it('Keyboard parseRowDOMContainers will ignore missing endIndex or endIndex befo
|
||||
});
|
||||
|
||||
it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () => {
|
||||
setDOM();
|
||||
|
||||
new Keyboard({
|
||||
new Keyboard({
|
||||
disableRowButtonContainers: true,
|
||||
layout: {
|
||||
'default': [
|
||||
@@ -1234,9 +1139,7 @@ it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () =
|
||||
});
|
||||
|
||||
it('Keyboard inputName change will trigget caretPosition reset', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
keyboard.setCaretPosition(0);
|
||||
|
||||
@@ -1257,9 +1160,7 @@ it('Keyboard inputName change will trigget caretPosition reset', () => {
|
||||
});
|
||||
|
||||
it('Keyboard destroy will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
keyboard.destroy();
|
||||
expect(keyboard.keyboardDOM.innerHTML).toBe("");
|
||||
|
||||
@@ -1280,17 +1181,13 @@ it('Keyboard destroy will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard destroy will work with debug option', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({ debug: true });
|
||||
const keyboard = new Keyboard({ debug: true });
|
||||
keyboard.destroy();
|
||||
expect(keyboard.keyboardDOM.innerHTML).toBe("");
|
||||
});
|
||||
|
||||
it('Keyboard disableButtonHold will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
disableButtonHold: true
|
||||
});
|
||||
|
||||
@@ -1298,9 +1195,7 @@ it('Keyboard disableButtonHold will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard caretEventHandler will be triggered on mouseup and ontouchend', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
disableCaretPositioning: true
|
||||
});
|
||||
|
||||
@@ -1323,9 +1218,7 @@ it('Keyboard caretEventHandler will be triggered on mouseup and ontouchend', ()
|
||||
});
|
||||
|
||||
it('Keyboard onKeyReleased will work', () => {
|
||||
setDOM();
|
||||
|
||||
let pressed = false;
|
||||
let pressed = false;
|
||||
let firedTimes = 0;
|
||||
let buttonPressed;
|
||||
|
||||
@@ -1347,9 +1240,7 @@ it('Keyboard onKeyReleased will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard buttonAttribute will work', () => {
|
||||
setDOM();
|
||||
|
||||
new Keyboard({
|
||||
new Keyboard({
|
||||
buttonAttributes: [
|
||||
{
|
||||
attribute: "aria-label",
|
||||
@@ -1361,9 +1252,7 @@ it('Keyboard buttonAttribute will work', () => {
|
||||
});
|
||||
|
||||
it('Keyboard buttonAttribute will warn about invalid entries', () => {
|
||||
setDOM();
|
||||
|
||||
new Keyboard({
|
||||
new Keyboard({
|
||||
buttonAttributes: [
|
||||
{
|
||||
attribute: false,
|
||||
@@ -1403,16 +1292,12 @@ it('Keyboard will work with a DOM element param with class', () => {
|
||||
});
|
||||
|
||||
it('Keyboard handleKeyboardContainerMouseDown will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
keyboard.keyboardDOM.onpointerdown();
|
||||
});
|
||||
|
||||
it('Keyboard handleKeyboardContainerMouseDown will respect preventMouseDownDefault', () => {
|
||||
setDOM();
|
||||
|
||||
let works = false;
|
||||
let works = false;
|
||||
const keyboard = new Keyboard({ preventMouseDownDefault: true });
|
||||
keyboard.keyboardDOM.onpointerdown({ preventDefault: () => {
|
||||
works = true
|
||||
@@ -1422,9 +1307,7 @@ it('Keyboard handleKeyboardContainerMouseDown will respect preventMouseDownDefau
|
||||
});
|
||||
|
||||
it('Keyboard caret positioning will work', () => {
|
||||
setDOM();
|
||||
|
||||
const keyboard = new Keyboard({
|
||||
const keyboard = new Keyboard({
|
||||
onKeyPress: (button) => {
|
||||
if (button === "{shift}" || button === "{lock}") handleShift();
|
||||
else if (keyboard.options.layoutName === "shift") handleShift();
|
||||
@@ -1449,4 +1332,23 @@ it('Keyboard caret positioning will work', () => {
|
||||
keyboard.getButtonElement("l").onpointerdown();
|
||||
|
||||
expect(keyboard.getInput()).toBe("hEllo");
|
||||
});
|
||||
|
||||
it('Keyboard excludeFromLayout will work', () => {
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
expect(keyboard.getButtonElement("a")).toBeDefined();
|
||||
|
||||
keyboard.setOptions({
|
||||
excludeFromLayout: {
|
||||
default: ["a"]
|
||||
}
|
||||
});
|
||||
|
||||
expect(keyboard.getButtonElement("a")).toBeUndefined();
|
||||
});
|
||||
|
||||
it('Keyboard onSetOptions can be called without changedOptions param', () => {
|
||||
const keyboard = new Keyboard();
|
||||
expect(keyboard.onSetOptions()).toBeUndefined();
|
||||
});
|
||||
+58
-2
@@ -1,3 +1,7 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
import SimpleKeyboard from "./components/Keyboard";
|
||||
import Utilities from "./services/Utilities";
|
||||
|
||||
export interface KeyboardLayoutObject {
|
||||
[key: string]: string[];
|
||||
}
|
||||
@@ -17,11 +21,33 @@ export interface KeyboardInput {
|
||||
[key: string]: string
|
||||
}
|
||||
|
||||
export type KeyboardButton = HTMLDivElement | HTMLButtonElement;
|
||||
export type KeyboardParams = [KeyboardOptions] | [string | HTMLDivElement, KeyboardOptions];
|
||||
|
||||
export type CandidateBoxParams = {
|
||||
utilities: Utilities
|
||||
}
|
||||
|
||||
export type CandidateBoxShowParams = {
|
||||
candidateValue: string,
|
||||
targetElement: KeyboardElement,
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
onSelect: (selectedCandidate: string) => void
|
||||
}
|
||||
|
||||
export type CandidateBoxRenderParams = {
|
||||
candidateListPages: string[][],
|
||||
targetElement: KeyboardElement,
|
||||
pageIndex: number;
|
||||
nbPages: number;
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
onItemSelected: (selectedCandidate: string) => void
|
||||
}
|
||||
|
||||
export type KeyboardElement = HTMLDivElement | HTMLButtonElement;
|
||||
export type KeyboardHandlerEvent = PointerEvent & TouchEvent & KeyboardEvent & { target: HTMLDivElement | HTMLInputElement };
|
||||
|
||||
export interface KeyboardButtonElements {
|
||||
[key: string]: KeyboardButton[]
|
||||
[key: string]: KeyboardElement[]
|
||||
}
|
||||
|
||||
export interface UtilitiesParams {
|
||||
@@ -179,6 +205,36 @@ export interface KeyboardOptions {
|
||||
*/
|
||||
rtl?: boolean;
|
||||
|
||||
/**
|
||||
* Enable input method editor candidate list support.
|
||||
*/
|
||||
enableLayoutCandidates?: boolean;
|
||||
|
||||
/**
|
||||
* Character suggestions to be shown on certain key presses
|
||||
*/
|
||||
layoutCandidates?: { [key: string]: string };
|
||||
|
||||
/**
|
||||
* Exclude buttons from layout
|
||||
*/
|
||||
excludeFromLayout?: { [key: string]: string[] };
|
||||
|
||||
/**
|
||||
* Determine size of layout candidate list
|
||||
*/
|
||||
layoutCandidatesPageSize?: number;
|
||||
|
||||
/**
|
||||
* Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
|
||||
*/
|
||||
onRender?: (instance?: SimpleKeyboard) => void;
|
||||
|
||||
/**
|
||||
* Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
|
||||
*/
|
||||
onInit?: (instance?: SimpleKeyboard) => void;
|
||||
|
||||
/**
|
||||
* Module options can have any format
|
||||
*/
|
||||
|
||||
@@ -31,17 +31,26 @@ class Utilities {
|
||||
Utilities.bindMethods(Utilities, this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve button type
|
||||
*
|
||||
* @param {string} button The button's layout name
|
||||
* @return {string} The button type
|
||||
*/
|
||||
getButtonType(button: string): string {
|
||||
return button.includes("{") && button.includes("}") && button !== "{//}"
|
||||
? "functionBtn"
|
||||
: "standardBtn";
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds default classes to a given button
|
||||
*
|
||||
* @param {string} button The button's layout name
|
||||
* @return {string} The classes to be added to the button
|
||||
*/
|
||||
getButtonClass(button: string) {
|
||||
const buttonTypeClass =
|
||||
button.includes("{") && button.includes("}") && button !== "{//}"
|
||||
? "functionBtn"
|
||||
: "standardBtn";
|
||||
getButtonClass(button: string): string {
|
||||
const buttonTypeClass = this.getButtonType(button);
|
||||
const buttonWithoutBraces = button.replace("{", "").replace("}", "");
|
||||
let buttonNormalized = "";
|
||||
|
||||
@@ -418,7 +427,7 @@ class Utilities {
|
||||
* Determines whether pointer events are supported
|
||||
*/
|
||||
pointerEventsSupported() {
|
||||
return window.PointerEvent;
|
||||
return !!window.PointerEvent;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -453,6 +462,18 @@ class Utilities {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Split array into chunks
|
||||
*/
|
||||
chunkArray<T>(arr: T[], size: number): T[][] {
|
||||
return [...Array(Math.ceil(arr.length / size))].map((_, i) =>
|
||||
arr.slice(size * i, size + size * i)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reusable empty function
|
||||
*/
|
||||
static noop = () => {};
|
||||
}
|
||||
|
||||
|
||||
@@ -17,11 +17,11 @@ it('Keyboard mergeDisplay will work', () => {
|
||||
it('Keyboard function buttons will work', () => {
|
||||
setDOM();
|
||||
|
||||
new Keyboard();
|
||||
const keyboard = new Keyboard();
|
||||
|
||||
testLayoutFctButtons((fctBtnCount, fctBtnHasOnclickCount) => {
|
||||
testLayoutFctButtons(keyboard, (fctBtnCount, fctBtnHasOnclickCount) => {
|
||||
expect(fctBtnCount).toBe(fctBtnHasOnclickCount);
|
||||
});
|
||||
}, keyboard);
|
||||
});
|
||||
|
||||
it('Keyboard {bksp} button will work', () => {
|
||||
|
||||
Reference in New Issue
Block a user