Betterchat v2

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

@@ -1,21 +1,36 @@
-window.MESSAGE = {
+Vue.component('message', {
   template: '#message_template',
   data() {
     return {};
   },
   computed: {
     textEscaped() {
-      return this.template.replace(/{(\d+)}/g, (match, number) => {
-        return this.args[number] != undefined ? this.escapeHtml(this.args[number]) : match
+      let s = '';
+      if (this.template) {
+        s = this.colorize(this.template);
+      } else {
+        s = this.colorize(this.templates[this.templateId]);
+      }
+      return s.replace(/{(\d+)}/g, (match, number) => {
+        const argEscaped = this.args[number] != undefined ? this.escape(this.args[number]) : match
+        if (number == 0 && this.color) {
+          //color is deprecated, use templates or ^1 etc.
+          return this.colorizeOld(argEscaped);
+        }
+        return argEscaped;
       });
     },
-  },
-  created() {
-
   },
   methods: {
-    escapeHtml(unsafe) {
-      return unsafe
+    colorizeOld(str) {
+      return `<strong style="color: rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})">${str}</strong>`
+    },
+    colorize(str) {
+      const s = "<span>" + (str.replace(/\^([0-9]+)/g, (str, color) => `</span><span class="color-${color}">`)) + "</span>";
+      return s.replace(/<span[^>]*><\/span[^>]*>/g, '');
+    },
+    escape(unsafe) {
+      return String(unsafe)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
@@ -24,20 +39,27 @@ window.MESSAGE = {
     },
   },
   props: {
+    templates: {
+      type: Object,
+    },
     args: {
-
+      type: Array,
     },
     template: {
       type: String,
-      default: window.CONFIG.defaultTemplate,
+      default: null,
+    },
+    templateId: {
+      type: String,
+      default: CONFIG.defaultTemplateId,
     },
     multiline: {
       type: Boolean,
       default: false,
     },
-
-    color: {
-      type: String,
+    color: { //deprecated
+      type: Array,
+      default: false,
     },
   },
-};
+});