From e76d5d2ef979b2c5d89e0a67c5f1b233c65273a5 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Wed, 20 Nov 2019 22:54:00 +0200
Subject: [PATCH] Port keybinds to vue state; remove jQuery

---
 client/components/ChannelWrapper.vue    |  11 +--
 client/js/helpers/isChannelCollapsed.js |  15 +++
 client/js/keybinds.js                   | 117 ++++++++++++------------
 package.json                            |   1 -
 yarn.lock                               |   5 -
 5 files changed, 79 insertions(+), 70 deletions(-)
 create mode 100644 client/js/helpers/isChannelCollapsed.js

diff --git a/client/components/ChannelWrapper.vue b/client/components/ChannelWrapper.vue
index b5c4b0a0..a4142f8e 100644
--- a/client/components/ChannelWrapper.vue
+++ b/client/components/ChannelWrapper.vue
@@ -1,12 +1,7 @@
 <template>
 	<!-- TODO: move closed style to it's own class -->
 	<div
-		v-if="
-			!network.isCollapsed ||
-				channel.highlight ||
-				channel.type === 'lobby' ||
-				(activeChannel && channel === activeChannel.channel)
-		"
+		v-if="isChannelVisible"
 		ref="element"
 		:class="[
 			'chan',
@@ -33,6 +28,7 @@
 <script>
 import socket from "../js/socket";
 import {generateChannelContextMenu} from "../js/helpers/contextMenu.js";
+import isChannelCollapsed from "../js/helpers/isChannelCollapsed";
 
 export default {
 	name: "ChannelWrapper",
@@ -49,6 +45,9 @@ export default {
 		activeChannel() {
 			return this.$store.state.activeChannel;
 		},
+		isChannelVisible() {
+			return !isChannelCollapsed(this.network, this.channel);
+		},
 	},
 	methods: {
 		close() {
diff --git a/client/js/helpers/isChannelCollapsed.js b/client/js/helpers/isChannelCollapsed.js
new file mode 100644
index 00000000..5c49da1b
--- /dev/null
+++ b/client/js/helpers/isChannelCollapsed.js
@@ -0,0 +1,15 @@
+"use strict";
+
+import store from "../store";
+
+export default (network, channel) => {
+	if (!network.isCollapsed || channel.highlight || channel.type === "lobby") {
+		return false;
+	}
+
+	if (store.state.activeChannel && channel === store.state.activeChannel.channel) {
+		return false;
+	}
+
+	return true;
+};
diff --git a/client/js/keybinds.js b/client/js/keybinds.js
index 7d0a6a49..78f460bb 100644
--- a/client/js/keybinds.js
+++ b/client/js/keybinds.js
@@ -2,74 +2,69 @@
 
 import Mousetrap from "mousetrap";
 
-const $ = require("jquery");
 import store from "./store";
 import {switchToChannel} from "./router";
+import isChannelCollapsed from "./helpers/isChannelCollapsed";
 
 // Switch to the next/previous window in the channel list.
 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();
-	let target;
-
-	switch (direction) {
-		case "up":
-			target = (channels.length + (index - 1 + channels.length)) % channels.length;
-			break;
-
-		case "down":
-			target = (channels.length + (index + 1 + channels.length)) % channels.length;
-			break;
+	if (store.state.networks.length === 0) {
+		return false;
 	}
 
-	target = channels.eq(target).click();
-	scrollIntoViewNicely(target[0]);
+	const direction = keys.split("+").pop() === "up" ? -1 : 1;
+	const flatChannels = [];
+	let index = -1;
+
+	for (const network of store.state.networks) {
+		for (const channel of network.channels) {
+			if (isChannelCollapsed(network, channel)) {
+				continue;
+			}
+
+			if (
+				index === -1 &&
+				store.state.activeChannel &&
+				store.state.activeChannel.channel === channel
+			) {
+				index = flatChannels.length;
+			}
+
+			flatChannels.push(channel);
+		}
+	}
+
+	// Circular array, and a modulo bug workaround because in JS it stays negative
+	const length = flatChannels.length;
+	index = (((index + direction) % length) + length) % length;
+
+	jumpToChannel(flatChannels[index]);
 
 	return false;
 });
 
 // Switch to the next/previous lobby in the channel list
 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"));
-	let target;
+	const length = store.state.networks.length;
 
-	switch (direction) {
-		case "up":
-			if (index < 0) {
-				target = lobbies.index(
-					sidebar
-						.find(".channel")
-						.filter(".active")
-						.siblings(".lobby")[0]
-				);
-			} else {
-				target = (lobbies.length + (index - 1 + lobbies.length)) % lobbies.length;
-			}
-
-			break;
-
-		case "down":
-			if (index < 0) {
-				index = lobbies.index(
-					sidebar
-						.find(".channel")
-						.filter(".active")
-						.siblings(".lobby")[0]
-				);
-			}
-
-			target = (lobbies.length + (index + 1 + lobbies.length)) % lobbies.length;
-
-			break;
+	if (length === 0) {
+		return false;
 	}
 
-	target = lobbies.eq(target).click();
-	scrollIntoViewNicely(target[0]);
+	const direction = keys.split("+").pop() === "up" ? -1 : 1;
+	let index = 0;
+
+	// If we're in another window, jump to first lobby
+	if (store.state.activeChannel) {
+		index = store.state.networks.findIndex((n) => n === store.state.activeChannel.network);
+
+		// If we're in a channel, and it's not the lobby, jump to lobby of this network when going up
+		if (direction !== -1 || store.state.activeChannel.channel.type === "lobby") {
+			index = (((index + direction) % length) + length) % length;
+		}
+	}
+
+	jumpToChannel(store.state.networks[index].channels[0]);
 
 	return false;
 });
@@ -77,28 +72,34 @@ Mousetrap.bind(["alt+shift+up", "alt+shift+down"], function(e, keys) {
 // Jump to the first window with a highlight in it, or the first with unread
 // activity if there are none with highlights.
 Mousetrap.bind(["alt+a"], function() {
-	let targetchan;
+	let targetChannel;
 
 	outer_loop: for (const network of store.state.networks) {
 		for (const chan of network.channels) {
 			if (chan.highlight) {
-				targetchan = chan;
+				targetChannel = chan;
 				break outer_loop;
 			}
 
-			if (chan.unread && !targetchan) {
-				targetchan = chan;
+			if (chan.unread && !targetChannel) {
+				targetChannel = chan;
 			}
 		}
 	}
 
-	if (targetchan) {
-		switchToChannel(targetchan);
+	if (targetChannel) {
+		jumpToChannel(targetChannel);
 	}
 
 	return false;
 });
 
+function jumpToChannel(targetChannel) {
+	switchToChannel(targetChannel);
+
+	scrollIntoViewNicely(document.querySelector(`#sidebar .chan[data-id="${targetChannel.id}"]`));
+}
+
 // Ignored keys which should not automatically focus the input bar
 const ignoredKeys = {
 	8: true, // Backspace
diff --git a/package.json b/package.json
index 86962039..116938e1 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,6 @@
     "graphql-request": "1.8.2",
     "husky": "3.1.0",
     "intersection-observer": "0.7.0",
-    "jquery": "3.4.1",
     "mini-css-extract-plugin": "0.8.0",
     "mocha": "6.2.2",
     "mochapack": "1.1.11",
diff --git a/yarn.lock b/yarn.lock
index b709efda..137fbe19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4697,11 +4697,6 @@ istanbul-reports@^2.2.4:
   dependencies:
     handlebars "^4.1.2"
 
-jquery@3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
-  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
-
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"