import * as tfrpc from '/static/tfrpc.js'; import * as tfshared from './tf-shared.js'; export var g_data = { whoami: null, selected: null, identities: [], connections: [], messages: [], messages_by_id: {}, users: {}, broadcasts: [], show_connect_dialog: false, show_user_dialog: null, connect: null, pubs: [], votes: {}, apps: {}, reply_root: null, reply_branch: null, mentions: {}, unread: 0, loading: true, edit_profile_name: null, edit_profile_description: null, edit_profile_image: null, post_text: null, times: {}, }; var g_load_start = new Date(); var g_data_initial = JSON.parse(JSON.stringify(g_data)); function updateEditUser() { g_data.edit_profile_name = g_data.users[g_data.whoami] ? g_data.users[g_data.whoami].name : null; g_data.edit_profile_description = g_data.users[g_data.whoami] ? g_data.users[g_data.whoami].description : null; g_data.edit_profile_image = g_data.users[g_data.whoami] ? g_data.users[g_data.whoami].image : null; } tfrpc.register(function clear() { g_load_start = new Date(); g_data.loading = true; Object.keys(g_data_initial).forEach(function(key) { if (key != 'identities' && key != 'whoami' && key != 'selected') { Vue.set(g_data, key, JSON.parse(JSON.stringify(g_data_initial[key]))); } }); }); tfrpc.register(function set(key, value) { g_data[key] = value; }); tfrpc.register(function set_identities(value) { if (JSON.stringify(g_data.identities) != JSON.stringify(value)) { g_data.identities = value.map(x => x); } }); tfrpc.register(function push_users(users) { for (let [id, user] of Object.entries(users)) { Vue.set(g_data.users, id, Object.assign({}, g_data.users[id] || {}, user)); if (id == g_data.whoami) { updateEditUser(); } } }); tfrpc.register(function push_posts(posts) { for (let new_message of posts) { new_message.children = []; var found = false; var root = JSON.parse(new_message.content).root; /* If we had inserted a fake root, replace it if we see the real message. */ if (g_data.messages_by_id[new_message.id]) { var old_message = g_data.messages_by_id[new_message.id]; new_message.children = old_message.children; for (let child of new_message.children) { child.parent = new_message; } if (old_message.parent) { old_message.parent.children = old_message.parent.children.filter(x => x != old_message); } else { g_data.messages = g_data.messages.filter(x => x != old_message); } } Vue.set(g_data.messages_by_id, new_message.id, new_message); if (root) { /* If we don't know of the message's root, add it. */ if (!g_data.messages_by_id[root]) { var fake_root = { id: root, children: [], timestamp: new_message.timestamp, content: '{}', }; Vue.set(g_data.messages_by_id, root, fake_root); g_data.messages.push(fake_root); g_data.messages.sort((x, y) => y.timestamp - x.timestamp); found = true; } var message = g_data.messages_by_id[root]; new_message.parent = message; message.children.push(new_message); message.children.sort((x, y) => x.timestamp - y.timestamp); } else { /* This is just a new message with no root. Add it. */ g_data.messages.push(new_message); g_data.messages.sort((x, y) => y.timestamp - x.timestamp); g_data.messages = g_data.messages.slice(0, 32); } } }); tfrpc.register(function push_votes(votes) { votes.forEach(function(vote) { var content = JSON.parse(vote.content); var link = content.vote.link; if (!g_data.votes[link]) { Vue.set(g_data.votes, link, {}); } if (!g_data.votes[link][content.vote.expression]) { Vue.set(g_data.votes[link], content.vote.expression, []); } g_data.votes[link][content.vote.expression].push({author: vote.author, value: content.vote.value}); }); }); tfrpc.register(function push_following(following) { for (let [id, users] of Object.entries(following)) { if (!g_data.users[id]) { Vue.set(g_data.users, id, {}); } if (!g_data.users[id].following) { Vue.set(g_data.users[id], 'following', {}); } for (let user of users) { Vue.set(g_data.users[id].following, user, true); if (!g_data.users[user]) { Vue.set(g_data.users, user, {}); } if (!g_data.users[user].followers) { Vue.set(g_data.users[user], 'followers', {}); } Vue.set(g_data.users[user].followers, id, true); } } }); tfrpc.register(function push_blocking(id, blocking) { if (!g_data.users[id]) { Vue.set(g_data.users, id, {}); } if (!g_data.users[id].blocking) { Vue.set(g_data.users[id], 'blocking', {}); } for (let user of blocking) { Vue.set(g_data.users[id].blocking, user, true); } }); tfrpc.register(function add_unread(unread) { g_data.unread += unread; }); tfrpc.register(function ready(times) { g_data.loading = false; g_data.times = times; }); window.addEventListener('load', function() { Vue.use(VueMaterial.default); var vue = new Vue({ el: '#app', data: g_data, watch: { whoami: function(newValue, oldValue) { let self = this; setTimeout(function() { self.set_hash(); }, 100); }, selected: function(newValue, oldValue) { let self = this; setTimeout(function() { self.set_hash(); }, 100); }, }, methods: { post_message: function() { var message = { type: 'post', text: document.getElementById('post_text').value, }; if (g_data.reply_root || g_data.reply_branch) { message.root = g_data.reply_root; message.branch = g_data.reply_branch; } if (Object.keys(g_data.mentions).length) { message.mentions = Object.values(g_data.mentions); } window.parent.postMessage({appendMessage: message}, '*'); g_data.post_text = null; Vue.set(g_data, 'mentions', {}); g_data.reply_root = null; g_data.reply_branch = null; }, ssb_connect: function(connection) { window.parent.postMessage({connect: connection}, '*'); }, content_json: function(message) { try { return JSON.parse(message.content); } catch { return undefined; } }, markdown: tfshared.markdown, refresh: function() { tfrpc.rpc.refresh(this.whoami, this.selected, true); }, add_app_to_mentions: function(app) { Vue.set(g_data.mentions, g_data.apps[app], { link: g_data.apps[app], name: app, type: 'application/tildefriends', }); }, remove_from_mentions: function(link) { Vue.delete(g_data.mentions, link); }, save_profile: function() { var message = { appendMessage: { type: 'about', about: g_data.selected, name: g_data.edit_profile_name, description: g_data.edit_profile_description, image: g_data.edit_profile_image, } }; window.parent.postMessage(message, '*'); }, follow: function(id) { if (confirm('Are you sure you want to follow ' + id + '?')) { window.parent.postMessage({appendMessage: {type: "contact", following: true, contact: id}}, '*'); } }, unfollow: function(id) { if (confirm('Are you sure you want to unfollow ' + id + '?')) { window.parent.postMessage({appendMessage: {type: "contact", following: false, contact: id}}, '*'); } }, block: function(id) { if (confirm('Are you sure you want to block ' + id + '?')) { window.parent.postMessage({appendMessage: {type: "contact", blocking: true, contact: id}}, '*'); } }, unblock: function(id) { if (confirm('Are you sure you want to unblock ' + id + '?')) { window.parent.postMessage({appendMessage: {type: "contact", blocking: false, contact: id}}, '*'); } }, set_hash() { let hash = this.whoami && this.selected ? this.whoami + ':' + this.selected : (this.whoami ? this.whoami : '#'); window.parent.postMessage({ action: 'setHash', hash: hash, }, '*'); }, attach(context) { var input = document.createElement('input'); input.type = 'file'; input.onchange = function(event) { var file = event.target.files[0]; file.arrayBuffer().then(function(buffer) { let bin = Array.from(new Uint8Array(buffer)); return tfrpc.rpc.store_blob(bin); }).then(function(id) { if (context == 'profile') { g_data.edit_profile_image = id; } else { g_data.post_text = `${g_data.post_text || ''}\n![${file.name}](${id})`; Vue.set(g_data.mentions, id, { link: id, name: file.name, type: file.type, }); } }).catch(function(e) { console.log('error', e); }); }; input.click(); }, paste(event) { var items = (event.clipboardData || event.originalEvent.clipboardData).items; for (let item of items) { var file = item.getAsFile(); if (file) { file.arrayBuffer().then(function(buffer) { let bin = Array.from(new Uint8Array(buffer)); return tfrpc.rpc.store_blob(bin); }).then(function(id) { g_data.post_text = `${g_data.post_text || ''}\n![${file.name}](${id})`; Vue.set(g_data.mentions, id, { link: id, name: file.name, type: file.type, }); }); event.preventDefault(); break; } } }, human_size(bytes) { if (typeof bytes == 'number') { let value = bytes; let unit = 'B'; const k_units = ['kB', 'MB', 'GB', 'TB']; for (let u of k_units) { if (value > 1024) { value /= 1024; unit = u; } } return Math.round(value * 10) / 10 + ' ' + unit; } else { return bytes; } }, create_identity() { if (confirm("Are you sure you would like to create a new identity?")) { tfrpc.rpc.createIdentity().then(function(id) { alert(`Identity '${id}' created.`); }).catch(function(e) { alert('Error creating a new identity: ' + e); }); } }, } }); tfrpc.rpc.ready(); });