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

Precise Button element identifiers

Browse Source
This commit is contained in:
Francisco Hodge 2018-10-06 02:25:04 -04:00
parent c980024e71
commit 5e5c1c4abe
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -285,7 +285,7 @@ class SimpleKeyboard {
/**
* Iterating through each row
*/
layout[this.options.layoutName].forEach((row) => {
layout[this.options.layoutName].forEach((row, rIndex) => {
let rowArray = row.split(' ');
/**
@ -297,6 +297,7 @@ class SimpleKeyboard {
/**
* Iterating through each button in row
*/
rowArray.forEach((button, bIndex) => {
let fctBtnClass = this.utilities.getButtonClass(button);
let buttonThemeClass = buttonThemesParsed[button];
let buttonDisplayName = this.utilities.getButtonDisplayName(button, this.options.display, this.options.mergeDisplay);
@ -308,6 +309,18 @@ class SimpleKeyboard {
buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
buttonDOM.onclick = () => this.handleButtonClicked(button);
/**
* Adding identifier
*/
buttonDOM.setAttribute("data-skBtn", button);
/**
* Adding unique id
* Since there's no limit on spawning same buttons, the unique id ensures you can style every button
*/
let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
buttonDOM.setAttribute("data-skBtnUID", buttonUID);
/**
* Adding button label to button
*/
@ -324,10 +337,9 @@ class SimpleKeyboard {
this.buttonElements[button].push(buttonDOM);
/**
* Calling onInit
* Appending button to row
*/
if(typeof this.options.onInit === "function")
this.options.onInit();
rowDOM.appendChild(buttonDOM);
});