sidebar.ts: Extract multi-key shortcut command code

Make the multi-key command generic so that it works with other commands,
not just `\m`.

Use the array equality method from Abhi
(https://stackoverflow.com/users/2968762/abhi) on Stack Overflow:
https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript/19746771#19746771

3 files changed, 43 insertions, 22 deletions

diff --git a/src/key_codes.ts b/src/key_codes.ts
index 301b44a..2442f3c 100644
--- a/src/key_codes.ts
+++ b/src/key_codes.ts
@@ -1,4 +1,6 @@
-var key_codes: { [index: string]: number } = {
+export type KeyCode = number;
+
+var key_codes: { [index: string]: KeyCode } = {
 	SLASH: 220,
 	M: 77
 };
diff --git a/src/multi_key_command.ts b/src/multi_key_command.ts
new file mode 100644
index 0000000..7e303fe
--- /dev/null
+++ b/src/multi_key_command.ts
@@ -0,0 +1,29 @@
+import key_codes, { KeyCode } from './key_codes';
+
+export default function(
+	el: HTMLDocument | HTMLElement,
+	command: KeyCode[],
+	action: () => void
+): void {
+	var key_buffer: number[] = [];
+
+	el.addEventListener('keydown', function(e: KeyboardEvent) {
+		command.forEach((key_code) => {
+			if (e.keyCode === key_code) {
+				key_buffer.push(key_code);
+			}
+		});
+	});
+
+	el.addEventListener('keyup', function(e: KeyboardEvent) {
+		if (key_buffer.length >= 2) {
+			var command_executed = key_buffer.length === command.length
+				&& key_buffer.every((value, index) => value === command[index]);
+
+			if (command_executed) {
+				action();
+				key_buffer = [];
+			}
+		}
+	});
+};
diff --git a/src/sidebar.ts b/src/sidebar.ts
index dbf9cbe..1af0cf5 100644
--- a/src/sidebar.ts
+++ b/src/sidebar.ts
@@ -1,32 +1,22 @@
 import { SIDEBAR } from './gmail_css_class';
 import key_codes from './key_codes';
+import multi_key_command from './multi_key_command';
 
 export default function() {
 	var key_buffer: number[] = [];
 
 	var sidebar: HTMLElement = document.getElementsByClassName(SIDEBAR)[0] as HTMLElement;
 
-	document.addEventListener('keydown', function(e) {
-		if (e.keyCode === key_codes.SLASH) {
-			key_buffer.push(e.keyCode);
-		}
-		if (e.keyCode === key_codes.M) {
-			key_buffer.push(e.keyCode);
-		}
-	});
-
-	document.addEventListener('keyup', function(e) {
-		if (key_buffer.length >= 2) {
-			if (key_buffer[0] === key_codes.SLASH
-				&& key_buffer[1] === key_codes.M) {
-				if (sidebar.offsetParent === null) {
-					sidebar.style.display = 'block';
-				}
-				else {
-					sidebar.style.display = 'none';
-				}
+	multi_key_command(
+		document,
+		[key_codes.SLASH, key_codes.M],
+		function() {
+			if (sidebar.offsetParent === null) {
+				sidebar.style.display = 'block';
+			}
+			else {
+				sidebar.style.display = 'none';
 			}
-			key_buffer = [];
 		}
-	});
+	);
 };