keycon - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

declaration/KeyController.d.ts

@@ -11,8 +11,14 @@ import Component from "@egjs/component";
 }
-export declare class KeyController extends Component {
+declare class KeyController extends Component {
+    ctrlKey: boolean;
+    altKey: boolean;
+    shiftKey: boolean;
+    metaKey: boolean;
     constructor(container?: Window | Document | HTMLElement);
-    keydown(comb: string, callback: (e: KeyControllerEvent) => void): this;
+    clear: () => void;
+    keydown(comb: string | string[], callback: (e: KeyControllerEvent) => void): this;
     keydown(callback: (e: KeyControllerEvent) => void): this;
-    keyup(comb: string, callback: (e: KeyControllerEvent) => void): this;
+    keyup(comb: string | string[], callback: (e: KeyControllerEvent) => void): this;
     keyup(callback: (e: KeyControllerEvent) => void): this;
+    private addEvent;
     private triggerEvent;
@@ -22,2 +28,2 @@ private keydownEvent;
 }
-export default function keycon(container?: Window | Document | HTMLElement): KeyController;
+export default KeyController;

dist/keycon.esm.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/keycon.git
-version: 0.1.3
+version: 0.2.0
 */
@@ -248,3 +248,3 @@ import Component from '@egjs/component';
 repository: https://github.com/daybrush/utils
-@version 0.7.0
+@version 0.7.1
 */
@@ -262,2 +262,20 @@ /**
 /**
+* Check the type that the value is isArray.
+* @memberof Utils
+* @param {string} value - Value to check the type
+* @return {} true if the type is correct, false otherwise
+* @example
+import {isArray} from "@daybrush/utils";
+
+console.log(isArray([])); // true
+console.log(isArray({})); // false
+console.log(isArray(undefined)); // false
+console.log(isArray(null)); // false
+*/
+
+
+function isArray(value) {
+  return Array.isArray(value);
+}
+/**
 * Check the type that the value is string.
@@ -280,3 +298,22 @@ * @memberof Utils
 }
+/**
+* Sets up a function that will be called whenever the specified event is delivered to the target
+* @memberof DOM
+* @param - event target
+* @param - A case-sensitive string representing the event type to listen for.
+* @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs
+* @param - An options object that specifies characteristics about the event listener. The available options are:
+* @example
+import {addEvent} from "@daybrush/utils";
 
+addEvent(el, "click", e => {
+  console.log(e);
+});
+*/
+
+
+function addEvent(el, type, listener, options) {
+  el.addEventListener(type, listener, options);
+}
+
 var codeData = {
@@ -287,2 +324,8 @@ "+": "plus",
 };
+var keysSort = {
+  shift: 1,
+  ctrl: 2,
+  alt: 3,
+  meta: 4
+};
 
@@ -299,2 +342,21 @@ function getKey(keyCode) {
 
+function getCombi(e, key) {
+  var keys = [e.shiftKey && "shift", e.ctrlKey && "ctrl", e.altKey && "alt", e.metaKey && "meta"];
+  keys.indexOf(key) === -1 && keys.push(key);
+  return keys.filter(Boolean);
+}
+
+function getArrangeCombi(keys) {
+  var arrangeKeys = keys.slice();
+  arrangeKeys.sort(function (prev, next) {
+    var prevScore = keysSort[prev] || 5;
+    var nextScore = keysSort[next] || 5;
+    return prevScore - nextScore;
+  });
+  return arrangeKeys;
+}
+/**
+ */
+
+
 var KeyController =
@@ -304,3 +366,7 @@ /*#__PURE__*/
   __extends(KeyController, _super);
+  /**
+   *
+   */
 
+
   function KeyController(container) {
@@ -312,3 +378,29 @@ if (container === void 0) {
     var _this = _super.call(this) || this;
+    /**
+     */
 
+
+    _this.ctrlKey = false;
+    /**
+     */
+
+    _this.altKey = false;
+    /**
+     *
+     */
+
+    _this.shiftKey = false;
+    /**
+     *
+     */
+
+    _this.metaKey = false;
+
+    _this.clear = function () {
+      _this.ctrlKey = false;
+      _this.altKey = false;
+      _this.shiftKey = false;
+      _this.metaKey = false;
+    };
+
     _this.keydownEvent = function (e) {
@@ -322,26 +414,44 @@ _this.triggerEvent("keydown", e);
 
-    container.addEventListener("keydown", _this.keydownEvent);
-    container.addEventListener("keyup", _this.keyupEvent);
+    addEvent(container, "blur", _this.clear);
+    addEvent(container, "keydown", _this.keydownEvent);
+    addEvent(container, "keyup", _this.keyupEvent);
     return _this;
   }
+  /**
+   *
+   */
 
+
   var __proto = KeyController.prototype;
 
   __proto.keydown = function (comb, callback) {
-    if (isString(comb)) {
-      return this.on("keydown." + comb, callback);
-    } else {
-      return this.on("keydown", comb);
-    }
+    return this.addEvent("keydown", comb, callback);
   };
+  /**
+   *
+   */
 
+
   __proto.keyup = function (comb, callback) {
-    if (typeof comb === "string") {
-      return this.on("keyup." + comb, callback);
-    } else {
-      return this.on("keyup", comb);
+    return this.addEvent("keyup", comb, callback);
+  };
+
+  __proto.addEvent = function (type, comb, callback) {
+    var name = type;
+
+    if (isArray(comb)) {
+      name = type + "." + getArrangeCombi(comb).join(".");
+    } else if (isString(comb)) {
+      name = type + "." + comb;
     }
+
+    this.on(name, callback);
+    return this;
   };
 
   __proto.triggerEvent = function (type, e) {
+    this.ctrlKey = e.ctrlKey;
+    this.shiftKey = e.shiftKey;
+    this.altKey = e.altKey;
+    this.metaKey = e.metaKey;
     var key = getKey(e.keyCode);
@@ -359,2 +469,4 @@ var param = {
     this.trigger(type + "." + key, param);
+    var combi = getCombi(e, key);
+    combi.length > 1 && this.trigger(type + "." + combi.join("."), param);
   };
@@ -364,8 +476,4 @@
 }(Component);
-function keycon(container) {
-  return new KeyController(container);
-}
 
-export default keycon;
-export { KeyController };
+export default KeyController;
 //# sourceMappingURL=keycon.esm.js.map

dist/keycon.js

@@ -7,5 +7,5 @@ /*
 repository: git+https://github.com/daybrush/keycon.git
-version: 0.1.3
+version: 0.2.0
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("@egjs/component"),require("@daybrush/utils")):"function"==typeof define&&define.amd?define(["@egjs/component","@daybrush/utils"],t):(e=e||self).keycon=t(e.eg.Component,e.utils)}(this,function(e,r){"use strict";var o=function(e,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var t,n=(function(e,t){function n(e){if(e&&"object"==typeof e){var t=e.which||e.keyCode||e.charCode;t&&(e=t)}if("number"==typeof e)return a[e];var n,r=String(e);return(n=o[r.toLowerCase()])?n:(n=i[r.toLowerCase()])||(1===r.length?r.charCodeAt(0):void 0)}n.isEventKey=function(e,t){if(e&&"object"==typeof e){var n=e.which||e.keyCode||e.charCode;if(null==n)return!1;if("string"==typeof t){var r;if(r=o[t.toLowerCase()])return r===n;if(r=i[t.toLowerCase()])return r===n}else if("number"==typeof t)return t===n;return!1}};var o=(t=e.exports=n).code=t.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,command:91,"left command":91,"right command":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,"my computer":182,"my calculator":183,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},i=t.aliases={windows:91,"⇧":16,"⌥":18,"⌃":17,"⌘":91,ctl:17,control:17,option:18,pause:19,break:19,caps:20,return:13,escape:27,spc:32,spacebar:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91};for(r=97;r<123;r++)o[String.fromCharCode(r)]=r-32;for(var r=48;r<58;r++)o[r-48]=r;for(r=1;r<13;r++)o["f"+r]=r+111;for(r=0;r<10;r++)o["numpad "+r]=r+96;var a=t.names=t.title={};for(r in o)a[o[r]]=r;for(var u in i)o[u]=i[u]}(t={exports:{}},t.exports),t.exports),i=(n.code,n.codes,n.aliases,n.names),a=(n.title,{"+":"plus","left command":"meta","right command":"meta"});var u=function(n){function e(e){void 0===e&&(e=window);var t=n.call(this)||this;return t.keydownEvent=function(e){t.triggerEvent("keydown",e)},t.keyupEvent=function(e){t.triggerEvent("keyup",e)},e.addEventListener("keydown",t.keydownEvent),e.addEventListener("keyup",t.keyupEvent),t}!function(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(e,n);var t=e.prototype;return t.keydown=function(e,t){return r.isString(e)?this.on("keydown."+e,t):this.on("keydown",e)},t.keyup=function(e,t){return"string"==typeof e?this.on("keyup."+e,t):this.on("keyup",e)},t.triggerEvent=function(e,t){var n=function(e){var t=i[e]||"";for(var n in a)t=t.replace(n,a[n]);return t.replace(/\s/g,"")}(t.keyCode),r={key:n,inputEvent:t,keyCode:t.keyCode,ctrlKey:t.ctrlKey,altKey:t.altKey,shiftKey:t.shiftKey,metaKey:t.metaKey};this.trigger(e,r),this.trigger(e+"."+n,r)},e}(e);return function(e){return new u(e)}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("@egjs/component"),require("@daybrush/utils")):"function"==typeof define&&define.amd?define(["@egjs/component","@daybrush/utils"],t):(e=e||self).keycon=t(e.eg.Component,e.utils)}(this,function(e,o){"use strict";var n=function(e,t){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};var t,r=(function(e,t){function r(e){if(e&&"object"==typeof e){var t=e.which||e.keyCode||e.charCode;t&&(e=t)}if("number"==typeof e)return a[e];var r,n=String(e);return(r=o[n.toLowerCase()])?r:(r=i[n.toLowerCase()])||(1===n.length?n.charCodeAt(0):void 0)}r.isEventKey=function(e,t){if(e&&"object"==typeof e){var r=e.which||e.keyCode||e.charCode;if(null==r)return!1;if("string"==typeof t){var n;if(n=o[t.toLowerCase()])return n===r;if(n=i[t.toLowerCase()])return n===r}else if("number"==typeof t)return t===r;return!1}};var o=(t=e.exports=r).code=t.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,command:91,"left command":91,"right command":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,"my computer":182,"my calculator":183,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},i=t.aliases={windows:91,"⇧":16,"⌥":18,"⌃":17,"⌘":91,ctl:17,control:17,option:18,pause:19,break:19,caps:20,return:13,escape:27,spc:32,spacebar:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91};for(n=97;n<123;n++)o[String.fromCharCode(n)]=n-32;for(var n=48;n<58;n++)o[n-48]=n;for(n=1;n<13;n++)o["f"+n]=n+111;for(n=0;n<10;n++)o["numpad "+n]=n+96;var a=t.names=t.title={};for(n in o)a[o[n]]=n;for(var c in i)o[c]=i[c]}(t={exports:{}},t.exports),t.exports),i=(r.code,r.codes,r.aliases,r.names),a=(r.title,{"+":"plus","left command":"meta","right command":"meta"}),c={shift:1,ctrl:2,alt:3,meta:4};return function(r){function e(e){void 0===e&&(e=window);var t=r.call(this)||this;return t.ctrlKey=!1,t.altKey=!1,t.shiftKey=!1,t.metaKey=!1,t.clear=function(){t.ctrlKey=!1,t.altKey=!1,t.shiftKey=!1,t.metaKey=!1},t.keydownEvent=function(e){t.triggerEvent("keydown",e)},t.keyupEvent=function(e){t.triggerEvent("keyup",e)},o.addEvent(e,"blur",t.clear),o.addEvent(e,"keydown",t.keydownEvent),o.addEvent(e,"keyup",t.keyupEvent),t}!function(e,t){function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}(e,r);var t=e.prototype;return t.keydown=function(e,t){return this.addEvent("keydown",e,t)},t.keyup=function(e,t){return this.addEvent("keyup",e,t)},t.addEvent=function(e,t,r){var n=e;return o.isArray(t)?n=e+"."+function(e){var t=e.slice();return t.sort(function(e,t){return(c[e]||5)-(c[t]||5)}),t}(t).join("."):o.isString(t)&&(n=e+"."+t),this.on(n,r),this},t.triggerEvent=function(e,t){this.ctrlKey=t.ctrlKey,this.shiftKey=t.shiftKey,this.altKey=t.altKey,this.metaKey=t.metaKey;var r=function(e){var t=i[e]||"";for(var r in a)t=t.replace(r,a[r]);return t.replace(/\s/g,"")}(t.keyCode),n={key:r,inputEvent:t,keyCode:t.keyCode,ctrlKey:t.ctrlKey,altKey:t.altKey,shiftKey:t.shiftKey,metaKey:t.metaKey};this.trigger(e,n),this.trigger(e+"."+r,n);var o=function(e,t){var r=[e.shiftKey&&"shift",e.ctrlKey&&"ctrl",e.altKey&&"alt",e.metaKey&&"meta"];return-1===r.indexOf(t)&&r.push(t),r.filter(Boolean)}(t,r);1<o.length&&this.trigger(e+"."+o.join("."),n)},e}(e)});
 //# sourceMappingURL=keycon.js.map

dist/keycon.pkgd.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/keycon.git
-version: 0.1.3
+version: 0.2.0
 */
@@ -543,3 +543,3 @@ (function (global, factory) {
     repository: https://github.com/daybrush/utils
-    @version 0.7.0
+    @version 0.7.1
     */
@@ -557,2 +557,20 @@ /**
     /**
+    * Check the type that the value is isArray.
+    * @memberof Utils
+    * @param {string} value - Value to check the type
+    * @return {} true if the type is correct, false otherwise
+    * @example
+    import {isArray} from "@daybrush/utils";
+
+    console.log(isArray([])); // true
+    console.log(isArray({})); // false
+    console.log(isArray(undefined)); // false
+    console.log(isArray(null)); // false
+    */
+
+
+    function isArray(value) {
+      return Array.isArray(value);
+    }
+    /**
     * Check the type that the value is string.
@@ -575,3 +593,22 @@ * @memberof Utils
     }
+    /**
+    * Sets up a function that will be called whenever the specified event is delivered to the target
+    * @memberof DOM
+    * @param - event target
+    * @param - A case-sensitive string representing the event type to listen for.
+    * @param - The object which receives a notification (an object that implements the Event interface) when an event of the specified type occurs
+    * @param - An options object that specifies characteristics about the event listener. The available options are:
+    * @example
+    import {addEvent} from "@daybrush/utils";
 
+    addEvent(el, "click", e => {
+      console.log(e);
+    });
+    */
+
+
+    function addEvent(el, type, listener, options) {
+      el.addEventListener(type, listener, options);
+    }
+
     var codeData = {
@@ -582,2 +619,8 @@ "+": "plus",
     };
+    var keysSort = {
+      shift: 1,
+      ctrl: 2,
+      alt: 3,
+      meta: 4
+    };
 
@@ -594,2 +637,21 @@ function getKey(keyCode) {
 
+    function getCombi(e, key) {
+      var keys = [e.shiftKey && "shift", e.ctrlKey && "ctrl", e.altKey && "alt", e.metaKey && "meta"];
+      keys.indexOf(key) === -1 && keys.push(key);
+      return keys.filter(Boolean);
+    }
+
+    function getArrangeCombi(keys) {
+      var arrangeKeys = keys.slice();
+      arrangeKeys.sort(function (prev, next) {
+        var prevScore = keysSort[prev] || 5;
+        var nextScore = keysSort[next] || 5;
+        return prevScore - nextScore;
+      });
+      return arrangeKeys;
+    }
+    /**
+     */
+
+
     var KeyController =
@@ -599,3 +661,7 @@ /*#__PURE__*/
       __extends(KeyController, _super);
+      /**
+       *
+       */
 
+
       function KeyController(container) {
@@ -607,3 +673,29 @@ if (container === void 0) {
         var _this = _super.call(this) || this;
+        /**
+         */
 
+
+        _this.ctrlKey = false;
+        /**
+         */
+
+        _this.altKey = false;
+        /**
+         *
+         */
+
+        _this.shiftKey = false;
+        /**
+         *
+         */
+
+        _this.metaKey = false;
+
+        _this.clear = function () {
+          _this.ctrlKey = false;
+          _this.altKey = false;
+          _this.shiftKey = false;
+          _this.metaKey = false;
+        };
+
         _this.keydownEvent = function (e) {
@@ -617,26 +709,44 @@ _this.triggerEvent("keydown", e);
 
-        container.addEventListener("keydown", _this.keydownEvent);
-        container.addEventListener("keyup", _this.keyupEvent);
+        addEvent(container, "blur", _this.clear);
+        addEvent(container, "keydown", _this.keydownEvent);
+        addEvent(container, "keyup", _this.keyupEvent);
         return _this;
       }
+      /**
+       *
+       */
 
+
       var __proto = KeyController.prototype;
 
       __proto.keydown = function (comb, callback) {
-        if (isString(comb)) {
-          return this.on("keydown." + comb, callback);
-        } else {
-          return this.on("keydown", comb);
-        }
+        return this.addEvent("keydown", comb, callback);
       };
+      /**
+       *
+       */
 
+
       __proto.keyup = function (comb, callback) {
-        if (typeof comb === "string") {
-          return this.on("keyup." + comb, callback);
-        } else {
-          return this.on("keyup", comb);
+        return this.addEvent("keyup", comb, callback);
+      };
+
+      __proto.addEvent = function (type, comb, callback) {
+        var name = type;
+
+        if (isArray(comb)) {
+          name = type + "." + getArrangeCombi(comb).join(".");
+        } else if (isString(comb)) {
+          name = type + "." + comb;
         }
+
+        this.on(name, callback);
+        return this;
       };
 
       __proto.triggerEvent = function (type, e) {
+        this.ctrlKey = e.ctrlKey;
+        this.shiftKey = e.shiftKey;
+        this.altKey = e.altKey;
+        this.metaKey = e.metaKey;
         var key = getKey(e.keyCode);
@@ -654,2 +764,4 @@ var param = {
         this.trigger(type + "." + key, param);
+        var combi = getCombi(e, key);
+        combi.length > 1 && this.trigger(type + "." + combi.join("."), param);
       };
@@ -659,9 +771,6 @@
     }(Component);
-    function keycon(container) {
-      return new KeyController(container);
-    }
 
-    return keycon;
+    return KeyController;
 
 }));
 //# sourceMappingURL=keycon.pkgd.js.map

dist/keycon.pkgd.min.js

@@ -7,5 +7,5 @@ /*
 repository: git+https://github.com/daybrush/keycon.git
-version: 0.1.3
+version: 0.2.0
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).keycon=t()}(this,function(){"use strict";var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function f(e){return void 0===e}var e=function(){var e=function(){function e(){this._eventHandler={},this.options={}}var t=e.prototype;return t.trigger=function(e,t){void 0===t&&(t={});var n=this._eventHandler[e]||[];if(!(0<n.length))return!0;n=n.concat(),t.eventType=e;var r=!1,o=[t],i=0;t.stop=function(){r=!0},t.currentTarget=this;for(var a=arguments.length,f=new Array(2<a?a-2:0),u=2;u<a;u++)f[u-2]=arguments[u];for(1<=f.length&&(o=o.concat(f)),i=0;n[i];i++)n[i].apply(this,o);return!r},t.once=function(o,i){if("object"==typeof o&&f(i)){var e,t=o;for(e in t)this.once(e,t[e]);return this}if("string"==typeof o&&"function"==typeof i){var a=this;this.on(o,function e(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];i.apply(a,n),a.off(o,e)})}return this},t.hasOn=function(e){return!!this._eventHandler[e]},t.on=function(e,t){if("object"==typeof e&&f(t)){var n,r=e;for(n in r)this.on(n,r[n]);return this}if("string"==typeof e&&"function"==typeof t){var o=this._eventHandler[e];f(o)&&(this._eventHandler[e]=[],o=this._eventHandler[e]),o.push(t)}return this},t.off=function(e,t){if(f(e))return this._eventHandler={},this;if(f(t)){if("string"==typeof e)return this._eventHandler[e]=void 0,this;var n,r=e;for(n in r)this.off(n,r[n]);return this}var o,i,a=this._eventHandler[e];if(a)for(o=0;void 0!==(i=a[o]);o++)if(i===t){a=a.splice(o,1);break}return this},e}();return e.VERSION="2.1.2",e}();var t,n=(function(e,t){function n(e){if(e&&"object"==typeof e){var t=e.which||e.keyCode||e.charCode;t&&(e=t)}if("number"==typeof e)return a[e];var n,r=String(e);return(n=o[r.toLowerCase()])?n:(n=i[r.toLowerCase()])||(1===r.length?r.charCodeAt(0):void 0)}n.isEventKey=function(e,t){if(e&&"object"==typeof e){var n=e.which||e.keyCode||e.charCode;if(null==n)return!1;if("string"==typeof t){var r;if(r=o[t.toLowerCase()])return r===n;if(r=i[t.toLowerCase()])return r===n}else if("number"==typeof t)return t===n;return!1}};var o=(t=e.exports=n).code=t.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,command:91,"left command":91,"right command":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,"my computer":182,"my calculator":183,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},i=t.aliases={windows:91,"⇧":16,"⌥":18,"⌃":17,"⌘":91,ctl:17,control:17,option:18,pause:19,break:19,caps:20,return:13,escape:27,spc:32,spacebar:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91};for(r=97;r<123;r++)o[String.fromCharCode(r)]=r-32;for(var r=48;r<58;r++)o[r-48]=r;for(r=1;r<13;r++)o["f"+r]=r+111;for(r=0;r<10;r++)o["numpad "+r]=r+96;var a=t.names=t.title={};for(r in o)a[o[r]]=r;for(var f in i)o[f]=i[f]}(t={exports:{}},t.exports),t.exports),o=(n.code,n.codes,n.aliases,n.names);n.title;var i={"+":"plus","left command":"meta","right command":"meta"};var a=function(n){function e(e){void 0===e&&(e=window);var t=n.call(this)||this;return t.keydownEvent=function(e){t.triggerEvent("keydown",e)},t.keyupEvent=function(e){t.triggerEvent("keyup",e)},e.addEventListener("keydown",t.keydownEvent),e.addEventListener("keyup",t.keyupEvent),t}!function(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(e,n);var t=e.prototype;return t.keydown=function(e,t){return function(e){return"string"==typeof e}(e)?this.on("keydown."+e,t):this.on("keydown",e)},t.keyup=function(e,t){return"string"==typeof e?this.on("keyup."+e,t):this.on("keyup",e)},t.triggerEvent=function(e,t){var n=function(e){var t=o[e]||"";for(var n in i)t=t.replace(n,i[n]);return t.replace(/\s/g,"")}(t.keyCode),r={key:n,inputEvent:t,keyCode:t.keyCode,ctrlKey:t.ctrlKey,altKey:t.altKey,shiftKey:t.shiftKey,metaKey:t.metaKey};this.trigger(e,r),this.trigger(e+"."+n,r)},e}(e);return function(e){return new a(e)}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).keycon=e()}(this,function(){"use strict";var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function f(t){return void 0===t}var t=function(){var t=function(){function t(){this._eventHandler={},this.options={}}var e=t.prototype;return e.trigger=function(t,e){void 0===e&&(e={});var n=this._eventHandler[t]||[];if(!(0<n.length))return!0;n=n.concat(),e.eventType=t;var r=!1,o=[e],i=0;e.stop=function(){r=!0},e.currentTarget=this;for(var a=arguments.length,f=new Array(2<a?a-2:0),c=2;c<a;c++)f[c-2]=arguments[c];for(1<=f.length&&(o=o.concat(f)),i=0;n[i];i++)n[i].apply(this,o);return!r},e.once=function(o,i){if("object"==typeof o&&f(i)){var t,e=o;for(t in e)this.once(t,e[t]);return this}if("string"==typeof o&&"function"==typeof i){var a=this;this.on(o,function t(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];i.apply(a,n),a.off(o,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&f(e)){var n,r=t;for(n in r)this.on(n,r[n]);return this}if("string"==typeof t&&"function"==typeof e){var o=this._eventHandler[t];f(o)&&(this._eventHandler[t]=[],o=this._eventHandler[t]),o.push(e)}return this},e.off=function(t,e){if(f(t))return this._eventHandler={},this;if(f(e)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var n,r=t;for(n in r)this.off(n,r[n]);return this}var o,i,a=this._eventHandler[t];if(a)for(o=0;void 0!==(i=a[o]);o++)if(i===e){a=a.splice(o,1);break}return this},t}();return t.VERSION="2.1.2",t}();var e,n=(function(t,e){function n(t){if(t&&"object"==typeof t){var e=t.which||t.keyCode||t.charCode;e&&(t=e)}if("number"==typeof t)return a[t];var n,r=String(t);return(n=o[r.toLowerCase()])?n:(n=i[r.toLowerCase()])||(1===r.length?r.charCodeAt(0):void 0)}n.isEventKey=function(t,e){if(t&&"object"==typeof t){var n=t.which||t.keyCode||t.charCode;if(null==n)return!1;if("string"==typeof e){var r;if(r=o[e.toLowerCase()])return r===n;if(r=i[e.toLowerCase()])return r===n}else if("number"==typeof e)return e===n;return!1}};var o=(e=t.exports=n).code=e.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,command:91,"left command":91,"right command":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,"my computer":182,"my calculator":183,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},i=e.aliases={windows:91,"⇧":16,"⌥":18,"⌃":17,"⌘":91,ctl:17,control:17,option:18,pause:19,break:19,caps:20,return:13,escape:27,spc:32,spacebar:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91};for(r=97;r<123;r++)o[String.fromCharCode(r)]=r-32;for(var r=48;r<58;r++)o[r-48]=r;for(r=1;r<13;r++)o["f"+r]=r+111;for(r=0;r<10;r++)o["numpad "+r]=r+96;var a=e.names=e.title={};for(r in o)a[o[r]]=r;for(var f in i)o[f]=i[f]}(e={exports:{}},e.exports),e.exports),i=(n.code,n.codes,n.aliases,n.names);n.title;function o(t,e,n,r){t.addEventListener(e,n,r)}var a={"+":"plus","left command":"meta","right command":"meta"},c={shift:1,ctrl:2,alt:3,meta:4};return function(n){function t(t){void 0===t&&(t=window);var e=n.call(this)||this;return e.ctrlKey=!1,e.altKey=!1,e.shiftKey=!1,e.metaKey=!1,e.clear=function(){e.ctrlKey=!1,e.altKey=!1,e.shiftKey=!1,e.metaKey=!1},e.keydownEvent=function(t){e.triggerEvent("keydown",t)},e.keyupEvent=function(t){e.triggerEvent("keyup",t)},o(t,"blur",e.clear),o(t,"keydown",e.keydownEvent),o(t,"keyup",e.keyupEvent),e}!function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,n);var e=t.prototype;return e.keydown=function(t,e){return this.addEvent("keydown",t,e)},e.keyup=function(t,e){return this.addEvent("keyup",t,e)},e.addEvent=function(t,e,n){var r=t;return!function(t){return Array.isArray(t)}(e)?function(t){return"string"==typeof t}(e)&&(r=t+"."+e):r=t+"."+function(t){var e=t.slice();return e.sort(function(t,e){return(c[t]||5)-(c[e]||5)}),e}(e).join("."),this.on(r,n),this},e.triggerEvent=function(t,e){this.ctrlKey=e.ctrlKey,this.shiftKey=e.shiftKey,this.altKey=e.altKey,this.metaKey=e.metaKey;var n=function(t){var e=i[t]||"";for(var n in a)e=e.replace(n,a[n]);return e.replace(/\s/g,"")}(e.keyCode),r={key:n,inputEvent:e,keyCode:e.keyCode,ctrlKey:e.ctrlKey,altKey:e.altKey,shiftKey:e.shiftKey,metaKey:e.metaKey};this.trigger(t,r),this.trigger(t+"."+n,r);var o=function(t,e){var n=[t.shiftKey&&"shift",t.ctrlKey&&"ctrl",t.altKey&&"alt",t.metaKey&&"meta"];return-1===n.indexOf(e)&&n.push(e),n.filter(Boolean)}(e,n);1<o.length&&this.trigger(t+"."+o.join("."),r)},t}(t)});
 //# sourceMappingURL=keycon.pkgd.min.js.map

package.json

 {
   "name": "keycon",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Keyboard Controller",
@@ -9,2 +9,9 @@ "main": "./dist/keycon.js",
   "types": "declaration/KeyController.d.ts",
+  "keywords": [
+    "key",
+    "keycode",
+    "keyboard",
+    "component",
+    "esm"
+  ],
   "scripts": {
@@ -14,4 +21,5 @@ "start": "rollup -c -w",
     "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
-    "release": "npm run build && release",
-    "release:init": "npm run build && release -i"
+    "doc": "rm -rf ./doc && jsdoc -c jsdoc.json",
+    "release": "npm run build && release --dirs dist,doc",
+    "release:init": "npm run build && release -i --dirs dist,doc"
   },
@@ -29,3 +37,3 @@ "repository": {
   "dependencies": {
-    "@daybrush/utils": "^0.7.0",
+    "@daybrush/utils": "^0.7.1",
     "@egjs/component": "^2.1.2",
@@ -36,3 +44,5 @@ "keycode": "^2.2.0"
     "@daybrush/builder": "0.0.4",
+    "@daybrush/jsdoc": "^0.3.7",
     "@daybrush/release": "^0.1.1",
+    "daybrush-jsdoc-template": "^1.5.3",
     "print-sizes": "0.0.4",
@@ -39,0 +49,0 @@ "tslint": "^5.15.0",

src/KeyController.ts

 import Component from "@egjs/component";
 import { names } from "keycode";
-import { isString } from "@daybrush/utils";
+import { isString, isArray, addEvent } from "@daybrush/utils";
 
@@ -10,2 +10,8 @@ const codeData = {
 };
+const keysSort = {
+    shift: 1,
+    ctrl: 2,
+    alt: 3,
+    meta: 4,
+};
 function getKey(keyCode: number) {
@@ -17,5 +23,25 @@ let key = names[keyCode] || "";
     }
-
     return key.replace(/\s/g, "");
 }
+function getCombi(e: KeyboardEvent, key: string) {
+    const keys = [e.shiftKey && "shift", e.ctrlKey && "ctrl", e.altKey && "alt", e.metaKey && "meta"];
+    keys.indexOf(key) === -1 && keys.push(key);
+
+    return keys.filter(Boolean);
+}
+function getArrangeCombi(keys: string[]) {
+    const arrangeKeys = keys.slice();
+    arrangeKeys.sort((prev, next) => {
+        const prevScore = keysSort[prev] || 5;
+        const nextScore = keysSort[next] || 5;
+
+        return prevScore - nextScore;
+    });
+
+    return arrangeKeys;
+}
+/**
+ * @typedef
+ * @memberof KeyController
+ */
 export interface KeyControllerEvent {
@@ -30,34 +56,77 @@ inputEvent: KeyboardEvent;
 }
-export class KeyController extends Component {
+/**
+ */
+class KeyController extends Component {
+    /**
+     */
+    public ctrlKey = false;
+    /**
+     */
+    public altKey = false;
+    /**
+     *
+     */
+    public shiftKey = false;
+    /**
+     *
+     */
+    public metaKey = false;
+    /**
+     *
+     */
     constructor(container: Window | Document | HTMLElement = window) {
         super();
 
-        container.addEventListener("keydown", this.keydownEvent);
-        container.addEventListener("keyup", this.keyupEvent);
+        addEvent(container, "blur", this.clear);
+        addEvent(container, "keydown", this.keydownEvent);
+        addEvent(container, "keyup", this.keyupEvent);
     }
-    public keydown(comb: string, callback: (e: KeyControllerEvent) => void): this;
+    public clear = () => {
+        this.ctrlKey = false;
+        this.altKey = false;
+        this.shiftKey = false;
+        this.metaKey = false;
+    }
+    public keydown(comb: string | string[], callback: (e: KeyControllerEvent) => void): this;
     public keydown(callback: (e: KeyControllerEvent) => void): this;
+    /**
+     *
+     */
     public keydown(
-        comb: string | ((e: KeyControllerEvent) => void),
+        comb: string | string[] | ((e: KeyControllerEvent) => void),
         callback?: (e: KeyControllerEvent) => void,
     ) {
-        if (isString(comb)) {
-            return this.on(`keydown.${comb}`, callback);
-        } else {
-            return this.on(`keydown`, comb);
-        }
+        return this.addEvent("keydown", comb, callback);
     }
-    public keyup(comb: string, callback: (e: KeyControllerEvent) => void): this;
+    public keyup(comb: string | string[], callback: (e: KeyControllerEvent) => void): this;
     public keyup(callback: (e: KeyControllerEvent) => void): this;
+    /**
+     *
+     */
     public keyup(
-        comb: string | ((e: KeyControllerEvent) => void),
+        comb: string | string[] | ((e: KeyControllerEvent) => void),
         callback?: (e: KeyControllerEvent) => void,
     ) {
-        if (typeof comb === "string") {
-            return this.on(`keyup.${comb}`, callback);
-        } else {
-            return this.on(`keyup`, comb);
+        return this.addEvent("keyup", comb, callback);
+    }
+    private addEvent(
+        type: "keydown" | "keyup",
+        comb: string | string[] | ((e: KeyControllerEvent) => void),
+        callback?: (e: KeyControllerEvent) => void,
+    ) {
+        let name: string = type;
+        if (isArray(comb)) {
+            name = `${type}.${getArrangeCombi(comb).join(".")}`;
+        } else if (isString(comb)) {
+            name = `${type}.${comb}`;
         }
+        this.on(name, callback);
+        return this;
     }
     private triggerEvent(type: "keydown" | "keyup", e: KeyboardEvent) {
+        this.ctrlKey = e.ctrlKey;
+        this.shiftKey = e.shiftKey;
+        this.altKey = e.altKey;
+        this.metaKey = e.metaKey;
+
         const key = getKey(e.keyCode);
@@ -75,2 +144,6 @@ const param: KeyControllerEvent = {
         this.trigger(`${type}.${key}`, param);
+
+        const combi = getCombi(e, key);
+
+        combi.length > 1 && this.trigger(`${type}.${combi.join(".")}`, param);
     }
@@ -85,4 +158,2 @@ private keydownEvent = (e: KeyboardEvent) => {
 
-export default function keycon(container?: Window | Document | HTMLElement) {
-    return new KeyController(container);
-}
+export default KeyController;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

200414

increased by12.64%

Number of package files

21

increased by10.53%

Lines of code

1409

increased by25.02%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

49

increased byInfinity%

Worsened metrics

Dev dependency count

7

increased by40%

Dependency changes

• Updated@daybrush/utils@^0.7.1