rainbownapkin/canopy
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Emote Palette UI Complete

Browse source
This commit is contained in:
rainbow napkin 2024-12-21 16:47:19 -05:00
parent 633884534c
commit 42d306e1f2
6 changed files with 148 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

74
www/js/channel/panels/emotePanel.js
View file

@ -1,22 +1,27 @@
class emotePanel extends panelObj{
constructor(client, panelDocument){
super(client, "Emote Panel", "/panel/emote", 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.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);
this.renderEmoteLists();
}
setupInput(){
@ -29,6 +34,18 @@ class emotePanel extends panelObj{
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){
@ -40,7 +57,7 @@ class emotePanel extends panelObj{
}
togglePersonalEmotes(event){
this.toggleEmotes(this.personalEmoteToggle, this.personalEmoteList);
this.toggleEmotes(this.personalEmoteToggle, this.personalEmoteSection);
}
toggleEmotes(icon, list){
@ -64,16 +81,56 @@ class emotePanel extends panelObj{
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
@ -94,6 +151,13 @@ class emotePanel extends panelObj{
//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