Chat Visibility Toggle

resources/[system]/chat/cl_chat.lua

@@ -1,12 +1,14 @@
 local chatInputActive = false
 local chatInputActivating = false
+local chatVisibilityToggle = false
 
 RegisterNetEvent('chatMessage')
 RegisterNetEvent('chat:addTemplate')
 RegisterNetEvent('chat:addMessage')
 RegisterNetEvent('chat:addSuggestion')
 RegisterNetEvent('chat:removeSuggestion')
 RegisterNetEvent('chat:clear')
+RegisterNetEvent('chat:toggleChat')
 
 -- internal events
 RegisterNetEvent('__cfx_internal:serverPrint')
@@ -83,6 +85,34 @@ AddEventHandler('chat:clear', function(name)
   })
 end)
 
+AddEventHandler('chat:toggleChat',function(newState)
+  if(newState == true or newState == false)then
+    chatVisibilityToggle = not newState
+  else
+    chatVisibilityToggle = not chatVisibilityToggle
+  end
+
+  local state = (chatVisibilityToggle == true) and "^1disabled" or "^2enabled"
+
+  SendNUIMessage({
+    type = 'ON_TOGGLE_CHAT',
+    toggle = chatVisibilityToggle
+  })
+
+  SendNUIMessage({
+  type = 'ON_MESSAGE',
+  message = {
+    color = {255,255,255},
+    multiline = true,
+    args = {"Chat Visibility has been "..state}
+    }
+  })
+end)
+
+RegisterCommand("togglechat",function()
+  TriggerEvent('chat:toggleChat')
+end)
+
 RegisterNUICallback('chatResult', function(data, cb)
   chatInputActive = false
   SetNuiFocus(false)

resources/[system]/chat/html/App.js

@@ -6,6 +6,8 @@ window.APP = {
       style: CONFIG.style,
       showInput: false,
       showWindow: false,
+      neverShowWindow: false,
+      neverShowWindowFlag: false,
       suggestions: [],
       templates: CONFIG.templates,
       message: '',
@@ -32,7 +34,9 @@ window.APP = {
       if (this.showWindowTimer) {
         clearTimeout(this.showWindowTimer);
       }
-      this.showWindow = true;
+      if(this.neverShowWindowFlag == false){
+        this.showWindow = true;
+      }
       this.resetShowWindowTimer();
 
       const messagesObj = this.$refs.messages;
@@ -45,6 +49,8 @@ window.APP = {
     ON_OPEN() {
       this.showInput = true;
       this.showWindow = true;
+      this.neverShowWindow = false
+
       if (this.showWindowTimer) {
         clearTimeout(this.showWindowTimer);
       }
@@ -80,6 +86,12 @@ window.APP = {
         this.templates[template.id] = template.html;
       }
     },
+    ON_TOGGLE_CHAT({ toggle }){
+      if(toggle == true || toggle == false){
+        this.neverShowWindow = toggle
+        this.neverShowWindowFlag = toggle
+      }
+    },
     warn(msg) {
       this.messages.push({
         args: [msg],
@@ -94,6 +106,9 @@ window.APP = {
       this.showWindowTimer = setTimeout(() => {
         if (!this.showInput) {
           this.showWindow = false;
+          if(this.neverShowWindowFlag){
+            this.neverShowWindow = true
+          }
         }
       }, CONFIG.fadeTimeout);
     },

resources/[system]/chat/html/index.css

@@ -119,3 +119,8 @@ textarea:focus, input:focus {
 .suggestion {
   margin-bottom: 5px;
 }
+
+.forceHidden {
+  opacity: 0.0 !important;
+  visibility: none !important;
+}

resources/[system]/chat/html/index.html

@@ -18,7 +18,7 @@
   <!-- App Template -->
   <script type="text/x-template" id="app_template">
     <div id="app">
-      <div class="chat-window" :style="this.style" :class="{ 'fadeOut animated': !showWindow }">
+      <div class="chat-window" :style="this.style" :class="{ 'fadeOut animated': !showWindow, 'forceHidden': neverShowWindow }">
         <div class="chat-messages" ref="messages">
           <message v-for="msg in messages"
                    :templates="templates"