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

Added clickDragger improvements to pinned panel as well

Browse source
This commit is contained in:
rainbow napkin 2026-10-07 06:32:18 -04:00
parent 41e70ff3cf
commit 29fb28ad5f
3 changed files with 36 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -51,7 +51,7 @@ class cPanel{
/**
* Click-Dragger object for re-sizable pinned panel
*/
this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false, this.client.chatBox.clickDragger);
this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false, this.client.chatBox.clickDragger, true, 50, 1, true, "50%");
//Element Nodes
//Active Panel
@ -127,7 +127,9 @@ class cPanel{
this.activePanelPinIcon.addEventListener("click", this.pinPanel.bind(this));
this.activePanelPopoutIcon.addEventListener("click", this.popActivePanel.bind(this));
this.client.chatBox.clickDragger.handle.addEventListener("clickdrag", this.handleActivePanelParentDrag.bind(this));
this.client.chatBox.clickDragger.handle.addEventListener("clickdrag", this.handlePinnedPanelParentDrag.bind(this));
this.client.chatBox.clickDragger.handle.addEventListener("clickdragend", this.handleActivePanelParentDragEnd.bind(this));
this.client.chatBox.clickDragger.handle.addEventListener("clickdragend", this.handlePinnedPanelParentDragEnd.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));
@ -273,6 +275,33 @@ class cPanel{
this.hidePinnedPanel(null, true);
}
handlePinnedPanelParentDragEnd(event){
//Get parent width from parent click dragger
let parentWidth = Number(event.element.style.width.slice(0,-2));
//Set pinnedPanelDragger size limit to half the parent width
this.pinnedPanelDragger.sizeLimit = Number(parentWidth / 2);
}
handlePinnedPanelParentDrag(event){
//Get parent width from parent click dragger
let parentWidth = event.element.style.width.slice(0,-2);
//Get pinned panel width
let elementWidth = this.pinnedPanelDiv.style.width.slice(0,-2);
//If the element is already at 50%
if(elementWidth == "" || elementWidth == 50){
//Ignore
return;
}
//If the pinned panel is bigger than half the parents width
if(elementWidth >= (parentWidth / 2) - this.pinnedPanelDragger.limitTolerance){
//Trick the setElementWidth function into making it fill its container
this.pinnedPanelDragger.setElementWidth(this.pinnedPanelDragger.sizeLimit);
}
}
/**
* Pops a new pop-out panel
* @param {panelObj} panel - panelObj to apply to the panel