code-boxx/0-JS-SHORTCUT.MD

## 0-JS-SHORTCUT.MD

      
    Raw
  

              0-JS-SHORTCUT.MD
            
          
    JAVASCRIPT SHORTCUT KEYS

https://code-boxx.com/shortcut-keys-javascript/
LICENSE

Copyright by Code Boxx
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.

  
## shortcut.html
<!DOCTYPE html>
<html>
  <head>
    <title>Shortcut Key Demo</title>

    <!-- (A) LOAD JS -->
    <script src="shortcut.js"></script>
  </head>
  <body>
    <script>
    // (B) REGISTER SHORTCUT KEYS & START
    // shortcut-in-small-letters : function to call
    // use https://keycode.info/ to help you get the key names
    shortcut.add({
      "control-alt-f" : () => alert("FOO!"),
      "control-alt-b" : () => alert("BAR!")
    });
    shortcut.start();

    // (C) PAUSE SHORTCUT KEYS
    // shortcut.pause();

    // (D) REMOVE SHORTCUT KEYS
    // shortcut.del("alt-f");
    // shortcut.del(["alt-f", "alt-b"]);
    </script>
  </body>
</html>

## shortcut.js
var shortcut = {
  // (A) PROPERTIES
  pressed : [], // current key presses
  actions : {}, // shortcut keys & functions to call

  // (B) KEYPRESS TRACKER
  track : (key, down) => {
    // (B1) ON KEY DOWN
    if (down) { if (!shortcut.pressed.includes(key)) {
      shortcut.pressed.push(key);
      let sequence = shortcut.pressed.join("-");
      if (shortcut.actions[sequence]) {
        shortcut.reset();
        shortcut.actions[sequence]();
      }
    }}

    // (B2) ON KEY UP
    else {
      let idx = shortcut.pressed.indexOf(key);
      if (idx != -1) { shortcut.pressed.splice(idx, 1); }
    }
  },

  // (C) START/PAUSE LISTENING TO KEY PRESSES
  up : e => shortcut.track(e.key.toLowerCase(), false),
  down : e => shortcut.track(e.key.toLowerCase(), true),
  start : () => {
    window.addEventListener("keyup", shortcut.up);
    window.addEventListener("keydown", shortcut.down);
    window.addEventListener("blur", shortcut.reset);
  },
  pause : () => {
    window.removeEventListener("keyup", shortcut.up);
    window.removeEventListener("keydown", shortcut.down);
    window.removeEventListener("blur", shortcut.reset);
    shortcut.reset();
  },
  reset : () => shortcut.pressed = [],

  // (D) ADD SHORTCUT KEY ACTION(S)
  add : keys => {
    for (let [sc, fn] of Object.entries(keys)) {
      if (shortcut.actions[sc] == undefined) { shortcut.actions[sc] = fn; }
    }
  },

  // (E) REMOVE SHORTCUT KEY ACTION(S)
  del : keys => {
    if (typeof keys == "string") { keys = [keys]; }
    for (let sc of keys) {
      if (shortcut.actions[sc] != undefined) { delete shortcut.actions[sc]; }
    }
  }
};
	<!DOCTYPE html>
	<html>
	<head>
	<title>Shortcut Key Demo</title>

	<!-- (A) LOAD JS -->
	<script src="shortcut.js"></script>
	</head>
	<body>
	<script>
	// (B) REGISTER SHORTCUT KEYS & START
	// shortcut-in-small-letters : function to call
	// use https://keycode.info/ to help you get the key names
	shortcut.add({
	"control-alt-f" : () => alert("FOO!"),
	"control-alt-b" : () => alert("BAR!")
	});
	shortcut.start();

	// (C) PAUSE SHORTCUT KEYS
	// shortcut.pause();

	// (D) REMOVE SHORTCUT KEYS
	// shortcut.del("alt-f");
	// shortcut.del(["alt-f", "alt-b"]);
	</script>
	</body>
	</html>
	var shortcut = {
	// (A) PROPERTIES
	pressed : [], // current key presses
	actions : {}, // shortcut keys & functions to call

	// (B) KEYPRESS TRACKER
	track : (key, down) => {
	// (B1) ON KEY DOWN
	if (down) { if (!shortcut.pressed.includes(key)) {
	shortcut.pressed.push(key);
	let sequence = shortcut.pressed.join("-");
	if (shortcut.actions[sequence]) {
	shortcut.reset();
	shortcut.actions[sequence]();
	}
	}}

	// (B2) ON KEY UP
	else {
	let idx = shortcut.pressed.indexOf(key);
	if (idx != -1) { shortcut.pressed.splice(idx, 1); }
	}
	},

	// (C) START/PAUSE LISTENING TO KEY PRESSES
	up : e => shortcut.track(e.key.toLowerCase(), false),
	down : e => shortcut.track(e.key.toLowerCase(), true),
	start : () => {
	window.addEventListener("keyup", shortcut.up);
	window.addEventListener("keydown", shortcut.down);
	window.addEventListener("blur", shortcut.reset);
	},
	pause : () => {
	window.removeEventListener("keyup", shortcut.up);
	window.removeEventListener("keydown", shortcut.down);
	window.removeEventListener("blur", shortcut.reset);
	shortcut.reset();
	},
	reset : () => shortcut.pressed = [],

	// (D) ADD SHORTCUT KEY ACTION(S)
	add : keys => {
	for (let [sc, fn] of Object.entries(keys)) {
	if (shortcut.actions[sc] == undefined) { shortcut.actions[sc] = fn; }
	}
	},

	// (E) REMOVE SHORTCUT KEY ACTION(S)
	del : keys => {
	if (typeof keys == "string") { keys = [keys]; }
	for (let sc of keys) {
	if (shortcut.actions[sc] != undefined) { delete shortcut.actions[sc]; }
	}
	}
	};