116 lines
4.4 KiB
JavaScript
116 lines
4.4 KiB
JavaScript
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);
|
|
})
|
|
}
|
|
} |