Merge pull request #2215 from thelounge/xpaw/out-of-focus-typing
Do not aggressively focus input when clicking anywhere and handle typing out of focus
This commit is contained in:
commit
e987917c64
@ -107,6 +107,11 @@ const colorsHotkeys = {
|
|||||||
|
|
||||||
for (const hotkey in colorsHotkeys) {
|
for (const hotkey in colorsHotkeys) {
|
||||||
Mousetrap.bind("mod+" + hotkey, function(e) {
|
Mousetrap.bind("mod+" + hotkey, function(e) {
|
||||||
|
// Do not handle modifier hotkeys if input is not focused
|
||||||
|
if (document.activeElement !== input) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const modifier = colorsHotkeys[e.key];
|
const modifier = colorsHotkeys[e.key];
|
||||||
@ -114,3 +119,66 @@ for (const hotkey in colorsHotkeys) {
|
|||||||
wrapCursor(input, modifier, input.selectionStart === input.selectionEnd ? "" : modifier);
|
wrapCursor(input, modifier, input.selectionStart === input.selectionEnd ? "" : modifier);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
@ -223,16 +223,6 @@ $(function() {
|
|||||||
input.trigger("focus");
|
input.trigger("focus");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
$(window).on("focus", focus);
|
|
||||||
|
|
||||||
chat.on("click", ".chat", function() {
|
|
||||||
setTimeout(function() {
|
|
||||||
if (window.getSelection().isCollapsed) {
|
|
||||||
focus();
|
|
||||||
}
|
|
||||||
}, 2);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)) {
|
if (navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)) {
|
||||||
@ -241,7 +231,7 @@ $(function() {
|
|||||||
|
|
||||||
$("#form").on("submit", function(e) {
|
$("#form").on("submit", function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
utils.forceFocus();
|
focus();
|
||||||
const target = chat.data("id");
|
const target = chat.data("id");
|
||||||
const text = input.val();
|
const text = input.val();
|
||||||
|
|
||||||
|
@ -5,7 +5,6 @@ const options = require("./options");
|
|||||||
const socket = require("./socket");
|
const socket = require("./socket");
|
||||||
const templates = require("../views");
|
const templates = require("../views");
|
||||||
const chat = $("#chat");
|
const chat = $("#chat");
|
||||||
const input = $("#input");
|
|
||||||
const Mousetrap = require("mousetrap");
|
const Mousetrap = require("mousetrap");
|
||||||
|
|
||||||
module.exports = renderPreview;
|
module.exports = renderPreview;
|
||||||
@ -207,8 +206,6 @@ function closeImageViewer({pushState = true} = {}) {
|
|||||||
imageViewer.empty();
|
imageViewer.empty();
|
||||||
});
|
});
|
||||||
|
|
||||||
input.trigger("focus");
|
|
||||||
|
|
||||||
// History management
|
// History management
|
||||||
if (pushState) {
|
if (pushState) {
|
||||||
const clickTarget =
|
const clickTarget =
|
||||||
|
@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
const $ = require("jquery");
|
const $ = require("jquery");
|
||||||
const escape = require("css.escape");
|
const escape = require("css.escape");
|
||||||
const input = $("#input");
|
|
||||||
const viewport = $("#viewport");
|
const viewport = $("#viewport");
|
||||||
|
|
||||||
var serverHash = -1; // eslint-disable-line no-var
|
var serverHash = -1; // eslint-disable-line no-var
|
||||||
@ -14,7 +13,6 @@ module.exports = {
|
|||||||
serverHash,
|
serverHash,
|
||||||
lastMessageId,
|
lastMessageId,
|
||||||
confirmExit,
|
confirmExit,
|
||||||
forceFocus,
|
|
||||||
scrollIntoViewNicely,
|
scrollIntoViewNicely,
|
||||||
hasRoleInChannel,
|
hasRoleInChannel,
|
||||||
move,
|
move,
|
||||||
@ -54,12 +52,6 @@ function hasRoleInChannel(channel, roles) {
|
|||||||
return user.parent().is("." + roles.join(", ."));
|
return user.parent().is("." + roles.join(", ."));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Triggering click event opens the virtual keyboard on mobile
|
|
||||||
// This can only be called from another interactive event (e.g. button click)
|
|
||||||
function forceFocus() {
|
|
||||||
input.trigger("click").trigger("focus");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reusable scrollIntoView parameters for channel list / user list
|
// Reusable scrollIntoView parameters for channel list / user list
|
||||||
function scrollIntoViewNicely(el) {
|
function scrollIntoViewNicely(el) {
|
||||||
// Ideally this would use behavior: "smooth", but that does not consistently work in e.g. Chrome
|
// Ideally this would use behavior: "smooth", but that does not consistently work in e.g. Chrome
|
||||||
|
Loading…
Reference in New Issue
Block a user