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

Started work on emote panel in admin page.

Browse source
This commit is contained in:
rainbow napkin 2024-12-18 07:05:29 -05:00
parent 255e6e0d7f
commit 90d67024b7
8 changed files with 107 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

40
www/js/channel/chatPostprocessor.js
View file

@ -7,9 +7,9 @@ class chatPostprocessor{
//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();
//Split the chat message into an array of objects representing each word
this.splitMessage();
//Inject links into un-processed placeholders
this.processLinks();
@ -26,9 +26,9 @@ class chatPostprocessor{
return this.chatEntry;
}
splitBody(){
splitMessage(){
//Create an empty array to hold the body
this.bodyArray = [];
this.messageArray = [];
//Split string by word-boundries, with negative lookaheads to exclude file seperators so we don't split link placeholders
const splitString = this.rawData.msg.split(/(?<!␜)\b/g);
@ -41,7 +41,7 @@ class chatPostprocessor{
}
//Add it to our body array
this.bodyArray.push(wordObj);
this.messageArray.push(wordObj);
});
}
@ -51,7 +51,7 @@ class chatPostprocessor{
const _this = this;
//For each word object
this.bodyArray.forEach((wordObj) => {
this.messageArray.forEach((wordObj) => {
if(wordObj.type == 'word'){
//Inject current wordObj string into the chat body
injectString(wordObj.string);
@ -60,7 +60,7 @@ class chatPostprocessor{
const link = document.createElement('a');
link.classList.add('chat-link');
link.href = wordObj.link;
//Use textContent to be safe since links can't be escaped
//Use textContent to be safe since links can't be escaped serverside
link.textContent = wordObj.link;
//Append node to chatBody
@ -70,7 +70,7 @@ class chatPostprocessor{
const badLink = document.createElement('a');
badLink.classList.add('chat-dead-link', 'danger-link');
badLink.href = wordObj.link;
//Use textContent to be safe since links can't be escaped
//Use textContent to be safe since links can't be escaped serverside
badLink.textContent = wordObj.link;
//Append node to chatBody
@ -91,7 +91,6 @@ class chatPostprocessor{
img.classList.add('chat-img');
img.src = wordObj.link;
//stringArray.push(wordObj.string.replace('␜',img.outerHTML));
//Append node to chatBody
injectNode(wordObj, img);
}else if(wordObj.type == 'video'){
@ -104,7 +103,6 @@ class chatPostprocessor{
vid.loop = true;
vid.muted = true;
//stringArray.push(wordObj.string.replace('␜',vid.outerHTML));
injectNode(wordObj, vid);
}
});
@ -115,8 +113,9 @@ class chatPostprocessor{
if(typeof item == "string"){
//Add it to the chat's innerHTML (it should already be escaped by the server)
this.chatBody.innerHTML += item;
//Otherwise it should be a DOM node
}else{
//Otherwise it should be a DOM node, therefore we should append it
//Append the node to our chat body
this.chatBody.appendChild(item);
}
})
@ -151,12 +150,14 @@ class chatPostprocessor{
addWhitespace(){
//for each word object in the body
this.bodyArray.forEach((wordObj, wordIndex) => {
this.messageArray.forEach((wordObj, wordIndex) => {
//if the word object hasn't been pre-processed elsewhere
if(wordObj.type == "word"){
//Create an empty array to hold our word
var wordArray = [];
//Add invisible whitespace in-between characters to keep it from breaking page layout
this.bodyArray[wordIndex].string.split("").forEach((char, charIndex) => {
//For each character in the string of the current word object
this.messageArray[wordIndex].string.split("").forEach((char, charIndex) => {
//push the current character to the wordArray
wordArray.push(char);
//After eight characters
if(charIndex > 8){
@ -166,7 +167,8 @@ class chatPostprocessor{
});
this.bodyArray[wordIndex].string = wordArray.join("");
//Join the wordArray into a single string, and use it to set the current wordObject's string
this.messageArray[wordIndex].string = wordArray.join("");
}
});
}
@ -178,12 +180,14 @@ class chatPostprocessor{
return;
}
//For every link received in this message
this.rawData.links.forEach((link, linkIndex) => {
this.bodyArray.forEach((wordObj, wordIndex) => {
//For every word obj in the message array
this.messageArray.forEach((wordObj, wordIndex) => {
//Check current wordobj for link (placeholder may contain whitespace with it)
if(wordObj.string.match(`␜${linkIndex}`)){
//Set current word object in the body array to the new link object
this.bodyArray[wordIndex] = {
this.messageArray[wordIndex] = {
//Don't want to use a numbered placeholder to make this easier during body injection
//but we also don't want to clobber any surrounding whitespace
string: wordObj.string.replace(`␜${linkIndex}`, '␜'),