rainbownapkin/canopy
1
0
Fork 0
Code Issues 2 Pull requests Actions Packages Projects Releases Wiki Activity

Added CPanel Pinning

Browse source
This commit is contained in:
rainbownapkin 2024-11-16 07:12:33 -05:00
parent d4a97faf68
commit 9a17dc5c86
4 changed files with 102 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/views/channel.ejs
View file

@ -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="cpanel" id="cpanel-active-header-div">
<p class="cpanel" id="cpanel-active-title">NULL PANEL</p>
<span class="cpanel" id="cpanel-active-title-spacer"></span>
<i class="cpanel bi-x" id="cpanel-active-close-icon"></i>
<div class="active-cpanel cpanel-div" id="cpanel-active-div">
<div class="active-cpanel cpanel-header-div" id="cpanel-active-header-div">
<p class="active-cpanel cpanel-title" id="cpanel-active-title">NULL PANEL</p>
<span class="active-cpanel cpanel-title-spacer" id="cpanel-active-title-spacer"></span>
<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">

16
www/css/channel.css
View file

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

4
www/css/theme/movie-night.css
View file

@ -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);
}

83
www/js/channel/cpanel.js
View file

@ -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(){
}
}