Added clickDragger to active and pinned cPanels.

src/views/channel.ejs

@@ -41,7 +41,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                 <video src="/video/static.webm" class="media-panel" id="media-panel-video" muted loop autoplay></video>
             </div>
             <div class="chat-panel" id="chat-panel-div">
-                <div class="drag-handle" id="chat-panel-drag-handle">
+                <div class="drag-handle left-drag-handle" id="chat-panel-drag-handle">
                 </div>
                 <div class="chat-panel panel-head-div" id="chat-panel-head-div">
                     <i class="chat-panel panel-head-element bi-film" id="chat-panel-show-video-icon"></i>
@@ -75,6 +75,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                             <span class="active-cpanel cpanel-title-spacer" id="cpanel-active-title-spacer"></span>
                             <i class="active-cpanel cpanel-header-icon cpanel-popout-icon bi-window-stack" id="cpanel-active-popout-icon"></i>
                             <i class="active-cpanel cpanel-header-icon cpanel-close-icon bi-x" id="cpanel-active-close-icon"></i>
+                            <div class="drag-handle right-drag-handle" id="cpanel-active-drag-handle">
+                            </div>
                         </div>
                         <div class="active-cpanel cpanel-doc" id="cpanel-active-doc">
                         </div>
@@ -89,6 +91,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                         </div>
                         <div class="pinned-cpanel cpanel-doc" id="cpanel-pinned-doc">
                         </div>
+                    <div class="drag-handle right-drag-handle" id="cpanel-pinned-drag-handle">
+                    </div>
                     </div>
                     <div class="chat-panel" id="chat-area">
                         <div class="chat-panel" id="chat-panel-buffer-div">
@@ -102,7 +106,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                         </div>
                     </div>
                     <div class="chat-panel" id="chat-panel-users-div">
-                        <div class="drag-handle" id="chat-panel-users-drag-handle">
+                        <div class="drag-handle left-drag-handle" id="chat-panel-users-drag-handle">
                         </div>
                         <div class="chat-panel" id="chat-panel-users-list-div">
                         </div>

www/css/channel.css

@@ -87,11 +87,19 @@ div#chat-panel-main-div{
     cursor: ew-resize;
     top: 0;
     bottom: 0;
-    left: 0;
     width: 0.4em; 
+    z-index: 3;
+}
+
+.left-drag-handle{
+    left: 0;
     z-index: 8;
 }
 
+.right-drag-handle{
+    right: 0;
+}
+
 #chat-panel-multipanel-div{
     height: 100%;
 }
@@ -216,13 +224,18 @@ input#chat-panel-prompt{
 
 #cpanel-active-div{
     position: absolute;
-    z-index: 3;
+    z-index: 4;
     top: 0;
     bottom: 0;
     left: 0;
 }
 
+#cpanel-pinned-div{
+    position: relative;
+}
+
 .cpanel-div{
     display: none;
+    min-width: 4em;
     width: 30%;
 }

www/css/theme/movie-night.css

@@ -17,6 +17,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 :root{
     --main-font: "open-sans", sans-serif;
     --bg0: rgb(158, 158, 158);
+    --bg0-alpha0: rgba(158, 158, 158, 0.75);
     --bg1: rgb(70, 70, 70);
     --bg2: rgb(220, 220, 220);
     --bg1-alt0: rgb(30, 30, 30);
@@ -41,6 +42,9 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
     --userlist-color6:rgb(111, 61, 204);
 
     --media-header-gradient: linear-gradient(180deg, var(--bg1-alt0) 0%, #FFFFFF00 76%);
+
+    /*--active-panel-effect: blur(1em);*/
+    --active-panel-effect: none;
 }
 
 body{
@@ -244,6 +248,11 @@ select.panel-head-element{
     margin: auto;
 }
 
+#cpanel-active-div{
+    background-color: var(--bg0-alpha0);
+    backdrop-filter: var(--active-panel-effect);
+}
+
 .cpanel-div{
     background-color: var(--bg0);
 }

www/js/channel/chat.js

@@ -23,7 +23,7 @@ class chatBox{
         this.aspectLock = true;
 
         //clickDragger object
-        this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div", "#chat-panel-user-count");
+        this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div");
 
         //Element Nodes
         this.chatPanel = document.querySelector("#chat-panel-div");

www/js/channel/cpanel.js

@@ -24,6 +24,10 @@ class cPanel{
         this.pinnedPanel = null;
         this.poppedPanels = [];
 
+        //ClickDragger Objects
+        this.activePanelDragger = new canopyUXUtils.clickDragger("#cpanel-active-drag-handle", "#cpanel-active-div", false);
+        this.pinnedPanelDragger = new canopyUXUtils.clickDragger("#cpanel-pinned-drag-handle", "#cpanel-pinned-div", false);
+
         //Element Nodes
         //Active Panel
         this.activePanelDiv = document.querySelector("#cpanel-active-div");
@@ -36,7 +40,7 @@ class cPanel{
         this.pinnedPanelDiv = document.querySelector("#cpanel-pinned-div");
         this.pinnedPanelTitle = document.querySelector("#cpanel-pinned-title");
         this.pinnedPanelDoc = document.querySelector("#cpanel-pinned-doc");
-        this.activePanelUnpinIcon = document.querySelector("#cpanel-pinned-unpin-icon");
+        this.pinnedPanelUnpinIcon = document.querySelector("#cpanel-pinned-unpin-icon");
         this.pinnedPanelPopoutIcon = document.querySelector("#cpanel-pinned-popout-icon");
         this.pinnedPanelCloseIcon = document.querySelector("#cpanel-pinned-close-icon");
 
@@ -48,7 +52,7 @@ class cPanel{
         this.activePanelPinIcon.addEventListener("click", this.pinPanel.bind(this));
         this.activePanelPopoutIcon.addEventListener("click", this.popActivePanel.bind(this));
         this.pinnedPanelCloseIcon.addEventListener("click", this.hidePinnedPanel.bind(this));
-        this.activePanelUnpinIcon.addEventListener("click", this.unpinPanel.bind(this));
+        this.pinnedPanelUnpinIcon.addEventListener("click", this.unpinPanel.bind(this));
         this.pinnedPanelPopoutIcon.addEventListener("click", this.popPinnedPanel.bind(this));
     }
 

www/js/utils.js

@@ -27,7 +27,7 @@ class canopyUXUtils{
 
 
     static clickDragger = class{
-        constructor(handle, element, breakPoint){
+        constructor(handle, element, leftHandle = true){
             //Pull needed nodes
             this.handle = document.querySelector(handle);
             this.element = document.querySelector(element);
@@ -35,6 +35,9 @@ class canopyUXUtils{
             //True while dragging
             this.dragLock = false;
 
+            //Come to the ~~dark~~ left side
+            this.leftHandle = leftHandle
+
             //Little hacky but it could be worse :P
             this.fixWidth = false;
 
@@ -69,8 +72,13 @@ class canopyUXUtils{
         drag(event){
 
             if(this.dragLock){
+                if(this.leftHandle){
                     //get difference between mouse and right edge of element
                     var difference = this.element.getBoundingClientRect().right - event.clientX;
+                }else{
+                    //get difference between mouse and left edge of element
+                    var difference = event.clientX - this.element.getBoundingClientRect().left;
+                }
                 //check if we have a scrollbar because we're breaking shit
                 var pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width;