rainbownapkin/canopy
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Added auto-scrolling to chat buffer.

Browse source
This commit is contained in:
rainbow napkin 2025-04-12 06:58:43 -04:00
parent 401b9e4fee
commit e46513cc1a
2 changed files with 56 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

50
www/js/channel/chat.js
View file

@ -20,6 +20,10 @@ class chatBox{
//Booleans
this.aspectLock = true;
this.autoScroll = true;
//Numbers
this.lastPos = 0;
//clickDragger object
this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div");
@ -72,6 +76,9 @@ class chatBox{
//Clickdragger/Resize
this.clickDragger.handle.addEventListener("mousedown", this.unlockAspect.bind(this));
window.addEventListener("resize", this.resizeAspect.bind(this));
//ScrollHandler
this.chatBuffer.addEventListener('scroll', this.scrollHandler.bind(this));
}
defineListeners(){
@ -128,9 +135,12 @@ class chatBox{
chatBody.classList.add("chat-panel-buffer","chat-entry-body");
chatEntry.appendChild(chatBody);
//Append the post-processed chat-body to the chat buffer
this.chatBuffer.appendChild(this.chatPostprocessor.postprocess(chatEntry, data));
//Auto-scroll the chat
this.handleAutoScroll();
//Set size to aspect on launch
this.resizeAspect();
}
@ -363,4 +373,42 @@ class chatBox{
this.clickDragger.enabled = false;
}
}
scrollHandler(event){
//If we're just starting out
if(this.lastPos == 0){
//Set last pos for the first time
this.lastPos = this.chatBuffer.scrollTop;
}
//Calculate scroll delta
const deltaY = this.chatBuffer.scrollTop - this.lastPos;
//Grab visible buffer height so we don't have to do it again (can't use offset because someone might zoom in :P)
const bufferHeight = Math.round(this.chatBuffer.getBoundingClientRect().height);
//If we're scrolling up
if(deltaY < 0){
//If we have room to scroll
if(this.chatBuffer.scrollHeight > bufferHeight){
//Disable auto scrolling
this.autoScroll = false;
}
//Otherwise if the difference between the chat buffers scroll height and offset height is equal to the scroll top
//(Because it is scrolled all the way down)
}else if((this.chatBuffer.scrollHeight - bufferHeight) == this.chatBuffer.scrollTop){
this.autoScroll = true;
}
//Set last post for next the run
this.lastPos = this.chatBuffer.scrollTop;
}
handleAutoScroll(){
//If autoscroll is enabled
if(this.autoScroll){
//Set chatBuffer scrollTop to the difference between scrollHeight and buffer height (scroll to the bottom)
this.chatBuffer.scrollTop = this.chatBuffer.scrollHeight - Math.round(this.chatBuffer.getBoundingClientRect().height);
}
}
}