Autoscroll now ignores scrolls from chat resize

This commit is contained in:
rainbow napkin 2025-05-04 19:34:56 -04:00
parent 7badaa927c
commit e2e6d975fb
2 changed files with 38 additions and 9 deletions

View file

@ -24,6 +24,8 @@ class chatBox{
//Numbers
this.lastPos = 0;
this.lastHeight = 0;
this.lastWidth = 0;
//clickDragger object
this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div");
@ -75,9 +77,10 @@ class chatBox{
//Clickdragger/Resize
this.clickDragger.handle.addEventListener("mousedown", this.unlockAspect.bind(this));
this.clickDragger.handle.addEventListener("clickdrag", this.handleAutoScroll.bind(this));
window.addEventListener("resize", this.resizeAspect.bind(this));
//ScrollHandler
//chatbuffer
this.chatBuffer.addEventListener('scroll', this.scrollHandler.bind(this));
}
@ -145,9 +148,6 @@ class chatBox{
//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();
}
@ -307,7 +307,10 @@ class chatBox{
}
unlockAspect(event){
//Disable aspect lock
this.aspectLock = false;
//Show aspect lock icon
this.aspectLockIcon.style.display = "inline";
}
@ -322,6 +325,9 @@ class chatBox{
//Fix the clickDragger on userlist
this.client.userList.clickDragger.fixCutoff();
}
//Autoscroll chat in-case we fucked it up
this.handleAutoScroll();
}
sizeToAspect(){
@ -391,15 +397,27 @@ class chatBox{
//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);
//Grab visible bounding rect so we don't have to do it again (can't use offset because someone might zoom in :P)
const bufferRect = this.chatBuffer.getBoundingClientRect();
const bufferHeight = Math.round(bufferRect.height);
const bufferWidth = Math.round(bufferRect.width);
if(this.lastHeight == 0){
this.lastHeight = bufferHeight;
}
if(this.lastWidth == 0){
this.lastWidth = bufferWidth;
}
//If we're scrolling up
if(deltaY < 0){
//If we have room to scroll
if(this.chatBuffer.scrollHeight > bufferHeight){
//If we have room to scroll, and we didn't resize
if(this.chatBuffer.scrollHeight > bufferHeight && (this.lastWidth == bufferWidth && this.lastHeight == bufferHeight)){
//Disable auto scrolling
this.autoScroll = false;
}else{
this.handleAutoScroll();
}
//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)
@ -407,8 +425,10 @@ class chatBox{
this.autoScroll = true;
}
//Set last post for next the run
//Set last post/size for next the run
this.lastPos = this.chatBuffer.scrollTop;
this.lastHeight = bufferHeight;
this.lastWidth = bufferWidth;
}
handleAutoScroll(){

View file

@ -514,6 +514,9 @@ class canopyUXUtils{
//Keep user from selecting text or changing cursor as we drag
window.document.body.style.userSelect = "none";
window.document.body.style.cursor = "ew-resize";
//Dispatch click drag start event through handle
this.handle.dispatchEvent(new CustomEvent("clickdragstart"));
}
endDrag(event){
@ -525,6 +528,9 @@ class canopyUXUtils{
//Return cursor to normal, and allow user to select text again
window.document.body.style.userSelect = "auto";
window.document.body.style.cursor = "auto";
//Dispatch click drag end event through handle
this.handle.dispatchEvent(new CustomEvent("clickdragend"));
}
drag(event){
@ -564,6 +570,9 @@ class canopyUXUtils{
this.fixCutoff(false, pageBreak);
}
}
//Dispatch click drag event through handle
this.handle.dispatchEvent(new CustomEvent("clickdrag"));
}
}