<html> <head> <meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css"> <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default-dark.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="vue-material.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.29.1/commonmark.min.js"></script> <script> var g_data = { whoami: null, connections: [], messages: [], users: {}, broadcasts: [], showUsers: false, show_connect_dialog: false, show_user_dialog: null, connect: null, pubs: [], votes: [], apps: {}, share_app: null, }; var g_data_initial = JSON.parse(JSON.stringify(g_data)); window.addEventListener('message', function(event) { var key = Object.keys(event.data)[0]; if (key + 's' in g_data && Array.isArray(g_data[key + 's'])) { g_data[key + 's'].push(event.data[key]); } else if (key == 'user') { Vue.set(g_data.users, event.data.user.user, Object.assign({}, g_data.users[event.data.user.user] || {}, event.data.user.about)); } else if (key == 'followers') { if (!g_data.users[event.data.followers.id]) { Vue.set(g_data.users, event.data.followers.id, {}); } Vue.set(g_data.users[event.data.followers.id], 'followers', event.data.followers.users); } else if (key == 'following') { if (!g_data.users[event.data.following.id]) { Vue.set(g_data.users, event.data.following.id, {}); } Vue.set(g_data.users[event.data.following.id], 'following', event.data.following.users); } else if (key == 'broadcasts') { g_data.broadcasts = event.data.broadcasts; } else if (key == 'pubs') { g_data.pubs = event.data.pubs; } else if (key == 'apps') { g_data.apps = event.data.apps; } else if (key == 'clear') { Object.keys(g_data_initial).forEach(function(key) { Vue.set(g_data, key, JSON.parse(JSON.stringify(g_data_initial[key]))); }); } else { g_data[key] = event.data[key]; } }); window.addEventListener('load', function() { Vue.use(VueMaterial.default); Vue.component('tf-user', { data: function() { return {users: g_data.users, show_user_dialog: false, show_follow_dialog: false} }, props: ['id'], mounted: function() { window.parent.postMessage({user: this.id}, '*'); }, computed: { following: { get: function() { return g_data.users[g_data.whoami] && g_data.users[g_data.whoami].following && g_data.users[g_data.whoami].following.indexOf(this.id) != -1; }, set: function(newValue) { if (g_data.users[g_data.whoami] && g_data.users[g_data.whoami].following) { if (newValue && g_data.users[g_data.whoami].following.indexOf(this.id) == -1) { window.parent.postMessage({appendMessage: {type: "contact", following: true, contact: this.id}}, '*'); } else if (!newValue) { window.parent.postMessage({appendMessage: {type: "contact", following: false, contact: this.id}}, '*'); } } }, }, }, template: `<span @click="show_user_dialog = true"> {{users[id] && users[id].name ? users[id].name : id}} <md-tooltip v-if="users[id] && users[id].name">{{id}}</md-tooltip> <md-dialog :md-active.sync="show_user_dialog"> <md-dialog-title>{{users[id] && users[id].name ? users[id].name : id}}</md-dialog-title> <md-dialog-content v-if="users[id]"> <div v-if="users[id].image"><img :src="'/' + users[id].image + '/view'"></div> <div v-if="users[id].name">{{id}}</div> <div>{{users[id].description}}</div> <div><md-switch v-model="following">Following</md-switch></div> <md-list> <md-subheader>Followers</md-subheader> <md-list-item v-for="follower in (users[id] || []).followers" v-bind:key="'follower-' + follower"> <tf-user :id="follower"></tf-user> </md-list-item> <md-subheader>Following</md-subheader> <md-list-item v-for="user in (users[id] || []).following" v-bind:key="'following-' + user"> <tf-user :id="user"></tf-user> </md-list-item> </md-list> </md-dialog-content> <md-dialog-actions> <md-button @click="show_user_dialog = false">Close</md-button> </md-dialog-actions> </md-dialog> </span>`, }); Vue.component('tf-message', { props: ['message', 'messages'], data: function() { return { showRaw: false } }, computed: { content_json: function() { try { return JSON.parse(this.message.content); } catch { return undefined; } }, sub_messages: function() { var id = this.message.id; return this.messages.filter(function (x) { try { return JSON.parse(x.content).root == id; } catch {} }); }, votes: function() { return []; var id = this.message.id; return this.votes.filter(function (x) { try { var j = JSON.parse(x.content); return j.type == 'vote' && j.vote.link == id; } catch {} }).reduce(function (accum, value) { var expression = JSON.parse(value.content).vote.expression; if (!accum[expression]) { accum[expression] = []; } accum[expression].push(value); return accum; }, {}); } }, methods: { markdown: function(md) { var reader = new commonmark.Parser({safe: true}); var writer = new commonmark.HtmlRenderer(); return writer.render(reader.parse(md)); }, json: function(message) { try { return JSON.parse(message.content); } catch { return undefined; } }, }, 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-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> <img v-for="mention in content_json.mentions" v-if="mention.link && typeof(mention.link) == 'string' && mention.link.startsWith('&')" :src="'/' + mention.link + '/view'"></img> </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 sub_messages" v-bind:message="sub_message" v-bind:messages="messages" v-bind:key="sub_message.id"></tf-message> <md-chip v-for="vote in Object.keys(votes)" v-bind:key="vote"> {{vote + (votes[vote].length > 1 ? ' (' + votes[vote].length + ')' : '')}} </md-chip> </md-app-content> </md-app>`, }); function markdown(d) { return d; } Vue.config.performance = true; var vue = new Vue({ el: '#app', data: g_data, methods: { post_message: function() { if (g_data.share_app) { window.parent.postMessage({share_app: { app: g_data.apps[g_data.share_app], name: g_data.share_app, text: document.getElementById('post_text').value, }}, '*'); } else { window.parent.postMessage({post: document.getElementById('post_text').value}, '*'); } document.getElementById('post_text').value = ''; }, ssb_connect: function(connection) { window.parent.postMessage({connect: connection}, '*'); }, content_json: function(message) { try { return JSON.parse(message.content); } catch { return undefined; } }, refresh: function() { window.parent.postMessage({refresh: true}, '*'); }, } }); }); window.parent.postMessage('ready', '*'); </script> </head> <body style="color: #fff"> <div id="app"> <md-dialog :md-active.sync="show_connect_dialog"> <md-dialog-title>Connect</md-dialog-title> <md-dialog-content> <md-field> <label>net:127.0.0.1:8008~shs:id</label> <md-input v-model="connect"></md-input> </md-field> </md-dialog-content> <md-dialog-actions> <md-button class="md-primary" @click="ssb_connect(connect); connect = null; show_connect_dialog = false">Connect</md-button> <md-button @click="connect = null; show_connect_dialog = false">Cancel</md-button> </md-dialog-actions> </md-dialog> <md-app style="position: absolute; height: 100%; width: 100%"> <md-app-toolbar class="md-primary"> <md-button class="md-icon-button" @click="showUsers = !showUsers"> <md-icon>menu</md-icon> </md-button> <span class="md-title">Tilde Friends Secure Scuttlebutt Test</span> </md-app-toolbar> <md-app-drawer :md-active.sync="showUsers" md-persistent="full"> <md-list> <md-subheader>Followers</md-subheader> <md-list-item v-for="follower in (users[whoami] || []).followers" v-bind:key="'follower-' + follower"><tf-user :id="follower"></tf-user></md-list-item> <md-subheader>Following</md-subheader> <md-list-item v-for="user in (users[whoami] || []).following" v-bind:key="'following-' + user"><tf-user :id="user"></tf-user></md-list-item> <md-subheader>Network</md-subheader> <md-list-item v-for="broadcast in broadcasts" v-bind:key="JSON.stringify(broadcast)" @click="ssb_connect(broadcast)">{{broadcast.address}}:{{broadcast.port}} <tf-user :id="broadcast.pubkey"></tf-user></md-list-item> <md-subheader>Pubs</md-subheader> <md-list-item v-for="pub in pubs" v-bind:key="JSON.stringify(pub)" @click="ssb_connect({address: pub.host, port: pub.port, pubkey: pub.key})">{{pub.host}}:{{pub.port}} <tf-user :id="pub.key"></tf-user></md-list-item> <md-subheader>Connections</md-subheader> <md-list-item v-for="connection in connections" v-bind:key="'connection-' + JSON.stringify(connection)"><tf-user :id="connection"></tf-user></md-list-item> <md-list-item @click="show_connect_dialog = true">Connect</md-list-item> </md-list> </md-app-drawer> <md-app-content> <md-button @click="refresh()" class="md-icon-button md-dense md-raised md-primary"> <md-icon>cached</md-icon> </md-button> Welcome, <tf-user :id="whoami"></tf-user>. <md-card class="md-elevation-8"> <md-card-header> <div class="md-title">What's up?</div> </md-card-header> <md-card-content> <md-chip v-if="share_app" md-deletable @md-delete="share_app = null"> {{share_app}}: {{apps[share_app]}} </md-chip> <md-field> <label>Post a message</label> <md-textarea id="post_text"></md-textarea> </md-field> </md-card-content> <md-card-actions> <md-menu> <md-button md-menu-trigger>Share App</md-button> <md-menu-content> <md-menu-item v-for="app in Object.keys(apps)" @click="share_app = app"> {{app}} </md-menu-item> </md-menu-content> </md-menu> <md-button class="md-raised md-primary" v-on:click="post_message()">Submit Post</md-button> </md-card-actions> </md-card> <tf-message v-for="message in messages" v-if="!content_json(message).root || !messages.some(m => m.id == content_json(message).root)" v-bind:message="message" v-bind:messages="messages" v-bind:key="message.id"></tf-message> </md-app-content> </md-app> </div> </body> </html>