diff --git a/www/css/channel.css b/www/css/channel.css index dc905db..41eecca 100644 --- a/www/css/channel.css +++ b/www/css/channel.css @@ -264,6 +264,7 @@ span.user-entry{ position: relative; scrollbar-width: thin; flex: 0 0; + width: 50%; } .cpanel-div{ diff --git a/www/js/channel/cpanel.js b/www/js/channel/cpanel.js index 2916093..99172fa 100644 --- a/www/js/channel/cpanel.js +++ b/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 diff --git a/www/js/utils.js b/www/js/utils.js index 0449e75..dda6c03 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, 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){