JSDoc for www/js/channel/*.js complete. Just need to hadnle ww/js/channel/panels.
This commit is contained in:
parent
ac06f839ea
commit
c0f219276f
91 changed files with 38653 additions and 104 deletions
|
|
@ -15,7 +15,7 @@ You should have received a copy of the GNU Affero General Public License
|
|||
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
||||
|
||||
/**
|
||||
* Class for Object which represents Canopy Chat Box UI
|
||||
* Class which represents Canopy Chat Box UI
|
||||
*/
|
||||
class chatBox{
|
||||
/**
|
||||
|
|
@ -24,7 +24,7 @@ class chatBox{
|
|||
*/
|
||||
constructor(client){
|
||||
/**
|
||||
* Parent CLient Management Object
|
||||
* Parent Client Management Object
|
||||
*/
|
||||
this.client = client
|
||||
|
||||
|
|
@ -69,20 +69,75 @@ class chatBox{
|
|||
this.chatPostprocessor = new chatPostprocessor(client);
|
||||
|
||||
//Element Nodes
|
||||
/**
|
||||
* Chat Panel Container Div
|
||||
*/
|
||||
this.chatPanel = document.querySelector("#chat-panel-div");
|
||||
|
||||
/**
|
||||
* High Level Selector
|
||||
*/
|
||||
this.highSelect = document.querySelector("#chat-panel-high-level-select");
|
||||
|
||||
/**
|
||||
* Flair Selector
|
||||
*/
|
||||
this.flairSelect = document.querySelector("#chat-panel-flair-select");
|
||||
|
||||
/**
|
||||
* Chat Buffer Div
|
||||
*/
|
||||
this.chatBuffer = document.querySelector("#chat-panel-buffer-div");
|
||||
|
||||
/**
|
||||
* Chat Prompt
|
||||
*/
|
||||
this.chatPrompt = document.querySelector("#chat-panel-prompt");
|
||||
|
||||
/**
|
||||
* Auto-Complete Placeholder
|
||||
*/
|
||||
this.autocompletePlaceholder = document.querySelector("#chat-panel-prompt-autocomplete-filler");
|
||||
|
||||
/**
|
||||
* Auto-Complete Display
|
||||
*/
|
||||
this.autocompleteDisplay = document.querySelector("#chat-panel-prompt-autocomplete-display");
|
||||
|
||||
/**
|
||||
* Settings Panel Icon
|
||||
*/
|
||||
this.settingsIcon = document.querySelector("#chat-panel-settings-icon");
|
||||
|
||||
/**
|
||||
* Admin Panel Icon
|
||||
*/
|
||||
this.adminIcon = document.querySelector("#chat-panel-admin-icon");
|
||||
|
||||
/**
|
||||
* Emote Icon
|
||||
*/
|
||||
this.emoteIcon = document.querySelector("#chat-panel-emote-icon");
|
||||
|
||||
/**
|
||||
* Send Chat/Command Button
|
||||
*/
|
||||
this.sendButton = document.querySelector("#chat-panel-send-button");
|
||||
//Seems weird to stick this in here, but the split is dictated by chat width :P
|
||||
|
||||
/**
|
||||
* Aspect Lock Icon
|
||||
* Seems weird to stick this in here, but the split is dictated by chat width :P
|
||||
*/
|
||||
this.aspectLockIcon = document.querySelector("#media-panel-aspect-lock-icon");
|
||||
|
||||
/**
|
||||
* Hide Chat Icon
|
||||
*/
|
||||
this.hideChatIcon = document.querySelector("#chat-panel-div-hide");
|
||||
|
||||
/**
|
||||
* Show Chat Icon
|
||||
*/
|
||||
this.showChatIcon = document.querySelector("#media-panel-show-chat-icon");
|
||||
|
||||
//Setup functions
|
||||
|
|
@ -91,6 +146,9 @@ class chatBox{
|
|||
this.sizeToAspect();
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines input-related event listeners
|
||||
*/
|
||||
setupInput(){
|
||||
//Chat bar
|
||||
this.chatPrompt.addEventListener("keydown", this.send.bind(this));
|
||||
|
|
@ -118,11 +176,18 @@ class chatBox{
|
|||
this.chatBuffer.addEventListener('scroll', this.scrollHandler.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines network-related event listners
|
||||
*/
|
||||
defineListeners(){
|
||||
this.client.socket.on("chatMessage", this.displayChat.bind(this));
|
||||
this.client.socket.on("clearChat", this.clearChat.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears chat on command from server
|
||||
* @param {Object} data - Data from server
|
||||
*/
|
||||
clearChat(data){
|
||||
//If we where passed a user to check
|
||||
if(data.user != null){
|
||||
|
|
@ -138,6 +203,10 @@ class chatBox{
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Receives, Post-Processes, and Displays chat messages from server
|
||||
* @param {Object} data De-hydrated chat object from server
|
||||
*/
|
||||
displayChat(data){
|
||||
//Create chat-entry span
|
||||
var chatEntry = document.createElement('span');
|
||||
|
|
@ -186,15 +255,27 @@ class chatBox{
|
|||
this.resizeAspect();
|
||||
}
|
||||
|
||||
/**
|
||||
* Concatinate Text into Chat Prompt
|
||||
* @param {String} text - Text to Concatinate
|
||||
*/
|
||||
catChat(text){
|
||||
this.chatPrompt.value += text;
|
||||
this.displayAutocomplete();
|
||||
}
|
||||
|
||||
/**
|
||||
* Calls a toke command out with a specified user
|
||||
* @param {String} user - User to toke with
|
||||
*/
|
||||
tokeWith(user){
|
||||
this.commandPreprocessor.preprocess(user == this.client.user.user ? "!toke up fuckers" : `!toke up ${user}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pre-processes and sends text from chat prompt to server
|
||||
* @param {Event} event - Event passed down from Event Handler
|
||||
*/
|
||||
send(event){
|
||||
if((!event || !event.key || event.key == "Enter") && this.chatPrompt.value){
|
||||
this.commandPreprocessor.preprocess(this.chatPrompt.value);
|
||||
|
|
@ -205,6 +286,10 @@ class chatBox{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays auto-complete text against current prompt input
|
||||
* @param {Event} event - Event passed down from Event Handler
|
||||
*/
|
||||
displayAutocomplete(event){
|
||||
//Find current match
|
||||
const match = this.checkAutocomplete();
|
||||
|
|
@ -216,6 +301,10 @@ class chatBox{
|
|||
this.autocompleteDisplay.textContent = match.match.replace(match.word, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Called upon tab-complete
|
||||
* @param {Event} event - Event passed down from Event Handler
|
||||
*/
|
||||
tabComplete(event){
|
||||
//If we hit tab or this isn't a keyboard event
|
||||
if(event.key == "Tab" || event.key == null){
|
||||
|
|
@ -239,6 +328,11 @@ class chatBox{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks string input against auto-complete dictionary to generate the best guess as to what the user is typing
|
||||
* @param {String} input - Current input from Chat Prompt
|
||||
* @returns {Object} Object containing word we where handed and the match we found
|
||||
*/
|
||||
checkAutocomplete(input = this.chatPrompt.value){
|
||||
//Rebuild this fucker every time because it really doesn't take that much compute power and emotes/used tokes change
|
||||
//Worst case we could store it persistantly and update as needed but I think that might be much
|
||||
|
|
@ -287,27 +381,48 @@ class chatBox{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles initial client meta-data dump from server upon connection
|
||||
* @param {Object} data - Data dump from server
|
||||
*/
|
||||
handleClientInfo(data){
|
||||
this.updateFlairSelect(data.flairList, data.user.flair);
|
||||
this.updateHighSelect(data.user.highLevel);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets user high-level
|
||||
* @param {Event} event - Event passed down from Event Handler
|
||||
*/
|
||||
setHighLevel(event){
|
||||
const highLevel = event.target.value;
|
||||
|
||||
this.client.socket.emit("setHighLevel", {highLevel});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets user flair
|
||||
* @param {Event} event - Event passed down from Event Handler
|
||||
*/
|
||||
setFlair(event){
|
||||
const flair = event.target.value;
|
||||
|
||||
this.client.socket.emit("setFlair", {flair});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles High-Level updates from the server
|
||||
* @param {Number} highLevel - High Level to Set
|
||||
*/
|
||||
updateHighSelect(highLevel){
|
||||
this.highSelect.value = highLevel;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles flair updates from the server
|
||||
* @param {Array} fliarList - List of flairs to put into flair select
|
||||
* @param {String} fliar - Flair to set
|
||||
*/
|
||||
updateFlairSelect(flairList, flair){
|
||||
//clear current flair select
|
||||
this.flairSelect.innerHTML = "";
|
||||
|
|
@ -331,6 +446,10 @@ class chatBox{
|
|||
this.flairSelect.classList.add(`flair-${flair}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Locks chat-size to aspect ratio of media
|
||||
* @param {Event} event - Event passed down from Event Handler
|
||||
*/
|
||||
lockAspect(event){
|
||||
//prevent the user from breaking shit :P
|
||||
if(this.chatPanel.style.display != "none"){
|
||||
|
|
@ -340,6 +459,10 @@ class chatBox{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Un-locks chat-size to aspect ratio of media
|
||||
* @param {Event} event - Event passed down from Event Handler
|
||||
*/
|
||||
unlockAspect(event){
|
||||
//Disable aspect lock
|
||||
this.aspectLock = false;
|
||||
|
|
@ -348,6 +471,11 @@ class chatBox{
|
|||
this.aspectLockIcon.style.display = "inline";
|
||||
}
|
||||
|
||||
L /**
|
||||
* Re-sizes chat back to aspect ratio on window re-size when chat box is aspect locked
|
||||
* Also prevents horizontal scroll-bars from chat/window resizing
|
||||
* @param {Event} event - Event passed down from Event Handler
|
||||
*/
|
||||
resizeAspect(event){
|
||||
const playerHidden = this.client.player.playerDiv.style.display == "none";
|
||||
|
||||
|
|
@ -364,6 +492,9 @@ class chatBox{
|
|||
this.handleAutoScroll();
|
||||
}
|
||||
|
||||
L /**
|
||||
* Re-sizes chat box relative to media aspect ratio
|
||||
*/
|
||||
sizeToAspect(){
|
||||
if(this.chatPanel.style.display != "none"){
|
||||
var targetVidWidth = this.client.player.getRatio() * this.chatPanel.getBoundingClientRect().height;
|
||||
|
|
@ -384,6 +515,10 @@ class chatBox{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles Chat Box UX
|
||||
* @param {Boolean} show - Whether or not to show Chat Box UX
|
||||
*/
|
||||
toggleUI(show = !this.chatPanel.checkVisibility()){
|
||||
if(show){
|
||||
this.chatPanel.style.display = "flex";
|
||||
|
|
@ -397,6 +532,10 @@ class chatBox{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Video Toggling
|
||||
* @param {Boolean} show - Whether or not the video is currently being hidden
|
||||
*/
|
||||
handleVideoToggle(show){
|
||||
//If we're enabling the video
|
||||
if(show){
|
||||
|
|
@ -421,6 +560,10 @@ class chatBox{
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles scrolling within the chat buffer
|
||||
* @param {Event} event - Event passed down from Event Handler
|
||||
*/
|
||||
scrollHandler(event){
|
||||
//If we're just starting out
|
||||
if(this.lastPos == 0){
|
||||
|
|
@ -465,6 +608,9 @@ class chatBox{
|
|||
this.lastWidth = bufferWidth;
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto-scrolls chat buffer when new chats are entered.
|
||||
*/
|
||||
handleAutoScroll(){
|
||||
//If autoscroll is enabled
|
||||
if(this.autoScroll){
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue