Started work on emotes panel

www/js/channel/chat.js

@@ -54,9 +54,9 @@ class chatBox{
         //Chat bar
         this.chatPrompt.addEventListener("keydown", this.send.bind(this));
         this.sendButton.addEventListener("click", this.send.bind(this));
-        this.settingsIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj)});
-        this.adminIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj)});
-        this.emoteIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj)});
+        this.settingsIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj(client))});
+        this.adminIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj(client))});
+        this.emoteIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new emotePanel(client))});
 
         //Header icons
         this.aspectLockIcon.addEventListener("click", this.lockAspect.bind(this));

www/js/channel/cpanel.js

@@ -69,11 +69,16 @@ class cPanel{
         this.activePanelTitle.textContent = this.activePanel.name;
 
         //Call panel initialization function
-        this.activePanel.panelInit();
+        this.activePanel.panelDocument = this.activePanelDoc;
+        this.activePanel.docSwitch();
     }
 
     hideActivePanel(){
+        //Hide the panel
         this.activePanelDiv.style.display = "none";
+        //Clear out the panel
+        this.activePanelDoc.innerHTML = '';
+        //Set active panel to null
         this.activePanel = null;
     }
 
@@ -101,7 +106,8 @@ class cPanel{
         this.pinnedPanelDiv.style.display = "flex";
 
         //Call panel initialization function
-        this.pinnedPanel.panelInit();
+        this.pinnedPanel.panelDocument = this.pinnedPanelDoc;
+        this.pinnedPanel.docSwitch();
 
         //Resize to window/content
         this.pinnedPanelDragger.fixCutoff();
@@ -131,10 +137,11 @@ class cPanel{
 }
 
 class panelObj{
-    constructor(name = "Placeholder Panel", pageURL = "/panel/placeholder", panelDocument = window.document){
+    constructor(client, name = "Placeholder Panel", pageURL = "/panel/placeholder", panelDocument = window.document){
         this.name = name;
         this.pageURL = pageURL;
         this.panelDocument = panelDocument;
+        this.client = client;
     }
 
     async getPage(){
@@ -145,7 +152,7 @@ class panelObj{
         return await response.text();
     }
 
-    panelInit(){
+    docSwitch(){
     }
 }
 
@@ -195,10 +202,15 @@ class poppedPanel{
 
         //Set Window Title
         this.window.document.title = this.window.document.title.replace("NULL_POPOUT", `${this.panel.name} (${client.channelName})`);
+
         //Set Panel Content
         this.panelTitle.innerText = this.panel.name;
         this.panelDoc.innerHTML = this.panelBody;
 
+        //Set panel object document and call the related function
+        this.panel.panelDocument = this.window.document;
+        this.panel.docSwitch();
+
         this.setupInput();
     }
 
@@ -215,11 +227,14 @@ class poppedPanel{
     unpop(){
         //Set active panel
         this.cPanel.setActivePanel(this.panel, this.panelDoc.innerHTML);
+
+        //Close the popped window
         this.window.close();
     }
 
     pin(){
         this.cPanel.setPinnedPanel(this.panel, this.panelDoc.innerHTML);
+
         this.window.close();
     }
 

www/js/channel/panels/emotePanel.js

@@ -0,0 +1,116 @@
+class emotePanel extends panelObj{
+    constructor(client, panelDocument){
+        super(client, "Emote Panel", "/panel/emote", panelDocument);
+    }
+
+    docSwitch(){
+        this.siteEmoteToggle = this.panelDocument.querySelector('#site-emotes-toggle');
+        this.chanEmoteToggle = this.panelDocument.querySelector('#chan-emotes-toggle');
+        this.personalEmoteToggle = this.panelDocument.querySelector('#personal-emotes-toggle');
+
+        this.siteEmoteList = this.panelDocument.querySelector('#emote-panel-site-list');
+        this.chanEmoteList = this.panelDocument.querySelector('#emote-panel-chan-list');
+        this.personalEmoteList = this.panelDocument.querySelector('#emote-panel-personal-list');
+
+        this.setupInput();
+
+        this.renderEmotes(this.client.chatBox.commandPreprocessor.emotes.site, this.siteEmoteList);
+        this.renderEmotes(this.client.chatBox.commandPreprocessor.emotes.chan, this.chanEmoteList);
+        this.renderEmotes(this.client.chatBox.commandPreprocessor.emotes.personal, this.personalEmoteList);
+    }
+
+    setupInput(){
+        //Make sure to remove any event listeners in-case we moving an already instantiated panel
+        this.siteEmoteToggle.removeEventListener("click", this.toggleSiteEmotes.bind(this));
+        this.siteEmoteToggle.addEventListener("click", this.toggleSiteEmotes.bind(this));
+
+        this.chanEmoteToggle.removeEventListener("click", this.toggleChanEmotes.bind(this));
+        this.chanEmoteToggle.addEventListener("click", this.toggleChanEmotes.bind(this));
+
+        this.personalEmoteToggle.removeEventListener("click", this.togglePersonalEmotes.bind(this));
+        this.personalEmoteToggle.addEventListener("click", this.togglePersonalEmotes.bind(this));
+    }
+
+    toggleSiteEmotes(event){
+        this.toggleEmotes(this.siteEmoteToggle, this.siteEmoteList);
+    }
+
+    toggleChanEmotes(event){
+        this.toggleEmotes(this.chanEmoteToggle, this.chanEmoteList);
+    }
+
+    togglePersonalEmotes(event){
+        this.toggleEmotes(this.personalEmoteToggle, this.personalEmoteList);
+    }
+
+    toggleEmotes(icon, list){
+        if(list.checkVisibility()){
+            icon.classList.replace('bi-caret-down-fill','bi-caret-left-fill');
+            list.style.display = 'none';
+        }else{
+            icon.classList.replace('bi-caret-left-fill', 'bi-caret-down-fill');
+            list.style.display = 'grid';
+        }
+    }
+
+    useEmote(emote){
+        //If we're using this from the active panel
+        if(client.cPanel.activePanel == this){
+            //Close it
+            this.client.cPanel.hideActivePanel();
+        }
+
+        //Add the emote to the chatbox prompt
+        this.client.chatBox.chatPrompt.value += `[${emote}]`;
+    }
+
+    renderEmotes(emoteList, container){
+        //Clear out the container
+        container.innerHTML = '';
+
+        //For each emote
+        emoteList.forEach((emote) => {
+            //Create div to hold emote
+            const emoteDiv = document.createElement('div');
+            emoteDiv.classList.add('emote-panel-list-emote');
+
+            //If the emote is an image
+            if(emote.type == 'image'){
+                //Create image node
+                var emoteMedia = document.createElement('img');
+            //if emote is a video
+            }else if(emote.type == 'video'){
+                //create video node
+                var emoteMedia = document.createElement('video');
+                //Set video properties
+                emoteMedia.autoplay = true;
+                emoteMedia.muted = true;
+                emoteMedia.controls = false;
+                emoteMedia.loop = true;
+            }
+
+            //set media link as source
+            emoteMedia.src = emote.link;
+            //Set media class
+            emoteMedia.classList.add('emote-list-media');
+
+            //Create paragraph tag
+            const emoteTitle = document.createElement('p');
+            //Set title class
+            emoteTitle.classList.add('emote-list-title');
+            //Set emote title
+            emoteTitle.innerHTML = `[${emote.name}]`;
+            
+            //Add the emote media to the emote span
+            emoteDiv.appendChild(emoteMedia);
+            //Add title paragraph node
+            emoteDiv.appendChild(emoteTitle);
+
+            //Add useEmote event listener
+            emoteDiv.addEventListener('click', ()=>{this.useEmote(emote.name)});
+
+            //Append the mote span to the emote list
+            container.appendChild(emoteDiv);
+        })
+    }
+}