diff --git a/www/js/channel/cpanel.js b/www/js/channel/cpanel.js index 59e9b54..feb8bd2 100644 --- a/www/js/channel/cpanel.js +++ b/www/js/channel/cpanel.js @@ -26,7 +26,7 @@ class cPanel{ //ClickDragger Objects this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false); - this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false); + this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false, this.client.userList.clickDragger); //Element Nodes //Active Panel diff --git a/www/js/utils.js b/www/js/utils.js index 45286d2..cd275b6 100644 --- a/www/js/utils.js +++ b/www/js/utils.js @@ -163,7 +163,7 @@ class canopyUXUtils{ this.leftHandle = leftHandle //Little hacky but it could be worse :P - this.fixWidth = false; + this.breakingScreen = false; //we put a click dragger in yo click dragger so you could click and drag while you click and drag this.parent = parent; @@ -190,14 +190,8 @@ class canopyUXUtils{ endDrag(event){ //we're no longer dragging this.dragLock = false; - - //if we fudged the numbers to keep the page from breaking - if(this.fixWidth){ - //set everything straight - this.fixCutoff(); - //if this is true, it no longer needs to be, though it *should* be reset by the drag function by the time it matters anywho :P - this.fixWidth = false; - } + //This is only relevant when dragging, keeping this on can cause issues after content changes + this.breakingScreen = false; //Return cursor to normal, and allow user to select text again window.document.body.style.userSelect = "auto"; @@ -219,14 +213,16 @@ class canopyUXUtils{ //if we're not breaking the page, or we're moving left - if(pageBreak <= 0 || event.clientX < this.handle.getBoundingClientRect().left){ + if((!this.breakingScreen && pageBreak <= 0) || event.clientX < this.handle.getBoundingClientRect().left){ //Apply difference to width this.element.style.width = `${this.calcWidth(difference)}vw`; //If we let go here, the width isn't breaking anything so there's nothing to fix. - this.fixWidth = false; + this.breakingScreen = false; }else{ //call fixCutoff with standalone mode off, and a pre-calculated pageBreak - this.fixCutoff(false, pageBreak); + if(!this.breakingScreen){ + this.fixCutoff(false, pageBreak); + } } } } @@ -237,27 +233,23 @@ class canopyUXUtils{ fixCutoff(standalone = true, pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width){ + //Fix the page width + this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak)}vw`; - //If we're calling this outside of drag() (regardless of draglock unless set otherwise) - if(standalone){ - //Fix the page width, don't fudge numbers, we don't need to - this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak)}vw`; - //Tell endDrag() function not to put us in a recursive loop - this.fixWidth = false; - //call end drag to finish the job - this.endDrag(); - }else{ - //We need to move the element back, but we can't do it all the way while we're still dragging as it will thrash - this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak - 1)}vw`; - //If we stop dragging here, let the endDrag function know to fix the pixel difference used to prevent thrashing - this.fixWidth = true; - } + //If we're calling this outside of drag() (regardless of draglock unless set otherwise) + if(standalone){ + //call end drag to finish the job + this.endDrag(); + }else{ + //We should let the rest of the object know we're breaking the screen + this.breakingScreen = true; + } - //If we have a parent dragger - if(this.parent != null){ - //Make sure to fix it's cutoff too - this.parent.fixCutoff(!this.dragLock); - } + //If we have a parent dragger + if(this.parent != null){ + //Make sure to fix it's cutoff too + this.parent.fixCutoff(standalone); + } } } }