From 60342b412126ede333af55ccce8b6cae84009a9c Mon Sep 17 00:00:00 2001 From: Avi Goldman Date: Sun, 14 Nov 2021 18:50:57 -0500 Subject: [PATCH 1/2] feat: add support for special characters --- src/tinykeys.ts | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/tinykeys.ts b/src/tinykeys.ts index 3ac8a79..210c8c8 100644 --- a/src/tinykeys.ts +++ b/src/tinykeys.ts @@ -10,20 +10,20 @@ export interface KeyBindingMap { /** * Options to configure the behavior of keybindings. */ - export interface KeyBindingOptions { - /** - * Key presses will listen to this event (default: "keydown"). - */ - event?: "keydown" | "keyup" - - /** - * Keybinding sequences will wait this long between key presses before +export interface KeyBindingOptions { + /** + * Key presses will listen to this event (default: "keydown"). + */ + event?: "keydown" | "keyup" + + /** + * Keybinding sequences will wait this long between key presses before * cancelling (default: 1000). * * **Note:** Setting this value too low (i.e. `300`) will be too fast for many * of your users. - */ - timeout?: number + */ + timeout?: number } /** @@ -42,7 +42,7 @@ let DEFAULT_TIMEOUT = 1000 /** * Keybinding sequences should bind to this event by default. */ - let DEFAULT_EVENT = "keydown" +let DEFAULT_EVENT = "keydown" /** * An alias for creating platform-specific keybinding aliases. @@ -88,6 +88,11 @@ function parse(str: string): KeyBindingPress[] { * partially or exactly. */ function match(event: KeyboardEvent, press: KeyBindingPress): boolean { + // match special characters like '?' and '!' + if (/^[^A-Za-z0-9]$/.test(event.key) && press[1] === event.key) { + return true + } + // prettier-ignore return !( // Allow either the `event.key` or the `event.code` From ea7d10fb806a4bec70843d4f5a1a5a0137ffaa04 Mon Sep 17 00:00:00 2001 From: Avi Goldman Date: Sun, 14 Nov 2021 18:52:56 -0500 Subject: [PATCH 2/2] added ? example --- example/index.html | 49 +++++++++++++++++++++++++++++----------------- example/index.tsx | 3 +++ 2 files changed, 34 insertions(+), 18 deletions(-) diff --git a/example/index.html b/example/index.html index 8502d4a..bda2325 100644 --- a/example/index.html +++ b/example/index.html @@ -24,7 +24,7 @@ font-weight: bold; } - h1+p { + h1 + p { font-size: 1.2em; } @@ -77,56 +77,60 @@ } .github-corner:hover .octo-arm { - animation: octocat-wave 560ms ease-in-out + animation: octocat-wave 560ms ease-in-out; } @keyframes octocat-wave { - 0%, 100% { - transform: rotate(0) + transform: rotate(0); } 20%, 60% { - transform: rotate(-25deg) + transform: rotate(-25deg); } 40%, 80% { - transform: rotate(10deg) + transform: rotate(10deg); } } - @media (max-width:500px) { + @media (max-width: 500px) { .github-corner:hover .octo-arm { - animation: none + animation: none; } .github-corner .octo-arm { - animation: octocat-wave 560ms ease-in-out + animation: octocat-wave 560ms ease-in-out; } } -

tinykeys

-

- A tiny (~400 B) & modern library for keybindings. -

+

A tiny (~400 B) & modern library for keybindings.

- + @@ -140,6 +144,7 @@

Examples

  • Control+D (Windows/Linux) or Command+D (Mac)
    • +
  • ?
    • @@ -155,16 +160,24 @@ 
    Examples
    
   "$mod+KeyD": () => {
     alert("Either 'Control+d' or 'Meta+d' were pressed")
   },
+  "?": () => {
+    alert("The key '?' was pressed")
+  },
 })

    History

    Logs - KeyboardEvent.key + KeyboardEvent.key and KeyboardEvent.code + href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values" + >KeyboardEvent.code used by this library 

    (start typing)
    diff --git a/example/index.tsx b/example/index.tsx index 7cb6f7d..b4395e5 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -10,4 +10,7 @@ tinykeys(window, { "$mod+KeyD": () => { alert("Either 'Control+d' or 'Meta+d' were pressed") }, + "?": () => { + alert("The key '?' was pressed") + }, })