tildefriends/apps/cory/ssb/tf-message.js

165 lines
5.5 KiB
JavaScript
Raw Normal View History

"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;
}
},
content_raw: function() {
try {
return JSON.stringify(JSON.parse(this.message.content), null, 2);
} catch {
return this.message.content;
}
},
timestamp_relative: function() {
var units = [
{value: 1, name: 'milliseconds'},
{value: 1000, name: 'seconds'},
{value: 1000 * 60, name: 'minutes'},
{value: 1000 * 60 * 60, name: 'hours'},
{value: 1000 * 60 * 60 * 24, name: 'days'},
{value: 1000 * 60 * 60 * 24 * 7, name: 'weeks'},
{value: 1000 * 60 * 60 * 24 * 30, name: 'months'},
{value: 1000 * 60 * 60 * 24 * 365, name: 'years'},
];
var v = new Date().valueOf() - this.message.timestamp;
var result = null;
for (let unit of units) {
if (v >= unit.value) {
result = Math.round(v / unit.value) + ' ' + unit.name + ' ago';
}
}
return result;
},
},
methods: {
markdown: markdown,
set_reply: function() {
g_data.reply_root = this.content_json.root || this.message.id;
g_data.reply_branch = this.message.id;
},
vote: function(event) {
var reaction = event.srcElement.innerText;
var message = this.message.id;
if (confirm('Are you sure you want to react with ' + reaction + ' to ' + message + '?')) {
window.parent.postMessage(
{
appendMessage: {
type: 'vote',
vote: {
link: message,
value: 1,
expression: reaction,
},
},
},
'*');
}
},
show_message: function() {
window.parent.postMessage({action: 'setHash', hash: this.message.id}, '*');
},
expand_image: function(event) {
var div = document.createElement('div');
div.style.left = 0;
div.style.top = 0;
div.style.width = '100%';
div.style.height = '100%';
div.style.position = 'fixed';
div.style.background = '#000';
div.style.zIndex = 100;
div.style.display = 'grid';
var img = document.createElement('img');
img.src = event.srcElement.src;
img.style.maxWidth = '100%';
img.style.maxHeight = '100%';
img.style.display = 'block';
img.style.margin = 'auto';
img.style.objectFit = 'contain';
img.style.width = '100%';
div.appendChild(img);
div.onclick = function() { document.body.removeChild(div); };
document.body.appendChild(div);
},
},
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>
<md-button class="md-icon-button md-dense" @click="show_message">
<md-icon>percent</md-icon>
</md-button>
<tf-user :id="message.author" v-if="message.author"></tf-user>
</h3>
<template v-if="message.author">
<div style="font-size: x-small">
{{timestamp_relative}}
<md-tooltip style="height: auto">
<div>{{new Date(message.timestamp)}}</div>
<div>{{message.id}}</div>
</md-tooltip>
</div>
<div class="md-toolbar-section-end">
<md-menu>
<md-switch v-model="showRaw"></md-switch>
<md-tooltip>Show Raw Message</md-tooltip>
</md-menu>
</div>
</template>
<template v-else>
<h3>Missing</h3>
</template>
</md-app-toolbar>
<md-app-content>
<template v-if="message.author">
<div v-if="showRaw">
<h1>{{message.id}}</h1>
<pre style="word-wrap: break-all; white-space: pre-wrap">{{content_raw}}</pre>
</div>
<div v-else>
<div v-if="content_json && content_json.type == 'post'">
<div v-html="this.markdown(content_json.text)"></div>
<span 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 class="md-elevation-4" style="margin: 4px; max-width: 320px; max-height: 240px" :src="'/' + mention.link + '/view'" v-on:click="expand_image"></img>
</span>
</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 ? '==&gt;' : '=/=&gt;'}} <tf-user :id="content_json.contact"></tf-user></div>
<div v-else>{{message.content}}</div>
</div>
</template>
<template v-else>
{{message.id}}
</template>
<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 md-clickable v-for="v in Object.keys(votes[message.id] || {})" v-bind:key="v" @click="vote">
{{v + (votes[message.id][v].length > 1 ? ' (' + votes[message.id][v].length + ')' : '')}}
<md-tooltip style="height: auto">
<tf-user v-for="vote in votes[message.id][v]" :id="vote.author" :key="vote.author"></tf-user>
</md-tooltip>
</md-chip>
<md-card-actions v-if="message.author">
<md-button class="md-icon-button" @click="set_reply">
<md-icon>reply</md-icon>
</md-button>
<md-menu>
<md-menu-content>
<md-menu-item @click="vote">Like</md-menu-item>
</md-menu-content>
<md-button class="md-icon-button" md-menu-trigger>
<md-icon>thumb_up</md-icon>
</md-button>
</md-menu>
</md-card-actions>
</md-app-content>
</md-app>`,
});