key-display first commit

eyebrowkang · Mar 14, 2024 · ed85a3e · ed85a3e
commit ed85a3e
Show file tree

Hide file tree

Showing 7 changed files with 304 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
diff --git a/CHANGELOG b/CHANGELOG
@@ -0,0 +1,4 @@
+## 0.1.0
+
+publish key-display web components
+
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 eyebrowkang
+
+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
@@ -0,0 +1,43 @@
+# Key Display
+
+Display key press on web page
+
+This is a simple web component, you can use it just like normal html element.
+
+## Features
+
+- display key press
+- merge repeat key press and show repeat count
+- combine modifier key and other key
+
+## How to use
+
+Please check the [example](./example/index.html)
+
+```html
+<script type="module">
+  import defineKeyDisplay from "../key-display.js";
+  defineKeyDisplay({
+    maxKeys: 3,
+    timeout: 100000,
+    upperLetter: false,
+    mergeModifierKey: false,
+    mergeRepeatKey: true,
+    showRepeatCount: true,
+  });
+
+  window.onload = () => {
+    const keyDisplay = document.createElement("key-display");
+    document.body.appendChild(keyDisplay);
+  };
+</script>
+```
+
+## Configuration
+
+- `maxKeys`: max number of displayed keys
+- `timeout`: time to disappear
+- `upperLetter`: convert letter to uppercase
+- `mergeModifierKey`: for example: <kbd>Shift + Q</kbd>
+- `mergeRepeatKey`: merge last repeat key press
+- `showRepeatCount`: show repeat count
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Key Display</title>
+</head>
+
+<body>
+  <h1>Key Display</h1>
+  <div class="container">
+    <input id="input-box" />
+  </div>
+  <script type="module">
+    import defineKeyDisplay from "../key-display.js";
+    defineKeyDisplay({
+      maxKeys: 3,
+      timeout: 100000,
+      upperLetter: false,
+      mergeModifierKey: false,
+      mergeRepeatKey: true,
+      showRepeatCount: true,
+    });
+
+    window.onload = () => {
+      const keyDisplay = document.createElement("key-display");
+      document.body.appendChild(keyDisplay);
+    };
+  </script>
+</body>
+
+</html>
diff --git a/key-display.js b/key-display.js
@@ -0,0 +1,174 @@
+export default function(config = {}) {
+  const maxKeys = config.maxKeys || 1;
+  const timeout = config.timeout || 2000;
+  const upperLetter = config.upperLetter || true;
+  const mergeModifierKey = config.mergeModifierKey || true;
+  const mergeRepeatKey = config.mergeRepeatKey || false;
+  const showRepeatCount = config.showRepeatCount || false;
+
+  customElements.define(
+    "key-display",
+    class extends HTMLElement {
+      constructor() {
+        super();
+
+        this.keyPressHistory = [];
+        this.clearContainer = this._clearContainer();
+        this.handleKeydown = this._handleKeydown.bind(this);
+
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.shadow.innerHTML = `
+      <style>
+        .container {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: absolute;
+          bottom: 4rem;
+          left: 50%;
+          transform: translateX(-50%);
+          gap: 10px;
+          animation: fadeIn 0.5s ease-out;
+          user-select: none;
+          z-index: 9999;
+        }
+
+        .key-box {
+          position: relative;
+          color: rgba(23, 23, 23, 0.5);
+          background: rgba(23, 23, 23, 0.5);
+          white-space: nowrap;
+          border-radius: 5px;
+          box-shadow: 0 4px 6px -1px rgba(23, 23, 23, 0.2), 0 2px 4px -2px rgba(23, 23, 23, 0.2);
+        }
+
+        .key-box:last-child {
+          color: rgb(250, 250, 250);
+          background: rgb(23, 23, 23);
+        }
+
+        .key-box .key {
+          padding: 10px 20px;
+          font-size: 16px;
+          font-weight: bold;
+        }
+
+        .key-box .count {
+          position: absolute;
+          top: -100%;
+          left: 50%;
+          transform: translateX(-50%);
+          color: orange;
+          font-size: 1.5rem;
+          font-weight: bold;
+        }
+      </style>
+      <div class="container"></div>
+      `;
+      }
+
+      connectedCallback() {
+        document.addEventListener("keydown", this.handleKeydown);
+      }
+
+      disconnectedCallback() {
+        document.removeEventListener("keydown", this.handleKeydown);
+      }
+
+      createKeyElement({ key }) {
+        const keyContainerEl = document.createElement("div");
+        keyContainerEl.classList.add("key-box");
+
+        const keyEl = document.createElement("div");
+        keyEl.classList.add("key");
+        keyEl.textContent = key;
+
+        const countEl = document.createElement("span");
+        countEl.classList.add("count");
+
+        keyContainerEl.appendChild(countEl);
+        keyContainerEl.appendChild(keyEl);
+
+        return [keyContainerEl, countEl];
+      }
+
+      updateKey(key) {
+        const container = this.shadow.querySelector(".container");
+
+        if (
+          mergeRepeatKey &&
+          this.keyPressHistory.length &&
+          this.keyPressHistory[this.keyPressHistory.length - 1].key === key
+        ) {
+          const lastHistoryItem =
+            this.keyPressHistory[this.keyPressHistory.length - 1];
+          const count = ++lastHistoryItem.count;
+          if (showRepeatCount)
+            lastHistoryItem.countEl.textContent = `\u00D7 ${count}`;
+        } else {
+          const item = {
+            key,
+            count: 1,
+            countEl: null,
+          };
+          const [keyContainerEl, countEl] = this.createKeyElement(item);
+          container.appendChild(keyContainerEl);
+
+          item.countEl = countEl;
+          this.keyPressHistory.push(item);
+        }
+
+        if (this.keyPressHistory.length > maxKeys) {
+          this.keyPressHistory.shift();
+          container.firstChild.remove();
+        }
+
+        this.clearContainer();
+      }
+
+      _clearContainer() {
+        function debounce(func, timeout) {
+          let timer;
+          return (...args) => {
+            timer && clearTimeout(timer);
+            timer = setTimeout(() => {
+              func.apply(this, args);
+            }, timeout);
+          };
+        }
+
+        return debounce(() => {
+          const container = this.shadow.querySelector(".container");
+          this.keyPressHistory = [];
+          container.innerHTML = "";
+        }, timeout);
+      }
+
+      _handleKeydown(event) {
+        let keyCombination = "";
+        if (mergeModifierKey) {
+          if (event.ctrlKey && event.key !== "Control")
+            keyCombination += "Ctrl + ";
+          if (event.shiftKey && event.key !== "Shift")
+            keyCombination += "Shift + ";
+          if (event.altKey && event.key !== "Alt") keyCombination += "Alt + ";
+          if (event.metaKey && event.key !== "Meta")
+            keyCombination += "Meta + ";
+        }
+
+        if (
+          upperLetter &&
+          event.key.length === 1 &&
+          event.key.charCodeAt() >= 97 &&
+          event.key.charCodeAt() <= 122
+        ) {
+          keyCombination += event.key.toUpperCase();
+        } else {
+          keyCombination += event.key;
+        }
+
+        this.updateKey(keyCombination);
+      }
+    }
+  );
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "key-display",
+  "version": "0.1.0",
+  "description": "Display key press on web page",
+  "main": "key-display.js",
+  "type": "module",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/eyebrowkang/key-display.git"
+  },
+  "keywords": [
+    "key",
+    "key-display",
+    "keypress",
+    "keydown"
+  ],
+  "author": "eyebrowkang",
+  "license": "MIT"
+}