rainbownapkin/canopy
1
0
Fork 0
Code Issues 2 Pull requests Actions Packages Projects Releases Wiki Activity

Cleaned clickdragger, no longer fudges by a pixel

Browse source
This commit is contained in:
rainbow napkin 2024-12-06 04:54:07 -05:00
parent 99e76d72f4
commit 8f60e4531c
2 changed files with 24 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
www/js/channel/cpanel.js
View file

@ -26,7 +26,7 @@ class cPanel{
//ClickDragger Objects //ClickDragger Objects
this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false); 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 //Element Nodes
//Active Panel //Active Panel

54
www/js/utils.js
View file

@ -163,7 +163,7 @@ class canopyUXUtils{
this.leftHandle = leftHandle this.leftHandle = leftHandle
//Little hacky but it could be worse :P //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 //we put a click dragger in yo click dragger so you could click and drag while you click and drag
this.parent = parent; this.parent = parent;
@ -190,14 +190,8 @@ class canopyUXUtils{
endDrag(event){ endDrag(event){
//we're no longer dragging //we're no longer dragging
this.dragLock = false; this.dragLock = false;
//This is only relevant when dragging, keeping this on can cause issues after content changes
//if we fudged the numbers to keep the page from breaking this.breakingScreen = false;
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;
}
//Return cursor to normal, and allow user to select text again //Return cursor to normal, and allow user to select text again
window.document.body.style.userSelect = "auto"; 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 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 //Apply difference to width
this.element.style.width = `${this.calcWidth(difference)}vw`; 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. //If we let go here, the width isn't breaking anything so there's nothing to fix.
this.fixWidth = false; this.breakingScreen = false;
}else{ }else{
//call fixCutoff with standalone mode off, and a pre-calculated pageBreak //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){ 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 we're calling this outside of drag() (regardless of draglock unless set otherwise)
if(standalone){ if(standalone){
//Fix the page width, don't fudge numbers, we don't need to //call end drag to finish the job
this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak)}vw`; this.endDrag();
//Tell endDrag() function not to put us in a recursive loop }else{
this.fixWidth = false; //We should let the rest of the object know we're breaking the screen
//call end drag to finish the job this.breakingScreen = true;
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 have a parent dragger //If we have a parent dragger
if(this.parent != null){ if(this.parent != null){
//Make sure to fix it's cutoff too //Make sure to fix it's cutoff too
this.parent.fixCutoff(!this.dragLock); this.parent.fixCutoff(standalone);
} }
} }
} }
} }