canopy/www/js/channel/panels/emotePanel.js

class emotePanel extends panelObj{
    constructor(client, panelDocument){
        super(client, "Emote Palette", "/panel/emote", panelDocument);
    }

    docSwitch(){
        this.siteEmoteTitle = this.panelDocument.querySelector('#site-emotes-title');
        this.chanEmoteTitle = this.panelDocument.querySelector('#chan-emotes-title');
        this.personalEmoteTitle = this.panelDocument.querySelector('#personal-emotes-title');

        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.personalEmoteSection = this.panelDocument.querySelector('#emote-panel-personal-section');
        this.personalEmoteList = this.panelDocument.querySelector('#emote-panel-personal-list');

        this.searchPrompt = this.panelDocument.querySelector('#emote-panel-search-prompt');

        this.setupInput();

        this.renderEmoteLists();
    }

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

        this.siteEmoteTitle.removeEventListener("click", this.toggleSiteEmotes.bind(this));
        this.siteEmoteTitle.addEventListener("click", this.toggleSiteEmotes.bind(this));

        this.chanEmoteTitle.removeEventListener("click", this.toggleChanEmotes.bind(this));
        this.chanEmoteTitle.addEventListener("click", this.toggleChanEmotes.bind(this));

        this.personalEmoteTitle.removeEventListener("click", this.togglePersonalEmotes.bind(this));
        this.personalEmoteTitle.addEventListener("click", this.togglePersonalEmotes.bind(this));

        this.searchPrompt.removeEventListener('keyup', this.renderEmoteLists.bind(this));
        this.searchPrompt.addEventListener('keyup', this.renderEmoteLists.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.personalEmoteSection);
    }

    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}]`;
    }

    renderEmoteLists(){
        var search = this.searchPrompt.value;

        var siteEmotes = this.client.chatBox.commandPreprocessor.emotes.site;
        var chanEmotes = this.client.chatBox.commandPreprocessor.emotes.chan;
        var personalEmotes = this.client.chatBox.commandPreprocessor.emotes.personal;


        if(search != ''){
            siteEmotes = siteEmotes.filter(filterQuery);
            chanEmotes = chanEmotes.filter(filterQuery);
            personalEmotes = personalEmotes.filter(filterQuery);

            function filterQuery(emote){
                //return true for anyany case-insensitive matches
                return (emote.name.toLowerCase().match(search.toLowerCase())) != null;
            }
        }

        this.renderEmotes(siteEmotes, this.siteEmoteList);
        this.renderEmotes(chanEmotes, this.chanEmoteList);
        this.renderEmotes(personalEmotes, this.personalEmoteList);
    }

    renderEmotes(emoteList, container){
        //Clear out the container
        container.innerHTML = '';

        //If we have two or less emotes
        if(emoteList.length <= 2){
            //Set the container display to flex
            container.style.display = 'flex';
        //otherwise
        }else{
            //Set the container display to grid
            container.style.display = 'grid';
        }

        //For each emote
        emoteList.forEach((emote) => {
            //Create div to hold emote
            const emoteDiv = document.createElement('div');
            emoteDiv.classList.add('emote-panel-list-emote');

            //If we have a low emote count
            if(emoteList.length <= 2){
                //render them huuuuuge
                emoteDiv.classList.add('emote-panel-list-big-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');

            //if we have a low emote count
            if(emoteList.length <= 2){
                //render them huuuuuge
                emoteMedia.classList.add('emote-list-big-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);
        })
    }
}