KeyMan

⌨

쉽게 Key Event를 다룰 수 있습니다.
동시에 1개 이상의 키를 누를 때 발생하는 Shorcut와 순차적으로 키를 누를 때 발생하는 Command로 나뉩니다.
✨ Source: https://github.com/sj-js/keyman
✨ Document: https://sj-js.github.io/sj-js/keyman

Index

1. Getting Started

1-1. How to load?

Browser

  <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@sj-js/keyman/dist/js/keyman.min.js"></script>
  <script>
      var keyman = new KeyMan();
  </script>

ES6+

  npm i @sj-js/keyman

  const KeyMan = require('@sj-js/keyman');
  const keyman = new KeyMan();

1-2. Simple Example

For convenience, 1-1 code, which loads and creates a Library in the example, is omitted.

Example - Shortcut

Shortcut 등록

 keyman.addShortcut({   
     name:'develop-tool',
     keys: ['ctrl', 'shift'],
     keydown: function(event){
         //Something to do when shorcut keys are down             
     },
     keyup: function(event){
         //Something to do when shorcut keys are up
     }
 });

👨‍💻
<style> * { margin:0; cursor:pointer; } div:focus { background-color: Aqua; } </style> <script> keyman.addShortcut({ name:'develop-tool', keys: ['ctrl', 'shift'], keydown: function(event){ document.getElementById('tester').innerHTML = 'KEY ON'; }, keyup: function(event){ document.getElementById('tester').innerHTML = 'KEY OFF'; } }); keyman.addShortcut({ name:'copy-then', keys: ['ctrl', 'c'], keydown: function(event){ document.getElementById('tester').innerHTML = 'COPY ON'; }, keyup: function(event){ document.getElementById('tester').innerHTML = 'COPY AND..'; } }); </script> <body> <div tabindex="0" style="width:100%; min-height:100%;"> Click here and Test key [Ctrl] + [Shift] <div id="tester" style="color:#FF832C; font-weight:bold;"></div> </div> </body>

Example - Command

Commander를 등록합니다.

 var commander = keyman.addCommander('1P');

addCommandMap({Commands..})으로 Command명과 Command Key를 정의합니다.

 commander.addCommandMap({
     'develop-pop': [KeyMan.SHIFT, 'shift'],
     'hello': ['S', 'J', 'J', 'S']
 });

addCommandEventMap({Command Functions..})으로 Command명과 Command Function을 정의합니다.

 commander.addCommandEventMap({
     'develop-pop': function(){ showSkill('Upper Cut !'); },
     'hello': function(){ showSkill('SJ JS so Good!!'); }
 });

👨‍💻

<style> * { margin:0; cursor:pointer; } div:focus { background-color: Aqua; } td { border: 1px solid black } .cmd-map {background:black; color:white;} </style> <script> window.countSkill = 0; function showSkill(skillText){ document.getElementById('tester').innerHTML = skillText + (((++window.countSkill) % 2) ? '~!' : ''); } keyman.addCommander('1P') .addCommandMap({ 'develop-pop': [KeyMan.SHIFT, KeyMan.SHIFT], 'hello': ['S', 'J', 'J', 'S'] }) .addCommandEventMap({ 'develop-pop': function(){ showSkill('Did you like [SHIFT]?'); }, 'hello': function(){ showSkill('SJ JS so Good!!'); }, }); </script> <body> <div tabindex="0" style="width:100%; min-height:100%;"> 1. Click here and Test key <br/> <div id="tester" style="color:#FF832C; font-weight:bold;"></div> 2. Command Map <table> <tr><td>develop-pop</td><td class="cmd-map">[SHIFT] [SHIFT]</td></tr> <tr><td>hello</td><td class="cmd-map">[S] [J] [J] [S]</td></tr> </table> </div> </body>

Example - Defined Key Command

