forked from cory/tildefriends
Cory McWilliams
3026443c1e
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3726 ed5197a5-7fde-0310-b194-c3ffbd925b24
65 lines
2.7 KiB
JavaScript
65 lines
2.7 KiB
JavaScript
"use strict";
|
|
Vue.component('tf-message', {
|
|
props: ['message', 'messages', 'votes'],
|
|
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));
|
|
},
|
|
set_reply: function() {
|
|
g_data.reply_root = this.content_json.root || this.message.id;
|
|
g_data.reply_branch = this.message.id;
|
|
}
|
|
},
|
|
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"></tf-user>
|
|
</h3>
|
|
<div style="font-size: x-small">{{new Date(message.timestamp)}}</div>
|
|
<div class="md-toolbar-section-end">
|
|
<md-menu>
|
|
<md-button md-menu-trigger class="md-icon-button"><md-icon>more_vert</md-icon></md-button>
|
|
<md-menu-content>
|
|
<md-menu-item v-if="!showRaw" v-on:click="showRaw = true">View Raw</md-menu-item>
|
|
<md-menu-item v-else v-on:click="showRaw = false">View Message</md-menu-item>
|
|
<md-menu-item @click="set_reply()">Reply</md-menu-item>
|
|
</md-menu-content>
|
|
</md-menu>
|
|
</div>
|
|
</md-app-toolbar>
|
|
<md-app-content>
|
|
<div v-if="showRaw">{{message.content}}</div>
|
|
<div v-else>
|
|
<div v-if="content_json && content_json.type == 'post'">
|
|
<div v-html="this.markdown(content_json.text)"></div>
|
|
<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'"></img>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="content_json && content_json.type == 'tildefriends-app'">
|
|
<div v-html="this.markdown(content_json.text)"></div>
|
|
<md-button target="_top" :href="'/' + message.id + '/'">{{content_json.name || 'tildefriends-app'}}</md-button>
|
|
</div>
|
|
<div v-else-if="content_json && content_json.type == 'contact'"><tf-user :id="message.author"></tf-user> {{content_json.following ? '==>' : '=/=>'}} <tf-user :id="content_json.contact"></tf-user></div>
|
|
<div v-else>{{message.content}}</div>
|
|
</div>
|
|
<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"></tf-message>
|
|
<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 + ')' : '')}}
|
|
</md-chip>
|
|
</md-app-content>
|
|
</md-app>`,
|
|
}); |