Added CPanel Pinning

src/views/channel.ejs

@@ -67,13 +67,23 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                     <i class="chat-panel panel-head-element bi-caret-down-fill" id="chat-panel-users-toggle"></i>
                 </div>
                 <div class="chat-panel" id="chat-panel-main-div">
-                    <div class="cpanel" id="cpanel-active-div">
+                    <div class="active-cpanel cpanel-div" id="cpanel-active-div">
-                        <div class="cpanel" id="cpanel-active-header-div">
+                        <div class="active-cpanel cpanel-header-div" id="cpanel-active-header-div">
-                            <p class="cpanel" id="cpanel-active-title">NULL PANEL</p>
+                            <p class="active-cpanel cpanel-title" id="cpanel-active-title">NULL PANEL</p>
-                            <span class="cpanel" id="cpanel-active-title-spacer"></span>
+                            <span class="active-cpanel cpanel-title-spacer" id="cpanel-active-title-spacer"></span>
-                            <i class="cpanel bi-x" id="cpanel-active-close-icon"></i>
+                            <i class="active-cpanel cpanel-header-icon cpanel-pin-icon bi-pin-angle-fill" id="cpanel-active-pin-icon"></i>
+                            <i class="active-cpanel cpanel-header-icon cpanel-close-icon bi-x" id="cpanel-active-close-icon"></i>
                         </div>
-                        <div class="cpanel" id="cpanel-active-doc">
+                        <div class="active-cpanel cpanel-doc" id="cpanel-active-doc">
+                        </div>
+                    </div>
+                    <div class="pinned-cpanel cpanel-div" id="cpanel-pinned-div">
+                        <div class="pinned-cpanel cpanel-header-div" id="cpanel-pinned-header-div">
+                            <p class="pinned-cpanel cpanel-title" id="cpanel-pinned-title">NULL PANEL</p>
+                            <span class="pinned-cpanel cpanel-title-spacer" id="cpanel-pinned-title-spacer"></span>
+                            <i class="pinned-cpanel cpanel-header-icon cpanel-close-icon bi-x" id="cpanel-pinned-close-icon"></i>
+                        </div>
+                        <div class="pinned-cpanel cpanel-doc" id="cpanel-pinned-doc">
                         </div>
                     </div>
                     <div class="chat-panel" id="chat-area">

www/css/channel.css

@@ -214,35 +214,37 @@ input#chat-panel-prompt{
     display: none;
 }
 
-#cpanel-active-div{
+.cpanel-div{
     display: none;
-    position: absolute;
     flex-direction: column;
     overflow: hidden;
+    width: 30%;
+}
+#cpanel-active-div{
+    position: absolute;
     z-index: 3;
     top: 0;
     bottom: 0;
     left: 0;
-    width: 30%;
 }
 
-#cpanel-active-header-div{
+.cpanel-header-div{
     display: flex;
     margin: 0 auto;
     width: 96%;
     height: 1.2em;
 }
 
-#cpanel-active-title{
+.cpanel-title{
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
 }
 
-#cpanel-active-title-spacer{
+.cpanel-title-spacer{
     flex: 1;
 }
 
-#cpanel-active-close-icon{
+.cpanel-header-icon{
     cursor: pointer;
 }

www/css/theme/movie-night.css

@@ -244,11 +244,11 @@ select.panel-head-element{
     margin: auto;
 }
 
-#cpanel-active-div{
+.cpanel-div{
     background-color: var(--bg0);
 }
 
 
-#cpanel-active-header-div{
+.cpanel-header-div{
     border-bottom: solid 1px var(--accent0);
 }

www/js/channel/cpanel.js

@@ -19,28 +19,92 @@ class cPanel{
         //Client Object
         this.client = client;
 
+        //Panel Objects
+        this.activePanel = null;
+        this.pinnedPanel = null;
+        this.poppedPanels = [];
+
         //Element Nodes
-        this.activePanel = document.querySelector("#cpanel-active-div");
+        //Active Panel
+        this.activePanelDiv = document.querySelector("#cpanel-active-div");
         this.activePanelTitle = document.querySelector("#cpanel-active-title");
         this.activePanelDoc = document.querySelector("#cpanel-active-doc");
+        this.activePanelPinIcon = document.querySelector("#cpanel-active-pin-icon");
         this.activePanelCloseIcon = document.querySelector("#cpanel-active-close-icon");
+        //Pinned Panel
+        this.pinnedPanelDiv = document.querySelector("#cpanel-pinned-div");
+        this.pinnedPanelTitle = document.querySelector("#cpanel-pinned-title");
+        this.pinnedPanelDoc = document.querySelector("#cpanel-pinned-doc");
+        this.pinnedPanelCloseIcon = document.querySelector("#cpanel-pinned-close-icon");
 
         this.setupInput();
     }
 
     setupInput(){
-        this.activePanelCloseIcon.addEventListener("click", this.hidePanel.bind(this));
+        this.activePanelCloseIcon.addEventListener("click", this.hideActivePanel.bind(this));
+        this.activePanelPinIcon.addEventListener("click", this.pinActivePanel.bind(this));
+        this.pinnedPanelCloseIcon.addEventListener("click", this.hidePinnedPanel.bind(this));
     }
 
-    async setPanel(panel){
+    async setActivePanel(panel){
-        this.activePanel.style.display = "flex";
+        //Set active panel
-        this.activePanelTitle.textContent = panel.name;
+        this.activePanel = panel;
-        this.activePanelDoc.innerHTML = await panel.getPage();
+
+        //Grab panel hypertext content and load it into div
+        this.activePanelDoc.innerHTML = await this.activePanel.getPage();
+
+        //Display panel
+        this.activePanelDiv.style.display = "flex";
+        this.activePanelTitle.textContent = this.activePanel.name;
+
+        //Call panel initialization function
+        this.activePanel.panelInit();
     }
 
-    hidePanel(){
+    hideActivePanel(){
-        this.activePanel.style.display = "none";
+        this.activePanelDiv.style.display = "none";
+        this.activePanel = null;
     }
+
+    pinActivePanel(){
+        //Yoink panel object
+        this.pinnedPanel = this.activePanel
+
+        //Yoink Content and Title
+        this.pinnedPanelTitle.textContent = this.pinnedPanel.name;
+        this.pinnedPanelDoc.innerHTML = this.activePanelDoc.innerHTML;
+
+        //Do a switchem
+        this.pinnedPanelDiv.style.display = "flex";
+        this.hideActivePanel();
+
+        //Re-Run panel init function
+        this.pinnedPanel.panelInit();
+    }
+
+    async setPinnedPanel(panel){
+        //Set pinned panel
+        this.pinnedPanel = panel;
+
+        //Set Title
+        this.pinnedPanelTitle.textContent = this.pinnedPanel.name;
+
+        //Grab panel hypertext content and load it into div
+        this.pinnedPanelDoc.innerHTML = await this.pinnedPanel.getPage();
+
+        //Display panel
+        this.pinnedPanelDiv.style.display = "flex";
+
+        //Call panel initialization function
+        this.pinnedPanel.panelInit();
+    }
+
+    hidePinnedPanel(){
+        this.pinnedPanelDiv.style.display = "none";
+        this.pinnedPanel = null;
+    }
+
+
 }
 
 class panelObj{
@@ -56,4 +120,7 @@ class panelObj{
 
         return await response.text();
     }
+
+    panelInit(){
+    }
 }