github/simple-keyboard
4
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2026-04-30 00:00:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding PrettierPlugin to build process

Browse Source
This commit is contained in:
Francisco Hodge
2019-02-15 21:49:27 -05:00
parent 05976e0e7b
commit 70d2cca7ac
7 changed files with 412 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/services/KeyboardLayout.js
+14 -14
View File
@@ -6,24 +6,24 @@ class KeyboardLayout {
* Get default simple-keyboard layout
* @return {object} The default layout (US-QWERTY)
*/
static getDefaultLayout(){
static getDefaultLayout() {
return {
'default': [
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
'{tab} q w e r t y u i o p [ ] \\',
'{lock} a s d f g h j k l ; \' {enter}',
'{shift} z x c v b n m , . / {shift}',
'.com @ {space}'
default: [
"` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
"{tab} q w e r t y u i o p [ ] \\",
"{lock} a s d f g h j k l ; ' {enter}",
"{shift} z x c v b n m , . / {shift}",
".com @ {space}"
],
'shift': [
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
'{tab} Q W E R T Y U I O P { } |',
shift: [
"~ ! @ # $ % ^ & * ( ) _ + {bksp}",
"{tab} Q W E R T Y U I O P { } |",
'{lock} A S D F G H J K L : " {enter}',
'{shift} Z X C V B N M < > ? {shift}',
'.com @ {space}'
"{shift} Z X C V B N M < > ? {shift}",
".com @ {space}"
]
}
};
}
}
export default KeyboardLayout;
export default KeyboardLayout;
src/lib/services/PhysicalKeyboard.js
+30 -18
View File
@@ -5,7 +5,7 @@ class PhysicalKeyboard {
/**
* Creates an instance of the PhysicalKeyboard service
*/
constructor(simpleKeyboardInstance){
constructor(simpleKeyboardInstance) {
/**
* @type {object} A simple-keyboard instance
*/
@@ -15,7 +15,9 @@ class PhysicalKeyboard {
* Bindings
*/
this.initKeyboardListener = this.initKeyboardListener.bind(this);
this.getSimpleKeyboardLayoutKey = this.getSimpleKeyboardLayoutKey.bind(this);
this.getSimpleKeyboardLayoutKey = this.getSimpleKeyboardLayoutKey.bind(
this
);
/**
* Initialize key listeners
@@ -26,32 +28,40 @@ class PhysicalKeyboard {
/**
* Initializes key event listeners
*/
initKeyboardListener(){
initKeyboardListener() {
// Adding button style on keydown
document.addEventListener("keydown", (event) => {
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
document.addEventListener("keydown", event => {
if (this.simpleKeyboardInstance.options.physicalKeyboardHighlight) {
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
this.simpleKeyboardInstance.dispatch(instance => {
let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`);
let buttonDOM =
instance.getButtonElement(buttonPressed) ||
instance.getButtonElement(`{${buttonPressed}}`);
if(buttonDOM){
buttonDOM.style.backgroundColor = this.simpleKeyboardInstance.options.physicalKeyboardHighlightBgColor || "#9ab4d0";
buttonDOM.style.color = this.simpleKeyboardInstance.options.physicalKeyboardHighlightTextColor || "white";
if (buttonDOM) {
buttonDOM.style.backgroundColor =
this.simpleKeyboardInstance.options
.physicalKeyboardHighlightBgColor || "#9ab4d0";
buttonDOM.style.color =
this.simpleKeyboardInstance.options
.physicalKeyboardHighlightTextColor || "white";
}
});
}
});
// Removing button style on keyup
document.addEventListener("keyup", (event) => {
if(this.simpleKeyboardInstance.options.physicalKeyboardHighlight){
document.addEventListener("keyup", event => {
if (this.simpleKeyboardInstance.options.physicalKeyboardHighlight) {
let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
this.simpleKeyboardInstance.dispatch(instance => {
let buttonDOM = instance.getButtonElement(buttonPressed) || instance.getButtonElement(`{${buttonPressed}}`);
let buttonDOM =
instance.getButtonElement(buttonPressed) ||
instance.getButtonElement(`{${buttonPressed}}`);
if(buttonDOM && buttonDOM.removeAttribute){
if (buttonDOM && buttonDOM.removeAttribute) {
buttonDOM.removeAttribute("style");
}
});
@@ -63,10 +73,10 @@ class PhysicalKeyboard {
* Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
* @param {object} event The KeyboardEvent
*/
getSimpleKeyboardLayoutKey(event){
getSimpleKeyboardLayoutKey(event) {
let output;
if(
if (
event.code.includes("Numpad") ||
event.code.includes("Shift") ||
event.code.includes("Space") ||
@@ -74,7 +84,7 @@ class PhysicalKeyboard {
event.code.includes("Control") ||
event.code.includes("Alt") ||
event.code.includes("Meta")
){
) {
output = event.code;
} else {
output = event.key;
@@ -85,7 +95,9 @@ class PhysicalKeyboard {
*/
if (
output !== output.toUpperCase() ||
(event.code[0] === "F" && Number.isInteger(Number(event.code[1])) && event.code.length <= 3)
(event.code[0] === "F" &&
Number.isInteger(Number(event.code[1])) &&
event.code.length <= 3)
) {
output = output.toLowerCase();
}
@@ -94,4 +106,4 @@ class PhysicalKeyboard {
}
}
export default PhysicalKeyboard;
export default PhysicalKeyboard;
src/lib/services/Utilities.js
+128 -110
View File
@@ -5,7 +5,7 @@ class Utilities {
/**
* Creates an instance of the Utility service
*/
constructor(simpleKeyboardInstance){
constructor(simpleKeyboardInstance) {
/**
* @type {object} A simple-keyboard instance
*/
@@ -26,16 +26,19 @@ class Utilities {
/**
* 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){
let buttonTypeClass = (button.includes("{") && button.includes("}") && button !== '{//}') ? "functionBtn" : "standardBtn";
getButtonClass(button) {
let buttonTypeClass =
button.includes("{") && button.includes("}") && button !== "{//}"
? "functionBtn"
: "standardBtn";
let buttonWithoutBraces = button.replace("{", "").replace("}", "");
let buttonNormalized = '';
let buttonNormalized = "";
if(buttonTypeClass !== "standardBtn")
if (buttonTypeClass !== "standardBtn")
buttonNormalized = ` hg-button-${buttonWithoutBraces}`;
return `hg-${buttonTypeClass}${buttonNormalized}`;
@@ -44,22 +47,22 @@ class Utilities {
/**
* Default button display labels
*/
getDefaultDiplay(){
getDefaultDiplay() {
return {
'{bksp}': 'backspace',
'{backspace}': 'backspace',
'{enter}': '< enter',
'{shift}': 'shift',
'{shiftleft}': 'shift',
'{shiftright}': 'shift',
'{alt}': 'alt',
'{s}': 'shift',
'{tab}': 'tab',
'{lock}': 'caps',
'{capslock}': 'caps',
'{accept}': 'Submit',
'{space}': ' ',
'{//}': ' ',
"{bksp}": "backspace",
"{backspace}": "backspace",
"{enter}": "< enter",
"{shift}": "shift",
"{shiftleft}": "shift",
"{shiftright}": "shift",
"{alt}": "alt",
"{s}": "shift",
"{tab}": "tab",
"{lock}": "caps",
"{capslock}": "caps",
"{accept}": "Submit",
"{space}": " ",
"{//}": " ",
"{esc}": "esc",
"{escape}": "esc",
"{f1}": "f1",
@@ -74,8 +77,8 @@ class Utilities {
"{f10}": "f10",
"{f11}": "f11",
"{f12}": "f12",
'{numpaddivide}': '/',
'{numlock}': 'lock',
"{numpaddivide}": "/",
"{numlock}": "lock",
"{arrowup}": "↑",
"{arrowleft}": "←",
"{arrowdown}": "↓",
@@ -104,18 +107,18 @@ class Utilities {
"{numpad6}": "6",
"{numpad7}": "7",
"{numpad8}": "8",
"{numpad9}": "9",
"{numpad9}": "9"
};
}
/**
* Returns the display (label) name for a given button
*
*
* @param {string} button The button's layout name
* @param {object} display The provided display option
* @param {boolean} mergeDisplay Whether the provided param value should be merged with the default one.
*/
getButtonDisplayName(button, display, mergeDisplay){
if(mergeDisplay){
getButtonDisplayName(button, display, mergeDisplay) {
if (mergeDisplay) {
display = Object.assign({}, this.getDefaultDiplay(), display);
} else {
display = display || this.getDefaultDiplay();
@@ -124,54 +127,61 @@ class Utilities {
return display[button] || button;
}
/**
* Returns the updated input resulting from clicking a given button
*
*
* @param {string} button The button's layout name
* @param {string} input The input string
* @param {object} options The simple-keyboard options object
* @param {number} caretPos The cursor's current position
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/
getUpdatedInput(button, input, options, caretPos, moveCaret){
getUpdatedInput(button, input, options, caretPos, moveCaret) {
let output = input;
if((button === "{bksp}" || button === "{backspace}") && output.length > 0){
if (
(button === "{bksp}" || button === "{backspace}") &&
output.length > 0
) {
output = this.removeAt(output, caretPos, moveCaret);
} else if(button === "{space}")
} else if (button === "{space}")
output = this.addStringAt(output, " ", caretPos, moveCaret);
else if(button === "{tab}" && !(typeof options.tabCharOnTab === "boolean" && options.tabCharOnTab === false)){
else if (
button === "{tab}" &&
!(
typeof options.tabCharOnTab === "boolean" &&
options.tabCharOnTab === false
)
) {
output = this.addStringAt(output, "\t", caretPos, moveCaret);
} else if((button === "{enter}" || button === "{numpadenter}") && options.newLineOnEnter)
} else if (
(button === "{enter}" || button === "{numpadenter}") &&
options.newLineOnEnter
)
output = this.addStringAt(output, "\n", caretPos, moveCaret);
else if(button.includes("numpad") && Number.isInteger(Number(button[button.length - 2]))){
output = this.addStringAt(output, button[button.length - 2], caretPos, moveCaret);
}
else if(button === "{numpaddivide}")
output = this.addStringAt(output, '/', caretPos, moveCaret);
else if(button === "{numpadmultiply}")
output = this.addStringAt(output, '*', caretPos, moveCaret);
else if(button === "{numpadsubtract}")
output = this.addStringAt(output, '-', caretPos, moveCaret);
else if(button === "{numpadadd}")
output = this.addStringAt(output, '+', caretPos, moveCaret);
else if(button === "{numpaddecimal}")
output = this.addStringAt(output, '.', caretPos, moveCaret);
else if(button === "{" || button === "}")
else if (
button.includes("numpad") &&
Number.isInteger(Number(button[button.length - 2]))
) {
output = this.addStringAt(
output,
button[button.length - 2],
caretPos,
moveCaret
);
} else if (button === "{numpaddivide}")
output = this.addStringAt(output, "/", caretPos, moveCaret);
else if (button === "{numpadmultiply}")
output = this.addStringAt(output, "*", caretPos, moveCaret);
else if (button === "{numpadsubtract}")
output = this.addStringAt(output, "-", caretPos, moveCaret);
else if (button === "{numpadadd}")
output = this.addStringAt(output, "+", caretPos, moveCaret);
else if (button === "{numpaddecimal}")
output = this.addStringAt(output, ".", caretPos, moveCaret);
else if (button === "{" || button === "}")
output = this.addStringAt(output, button, caretPos, moveCaret);
else if(!button.includes("{") && !button.includes("}"))
else if (!button.includes("{") && !button.includes("}"))
output = this.addStringAt(output, button, caretPos, moveCaret);
return output;
@@ -179,14 +189,18 @@ class Utilities {
/**
* Moves the cursor position by a given amount
*
*
* @param {number} length Represents by how many characters the input should be moved
* @param {boolean} minus Whether the cursor should be moved to the left or not.
*/
updateCaretPos(length, minus){
let newCaretPos = this.updateCaretPosAction(this.simpleKeyboardInstance, length, minus);
updateCaretPos(length, minus) {
let newCaretPos = this.updateCaretPosAction(
this.simpleKeyboardInstance,
length,
minus
);
if(this.simpleKeyboardInstance.options.syncInstanceInputs){
if (this.simpleKeyboardInstance.options.syncInstanceInputs) {
this.simpleKeyboardInstance.dispatch(instance => {
instance.caretPosition = newCaretPos;
});
@@ -195,21 +209,25 @@ class Utilities {
/**
* Action method of updateCaretPos
*
*
* @param {object} instance The instance whose position should be updated
* @param {number} length Represents by how many characters the input should be moved
* @param {boolean} minus Whether the cursor should be moved to the left or not.
*/
updateCaretPosAction(instance, length, minus){
if(minus){
if(instance.caretPosition > 0)
instance.caretPosition = instance.caretPosition - length;
updateCaretPosAction(instance, length, minus) {
if (minus) {
if (instance.caretPosition > 0)
instance.caretPosition = instance.caretPosition - length;
} else {
instance.caretPosition = instance.caretPosition + length;
}
if(this.simpleKeyboardInstance.options.debug){
console.log("Caret at:", instance.caretPosition, `(${instance.keyboardDOMClass})`);
if (this.simpleKeyboardInstance.options.debug) {
console.log(
"Caret at:",
instance.caretPosition,
`(${instance.keyboardDOMClass})`
);
}
return instance.caretPosition;
@@ -217,27 +235,28 @@ class Utilities {
/**
* Adds a string to the input at a given position
*
*
* @param {string} source The source input
* @param {string} string The string to add
* @param {number} position The (cursor) position where the string should be added
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/
addStringAt(source, string, position, moveCaret){
addStringAt(source, string, position, moveCaret) {
let output;
if(!position && position !== 0){
if (!position && position !== 0) {
output = source + string;
} else {
output = [source.slice(0, position), string, source.slice(position)].join('');
output = [source.slice(0, position), string, source.slice(position)].join(
""
);
/**
* Avoid caret position change when maxLength is set
*/
if(!this.isMaxLengthReached()){
if(moveCaret) this.updateCaretPos(string.length);
if (!this.isMaxLengthReached()) {
if (moveCaret) this.updateCaretPos(string.length);
}
}
return output;
@@ -245,13 +264,13 @@ class Utilities {
/**
* Removes an amount of characters at a given position
*
*
* @param {string} source The source input
* @param {number} position The (cursor) position from where the characters should be removed
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/
removeAt(source, position, moveCaret){
if(this.simpleKeyboardInstance.caretPosition === 0){
removeAt(source, position, moveCaret) {
if (this.simpleKeyboardInstance.caretPosition === 0) {
return source;
}
@@ -264,27 +283,27 @@ class Utilities {
* Emojis are made out of two characters, so we must take a custom approach to trim them.
* For more info: https://mathiasbynens.be/notes/javascript-unicode
*/
if(position && position >= 0){
prevTwoChars = source.substring(position - 2, position)
if (position && position >= 0) {
prevTwoChars = source.substring(position - 2, position);
emojiMatched = prevTwoChars.match(emojiMatchedReg);
if(emojiMatched){
output = source.substr(0, (position - 2)) + source.substr(position);
if(moveCaret) this.updateCaretPos(2, true);
if (emojiMatched) {
output = source.substr(0, position - 2) + source.substr(position);
if (moveCaret) this.updateCaretPos(2, true);
} else {
output = source.substr(0, (position - 1)) + source.substr(position);
if(moveCaret) this.updateCaretPos(1, true);
output = source.substr(0, position - 1) + source.substr(position);
if (moveCaret) this.updateCaretPos(1, true);
}
} else {
prevTwoChars = source.slice(-2);
emojiMatched = prevTwoChars.match(emojiMatchedReg);
if(emojiMatched){
if (emojiMatched) {
output = source.slice(0, -2);
if(moveCaret) this.updateCaretPos(2, true);
if (moveCaret) this.updateCaretPos(2, true);
} else {
output = source.slice(0, -1);
if(moveCaret) this.updateCaretPos(1, true);
if (moveCaret) this.updateCaretPos(1, true);
}
}
@@ -292,32 +311,32 @@ class Utilities {
}
/**
* Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
*
*
* @param {object} inputObj
* @param {object} options
* @param {string} updatedInput
*/
handleMaxLength(inputObj, options, updatedInput){
handleMaxLength(inputObj, options, updatedInput) {
let maxLength = options.maxLength;
let currentInput = inputObj[options.inputName];
let condition = currentInput.length === maxLength;
if(
if (
/**
* If pressing this button won't add more characters
* We exit out of this limiter function
*/
updatedInput.length <= currentInput.length
){
) {
return false;
}
if(Number.isInteger(maxLength)){
if(options.debug){
if (Number.isInteger(maxLength)) {
if (options.debug) {
console.log("maxLength (num) reached:", condition);
}
if(condition){
if (condition) {
/**
* @type {boolean} Boolean value that shows whether maxLength has been reached
*/
@@ -329,14 +348,14 @@ class Utilities {
}
}
if(typeof maxLength === "object"){
if (typeof maxLength === "object") {
let condition = currentInput.length === maxLength[options.inputName];
if(options.debug){
if (options.debug) {
console.log("maxLength (obj) reached:", condition);
}
if(condition){
if (condition) {
this.maxLengthReached = true;
return true;
} else {
@@ -349,33 +368,32 @@ class Utilities {
/**
* Gets the current value of maxLengthReached
*/
isMaxLengthReached(){
isMaxLengthReached() {
return Boolean(this.maxLengthReached);
}
/**
* Transforms an arbitrary string to camelCase
*
*
* @param {string} string The string to transform.
*/
camelCase(string){
camelCase(string) {
return string
.toLowerCase()
.trim()
.split(/[.\-_\s]/g)
.reduce(
(string, word) =>
word.length ? string + word[0].toUpperCase() + word.slice(1) : string
.reduce((string, word) =>
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){
countInArray(array, value) {
return array.reduce((n, x) => n + (x === value), 0);
}
}