Redirect pageup/pagedown without manually animating the scroll

This commit is contained in:
Pavel Djundik 2019-02-13 10:19:29 +02:00
parent 3f3a22aa1e
commit c8568b5429
4 changed files with 18 additions and 35 deletions

View File

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

View File

@ -1,7 +1,8 @@
<template>
<div
ref="chat"
class="chat">
class="chat"
tabindex="-1">
<div :class="['show-more', { show: channel.moreHistoryAvailable }]">
<button
ref="loadMoreButton"

View File

@ -1044,6 +1044,7 @@ background on hover (unless active) */
flex-direction: column;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
outline: none;
}
#chat .userlist {

View File

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