From 2e3b95b9ed4d6a289c644c521885c2ad720b61e2 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Mon, 9 Jul 2018 21:51:27 +0300
Subject: [PATCH] Fix input keybinds

---
 client/components/ChatInput.vue | 52 ++++++++++++++++++++++++++++
 client/js/keybinds.js           | 60 +++------------------------------
 2 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index fe9bfdf4..fc44db31 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -31,6 +31,33 @@
 <script>
 const $ = require("jquery");
 const socket = require("../js/socket");
+const Mousetrap = require("mousetrap");
+const {wrapCursor} = require("undate");
+
+const colorsHotkeys = {
+	k: "\x03",
+	b: "\x02",
+	u: "\x1F",
+	i: "\x1D",
+	o: "\x0F",
+	s: "\x1e",
+	m: "\x11",
+};
+
+// Autocomplete bracket and quote characters like in a modern IDE
+// For example, select `text`, press `[` key, and it becomes `[text]`
+const bracketWraps = {
+	'"': '"',
+	"'": "'",
+	"(": ")",
+	"<": ">",
+	"[": "]",
+	"{": "}",
+	"*": "*",
+	"`": "`",
+	"~": "~",
+	"_": "_",
+};
 
 export default {
 	name: "ChatInput",
@@ -42,6 +69,31 @@ export default {
 		if (this.$root.settings.autocomplete) {
 			require("../js/autocompletion").enable();
 		}
+
+		const inputTrap = Mousetrap(this.$refs.input);
+
+		for (const hotkey in colorsHotkeys) {
+			inputTrap.bind("mod+" + hotkey, function(e) {
+				// Key is lowercased because keybinds also get processed if caps lock is on
+				const modifier = colorsHotkeys[e.key.toLowerCase()];
+
+				wrapCursor(
+					e.target,
+					modifier,
+					e.target.selectionStart === e.target.selectionEnd ? "" : modifier
+				);
+
+				return false;
+			});
+		}
+
+		inputTrap.bind(Object.keys(bracketWraps), function(e) {
+			if (e.target.selectionStart !== e.target.selectionEnd) {
+				wrapCursor(e.target, e.key, bracketWraps[e.key]);
+
+				return false;
+			}
+		});
 	},
 	destroyed() {
 		require("../js/autocompletion").disable();
diff --git a/client/js/keybinds.js b/client/js/keybinds.js
index 47f2936a..fb28dc6c 100644
--- a/client/js/keybinds.js
+++ b/client/js/keybinds.js
@@ -2,17 +2,13 @@
 
 const $ = require("jquery");
 const Mousetrap = require("mousetrap");
-const wrapCursor = require("undate").wrapCursor;
 const utils = require("./utils");
-const input = $("#input");
-const sidebar = $("#sidebar");
-const windows = $("#windows");
 
 Mousetrap.bind([
 	"pageup",
 	"pagedown",
 ], function(e, key) {
-	let container = windows.find(".window.active");
+	let container = $("#windows .window.active");
 
 	// Chat windows scroll message container
 	if (container.prop("id") === "chat-container") {
@@ -39,6 +35,7 @@ Mousetrap.bind([
 	"alt+up",
 	"alt+down",
 ], function(e, keys) {
+	const sidebar = $("#sidebar");
 	const channels = sidebar.find(".chan").not(".network.collapsed :not(.lobby)");
 	const index = channels.index(channels.filter(".active"));
 	const direction = keys.split("+").pop();
@@ -64,6 +61,7 @@ Mousetrap.bind([
 	"alt+shift+up",
 	"alt+shift+down",
 ], function(e, keys) {
+	const sidebar = $("#sidebar");
 	const lobbies = sidebar.find(".lobby");
 	const direction = keys.split("+").pop();
 	let index = lobbies.index(lobbies.filter(".active"));
@@ -95,56 +93,6 @@ Mousetrap.bind([
 	return false;
 });
 
-const inputTrap = Mousetrap(input.get(0));
-
-const colorsHotkeys = {
-	k: "\x03",
-	b: "\x02",
-	u: "\x1F",
-	i: "\x1D",
-	o: "\x0F",
-	s: "\x1e",
-	m: "\x11",
-};
-
-for (const hotkey in colorsHotkeys) {
-	inputTrap.bind("mod+" + hotkey, function(e) {
-		// Key is lowercased because keybinds also get processed if caps lock is on
-		const modifier = colorsHotkeys[e.key.toLowerCase()];
-
-		wrapCursor(
-			e.target,
-			modifier,
-			e.target.selectionStart === e.target.selectionEnd ? "" : modifier
-		);
-
-		return false;
-	});
-}
-
-// Autocomplete bracket and quote characters like in a modern IDE
-// For example, select `text`, press `[` key, and it becomes `[text]`
-const bracketWraps = {
-	'"': '"',
-	"'": "'",
-	"(": ")",
-	"<": ">",
-	"[": "]",
-	"{": "}",
-	"*": "*",
-	"`": "`",
-	"~": "~",
-	"_": "_",
-};
-
-inputTrap.bind(Object.keys(bracketWraps), function(e) {
-	if (e.target.selectionStart !== e.target.selectionEnd) {
-		wrapCursor(e.target, e.key, bracketWraps[e.key]);
-
-		return false;
-	}
-});
-
 // Ignored keys which should not automatically focus the input bar
 const ignoredKeys = {
 	8: true, // Backspace
@@ -202,6 +150,8 @@ $(document).on("keydown", (e) => {
 		return;
 	}
 
+	const input = $("#input");
+
 	// On enter, focus the input but do not propagate the event
 	// This way, a new line is not inserted
 	if (e.which === 13) {