github/simple-keyboard
github/simple-keyboard
3
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2024-10-06 15:52:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

Single button styling support (buttonTheme)

Browse Source
This commit is contained in:
Francisco Hodge 2018-06-29 20:01:29 -04:00
parent 201542b189
commit 1e16bde389
1 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -112,6 +112,26 @@ class SimpleKeyboard {
let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
let layout = this.options.layout || KeyboardLayout.getLayout(this.options.layoutName);
/**
* Account for buttonTheme, if set
*/
let buttonThemesParsed = {};
if(Array.isArray(this.options.buttonTheme)){
this.options.buttonTheme.forEach(themeObj => {
if(themeObj.buttons && themeObj.class){
let themeButtons = themeObj.buttons.split(' ');
if(Array.isArray(themeButtons)){
themeButtons.forEach(themeButton => {
buttonThemesParsed[themeButton] = themeObj.class;
});
}
} else {
console.warn(`buttonTheme row is missing the "buttons" or the "class". Please check the documentation.`)
}
});
}
/**
* Adding themeClass, layoutClass to keyboardDOM
*/
@ -120,7 +140,7 @@ class SimpleKeyboard {
/**
* Iterating through each row
*/
layout[this.options.layoutName].forEach((row, index) => {
layout[this.options.layoutName].forEach((row) => {
let rowArray = row.split(' ');
/**
@ -132,15 +152,16 @@ class SimpleKeyboard {
/**
* Iterating through each button in row
*/
rowArray.forEach((button, index) => {
rowArray.forEach((button) => {
let fctBtnClass = Utilities.getButtonClass(button);
let buttonThemeClass = buttonThemesParsed[button];
let buttonDisplayName = Utilities.getButtonDisplayName(button, this.options.display);
/**
* Creating button
*/
var buttonDOM = document.createElement('div');
buttonDOM.className += `hg-button ${fctBtnClass}`;
buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
buttonDOM.onclick = () => this.handleButtonClicked(button);
/**