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
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

32
www/js/utils.js
View file

@ -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,17 +213,19 @@ 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
if(!this.breakingScreen){
this.fixCutoff(false, pageBreak);
}
}
}
}
calcWidth(px){
return (px / window.innerWidth) * 100;
@ -237,26 +233,22 @@ 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;
//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);
this.parent.fixCutoff(standalone);
}
}
}