109 lines
3.9 KiB
JavaScript
109 lines
3.9 KiB
JavaScript
class chatPostprocessor{
|
||
constructor(){
|
||
}
|
||
|
||
preprocess(chatEntry, rawData){
|
||
this.rawData = rawData;
|
||
//Set current chat nodes
|
||
this.chatEntry = chatEntry;
|
||
this.chatBody = this.chatEntry.querySelector(".chat-entry-body");
|
||
//Split the chat body into an array of objects representing each word
|
||
//We could pass this through arguments but these functions wont be very interoperable anyways since they expect a purpose-made hashtable
|
||
this.splitBody();
|
||
|
||
//Inject whitespace into un-processed words
|
||
this.addWhitespace();
|
||
|
||
//Handle non-standard chat types
|
||
this.handleChatType();
|
||
|
||
//Inject the pre-processed chat into the chatEntry node
|
||
this.injectBody();
|
||
//Return the pre-processed node
|
||
return this.chatEntry;
|
||
}
|
||
|
||
splitBody(){
|
||
//Create an empty array to hold the body
|
||
this.bodyArray = [];
|
||
//Split string by words
|
||
const splitString = this.chatBody.innerHTML.split(/\b/g); //Group words together
|
||
|
||
//for each word in the splitstring
|
||
splitString.forEach((string) => {
|
||
//create a word object
|
||
const wordObj = {
|
||
string: string,
|
||
type: "word"
|
||
}
|
||
|
||
//Add it to our body array
|
||
this.bodyArray.push(wordObj);
|
||
});
|
||
}
|
||
|
||
injectBody(){
|
||
//Create empty array to hold strings
|
||
var stringArray = [];
|
||
|
||
//Extract strings into the empty array
|
||
this.bodyArray.forEach((wordObj) => {
|
||
stringArray.push(wordObj.string);
|
||
});
|
||
|
||
//Join the strings to fill the chat entry
|
||
this.chatBody.innerHTML = stringArray.join("");
|
||
}
|
||
|
||
addWhitespace(){
|
||
//for each word object in the body
|
||
this.bodyArray.forEach((wordObj, wordIndex) => {
|
||
//if the word object hasn't been pre-processed elsewhere
|
||
if(wordObj.type == "word"){
|
||
var wordArray = [];
|
||
//Add invisible whitespace in-between characters to keep it from breaking page layout
|
||
//this.bodyArray[index].string = wordObj.string.split("").join("ㅤ");
|
||
this.bodyArray[wordIndex].string.split("").forEach((char, charIndex) => {
|
||
wordArray.push(char);
|
||
//After eight characters
|
||
if(charIndex > 8){
|
||
//Push an invisible line-break character between every character
|
||
wordArray.push("ㅤ");
|
||
}
|
||
|
||
});
|
||
|
||
this.bodyArray[wordIndex].string = wordArray.join("");
|
||
}
|
||
});
|
||
}
|
||
|
||
handleChatType(){
|
||
if(this.rawData.type == "whisper"){
|
||
//add whisper class
|
||
this.chatBody.classList.add('whisper');
|
||
}else if(this.rawData.type == "announcement"){
|
||
//Squash the high-level
|
||
this.chatEntry.querySelector('.high-level').remove();
|
||
|
||
//Get the username and make it into an announcement title (little hacky but this *IS* postprocessing)
|
||
const userNode = this.chatEntry.querySelector('.chat-entry-username');
|
||
userNode.innerHTML = `${userNode.innerHTML.slice(0,-2)} Announcement`;
|
||
|
||
//Add/remove relevant classes
|
||
userNode.classList.remove('chat-entry-username');
|
||
userNode.classList.add('announcement-title');
|
||
this.chatBody.classList.add('announcement-body');
|
||
this.chatEntry.classList.add('announcement');
|
||
}else if(this.rawData.type == "toke" || this.rawData.type == "tokewhisper"){
|
||
//Squash the high-level
|
||
this.chatEntry.querySelector('.high-level').remove();
|
||
|
||
//remove the username
|
||
this.chatEntry.querySelector('.chat-entry-username').remove();
|
||
|
||
//Add toke/tokewhisper class
|
||
this.chatBody.classList.add(this.rawData.type);
|
||
}
|
||
}
|
||
} |