2021-12-29 11:01:34 -05:00
"use strict" ;
2021-01-13 21:56:14 -05:00
Vue . component ( 'tf-message' , {
2021-01-19 21:20:40 -05:00
props : [ 'message' , 'messages' , 'votes' ] ,
2021-01-13 21:56:14 -05:00
data : function ( ) { return { showRaw : false } } ,
computed : {
content _json : function ( ) {
try {
return JSON . parse ( this . message . content ) ;
} catch {
return undefined ;
}
} ,
} ,
methods : {
markdown : function ( md ) {
var reader = new commonmark . Parser ( { safe : true } ) ;
var writer = new commonmark . HtmlRenderer ( ) ;
return writer . render ( reader . parse ( md ) ) ;
} ,
2021-12-31 14:01:53 -05:00
set _reply : function ( ) {
g _data . reply _root = this . content _json . root || this . message . id ;
g _data . reply _branch = this . message . id ;
}
2021-01-13 21:56:14 -05:00
} ,
template : ` <md-app class="md-elevation-8" style="margin: 1em" v-if="!content_json || ['pub', 'vote'].indexOf(content_json.type) == -1">
< md - app - toolbar >
< h3 >
< tf - user : id = "message.author" > < / t f - u s e r >
< / h 3 >
2022-01-08 15:54:02 -05:00
< div style = "font-size: x-small" >
{ { new Date ( message . timestamp ) } }
< md - tooltip > { { message . id } } < / m d - t o o l t i p >
< / d i v >
2021-01-13 21:56:14 -05:00
< div class = "md-toolbar-section-end" >
< md - menu >
< md - button md - menu - trigger class = "md-icon-button" > < md - icon > more _vert < / m d - i c o n > < / m d - b u t t o n >
< md - menu - content >
< md - menu - item v - if = "!showRaw" v - on : click = "showRaw = true" > View Raw < / m d - m e n u - i t e m >
< md - menu - item v - else v - on : click = "showRaw = false" > View Message < / m d - m e n u - i t e m >
2021-12-31 14:01:53 -05:00
< md - menu - item @ click = "set_reply()" > Reply < / m d - m e n u - i t e m >
2021-01-13 21:56:14 -05:00
< / m d - m e n u - c o n t e n t >
< / m d - m e n u >
< / d i v >
< / m d - a p p - t o o l b a r >
< md - app - content >
< div v - if = "showRaw" > { { message . content } } < / d i v >
< div v - else >
< div v - if = "content_json && content_json.type == 'post'" >
< div v - html = "this.markdown(content_json.text)" > < / d i v >
2021-12-31 10:12:46 -05:00
< div v - for = "mention in content_json.mentions" v - if = "mention.link && typeof(mention.link) == 'string' && mention.link.startsWith('&')" >
< a v - if = "mention.type == 'application/tildefriends'" : href = "'/' + mention.link + '/'" target = "_top" > { { mention . name } } < / a >
< img v - else : src = "'/' + mention.link + '/view'" > < / i m g >
< / d i v >
2021-01-13 21:56:14 -05:00
< / d i v >
< div v - else - if = "content_json && content_json.type == 'tildefriends-app'" >
< div v - html = "this.markdown(content_json.text)" > < / d i v >
< md - button target = "_top" : href = "'/' + message.id + '/'" > { { content _json . name || 'tildefriends-app' } } < / m d - b u t t o n >
< / d i v >
< div v - else - if = "content_json && content_json.type == 'contact'" > < tf - user : id = "message.author" > < /tf-user> {{content_json.following ? '==>' : '=/ = & gt ; ' } } < tf - user : id = "content_json.contact" > < / t f - u s e r > < / d i v >
< div v - else > { { message . content } } < / d i v >
< / d i v >
2021-12-29 11:01:34 -05:00
< tf - message v - for = "sub_message in (message.children || [])" v - bind : message = "sub_message" v - bind : messages = "messages" v - bind : votes = "votes" v - bind : key = "sub_message.id" > < / t f - m e s s a g e >
< md - chip v - for = "vote in Object.keys(votes[message.id] || {})" v - bind : key = "vote" >
{ { vote + ( votes [ message . id ] [ vote ] . length > 1 ? ' (' + votes [ message . id ] [ vote ] . length + ')' : '' ) } }
2021-01-13 21:56:14 -05:00
< / m d - c h i p >
< / m d - a p p - c o n t e n t >
< / m d - a p p > ` ,
} ) ;