Autoscroll now ignores scrolls from chat resize
This commit is contained in:
parent
7badaa927c
commit
e2e6d975fb
|
|
@ -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(){
|
||||
|
|
|
|||
|
|
@ -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"));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue