diff --git a/www/js/channel/chat.js b/www/js/channel/chat.js index d1d0bcf..30d8840 100644 --- a/www/js/channel/chat.js +++ b/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) - 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(){ diff --git a/www/js/utils.js b/www/js/utils.js index d724823..7685b17 100644 --- a/www/js/utils.js +++ b/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")); } }