2017-09-06 06:41:11 +00:00
|
|
|
"use strict";
|
|
|
|
|
|
|
|
const $ = require("jquery");
|
|
|
|
const Mousetrap = require("mousetrap");
|
2018-03-13 09:58:18 +00:00
|
|
|
const wrapCursor = require("undate").wrapCursor;
|
2018-03-20 17:44:27 +00:00
|
|
|
const utils = require("./utils");
|
2018-03-16 16:37:12 +00:00
|
|
|
const input = $("#input");
|
2017-09-06 06:41:11 +00:00
|
|
|
const sidebar = $("#sidebar");
|
|
|
|
const windows = $("#windows");
|
|
|
|
const contextMenuContainer = $("#context-menu-container");
|
|
|
|
|
|
|
|
Mousetrap.bind([
|
|
|
|
"pageup",
|
2017-11-15 06:35:15 +00:00
|
|
|
"pagedown",
|
2017-09-06 06:41:11 +00:00
|
|
|
], function(e, key) {
|
|
|
|
let container = windows.find(".window.active");
|
|
|
|
|
|
|
|
// Chat windows scroll message container
|
2018-01-30 09:38:33 +00:00
|
|
|
if (container.prop("id") === "chat-container") {
|
2017-09-06 06:41:11 +00:00
|
|
|
container = container.find(".chan.active .chat");
|
|
|
|
}
|
|
|
|
|
|
|
|
container.finish();
|
|
|
|
|
|
|
|
const offset = container.get(0).clientHeight * 0.9;
|
|
|
|
let scrollTop = container.scrollTop();
|
|
|
|
|
|
|
|
if (key === "pageup") {
|
|
|
|
scrollTop = Math.floor(scrollTop - offset);
|
|
|
|
} else {
|
|
|
|
scrollTop = Math.ceil(scrollTop + offset);
|
|
|
|
}
|
|
|
|
|
2018-03-05 00:59:16 +00:00
|
|
|
container.animate({scrollTop}, 200);
|
2017-09-06 06:41:11 +00:00
|
|
|
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
Mousetrap.bind([
|
2018-02-28 16:32:50 +00:00
|
|
|
"alt+up",
|
|
|
|
"alt+down",
|
2017-09-06 06:41:11 +00:00
|
|
|
], function(e, keys) {
|
|
|
|
const channels = sidebar.find(".chan");
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2018-03-20 17:44:27 +00:00
|
|
|
target = channels.eq(target).click();
|
|
|
|
utils.scrollIntoViewNicely(target[0]);
|
2018-03-20 19:00:03 +00:00
|
|
|
|
|
|
|
return false;
|
2017-09-06 06:41:11 +00:00
|
|
|
});
|
|
|
|
|
2018-03-15 14:10:20 +00:00
|
|
|
Mousetrap.bind([
|
|
|
|
"alt+shift+up",
|
|
|
|
"alt+shift+down",
|
|
|
|
], function(e, keys) {
|
|
|
|
const lobbies = sidebar.find(".lobby");
|
|
|
|
const direction = keys.split("+").pop();
|
|
|
|
let index = lobbies.index(lobbies.filter(".active"));
|
|
|
|
let target;
|
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2018-03-20 17:44:27 +00:00
|
|
|
target = lobbies.eq(target).click();
|
|
|
|
utils.scrollIntoViewNicely(target[0]);
|
2018-03-20 19:00:03 +00:00
|
|
|
|
|
|
|
return false;
|
2018-03-15 14:10:20 +00:00
|
|
|
});
|
|
|
|
|
2017-09-06 06:41:11 +00:00
|
|
|
Mousetrap.bind([
|
2017-11-15 06:35:15 +00:00
|
|
|
"escape",
|
2017-09-06 06:41:11 +00:00
|
|
|
], function() {
|
|
|
|
contextMenuContainer.hide();
|
|
|
|
});
|
|
|
|
|
2018-03-20 18:57:19 +00:00
|
|
|
const inputTrap = Mousetrap(input.get(0));
|
2017-09-06 06:41:11 +00:00
|
|
|
const colorsHotkeys = {
|
|
|
|
k: "\x03",
|
|
|
|
b: "\x02",
|
|
|
|
u: "\x1F",
|
|
|
|
i: "\x1D",
|
|
|
|
o: "\x0F",
|
2017-12-03 02:52:49 +00:00
|
|
|
s: "\x1e",
|
2017-12-03 15:00:35 +00:00
|
|
|
m: "\x11",
|
2017-09-06 06:41:11 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
for (const hotkey in colorsHotkeys) {
|
2018-03-20 18:57:19 +00:00
|
|
|
inputTrap.bind("mod+" + hotkey, function(e) {
|
2018-03-13 09:58:18 +00:00
|
|
|
const modifier = colorsHotkeys[e.key];
|
|
|
|
|
2018-03-16 16:37:12 +00:00
|
|
|
wrapCursor(
|
2018-03-20 18:57:19 +00:00
|
|
|
e.target,
|
2018-03-16 16:37:12 +00:00
|
|
|
modifier,
|
2018-03-20 18:57:19 +00:00
|
|
|
e.target.selectionStart === e.target.selectionEnd ? "" : modifier
|
2018-03-16 16:37:12 +00:00
|
|
|
);
|
2018-03-20 18:57:19 +00:00
|
|
|
|
|
|
|
return false;
|
2017-09-06 06:41:11 +00:00
|
|
|
});
|
|
|
|
}
|
2018-03-13 08:32:15 +00:00
|
|
|
|
2018-03-22 16:03:57 +00:00
|
|
|
// 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;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2018-03-13 08:32:15 +00:00
|
|
|
// Ignored keys which should not automatically focus the input bar
|
|
|
|
const ignoredKeys = {
|
|
|
|
8: true, // Backspace
|
|
|
|
9: true, // Tab
|
|
|
|
12: true, // Clear
|
|
|
|
16: true, // Shift
|
|
|
|
17: true, // Control
|
|
|
|
18: true, // Alt
|
|
|
|
19: true, // Pause
|
|
|
|
20: true, // CapsLock
|
|
|
|
27: true, // Escape
|
|
|
|
33: true, // PageUp
|
|
|
|
34: true, // PageDown
|
|
|
|
35: true, // End
|
|
|
|
36: true, // Home
|
|
|
|
37: true, // ArrowLeft
|
|
|
|
38: true, // ArrowUp
|
|
|
|
39: true, // ArrowRight
|
|
|
|
40: true, // ArrowDown
|
|
|
|
45: true, // Insert
|
|
|
|
46: true, // Delete
|
|
|
|
112: true, // F1
|
|
|
|
113: true, // F2
|
|
|
|
114: true, // F3
|
|
|
|
115: true, // F4
|
|
|
|
116: true, // F5
|
|
|
|
117: true, // F6
|
|
|
|
118: true, // F7
|
|
|
|
119: true, // F8
|
|
|
|
120: true, // F9
|
|
|
|
121: true, // F10
|
|
|
|
122: true, // F11
|
|
|
|
123: true, // F12
|
|
|
|
144: true, // NumLock
|
|
|
|
145: true, // ScrollLock
|
|
|
|
224: true, // Meta
|
|
|
|
};
|
|
|
|
|
|
|
|
if (!("ontouchstart" in window || navigator.maxTouchPoints > 0)) {
|
|
|
|
$(document.body).on("keydown", (e) => {
|
|
|
|
// Ignore if target isn't body (e.g. focused into input)
|
|
|
|
// Ignore any key that uses alt modifier
|
|
|
|
// Ignore keys defined above
|
|
|
|
if (e.target !== document.body || e.altKey || ignoredKeys[e.which]) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Ignore all ctrl keys except for ctrl+v to allow pasting
|
|
|
|
if ((e.ctrlKey || e.metaKey) && e.which !== 86) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// On enter, focus the input but do not propagate the event
|
|
|
|
// This way, a new line is not inserted
|
|
|
|
if (e.which === 13) {
|
|
|
|
input.trigger("focus");
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
input.trigger("focus");
|
|
|
|
});
|
|
|
|
}
|