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

Created click dragger flag to allow container filling, improved auto sizing for active panel clickdragger

Browse source
This commit is contained in:
rainbow napkin 2026-10-07 06:16:56 -04:00
parent ccc26e1ae2
commit 41e70ff3cf
2 changed files with 55 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -46,7 +46,7 @@ class cPanel{
/**
* Click-Dragger object for re-sizable active panel
*/
this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false, null, false, 75, 1);
this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false, null, false, 75, 1, true);
/**
* Click-Dragger object for re-sizable pinned panel
@ -126,7 +126,8 @@ class cPanel{
this.activePanelCloseIcon.addEventListener("click", this.hideActivePanel.bind(this));
this.activePanelPinIcon.addEventListener("click", this.pinPanel.bind(this));
this.activePanelPopoutIcon.addEventListener("click", this.popActivePanel.bind(this));
this.client.chatBox.clickDragger.handle.addEventListener("clickdragend", this.handleActivePanelParentWidthChange.bind(this));
this.client.chatBox.clickDragger.handle.addEventListener("clickdrag", this.handleActivePanelParentDrag.bind(this));
this.client.chatBox.clickDragger.handle.addEventListener("clickdragend", this.handleActivePanelParentDragEnd.bind(this));
this.pinnedPanelCloseIcon.addEventListener("click", this.hidePinnedPanel.bind(this));
this.pinnedPanelUnpinIcon.addEventListener("click", this.unpinPanel.bind(this));
this.pinnedPanelPopoutIcon.addEventListener("click", this.popPinnedPanel.bind(this));
@ -154,12 +155,31 @@ class cPanel{
this.activePanel.docSwitch();
}
handleActivePanelParentWidthChange(event){
handleActivePanelParentDrag(event){
//Get parent width from parent click dragger
let parentWidth = event.element.style.width.slice(0,-2);
//Get active panel width
let elementWidth = this.activePanelDiv.style.width.slice(0,-2);
//If the element is already at 100%
if(elementWidth == "" || elementWidth == 100){
//Ignore
return;
}
//If the active panel is bigger than the chat parents width
if(elementWidth >= parentWidth - this.activePanelDragger.limitTolerance){
//Trick the setElementWidth function into making it fill its container
this.activePanelDragger.setElementWidth(this.activePanelDragger.sizeLimit);
}
}
handleActivePanelParentDragEnd(event){
//Get parent width from parent click dragger
let parentWidth = event.element.style.width.slice(0,-2);
//Set activePanelDragger size limit to parent width
this.activePanelDragger.sizeLimit = parentWidth;
this.activePanelDragger.sizeLimit = Number(parentWidth);
}
/**

45
www/js/utils.js
View file

@ -561,7 +561,7 @@ class canopyUXUtils{
}
static clickDragger = class{
constructor(handle, element, leftHandle = true, parent, flex = true, sizeLimit = 100, limitTolerance = 0.1){
constructor(handle, element, leftHandle = true, parent, flex = true, sizeLimit = 100, limitTolerance = 0.1, fillContainer = false){
//Pull needed nodes
this.handle = document.querySelector(handle);
this.element = document.querySelector(element);
@ -590,6 +590,9 @@ class canopyUXUtils{
//Create number to hold size limit tolerance
this.limitTolerance = limitTolerance;
//Create boolean to allow dragger element to fill container when size limit is hit
this.fillContainer = fillContainer;
//Setup our event listeners
this.setupInput();
}
@ -659,13 +662,8 @@ class canopyUXUtils{
//if we're not breaking the page, or we're moving left
if((!this.breakingScreen && pageBreak <= 0) || event.clientX < this.handle.getBoundingClientRect().left){
//Apply difference to width
if(this.flex){
this.element.style.flexBasis = `${this.calcWidth(difference)}vw`;
}
//I know it's kludgy to apply this along-side flex basis but it fixes some nasty bugs with nested draggers
//Don't @ me, it's not like i'm an actual web developer anyways :P
this.element.style.width = `${this.calcWidth(difference)}vw`;
//Set element width
this.setElementWidth(this.calcWidth(difference));
//If we let go here, the width isn't breaking anything so there's nothing to fix.
this.breakingScreen = false;
@ -676,8 +674,15 @@ class canopyUXUtils{
}
}
//Dispatch click drag event through handle
this.handle.dispatchEvent(new CustomEvent("clickdrag"));
//Create a new event
let endEvent = new CustomEvent("clickdrag");
//Set the element to the drag body
endEvent.element = this.element;
//Dispatch click drag end event through handle
this.handle.dispatchEvent(endEvent);
}
}
@ -711,10 +716,7 @@ class canopyUXUtils{
}
//Fix the page width
if(this.flex){
this.element.style.flexBasis = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak)}vw`;
}
this.element.style.width = `${this.calcWidth(this.element.getBoundingClientRect().width + pageBreak)}vw`;
this.setElementWidth(this.calcWidth(this.element.getBoundingClientRect().width + pageBreak));
//If we're calling this outside of drag() (regardless of draglock unless set otherwise)
if(standalone){
@ -731,6 +733,21 @@ class canopyUXUtils{
this.parent.fixCutoff(standalone);
}
}
setElementWidth(width){
//If final width is true and we're hitting the size limit set final width to 100%, otherwise just hand it the raw value
let finalWidth = (this.fillContainer && width == this.sizeLimit) ? "100%" : `${width}vw`
//If this is a flex
if(this.flex){
//Set basis
this.element.style.flexBasis = finalWidth;
}
//I know it's kludgy to apply this along-side flex basis but it fixes some nasty bugs with nested draggers
//Don't @ me, it's not like i'm an actual web developer anyways :P
this.element.style.width = finalWidth;
}
}
}