feat(keypad): add keyboard support

Author: karinchechik

src/membrane-keypad-element.ts

@@ -14,20 +14,24 @@ export class MembraneKeypadElement extends LitElement {
 
   renderKey(text: string, x: number, y: number) {
     const keyClass = isNumeric(text) ? 'blue-key' : 'red-key';
+    const keyName = text.toUpperCase();
 
     return svg`<g
       transform="translate(${x} ${y})"
       tabindex="0"
       class=${keyClass}
+      data-key-name=${keyName}
       @blur=${(e: FocusEvent) => {
-        this.up(text, e);
+        this.up(text, e.currentTarget as SVGElement);
       }}
       @mousedown=${() => this.down(text)}
       @mouseup=${() => this.up(text)}
       @touchstart=${() => this.down(text)}
       @touchend=${() => this.up(text)}
-      @keydown=${(e: KeyboardEvent) => e.keyCode === SPACE_KEY && this.down(text, e)}
-      @keyup=${(e: KeyboardEvent) => e.keyCode === SPACE_KEY && this.up(text, e)}
+      @keydown=${(e: KeyboardEvent) =>
+        e.keyCode === SPACE_KEY && this.down(text, e.currentTarget as SVGElement)}
+      @keyup=${(e: KeyboardEvent) =>
+        e.keyCode === SPACE_KEY && this.up(text, e.currentTarget as SVGElement)}
     >
       <use xlink:href="#key" />
       <text x="5.6" y="8.1">${text}</text>
@@ -92,6 +96,8 @@ export class MembraneKeypadElement extends LitElement {
         font-size="8.2px"
         text-anchor="middle"
         xmlns="http://www.w3.org/2000/svg"
+        @keydown=${(e: KeyboardEvent) => this.keyStrokeDown(e.key)}
+        @keyup=${(e: KeyboardEvent) => this.keyStrokeUp(e.key)}
       >
         <defs>
           <rect
@@ -153,11 +159,10 @@ export class MembraneKeypadElement extends LitElement {
     `;
   }
 
-  private down(key: string, event?: UIEvent) {
+  private down(key: string, element?: Element) {
     if (!this.pressedKeys.has(key)) {
-      if (event) {
-        const currTarget = event.currentTarget as SVGElement;
-        currTarget.classList.add('pressed');
+      if (element) {
+        element.classList.add('pressed');
       }
       this.pressedKeys.add(key);
       this.dispatchEvent(
@@ -168,11 +173,10 @@ export class MembraneKeypadElement extends LitElement {
     }
   }
 
-  private up(key: string, event?: UIEvent) {
+  private up(key: string, element?: Element) {
     if (this.pressedKeys.has(key)) {
-      if (event) {
-        const currTarget = event.currentTarget as SVGElement;
-        currTarget.classList.remove('pressed');
+      if (element) {
+        element.classList.remove('pressed');
       }
       this.pressedKeys.delete(key);
       this.dispatchEvent(
@@ -182,4 +186,31 @@ export class MembraneKeypadElement extends LitElement {
       );
     }
   }
+
+  private keyStrokeDown(key: string) {
+    const text = key.toUpperCase();
+    const selectedKey = this.shadowRoot?.querySelector(`[data-key-name="${text}"]`);
+    if (selectedKey) {
+      this.down(text, selectedKey as SVGElement);
+    }
+  }
+
+  private keyStrokeUp(key: string) {
+    const text = key.toUpperCase();
+    const selectedKey = this.shadowRoot?.querySelector(`[data-key-name="${text}"]`);
+    const pressedKeys: NodeListOf<SVGElement> | undefined = this.shadowRoot?.querySelectorAll(
+      '.pressed'
+    );
+
+    if (key === 'Shift') {
+      pressedKeys?.forEach((pressedKey) => {
+        const pressedText = pressedKey.dataset.keyName!;
+        this.up(pressedText, pressedKey);
+      });
+    }
+
+    if (selectedKey) {
+      this.up(text, selectedKey as SVGElement);
+    }
+  }
 }