Per-Channel Emotes Implemented.

www/js/channelSettings.js

@@ -24,6 +24,7 @@ class channelSettingsPage{
         this.permList = new permList(this.channel);
         this.prefrenceList = new prefrenceList(this.channel);
         this.tokeCommandList = new tokeCommandList(this.channel);
+        this.emoteList = new emoteList(this.channel);
         this.deleteBtn = new deleteBtn(this.channel);
     }
 }
@@ -413,6 +414,124 @@ class tokeCommandList{
     }
 }
 
+class emoteList{
+    constructor(channel){
+        this.channel = channel
+        this.linkPrompt = document.querySelector('#new-emote-link-input');
+        this.namePrompt = document.querySelector('#new-emote-name-input');
+        this.addButton = document.querySelector('#new-emote-button');
+        this.emoteList = document.querySelector('#emote-list');
+
+        //Setup input
+        this.setupInput();
+
+        //Pull and render emote list
+        this.updateList();
+    }
+
+    setupInput(){
+       this.addButton.addEventListener('click', this.addEmote.bind(this));
+    }
+
+    async deleteEmote(event){
+        //Strip name from element id
+        const name = event.target.id.replace('emote-list-delete-','');
+
+        //Delete emote and pull list
+        const list = await utils.ajax.deleteChanEmote(this.channel, name);
+
+        //If we received a list
+        if(list != null){
+            //Pass updated liste to renderEmoteList function instead of pulling it twice
+            this.renderEmoteList(list);
+        }
+    }
+
+    async addEmote(event){
+        //Add emote to list and ingest returned updates list
+        const list = await utils.ajax.addChanEmote(this.channel, this.namePrompt.value, this.linkPrompt.value);
+
+        //If we received a list
+        if(list != null){
+            //Pass updated liste to renderEmoteList function instead of pulling it twice
+            this.renderEmoteList(list);
+
+            //Clear out the prompts
+            this.namePrompt.value = '';
+            this.linkPrompt.value = '';
+        }
+    }
+
+    async updateList(){
+        const list = await utils.ajax.getChanEmotes(this.channel);
+        this.renderEmoteList(list);
+    }
+
+    renderEmoteList(list){
+        //Clear the current list
+        this.emoteList.innerHTML = "";
+
+        //For each emote in the list
+        list.forEach((emote) => {
+            //Create span to hold emote
+            const emoteDiv = document.createElement('div');
+            emoteDiv.classList.add('emote-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 title span
+            const titleSpan = document.createElement('span');
+            titleSpan.classList.add('emote-list-title');
+
+            //Create paragraph tag
+            const emoteTitle = document.createElement('p');
+            //Set title class
+            emoteTitle.classList.add('emote-list-title');
+            //Set emote title
+            emoteTitle.innerHTML = `[${emote.name}]`;
+            
+            //Create delete icon
+            const deleteIcon = document.createElement('i');
+            //Set delete icon id and class
+            deleteIcon.classList.add('bi-trash-fill', 'emote-list-delete');
+            deleteIcon.id = `emote-list-delete-${emote.name}`;
+            //Add delete icon event listener
+            deleteIcon.addEventListener('click',this.deleteEmote.bind(this));
+
+
+            //Add the emote media to the emote span
+            emoteDiv.appendChild(emoteMedia);
+            //Add title paragraph node
+            titleSpan.appendChild(emoteTitle);
+            //Add trash icon node
+            titleSpan.appendChild(deleteIcon);
+            //Add title span
+            emoteDiv.appendChild(titleSpan);
+
+            //Append the mote span to the emote list
+            this.emoteList.appendChild(emoteDiv);
+        });
+    }
+}
+
 class deleteBtn{
     constructor(channel){
         this.channel = channel;
@@ -444,12 +563,11 @@ class deleteAccountPopup{
     }
 
     setupInput(){
-        this.prompt.addEventListener("keydown", this.nukeAccount.bind(this));
+        this.prompt.addEventListener("keydown", this.nukeChannel.bind(this));
     }
 
-    async nukeAccount(event){
+    async nukeChannel(event){
         if(event.key == "Enter"){
-            console.log(this.channel);
             if(this.channel === event.target.value){
                 await utils.ajax.deleteChannel(this.channel, event.target.value);
             }