Added styles support, fixed messages with no author, removed JQuery dep

resources/[system]/chat/cl_chat.lua

@@ -13,15 +13,16 @@ RegisterNetEvent('_chat:messageEntered')
 
 --deprecated, use chat:addMessage
 AddEventHandler('chatMessage', function(author, color, text)
-  if author == "" then
-    author = false
+  local args = { text }
+  if author ~= "" then
+    table.insert(args, 1, author)
   end
   SendNUIMessage({
     type = 'ON_MESSAGE',
     message = {
       color = color,
       multiline = true,
-      args = { author, text }
+      args = args
     }
   })
 end)

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

@@ -19,7 +19,7 @@ window.APP = {
     window.removeEventListener('message', this.listener);
   },
   mounted() {
-    $.post('http://chat/loaded', JSON.stringify({}));
+    post('http://chat/loaded', JSON.stringify({}));
     this.listener = window.addEventListener('message', (event) => {
       const item = event.data || event.detail; //'detail' is for debuging via browsers
       if (this[item.type]) {
@@ -135,7 +135,7 @@ window.APP = {
         this.resize();
       } else {
         if(this.message !== '') {
-          $.post('http://chat/chatResult', JSON.stringify({
+          post('http://chat/chatResult', JSON.stringify({
             message: this.message,
           }));
           this.oldMessages.unshift(this.message);
@@ -149,7 +149,7 @@ window.APP = {
     },
     hideInput(canceled = false) {
       if (canceled) {
-        $.post('http://chat/chatResult', JSON.stringify({ canceled }));
+        post('http://chat/chatResult', JSON.stringify({ canceled }));
       }
       this.showInput = false;
       clearInterval(this.focusTimer);

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

@@ -6,6 +6,13 @@ Vue.component('message', {
   computed: {
     textEscaped() {
       let s = this.template ? this.template : this.templates[this.templateId];
+
+      //This hack is required to preserve backwards compatability
+      if (this.templateId == CONFIG.defaultTemplateId
+          && this.args.length == 1) {
+        s = this.templates[CONFIG.defaultAltTemplateId] //Swap out default template :/
+      }
+
       s = s.replace(/{(\d+)}/g, (match, number) => {
         const argEscaped = this.args[number] != undefined ? this.escape(this.args[number]) : match
         if (number == 0 && this.color) {
@@ -19,10 +26,16 @@ Vue.component('message', {
   },
   methods: {
     colorizeOld(str) {
-      return `<strong style="color: rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})">${str}</strong>`
+      return `<span style="color: rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})">${str}</span>`
     },
     colorize(str) {
-      const s = "<span>" + (str.replace(/\^([0-9]+)/g, (str, color) => `</span><span class="color-${color}">`)) + "</span>";
+      const s = "<span>" + (str.replace(/\^([0-9]+)([busr])|\^([0-9]+)|\^([busr])/g,
+        (match, color1, style1, color2, style2) => {
+          const color = (color1 || color2) ? `color-${color1 || color2} ` : '';
+          const style = (style1 || style2) ? `style-${style1 || style2} ` : '';
+          return `</span><span class="${color}${style}">`;
+        }
+      )) + "</span>";
       return s.replace(/<span[^>]*><\/span[^>]*>/g, '');
     },
     escape(unsafe) {

resources/[system]/chat/html/config.default.js

@@ -1,9 +1,11 @@
 // DO NOT EDIT THIS FILE
 // Copy it to `config.js` and edit it
 window.CONFIG = {
-  defaultTemplateId: 'default', //This template will be used for normal chat messages
+  defaultTemplateId: 'default', //This is the default template for 2 args1
+  defaultAltTemplateId: 'defaultAlt', //This one for 1 arg
   templates: { //You can add static templates here
     'default': '<b>{0}</b>: {1}',
+    'defaultAlt': '{0}',
     'example:important': '<h1>^2{0}</h1>'
   },
   fadeTimeout: 7000,

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

@@ -8,6 +8,14 @@
 .color-8{color: #cc0000;}
 .color-9{color: #cc0068;}
 
+.style-b{font-weight: bold;}
+.style-u{text-decoration: underline;}
+.style-s{text-decoration: line-through;}
+.style-r {
+  text-decoration: none;
+  font-weight: normal;
+}
+
 * {
   font-family: 'Lato', sans-serif;
   margin: 0;

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

@@ -8,9 +8,6 @@
   <link href="vendor/animate.3.5.2.min.css" rel="stylesheet"></link>
   <link href="index.css" rel="stylesheet"></link>
 
-  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> -->
-
-  <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
   <script src="vendor/vue.2.3.3.min.js" type="text/javascript"></script>
   <script src="config.default.js" type="text/javascript"></script>
   <script src="config.js" type="text/javascript"></script>
@@ -91,6 +88,13 @@
 
   <!-- Main Entry -->
   <script type="text/javascript">
+  window.post = (url, data) => {
+    var request = new XMLHttpRequest();
+    request.open('POST', url, true);
+    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+    request.send(data);
+  }
+
   const instance = new Vue({
     el: '#app',
     render: h => h(APP),