Merge pull request #3594 from thelounge/richrd/jump-to

Jump to channel switcher

client/components/App.vue

@@ -9,10 +9,6 @@
 	</div>
 </template>
 
-<style>
-@import "../css/style.css";
-</style>
-
 <script>
 const constants = require("../js/constants");
 import Mousetrap from "mousetrap";

client/components/Channel.vue

@@ -1,5 +1,5 @@
 <template>
-	<ChannelWrapper ref="wrapper" :network="network" :channel="channel">
+	<ChannelWrapper ref="wrapper" v-bind="$props">
 		<span class="name">{{ channel.name }}</span>
 		<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
 			unreadCount
@@ -36,6 +36,8 @@ export default {
 	props: {
 		network: Object,
 		channel: Object,
+		active: Boolean,
+		isFiltering: Boolean,
 	},
 	computed: {
 		unreadCount() {

client/components/ChannelWrapper.vue

@@ -5,7 +5,7 @@
 		ref="element"
 		:class="[
 			'channel-list-item',
-			{active: activeChannel && channel === activeChannel.channel},
+			{active: active},
 			{'parted-channel': channel.type === 'channel' && channel.state === 0},
 			{'has-draft': channel.pendingMessage},
 			{
@@ -19,7 +19,7 @@
 		:data-name="channel.name"
 		:data-type="channel.type"
 		:aria-controls="'#chan-' + channel.id"
-		:aria-selected="activeChannel && channel === activeChannel.channel"
+		:aria-selected="active"
 		:style="channel.closed ? {transition: 'none', opacity: 0.4} : null"
 		role="tab"
 		@click="click"
@@ -37,13 +37,15 @@ export default {
 	props: {
 		network: Object,
 		channel: Object,
+		active: Boolean,
+		isFiltering: Boolean,
 	},
 	computed: {
 		activeChannel() {
 			return this.$store.state.activeChannel;
 		},
 		isChannelVisible() {
-			return !isChannelCollapsed(this.network, this.channel);
+			return this.isFiltering || !isChannelCollapsed(this.network, this.channel);
 		},
 	},
 	methods: {
@@ -65,6 +67,10 @@ export default {
 			return this.channel.name;
 		},
 		click() {
+			if (this.isFiltering) {
+				return;
+			}
+
 			this.$root.switchToChannel(this.channel);
 		},
 		openContextMenu(event) {

client/components/NetworkList.vue

@@ -1,10 +1,58 @@
 <template>
-	<div v-if="networks.length === 0" class="empty">
+	<div v-if="$store.state.networks.length === 0" class="empty">
 		You are not connected to any networks yet.
 	</div>
+	<div v-else ref="networklist">
+		<div class="jump-to-input">
+			<input
+				ref="searchInput"
+				:value="searchText"
+				placeholder="Jump to..."
+				type="search"
+				class="search input mousetrap"
+				aria-label="Search among the channel list"
+				tabindex="-1"
+				@input="setSearchText"
+				@keydown.up="navigateResults($event, -1)"
+				@keydown.down="navigateResults($event, 1)"
+				@keydown.page-up="navigateResults($event, -10)"
+				@keydown.page-down="navigateResults($event, 10)"
+				@keydown.enter="selectResult"
+				@keydown.escape="deactivateSearch"
+				@focus="activateSearch"
+			/>
+		</div>
+		<div v-if="searchText" class="jump-to-results">
+			<div v-if="results.length">
+				<div
+					v-for="item in results"
+					:key="item.channel.id"
+					@mouseenter="setActiveSearchItem(item.channel)"
+					@click.prevent="selectResult"
+				>
+					<Channel
+						v-if="item.channel.type !== 'lobby'"
+						:channel="item.channel"
+						:network="item.network"
+						:active="item.channel === activeSearchItem"
+						:is-filtering="true"
+					/>
+					<NetworkLobby
+						v-else
+						:channel="item.channel"
+						:network="item.network"
+						:active="item.channel === activeSearchItem"
+						:is-filtering="true"
+					/>
+				</div>
+			</div>
+			<div v-else class="no-results">
+				No results found.
+			</div>
+		</div>
 		<Draggable
 			v-else
-		:list="networks"
+			:list="$store.state.networks"
 			:filter="isCurrentlyInTouch"
 			:prevent-on-filter="false"
 			handle=".channel-list-item[data-type='lobby']"
@@ -18,11 +66,13 @@
 			@end="onDragEnd"
 		>
 			<div
-			v-for="network in networks"
+				v-for="network in $store.state.networks"
 				:id="'network-' + network.uuid"
 				:key="network.uuid"
 				:class="{
 					collapsed: network.isCollapsed,
+					'not-connected': !network.status.connected,
+					'not-secure': !network.status.secure,
 				}"
 				class="network"
 				role="region"
@@ -30,6 +80,10 @@
 				<NetworkLobby
 					:network="network"
 					:is-join-channel-shown="network.isJoinChannelShown"
+					:active="
+						$store.state.activeChannel &&
+							network.channels[0] === $store.state.activeChannel.channel
+					"
 					@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
 				/>
 				<JoinChannel
@@ -58,15 +112,81 @@
 						:key="channel.id"
 						:channel="channel"
 						:network="network"
+						:active="
+							$store.state.activeChannel &&
+								channel === $store.state.activeChannel.channel
+						"
 					/>
 				</Draggable>
 			</div>
 		</Draggable>
+	</div>
 </template>
 
+<style>
+.jump-to-input {
+	margin: 8px;
+	position: relative;
+}
+
+.jump-to-input .input {
+	margin: 0;
+	width: 100%;
+	border: 0;
+	color: #fff;
+	background-color: rgba(255, 255, 255, 0.1);
+	padding-right: 35px;
+}
+
+.jump-to-input .input::placeholder {
+	color: rgba(255, 255, 255, 0.35);
+}
+
+.jump-to-input::before {
+	content: "\f002"; /* http://fontawesome.io/icon/search/ */
+	color: rgba(255, 255, 255, 0.35);
+	position: absolute;
+	right: 8px;
+	top: 0;
+	bottom: 0;
+	pointer-events: none;
+	line-height: 35px !important;
+}
+
+.jump-to-results {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	overflow: auto;
+}
+
+.jump-to-results .no-results {
+	margin: 14px 8px;
+	text-align: center;
+}
+
+.jump-to-results .channel-list-item.active {
+	cursor: pointer;
+}
+
+.jump-to-results .channel-list-item .add-channel,
+.jump-to-results .channel-list-item .close-tooltip {
+	display: none;
+}
+
+.jump-to-results .channel-list-item[data-type="lobby"] {
+	padding: 8px 14px;
+}
+
+.jump-to-results .channel-list-item[data-type="lobby"]::before {
+	content: "\f233";
+}
+</style>
+
 <script>
 import Mousetrap from "mousetrap";
 import Draggable from "vuedraggable";
+import {filter as fuzzyFilter} from "fuzzy";
 import NetworkLobby from "./NetworkLobby.vue";
 import Channel from "./Channel.vue";
 import JoinChannel from "./JoinChannel.vue";
@@ -82,18 +202,53 @@ export default {
 		Channel,
 		Draggable,
 	},
+	data() {
+		return {
+			searchText: "",
+			activeSearchItem: null,
+		};
+	},
 	computed: {
-		networks() {
+		items() {
-			return this.$store.state.networks;
+			const items = [];
+
+			for (const network of this.$store.state.networks) {
+				for (const channel of network.channels) {
+					if (
+						this.$store.state.activeChannel &&
+						channel === this.$store.state.activeChannel.channel
+					) {
+						continue;
+					}
+
+					items.push({network, channel});
+				}
+			}
+
+			return items;
+		},
+		results() {
+			const results = fuzzyFilter(this.searchText, this.items, {
+				extract: (item) => item.channel.name,
+			}).map((item) => item.original);
+
+			return results;
+		},
+	},
+	watch: {
+		searchText() {
+			this.setActiveSearchItem();
 		},
 	},
 	mounted() {
 		Mousetrap.bind("alt+shift+right", this.expandNetwork);
 		Mousetrap.bind("alt+shift+left", this.collapseNetwork);
+		Mousetrap.bind("alt+j", this.toggleSearch);
 	},
 	beforeDestroy() {
 		Mousetrap.unbind("alt+shift+right", this.expandNetwork);
 		Mousetrap.unbind("alt+shift+left", this.collapseNetwork);
+		Mousetrap.unbind("alt+j", this.toggleSearch);
 	},
 	methods: {
 		expandNetwork() {
@@ -123,7 +278,7 @@ export default {
 
 			socket.emit("sort", {
 				type: "networks",
-				order: this.networks.map((n) => n.uuid),
+				order: this.$store.state.networks.map((n) => n.uuid),
 			});
 		},
 		onChannelSort(e) {
@@ -143,6 +298,116 @@ export default {
 				order: channel.network.channels.map((c) => c.id),
 			});
 		},
+		toggleSearch(event) {
+			// Do not handle this keybind in the chat input because
+			// it can be used to type letters with umlauts
+			if (event.target.tagName === "TEXTAREA") {
+				return true;
+			}
+
+			if (this.$refs.searchInput === document.activeElement) {
+				this.deactivateSearch();
+				return false;
+			}
+
+			this.activateSearch();
+			return false;
+		},
+		activateSearch() {
+			if (this.$refs.searchInput === document.activeElement) {
+				return;
+			}
+
+			this.sidebarWasClosed = this.$store.state.sidebarOpen ? false : true;
+			this.$store.commit("sidebarOpen", true);
+			this.$nextTick(() => {
+				this.$refs.searchInput.focus();
+			});
+		},
+		deactivateSearch() {
+			this.activeSearchItem = null;
+			this.searchText = "";
+			this.$refs.searchInput.blur();
+
+			if (this.sidebarWasClosed) {
+				this.$store.commit("sidebarOpen", false);
+			}
+		},
+		setSearchText(e) {
+			this.searchText = e.target.value;
+		},
+		setActiveSearchItem(channel) {
+			if (!this.results.length) {
+				return;
+			}
+
+			if (!channel) {
+				channel = this.results[0].channel;
+			}
+
+			this.activeSearchItem = channel;
+		},
+		selectResult() {
+			if (!this.searchText || !this.results.length) {
+				return;
+			}
+
+			this.$root.switchToChannel(this.activeSearchItem);
+			this.deactivateSearch();
+			this.scrollToActive();
+		},
+		navigateResults(event, direction) {
+			// Prevent propagation to stop global keybind handler from capturing pagedown/pageup
+			// and redirecting it to the message list container for scrolling
+			event.stopImmediatePropagation();
+			event.preventDefault();
+
+			if (!this.searchText) {
+				return;
+			}
+
+			const channels = this.results.map((r) => r.channel);
+
+			// Bail out if there's no channels to select
+			if (!channels.length) {
+				this.activeSearchItem = null;
+				return;
+			}
+
+			let currentIndex = channels.indexOf(this.activeSearchItem);
+
+			// If there's no active channel select the first or last one depending on direction
+			if (!this.activeSearchItem || currentIndex === -1) {
+				this.activeSearchItem = direction ? channels[0] : channels[channels.length - 1];
+				this.scrollToActive();
+				return;
+			}
+
+			currentIndex += direction;
+
+			// Wrap around the list if necessary. Normaly each loop iterates once at most,
+			// but might iterate more often if pgup or pgdown are used in a very short list
+			while (currentIndex < 0) {
+				currentIndex += channels.length;
+			}
+
+			while (currentIndex > channels.length - 1) {
+				currentIndex -= channels.length;
+			}
+
+			this.activeSearchItem = channels[currentIndex];
+			this.scrollToActive();
+		},
+		scrollToActive() {
+			// Scroll the list if needed after the active class is applied
+			this.$nextTick(() => {
+				const el = this.$refs.networklist.querySelector(".channel-list-item.active");
+
+				if (el) {
+					el.scrollIntoView({block: "nearest", inline: "nearest"});
+				}
+			});
+		},
 	},
 };
 </script>

client/components/NetworkLobby.vue

@@ -1,5 +1,5 @@
 <template>
-	<ChannelWrapper :network="network" :channel="channel">
+	<ChannelWrapper v-bind="$props" :channel="channel">
 		<button
 			v-if="network.channels.length > 1"
 			:aria-controls="'network-' + network.uuid"
@@ -58,6 +58,8 @@ export default {
 	props: {
 		network: Object,
 		isJoinChannelShown: Boolean,
+		active: Boolean,
+		isFiltering: Boolean,
 	},
 	computed: {
 		channel() {

client/components/Windows/Help.vue

@@ -185,6 +185,16 @@
 				</div>
 			</div>
 
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>J</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>J</kbd></span>
+				</div>
+				<div class="description">
+					<p>Toggle jump to channel switcher.</p>
+				</div>
+			</div>
+
 			<h2>Formatting Shortcuts</h2>
 
 			<div class="help-item">

client/css/style.css

@@ -325,6 +325,7 @@ p {
 .channel-list-item .not-secure-icon::before,
 .channel-list-item .not-connected-icon::before,
 .channel-list-item .parted-channel-icon::before,
+.jump-to-input::before,
 #sidebar .collapse-network-icon::before {
 	font: normal normal normal 14px/1 FontAwesome;
 	font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
@@ -618,6 +619,7 @@ p {
 	width: 220px;
 	max-height: 100%;
 	will-change: transform;
+	color: #b7c5d1; /* same as .channel-list-item color */
 }
 
 #viewport.menu-open #sidebar {
@@ -648,7 +650,6 @@ p {
 
 .channel-list-item,
 #sidebar .empty {
-	color: #b7c5d1;
 	font-size: 14px;
 }
 
@@ -703,10 +704,6 @@ background on hover (unless active) */
 	right: 10px;
 }
 
-#sidebar .networks {
-	padding-top: 5px;
-}
-
 #sidebar .network {
 	position: relative;
 	margin-bottom: 20px;

client/js/vue.js

@@ -2,6 +2,7 @@
 
 const constants = require("./constants");
 
+import "../css/style.css";
 import Vue from "vue";
 import store from "./store";
 import App from "../components/App.vue";