Started work on emotes panel

2024-12-21 13:43:28 -05:00 · 2024-12-21 13:43:28 -05:00 · 633884534c
commit 633884534c
parent 6a10bf3dea
9 changed files with 242 additions and 7 deletions
--- a/www/js/channel/panels/emotePanel.js
+++ b/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);
+        })
+    }
+}