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

32
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,17 +213,19 @@ 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
if(!this.breakingScreen){
this.fixCutoff(false, pageBreak); this.fixCutoff(false, pageBreak);
} }
} }
} }
}
calcWidth(px){ calcWidth(px){
return (px / window.innerWidth) * 100; return (px / window.innerWidth) * 100;
@ -237,26 +233,22 @@ 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
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 //call end drag to finish the job
this.endDrag(); this.endDrag();
}else{ }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 //We should let the rest of the object know we're breaking the screen
this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak - 1)}vw`; this.breakingScreen = true;
//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);
} }
} }
} }