"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: `

percent

{{vote + (votes[message.id][vote].length > 1 ? ' (' + votes[message.id][vote].length + ')' : '')}} reply Like thumb_up
`, });