Trying to improve some of my slow vue code by pre-computing some things.
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3718 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
parent
0bf216bb1a
commit
62e9dfea90
@ -1 +1 @@
|
||||
{"type":"tildefriends-app","files":{"app.js":"&LPDR4ZoE/qdPy9djmNFUfblXk7W1znMbwuAXp3/zWPI=.sha256","index.html":"&6UkH58DRXi8Y5bnfKWv9CgU5XJ2MWrJ7vzqL/uau5eg=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&t/QhZVt/e3LN3HgSoqe8C81pjq4ZS6uiWcqGOB4NX4Q=.sha256","tf-message.js":"&VNC8ptzGXWAVl9LBBZfrk3YmweA8PQ02d7/wZxWXoAA=.sha256","tf.js":"&Br2AswUPq0krVdr6JF/0r64qF/QLK7iOSC3bf1jqEDI=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}
|
||||
{"type":"tildefriends-app","files":{"app.js":"&LPDR4ZoE/qdPy9djmNFUfblXk7W1znMbwuAXp3/zWPI=.sha256","index.html":"&LGgeVc7llvfOU2gbnQZ60PGYCgcNjtEdHd1vjnJXLaU=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&uD6N8xUmrjXwIr95nkH/YjuZST6W1Q2MuJ8u6Vcmo6Q=.sha256","tf-message.js":"&KjVh7zASx0TZtZTsS6lJ7T70K9tyXcf+ink4vK7gSWI=.sha256","tf.js":"&r3w4aWGpCJ6J/x/K8hKAx6nohTuXHwVGvTDohJdnhiE=.sha256","commonmark.min.js":"&5x6ek3tFrKTZX6hXNNyFsjmhvrjmWpUkwuuaiyVV1Us=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256"}}
|
@ -75,7 +75,6 @@
|
||||
</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"
|
||||
|
@ -1,3 +1,4 @@
|
||||
"use strict";
|
||||
Vue.component('tf-message', {
|
||||
props: ['message', 'messages', 'votes'],
|
||||
data: function() { return { showRaw: false } },
|
||||
@ -9,26 +10,6 @@ Vue.component('tf-message', {
|
||||
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 {}
|
||||
});
|
||||
},
|
||||
votes2: function() {
|
||||
var id = this.message.id;
|
||||
var votes = this.votes[id] || [];
|
||||
return votes.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) {
|
||||
@ -36,13 +17,6 @@ Vue.component('tf-message', {
|
||||
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>
|
||||
@ -74,9 +48,9 @@ Vue.component('tf-message', {
|
||||
<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:votes="votes" v-bind:key="sub_message.id"></tf-message>
|
||||
<md-chip v-for="vote in Object.keys(votes2)" v-bind:key="vote">
|
||||
{{vote + (votes2[vote].length > 1 ? ' (' + votes2[vote].length + ')' : '')}}
|
||||
<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-app-content>
|
||||
</md-app>`,
|
||||
|
@ -1,3 +1,4 @@
|
||||
"use strict";
|
||||
Vue.component('tf-user', {
|
||||
data: function() { return {
|
||||
show_user_dialog: false,
|
||||
@ -49,7 +50,7 @@ Vue.component('tf-user', {
|
||||
},
|
||||
},
|
||||
template: `<span @click="show_user()">
|
||||
{{users[id] && users[id].name ? users[id].name : id}}
|
||||
{{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>
|
||||
|
@ -19,9 +19,32 @@ var g_data_initial = JSON.parse(JSON.stringify(g_data));
|
||||
window.addEventListener('message', function(event) {
|
||||
var key = Object.keys(event.data)[0];
|
||||
if (key == 'message') {
|
||||
g_data.messages.push(event.data[key]);
|
||||
g_data.messages.sort((x, y) => y.timestamp - x.timestamp);
|
||||
g_data.messages.splice(100);
|
||||
event.data[key].children = [];
|
||||
var found = false;
|
||||
var root = JSON.parse(event.data[key].content).root;
|
||||
if (root) {
|
||||
for (let message of g_data.messages) {
|
||||
if (root == message.id) {
|
||||
message.children.push(event.data[key]);
|
||||
message.children.sort((x, y) => y.timestamp - x.timestamp);
|
||||
found = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
for (let message of g_data.messages) {
|
||||
if (JSON.parse(message.content).root == event.data[key].id) {
|
||||
event.data[key].children.push(message);
|
||||
event.data[key].children.sort((x, y) => y.timestamp - x.timestamp);
|
||||
g_data.messages.splice(g_data.messages.indexOf(message), 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
g_data.messages.push(event.data[key]);
|
||||
g_data.messages.sort((x, y) => y.timestamp - x.timestamp);
|
||||
}
|
||||
} else if (key + 's' in g_data && Array.isArray(g_data[key + 's'])) {
|
||||
g_data[key + 's'].push(event.data[key]);
|
||||
} else if (key == 'user') {
|
||||
@ -44,11 +67,15 @@ window.addEventListener('message', function(event) {
|
||||
g_data.apps = event.data.apps;
|
||||
} else if (key == 'votes') {
|
||||
event.data.votes.forEach(function(vote) {
|
||||
var link = JSON.parse(vote.content).vote.link;
|
||||
var content = JSON.parse(vote.content);
|
||||
var link = content.vote.link;
|
||||
if (!g_data.votes[link]) {
|
||||
Vue.set(g_data.votes, link, []);
|
||||
Vue.set(g_data.votes, link, {});
|
||||
}
|
||||
g_data.votes[link].push(vote);
|
||||
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});
|
||||
});
|
||||
} else if (key == 'clear') {
|
||||
Object.keys(g_data_initial).forEach(function(key) {
|
||||
|
Loading…
Reference in New Issue
Block a user