Added auto-scrolling to chat buffer.

src/server.js

@@ -98,14 +98,21 @@ if(config.protocol.toLowerCase() == "https"){
             cert: fs.readFileSync(config.ssl.cert)
         };
 
+        //Start HTTPS Server
         webServer = https.createServer(httpsOptions, app);
     }catch(err){
+        //If the error has a path
         if(err.path != null && err.path != ""){
+            //Tell the user to fix their shit
             console.log(`Error opening key/cert file: ${err.path}`);
+        //Otherwise
         }else{
+            //Shit our pants
             console.log("Unknown error occured while starting HTTPS server! Bailing out!");
             console.log(err);
         }
+
+        //and run for the hills
         process.exit();
     }
 

www/js/channel/chat.js

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