Autoscroll now ignores scrolls from chat resize

www/js/channel/chat.js

@@ -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)
+        //Grab visible bounding rect 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);
+        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 we have room to scroll, and we didn't resize
-            if(this.chatBuffer.scrollHeight > bufferHeight){
+            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(){

www/js/utils.js

@@ -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"));
             }
         }