Added snapping size-limits to channel click draggers

www/js/channel/chat.js

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

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);
+        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

www/js/utils.js

@@ -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
+            //Create a new event
-            this.handle.dispatchEvent(new CustomEvent("clickdragstart"));
+            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;
         }