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

Added snapping size-limits to channel click draggers

Browse source
This commit is contained in:
rainbow napkin 2026-10-07 05:47:32 -04:00
parent f5951e068c
commit ccc26e1ae2
3 changed files with 34 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
www/js/channel/chat.js
View file

@ -66,7 +66,7 @@ class chatBox{
/**
* Click-Dragger Object for handling dynamic chat/video split re-sizing
*/
this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div");
this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div", true, undefined, true, 75);
/**
* Command Pre-Processor Object

11
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);
this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false, null, false, 75, 1);
/**
* Click-Dragger object for re-sizable pinned panel
@ -126,6 +126,7 @@ 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.pinnedPanelCloseIcon.addEventListener("click", this.hidePinnedPanel.bind(this));
this.pinnedPanelUnpinIcon.addEventListener("click", this.unpinPanel.bind(this));
this.pinnedPanelPopoutIcon.addEventListener("click", this.popPinnedPanel.bind(this));
@ -153,6 +154,14 @@ class cPanel{
this.activePanel.docSwitch();
}
handleActivePanelParentWidthChange(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;
}
/**
* Hides active panel
* @param {Event} event - Event passed down from Input Handler

28
www/js/utils.js
View file

@ -561,7 +561,7 @@ class canopyUXUtils{
}
static clickDragger = class{
constructor(handle, element, leftHandle = true, parent, flex = true){
constructor(handle, element, leftHandle = true, parent, flex = true, sizeLimit = 100, limitTolerance = 0.1){
//Pull needed nodes
this.handle = document.querySelector(handle);
this.element = document.querySelector(element);
@ -584,6 +584,12 @@ class canopyUXUtils{
//Create boolean to allow parent classes to suspend click dragging behavior
this.enabled = true;
//Create number to hold size limit of click dragger
this.sizeLimit = sizeLimit;
//Create number to hold size limit tolerance
this.limitTolerance = limitTolerance;
//Setup our event listeners
this.setupInput();
}
@ -602,8 +608,14 @@ class canopyUXUtils{
window.document.body.style.userSelect = "none";
window.document.body.style.cursor = "ew-resize";
//Dispatch click drag start event through handle
this.handle.dispatchEvent(new CustomEvent("clickdragstart"));
//Create a new event
let endEvent = new CustomEvent("clickdragstart");
//Set the element to the drag body
endEvent.element = this.element;
//Dispatch click drag end event through handle
this.handle.dispatchEvent(endEvent);
}
endDrag(event){
@ -616,8 +628,14 @@ class canopyUXUtils{
window.document.body.style.userSelect = "auto";
window.document.body.style.cursor = "auto";
//Create a new event
let endEvent = new CustomEvent("clickdragend");
//Set the element to the drag body
endEvent.element = this.element;
//Dispatch click drag end event through handle
this.handle.dispatchEvent(new CustomEvent("clickdragend"));
this.handle.dispatchEvent(endEvent);
}
drag(event){
@ -669,7 +687,7 @@ class canopyUXUtils{
//Little hacky but this ensures that if our click dragger tries to do something that it should absolutely never be doing
//it'll be told to sit down, shut up, and fuck off.
return width < 100 ? width : 20;
return width < (this.sizeLimit - this.limitTolerance) ? width : this.sizeLimit;
}