release: v1.39.2

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v1.39.2 (22 Dec 2023)
+
+* feat(hotkey): support element option
+
 ## v1.39.1 (21 Nov 2023)
 
 * fix: lazyImport 

DOC.md

@@ -6723,8 +6723,15 @@ Capture keyboard input to trigger given events.
 <details>
 <summary>Type Definition</summary>
 <pre>
-<code class="language-typescript">const hotkey: {
+<code class="language-typescript">namespace hotkey {
+    interface IOptions {
+        element?: HTMLElement;
+    }
+}
+const hotkey: {
+    on(key: string, options: hotkey.IOptions, listener: types.AnyFn): void;
     on(key: string, listener: types.AnyFn): void;
+    off(key: string, options: hotkey.IOptions, listener: types.AnyFn): void;
     off(key: string, listener: types.AnyFn): void;
 };</code>
 </pre>
@@ -6744,9 +6751,16 @@ Register keyboard listener.
 Unregister keyboard listener.
 
 ```javascript
-hotkey.on('k', function() {
-    console.log('k is pressed');
-});
+const container = document.getElementById('container');
+hotkey.on(
+    'k',
+    {
+        element: container
+    },
+    function() {
+        console.log('k is pressed');
+    }
+);
 function keyDown() {}
 hotkey.on('shift+a, shift+b', keyDown);
 hotkey.off('shift+a', keyDown);

DOC_CN.md

@@ -6716,8 +6716,15 @@ sum('2', '5'); // -> 7
 <details>
 <summary>类型定义</summary>
 <pre>
-<code class="language-typescript">const hotkey: {
+<code class="language-typescript">namespace hotkey {
+    interface IOptions {
+        element?: HTMLElement;
+    }
+}
+const hotkey: {
+    on(key: string, options: hotkey.IOptions, listener: types.AnyFn): void;
     on(key: string, listener: types.AnyFn): void;
+    off(key: string, options: hotkey.IOptions, listener: types.AnyFn): void;
     off(key: string, listener: types.AnyFn): void;
 };</code>
 </pre>
@@ -6737,9 +6744,16 @@ sum('2', '5'); // -> 7
 注销监听器。
 
 ```javascript
-hotkey.on('k', function() {
-    console.log('k is pressed');
-});
+const container = document.getElementById('container');
+hotkey.on(
+    'k',
+    {
+        element: container
+    },
+    function() {
+        console.log('k is pressed');
+    }
+);
 function keyDown() {}
 hotkey.on('shift+a, shift+b', keyDown);
 hotkey.off('shift+a', keyDown);

index.json

@@ -2997,7 +2997,8 @@
             "each",
             "unique",
             "trim",
-            "map"
+            "map",
+            "isFn"
         ],
         "description": "Capture keyboard input to trigger given events.",
         "env": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "licia",
