supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix input keybinds

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-09 21:51:27 +03:00 committed by Pavel Djundik
parent dbe6df1ab6
commit 2e3b95b9ed
2 changed files with 57 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
client/components/ChatInput.vue
View File

@ -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();

60
client/js/keybinds.js
View File

@ -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) {