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

140 lines
4.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;
}
},
content_raw: function() {
try {
return JSON.stringify(JSON.parse(this.message.content), null, 2);
} catch {
return this.message.content;
}
}
},
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);
console.log(document.body.children);
},
},
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">
{{new Date(message.timestamp)}}
<md-tooltip>{{message.id}}</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 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-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>`,
});