import * as tfshared from './tf-shared.js'; import * as tf from './tf.js'; 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: tfshared.markdown, set_reply: function() { tf.g_data.reply_root = this.content_json.root || this.message.id; tf.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); function image_close(event) { document.body.removeChild(div); window.removeEventListener('keydown', image_close); } div.onclick = image_close; window.addEventListener('keydown', image_close); document.body.appendChild(div); }, }, template: `

percent

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