rickellis · vitorgouveia · Jul 6, 2022 · Jul 6, 2022
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Vitor Neves Gomes Gouveia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,34 +1,54 @@
-# Shortcuts
+# Shortcut.js
 A Javascript library that lets you trigger events using keyboard shortcuts.
 
-This library is a rewritten and simplified version of [this library](http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js). I was trying to use the original on an Electron project but ran into a number of problems, so I deconstructed it and wrote my own version. It contains about half the lines of code, and comes wrapped in an [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).
+This library is a ES6+ version of [Rick's Shortcuts](https://github.com/rickellis/Shortcuts), I updated it to be used with ES Modules and newer patterns.
 
-### Usage Examples
-After cloning the library, load __test.html__ in your browser to see a few usage examples.
+## Installing
+Download the shortcut file using via wget:
+
+```bash
+wget https://raw.githubusercontent.com/VitorGouveia/Shortcut.js/master/shortcuts.js
+```
+
+then, just import it into your file:
+
+```js
+import { shortcut } from "./shortcuts.js";
+```
+
+<br />
+
+## Usage
 
 ### Adding Shortcuts
 
-To add a keyboard shortcut use:
+To bind a keyboard shortcut use the `add` function:
 
-    shortcuts.add('ctrl+shift+m',function() {
-        myFunction()
-    })
+```js
+shortcut.add('ctrl+shift+m', () => {
+    // your code here
+})
+```
 
-In the above example we are assigning the __control shift m__ keys to a function called `myFunction`.
+### Bnding to a custom element
 
-You can optionally pass a DOM element via the third parameter in order to attach a shortcut to a specific object:
+To bind a keyboard shortcut to a custom HTML element use the `add` function with a third parameter:
 
-    var element = document.getElementById('myid')
+```js
+const element = document.querySelector("#container")
 
-    shortcuts.add('ctrl+shift+m',function() {
-        myFunction()
-    }, element)
+shortcut.add('ctrl+shift+m', () => {
+    // your code here
+}, element)
+```
 
 ### Removing Shortcuts
 
-To remove a keyboard shortcut use:
+To un-bind/remove a keyboard shortcut use the `remove` function:
 
-    shortcuts.remove('ctrl+shift+m')
+```js
+shortcut.remove('ctrl+shift+m')
+```
 
 ### Modifier Keys
 
@@ -39,7 +59,24 @@ The following modifier keys are supported:
 * alt
 * shift
 
-### License
+<br />
+
+## Examples
+see the [example](example.html) for more usage details.
+
+<br />
+
+## Fixes & Improvements
+
+- switch format from IIFE to ESM
+- change `var` variables to `const` and `let`
+- add types with JSDoc
+- remove `keycodes` object for native `event.key` variable
+- use object bracket notation to remove `if`'s
+
+<br />
+
+## (original) License
 
 BSD License
 

diff --git a/example.html b/example.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example - Shortcut.js</title>
+
+    <script type="module" src="./index.js"></script>
+</head>
+<body>
+    <div id="box">
+        <p>this is a box!</p>
+        <p>press ctrl + y to paint this purple!</p>
+    </div>
+
+    <div>
+        <kbd>ctrl</kbd> + <kbd>enter</kbd> is <span>registered</span>
+    </div>
+
+    <button id="unregister">
+        unregister ctrl + enter
+    </button>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,64 @@
+// @ts-check
+"use strict";
+
+import { shortcut } from "./shortcuts.js"
+
+/**
+ * @type {HTMLButtonElement | null}
+ */
+const button = document.querySelector("#unregister")
+
+/** @type {HTMLDivElement | null} */
+const box = document.querySelector("#box")
+
+/**
+ * @type {HTMLSpanElement | null}
+ */
+const registeredSpan = document.querySelector("div span")
+
+if(!button || !box || !registeredSpan) {
+  throw new Error("Elements don't exist? How? HOW?")
+}
+
+let registered = true
+
+button.addEventListener("click", () => {
+  if(registered) {
+    registeredSpan.textContent = "unregistered"
+    button.textContent = "register ctrl + enter"
+    shortcut.remove("ctrl+enter")
+  } else {
+    registeredSpan.textContent = "registered"
+    button.textContent = "unregister ctrl + enter"
+    shortcut.add('ctrl+enter', () => {
+      alert('You pressed ctrl+enter')
+    })
+  }
+
+  registered = !registered
+})
+
+/**
+ * default add usage
+ */
+shortcut.add('ctrl+enter', () => {
+  alert('You pressed ctrl+enter')
+})
+
+/**
+ * usage with custom element
+ */
+shortcut.add('ctrl+enter', () => {
+  alert('You pressed ctrl+enter targeting the box!')
+}, box)
+
+/**
+ * usage with custom element
+ */
+shortcut.add('ctrl+enter', () => {
+  alert('You pressed ctrl+enter targeting the box!')
+}, box)
+
+shortcut.add('ctrl+y', () => {
+  box.style.background = "#7159c1";
+})