Redirect pageup/pagedown without manually animating the scroll
This commit is contained in:
parent
3f3a22aa1e
commit
c8568b5429
@ -13,10 +13,10 @@
|
||||
aria-label="Search among the user list"
|
||||
tabindex="-1"
|
||||
@input="setUserSearchInput"
|
||||
@keydown.up="navigateUserList(-1)"
|
||||
@keydown.down="navigateUserList(1)"
|
||||
@keydown.page-up="navigateUserList(-10)"
|
||||
@keydown.page-down="navigateUserList(10)"
|
||||
@keydown.up="navigateUserList($event, -1)"
|
||||
@keydown.down="navigateUserList($event, 1)"
|
||||
@keydown.page-up="navigateUserList($event, -10)"
|
||||
@keydown.page-down="navigateUserList($event, 10)"
|
||||
@keydown.enter="selectUser">
|
||||
</div>
|
||||
<div class="names">
|
||||
@ -146,7 +146,11 @@ export default {
|
||||
removeHoverUser() {
|
||||
this.activeUser = null;
|
||||
},
|
||||
navigateUserList(direction) {
|
||||
navigateUserList(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();
|
||||
|
||||
let users = this.channel.users;
|
||||
|
||||
// Only using filteredUsers when we have to avoids filtering when it's not needed
|
||||
|
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
ref="chat"
|
||||
class="chat">
|
||||
class="chat"
|
||||
tabindex="-1">
|
||||
<div :class="['show-more', { show: channel.moreHistoryAvailable }]">
|
||||
<button
|
||||
ref="loadMoreButton"
|
||||
|
@ -1044,6 +1044,7 @@ background on hover (unless active) */
|
||||
flex-direction: column;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#chat .userlist {
|
||||
|
@ -4,33 +4,6 @@ const $ = require("jquery");
|
||||
const Mousetrap = require("mousetrap");
|
||||
const utils = require("./utils");
|
||||
|
||||
Mousetrap.bind([
|
||||
"pageup",
|
||||
"pagedown",
|
||||
], function(e, key) {
|
||||
let container = $("#windows .window.active");
|
||||
|
||||
// Chat windows scroll message container
|
||||
if (container.prop("id") === "chat-container") {
|
||||
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);
|
||||
}
|
||||
|
||||
container.animate({scrollTop}, 200);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
Mousetrap.bind([
|
||||
"alt+up",
|
||||
"alt+down",
|
||||
@ -104,8 +77,6 @@ const ignoredKeys = {
|
||||
19: true, // Pause
|
||||
20: true, // CapsLock
|
||||
27: true, // Escape
|
||||
33: true, // PageUp
|
||||
34: true, // PageDown
|
||||
35: true, // End
|
||||
36: true, // Home
|
||||
37: true, // ArrowLeft
|
||||
@ -143,6 +114,12 @@ $(document).on("keydown", (e) => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Redirect pagedown/pageup keys to messages container so it scrolls
|
||||
if (e.which === 33 || e.which === 34) {
|
||||
$("#windows .window.active .chan.active .chat").trigger("focus");
|
||||
return;
|
||||
}
|
||||
|
||||
const tagName = e.target.tagName;
|
||||
|
||||
// Ignore if we're already typing into <input> or <textarea>
|
||||
|
Loading…
Reference in New Issue
Block a user