Commander등록과 함께 특정 키를 정의합니다.

 var commander = keyman.addCommander('1P', true)
                       .setUp(['w']).setDown(['s']).setLeft(['a']).setRight(['d'])
                       .setButtonA(['t']).setButtonB(['y']).setButtonC(['g']).setButtonD(['h']);

addCommandMap({Commands..})으로 Command명과 Command Key를 정의합니다.

 commander.addCommandMap({
     'uppercut': [KeyMan.RIGHT, KeyMan.DOWN, KeyMan.DOWNRIGHT, KeyMan.RIGHT, KeyMan.A],
     'uppercut strong': [KeyMan.RIGHT, KeyMan.DOWN, KeyMan.DOWNRIGHT, KeyMan.RIGHT, KeyMan.B],
     'rabekku': [KeyMan.LEFT, KeyMan.RIGHT, KeyMan.A],
     'dropkick': [KeyMan.RIGHT, KeyMan.RIGHT, KeyMan.D],
 });

addCommandEventMap({Command Functions..})으로 Command명과 Command Function을 정의합니다.

 commander.addCommandEventMap({
     'uppercut': function(){ /* Do something */ },
     'uppercut strong': function(){ /* Do something */ },
     'dropkick': function(){ /* Do something */ },
     'rabekku': function(){ /* Do something */ }
 });

👨‍💻
<style> * { margin:0; cursor:pointer; } div:focus { background-color: Aqua; } td { border: 1px solid black } .dir {background:green; color:white;} .btn {background:red; color:white;} .cmd-map {background:black; color:white;} </style> <script> window.countSkill = 0; function showSkill(skillText){ document.getElementById('tester').innerHTML = skillText + (((++window.countSkill) % 2) ? '~!' : ''); } keyman.addCommander('1p', true) .setUp(['w']).setDown(['s']).setLeft(['a']).setRight(['d']) .setButtonA(['t']).setButtonB(['y']).setButtonC(['g']).setButtonD(['h']) .addCommandMap({ 'uppercut': [KeyMan.RIGHT, KeyMan.DOWN, KeyMan.DOWNRIGHT, KeyMan.RIGHT, KeyMan.A], 'uppercut strong': [KeyMan.RIGHT, KeyMan.DOWN, KeyMan.DOWNRIGHT, KeyMan.RIGHT, KeyMan.B], 'rabekku': [KeyMan.LEFT, KeyMan.RIGHT, KeyMan.A], 'dropkick': [KeyMan.RIGHT, KeyMan.RIGHT, KeyMan.D], }) .addCommandEventMap({ 'uppercut': function(){ showSkill('Upper Cut !'); }, 'uppercut strong': function(){ showSkill('Upper Cut !!!!!!!'); }, 'dropkick': function(){ showSkill('Drop Kick !!'); }, 'rabekku': function(){ showSkill('Rabekku !!!'); } }); </script> <body> <div tabindex="0" style="width:100%; min-height:100%;"> 1. Click here and Test key <br/> <div id="tester" style="color:#FF832C; font-weight:bold;"></div> 2. Key Map <table> <tr> <td class="dir">⬆ ️</td><td>W</td> <td class="dir">⬅ ️</td><td>A</td> <td class="dir">⬇ ️</td><td>S</td> <td class="dir">➡ ️</td><td>D</td> <td class="btn">ⓐ</td><td>T</td> <td class="btn">ⓑ</td><td>Y</td> <td class="btn">ⓒ</td><td>G</td> <td class="btn">ⓓ</td><td>H</td> </tr> </table> 3. Command Map <table> <tr><td>Uppercut</td><td class="cmd-map">➡ ️⬇ ️↘ ️➡ ️ⓐ</td></tr> <tr><td>Uppercut Strong</td><td class="cmd-map">➡ ️⬇ ️↘️➡ ️ⓑ</td></tr> <tr><td>Dropkick</td><td class="cmd-map">➡ ️➡ ️ⓓ</td></tr> <tr><td>Rabekku</td><td class="cmd-map">⬅ ️➡ ️ⓐ</td></tr> </table> </div> </body>