-  "version": "1.39.1",
+  "version": "1.39.2",
   "description": "Useful utility collection with zero dependencies",
   "bin": {
     "licia": "./bin/licia.js"

src/hotkey.js

@@ -15,9 +15,16 @@
  */
 
 /* example
- * hotkey.on('k', function() {
- *     console.log('k is pressed');
- * });
+ * const container = document.getElementById('container');
+ * hotkey.on(
+ *     'k',
+ *     {
+ *         element: container
+ *     },
+ *     function() {
+ *         console.log('k is pressed');
+ *     }
+ * );
  * function keyDown() {}
  * hotkey.on('shift+a, shift+b', keyDown);
  * hotkey.off('shift+a', keyDown);
@@ -28,43 +35,101 @@
  */
 
 /* typescript
+ * export declare namespace hotkey {
+ *     interface IOptions {
+ *         element?: HTMLElement;
+ *     }
+ * }
  * export declare const hotkey: {
+ *     on(key: string, options: hotkey.IOptions, listener: types.AnyFn): void;
  *     on(key: string, listener: types.AnyFn): void;
+ *     off(key: string, options: hotkey.IOptions, listener: types.AnyFn): void;
  *     off(key: string, listener: types.AnyFn): void;
  * };
  */
 
-_('Emitter keyCode each unique trim map types');
+_('Emitter keyCode each unique trim map types isFn');
 
 exports = {
-    on(keys, listener) {
+    on(keys, options, listener) {
+        if (isFn(options)) {
+            listener = options;
+            options = {};
+        }
+
         keys = keys.split(regComma);
 
         each(keys, function(key) {
-            emitter.on(normalizeKey(key), listener);
+            key = normalizeKey(key);
+            if (options.element) {
+                const { element } = options;
+                const hotkeyListeners = element._hotkeyListeners || {};
+                element._hotkeyListeners = hotkeyListeners;
+                hotkeyListeners[key] = hotkeyListeners[key] || [];
+                const hotkeyListener = function(e) {
+                    if (key === getKeysFromEvent(e)) {
+                        listener(e);
+                    }
+                };
+                hotkeyListeners[key].push({
+                    listener: hotkeyListener,
+                    origin: listener
+                });
+                element.addEventListener('keydown', hotkeyListener);
+            } else {
+                emitter.on(key, listener);
+            }
         });
     },
-    off(keys, listener) {
+    off(keys, options, listener) {
+        if (isFn(options)) {
+            listener = options;
+            options = {};
+        }
+
         keys = keys.split(regComma);
 
         each(keys, function(key) {
-            emitter.off(normalizeKey(key), listener);
+            key = normalizeKey(key);
+            if (options.element) {
+                const { element } = options;
+                const hotkeyListeners = element._hotkeyListeners;
+                if (hotkeyListeners && hotkeyListeners[key]) {
+                    const listeners = hotkeyListeners[key];
+                    let hotkeyListener;
+                    for (let i = 0, len = listeners.length; i < len; i++) {
+                        if (listeners[i].origin === listener) {
+                            hotkeyListener = listeners[i].listener;
+                            listeners.splice(i, 1);
+                        }
+                    }
+                    if (hotkeyListener) {
+                        element.removeEventListener('keydown', hotkeyListener);
+                    }
+                }
+            } else {
+                emitter.off(key, listener);
+            }
         });
     }
 };
 
 const emitter = new Emitter();
 
 document.addEventListener('keydown', function(e) {
+    emitter.emit(getKeysFromEvent(e), e);
+});
+
+function getKeysFromEvent(e) {
     const keys = [];
 
     if (e.ctrlKey) keys.push('ctrl');
     if (e.shiftKey) keys.push('shift');
 
     keys.push(keyCode(e.keyCode));
 
-    emitter.emit(normalizeKey(keys.join('+')), e);
-});
+    return normalizeKey(keys.join('+'));
+}
 
 function normalizeKey(keyStr) {
     let keys = keyStr.split(regPlus);

test/hotkey.js

@@ -1,4 +1,14 @@
 const trigger = util.trigger;
+let $dom;
+
+before(function() {
+    jQuery('body').append('<div id="hotkey"><div class="inner"></div></div>');
+    $dom = jQuery('#hotkey');
+});
+
+after(function() {
+    $dom.remove();
+});
 
 it('basic', function() {
     let num = 0;
@@ -37,3 +47,37 @@ it('multiple', function() {
     trigger('keydown', { keyCode: b });
     expect(num).to.equal(3);
 });
+
+it('element', () => {
+    let num = 0;
+    const a = 65;
+    const element = $dom[0];
+    function addOne() {
+        num++;
+    }
+
+    hotkey.on(
+        'shift+a',
+        {
+            element
+        },
+        addOne
+    );
+    trigger(element, 'keydown', {
+        shiftKey: true,
+        keyCode: a
+    });
+    expect(num).to.equal(1);
+    hotkey.off(
+        'shift+a',
+        {
+            element
+        },
+        addOne
+    );
+    trigger(element, 'keydown', {
+        shiftKey: true,
+        keyCode: a
+    });
+    expect(num).to.equal(1);
+});