Added clickDragger improvements to pinned panel as well

www/css/channel.css

@@ -264,6 +264,7 @@ span.user-entry{
     position: relative;
     scrollbar-width: thin;
     flex: 0 0;
+    width: 50%;
 }
 
 .cpanel-div{

www/js/channel/cpanel.js

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

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, fillContainer = false){
+        constructor(handle, element, leftHandle = true, parent, flex = true, sizeLimit = 100, limitTolerance = 0.1, fillContainer = false, fillAmount = "100%"){
             //Pull needed nodes
             this.handle = document.querySelector(handle);
             this.element = document.querySelector(element);
@@ -593,6 +593,9 @@ class canopyUXUtils{
             //Create boolean to allow dragger element to fill container when size limit is hit
             this.fillContainer = fillContainer;
 
+            //Create string to hold amount to fill container by
+            this.fillAmount = fillAmount;
+
             //Setup our event listeners
             this.setupInput();
         } 
@@ -736,7 +739,7 @@ class canopyUXUtils{
 
         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`
+                let finalWidth = (this.fillContainer && width == this.sizeLimit) ? this.fillAmount : `${width}vw`
 
                 //If this is a flex
                 if(this.flex){