85 lines
1.9 KiB
JavaScript
85 lines
1.9 KiB
JavaScript
Vue.component("message", {
|
|
template: "#message_template",
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
textEscaped() {
|
|
let s = this.template ? this.template : this.templates[this.templateId];
|
|
|
|
if (this.template) {
|
|
this.templateId = -1;
|
|
}
|
|
|
|
if (this.templateId == 'default' && this.args.length == 1) {
|
|
s = this.templates['defaultAlt'];
|
|
}
|
|
|
|
s = s.replace(/{(\d+)}/g, (match, number) => {
|
|
const argEscaped = this.args[number] != undefined ? this.escape(this.args[number]) : match;
|
|
if (number == 0 && this.color) {
|
|
return this.colorizeOld(argEscaped);
|
|
}
|
|
return argEscaped;
|
|
});
|
|
return this.colorize(s);
|
|
}
|
|
},
|
|
methods: {
|
|
colorizeOld(str) {
|
|
return `<span style="color: rgb(${this.color[0]}, ${this.color[1]}, ${
|
|
this.color[2]
|
|
})">${str}</span>`;
|
|
},
|
|
colorize(str) {
|
|
let s = "<span>" + str.replace(/\^([0-9])/g, (str, color) => `</span><span class="color-${color}">`) + "</span>";
|
|
|
|
const styleDict = {
|
|
"*": "font-weight: bold;",
|
|
_: "text-decoration: underline;",
|
|
"~": "text-decoration: line-through;",
|
|
"=": "text-decoration: underline line-through;",
|
|
r: "text-decoration: none;font-weight: normal;"
|
|
};
|
|
|
|
const styleRegex = /\^(\_|\*|\=|\~|\/|r)(.*?)(?=$|\^r|<\/em>)/;
|
|
while (s.match(styleRegex)) {
|
|
s = s.replace(styleRegex, (str, style, inner) => `<em style="${styleDict[style]}">${inner}</em>`);
|
|
}
|
|
return s.replace(/<span[^>]*><\/span[^>]*>/g, "");
|
|
},
|
|
escape(unsafe) {
|
|
return String(unsafe)
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
},
|
|
props: {
|
|
templates: {
|
|
type: Object
|
|
},
|
|
args: {
|
|
type: Array
|
|
},
|
|
template: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
templateId: {
|
|
type: String,
|
|
default: 'default'
|
|
},
|
|
multiline: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
color: {
|
|
type: Array,
|
|
default: false
|
|
}
|
|
}
|
|
});
|