keybored/dist/keybored.umd.js

React-based keyboard UI library

(function(o,i){typeof exports=="object"&&typeof module!="undefined"?module.exports=i():typeof define=="function"&&define.amd?define(i):(o=typeof globalThis!="undefined"?globalThis:o||self,o.keybored=i())})(this,function(){"use strict";return i=>{const l=i.function,u=i.nestIn;(()=>{let s,c,d=document.querySelector(u);const n=document.createElement("div");i.keyboard==="std"?(s=["Q","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","C","V","B","N","M","Space","Enter","Backspace"],c=['"Q W E R T Y U I O P" "A S D F G H J K L \u23CE" ". Z X C V B N M \u232B \u23CE" ". . \u23B5 \u23B5 \u23B5 \u23B5 \u23B5 . . ."'],n.classList.add("stdContainer")):i.keyboard==="wasd"&&(s=["W","A","S","D","Space"],c=['". W . . ." "A S D . ." ". \u23B5 \u23B5 \u23B5 ."'],n.classList.add("wasdContainer")),d.appendChild(n),n.style.gridTemplateAreas=c[0];const L=e=>{const t=document.createElement("button");e==="Space"?(t.classList.add("keyButton",e),t.innerHTML="\u23B5",t.style.gridArea="\u23B5"):e==="ShiftRight"||e==="ShiftLeft"?(t.classList.add("keyButton",e),t.innerHTML="\u21E7",t.style.gridArea="\u21E7"):e==="Backspace"?(t.classList.add("keyButton",e),t.innerHTML="\u232B",t.style.gridArea="\u232B"):e==="Enter"?(t.classList.add("keyButton",e),t.innerHTML="\u23CE",t.style.gridArea="\u23CE"):(t.classList.add("keyButton","Key"+e),t.innerHTML=""+e,t.style.gridArea=e),t.ariaLabel=e+" key input",n.appendChild(t)};for(let e=0;e<s.length;e++)L(s[e])})();const a=document.querySelectorAll(".keyButton"),r=s=>{a[s].classList.add("keyPress"),setTimeout(()=>{a[s].classList.remove("keyPress")},150)};for(let s=0;s<a.length;s++)a[s].addEventListener("click",()=>{i.function===void 0||l(document.activeElement.classList[1])});const f=s=>{const c=document.activeElement,d=s.code;i.whatKey===!0&&console.log(d);for(let n=0;n<a.length;n++)a[n].classList.contains(d)&&d!=="Space"&&d===c||a[n].classList.contains(d)&&c.classList.length===0?(r(n),i.function===void 0||l(d)):(a[n]===c&&d==="Enter"||a[n]===c&&d==="Space")&&r(n)};document.addEventListener("keydown",f)}});