- commit
- bd3285c8c3e8563f03ecfb990d369ccac3921b72
- parent
- f901f3c2fe366154f47c1f129e1664eed093f9c2
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2020-10-17 21:07
wrap nodes and id in state object
Diffstat
| M | static/src/template.js | 24 | ++++++++++++------------ |
| M | static/src/utils.js | 6 | +++--- |
| M | static/src/voterunner.js | 33 | ++++++++++++++++++--------------- |
3 files changed, 33 insertions, 30 deletions
diff --git a/static/src/template.js b/static/src/template.js
@@ -29,19 +29,19 @@ var getName = function(node) {
29 29 return node.name || 'anonymous';
30 30 };
31 31
32 -1 var tplFollowers = function(nodes, id, ID) {
33 -1 return nodes
-1 32 var tplFollowers = function(state, id) {
-1 33 return state.nodes
34 34 .filter(n => n.delegate === id)
35 -1 .sort((a, b) => getVotes(nodes, b) - getVotes(nodes, a))
36 -1 .map(n => tplNode(nodes, n, ID));
-1 35 .sort((a, b) => getVotes(state.nodes, b) - getVotes(state.nodes, a))
-1 36 .map(n => tplNode(state, n));
37 37 };
38 38
39 -1 var tplNode = function(nodes, node, ID) {
-1 39 var tplNode = function(state, node) {
40 40 var classList = [];
41 41 if (node.expanded) {
42 42 classList.push('is-expanded');
43 43 }
44 -1 if (node.id === ID) {
-1 44 if (node.id === state.id) {
45 45 classList.push('node--self');
46 46 }
47 47
@@ -66,11 +66,11 @@ var tplNode = function(nodes, node, ID) {
66 66 className: 'node__delegate bar__item bar__item--button bar__item--right',
67 67 title: 'delegate to ' + getName(node),
68 68 disabled: (
69 -1 node.id === ID ||
70 -1 getDelegationChain(nodes, node).includes(ID)
-1 69 node.id === state.id ||
-1 70 getDelegationChain(state.nodes, node).includes(state.id)
71 71 ),
72 72 }, '\u2795'),
73 -1 h('div', {className: 'node__votes bar__item bar__item--right'}, '' + getVotes(nodes, node)),
-1 73 h('div', {className: 'node__votes bar__item bar__item--right'}, '' + getVotes(state.nodes, node)),
74 74 h('div', {className: 'node__name bar__item' + (!node.expanded && node.comment ? '' : ' bar__item--grow')}, getName(node)),
75 75 !node.expanded && node.comment && h('div', {className: 'node__preview bar__item bar__item--grow'}, node.comment.substr(0, 100)),
76 76 ]),
@@ -79,15 +79,15 @@ var tplNode = function(nodes, node, ID) {
79 79 h('ul', {
80 80 className: 'tree',
81 81 role: 'group',
82 -1 }, tplFollowers(nodes, node.id, ID)),
-1 82 }, tplFollowers(state, node.id)),
83 83 ]);
84 84 };
85 85
86 -1 var template = function(nodes, ID) {
-1 86 var template = function(state) {
87 87 return h('ul', {
88 88 className: 'tree',
89 89 role: 'tree',
90 -1 }, tplFollowers(nodes, null, ID));
-1 90 }, tplFollowers(state, null));
91 91 };
92 92
93 93 module.exports = {
diff --git a/static/src/utils.js b/static/src/utils.js
@@ -33,14 +33,14 @@ var on = function(element, eventType, selector, fn) {
33 33 });
34 34 };
35 35
36 -1 var initVDom = function(wrapper, template, nodes, ID, afterRender) {
-1 36 var initVDom = function(wrapper, template, state, afterRender) {
37 37 wrapper.innerHTML = '';
38 -1 var tree = template(nodes, ID);
-1 38 var tree = template(state);
39 39 var element = preact.render(tree, wrapper);
40 40 afterRender();
41 41
42 42 return function(newState) {
43 -1 var newTree = template(newState, ID);
-1 43 var newTree = template(newState);
44 44 preact.render(newTree, wrapper, element);
45 45 afterRender();
46 46 };
diff --git a/static/src/voterunner.js b/static/src/voterunner.js
@@ -13,22 +13,25 @@ document.addEventListener('DOMContentLoaded', function() {
13 13 window.socket = socket; // make available for tests
14 14 socket.emit('register', TOPIC, ID);
15 15
16 -1 var nodes = JSON.parse(document.querySelector('#json-nodes').dataset.value);
-1 16 var state = {
-1 17 nodes: JSON.parse(document.querySelector('#json-nodes').dataset.value),
-1 18 id: ID,
-1 19 };
17 20
18 21 var getNode = function(id) {
19 -1 var node = nodes.find(n => n.id === id);
-1 22 var node = state.nodes.find(n => n.id === id);
20 23 if (!node) {
21 24 node = {
22 25 id: id,
23 26 delegate: null,
24 27 };
25 -1 nodes.push(node);
-1 28 state.nodes.push(node);
26 29 }
27 30 return node;
28 31 };
29 32
30 33 var invalidateVotes = function() {
31 -1 nodes.forEach(function(node) {
-1 34 state.nodes.forEach(function(node) {
32 35 node.votes = null;
33 36 node.delegationChain = null;
34 37 });
@@ -42,7 +45,7 @@ document.addEventListener('DOMContentLoaded', function() {
42 45 }
43 46 };
44 47
45 -1 var user = nodes.find(n => n.id === ID);
-1 48 var user = state.nodes.find(n => n.id === state.id);
46 49 if (user) {
47 50 document.querySelector('.user__name input').value = user.name;
48 51 document.querySelector('.user__comment textarea').value = user.comment;
@@ -50,7 +53,7 @@ document.addEventListener('DOMContentLoaded', function() {
50 53 }
51 54
52 55 var updateUser = function() {
53 -1 document.querySelector('.user__votes').textContent = template.getVotes(nodes, user || {});
-1 56 document.querySelector('.user__votes').textContent = template.getVotes(state.nodes, user || {});
54 57
55 58 if (user && user.delegate) {
56 59 var delegatee = getNode(user.delegate);
@@ -60,7 +63,7 @@ document.addEventListener('DOMContentLoaded', function() {
60 63 }
61 64 };
62 65
63 -1 var update = utils.initVDom(document.querySelector('#tree'), template.template, nodes, ID, function() {
-1 66 var update = utils.initVDom(document.querySelector('#tree'), template.template, state, function() {
64 67 updateUser();
65 68 });
66 69
@@ -69,7 +72,7 @@ document.addEventListener('DOMContentLoaded', function() {
69 72 var id = nodeElement.id.substr(5);
70 73 var node = getNode(id);
71 74 node.expanded = !node.expanded;
72 -1 update(nodes);
-1 75 update(state);
73 76 });
74 77
75 78 utils.on(document, 'click', '.node__delegate', function() {
@@ -96,7 +99,7 @@ document.addEventListener('DOMContentLoaded', function() {
96 99
97 100 utils.on(document, 'input', '.user__comment textarea', utils.throttle(function() {
98 101 var comment = document.querySelector('.user__comment textarea').value;
99 -1 var node = nodes.find(n => n.id === ID);
-1 102 var node = state.nodes.find(n => n.id === state.id);
100 103 // Do not create a new node if the comment is empty.
101 104 // This can happen e.g. on a keydown event from the ctrl or shift keys.
102 105 if (node || comment) {
@@ -105,32 +108,32 @@ document.addEventListener('DOMContentLoaded', function() {
105 108 }, 1000));
106 109
107 110 socket.on('rmNode', function(id) {
108 -1 nodes = nodes.filter(function(node) {
-1 111 state.nodes = state.nodes.filter(function(node) {
109 112 if (node.delegate === id) {
110 113 node.delegate = null;
111 114 }
112 115 return node.id !== id;
113 116 });
114 117 invalidateVotes();
115 -1 update(nodes);
-1 118 update(state);
116 119 });
117 120 socket.on('setNodeName', function(id, name) {
118 121 getNode(id).name = name;
119 -1 update(nodes);
-1 122 update(state);
120 123 });
121 124 socket.on('setNodeComment', function(id, comment) {
122 125 getNode(id).comment = comment;
123 -1 update(nodes);
-1 126 update(state);
124 127 });
125 128 socket.on('setDelegate', function(id, delegate) {
126 129 getNode(id).delegate = delegate;
127 130 invalidateVotes();
128 131 ensureVisible(user);
129 -1 update(nodes);
-1 132 update(state);
130 133 });
131 134 socket.on('rmDelegate', function(id) {
132 135 getNode(id).delegate = null;
133 136 invalidateVotes();
134 -1 update(nodes);
-1 137 update(state);
135 138 });
136 139 });