Fix input keybinds
This commit is contained in:
parent
dbe6df1ab6
commit
2e3b95b9ed
@ -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();
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user