diff --git a/src/views/channel.ejs b/src/views/channel.ejs index e7dab2c..f6e1e0c 100644 --- a/src/views/channel.ejs +++ b/src/views/channel.ejs @@ -67,13 +67,23 @@ along with this program. If not, see .-->
-
-
-

NULL PANEL

- - +
+
+

NULL PANEL

+ + +
-
+
+
+
+
+
+

NULL PANEL

+ + +
+
diff --git a/www/css/channel.css b/www/css/channel.css index 865680d..56bef44 100644 --- a/www/css/channel.css +++ b/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; } \ No newline at end of file diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css index 5cc335b..0ac39d4 100644 --- a/www/css/theme/movie-night.css +++ b/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); } \ No newline at end of file diff --git a/www/js/channel/cpanel.js b/www/js/channel/cpanel.js index 4935498..ed144ea 100644 --- a/www/js/channel/cpanel.js +++ b/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){ - this.activePanel.style.display = "flex"; - this.activePanelTitle.textContent = panel.name; - this.activePanelDoc.innerHTML = await panel.getPage(); + async setActivePanel(panel){ + //Set active panel + this.activePanel = panel; + + //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(){ - this.activePanel.style.display = "none"; + hideActivePanel(){ + 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(){ + } } \ No newline at end of file