From 41e70ff3cf4ba87a08cc6ca990cece91f9f68c21 Mon Sep 17 00:00:00 2001 From: rainbownapkin Date: Wed, 7 Oct 2026 06:16:56 -0400 Subject: [PATCH] Created click dragger flag to allow container filling, improved auto sizing for active panel clickdragger --- www/js/channel/cpanel.js | 28 +++++++++++++++++++++---- www/js/utils.js | 45 +++++++++++++++++++++++++++------------- 2 files changed, 55 insertions(+), 18 deletions(-) diff --git a/www/js/channel/cpanel.js b/www/js/channel/cpanel.js index 5758c71..2916093 100644 --- a/www/js/channel/cpanel.js +++ b/www/js/channel/cpanel.js @@ -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); } /** diff --git a/www/js/utils.js b/www/js/utils.js index 1b6fffc..0449e75 100644 --- a/www/js/utils.js +++ b/www/js/utils.js @@ -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; + } } }