add draft for voting ui

web/app/main.scss

@@ -47,11 +47,16 @@
 
   &__score {
     margin-left: 8px;
-    font-size: 14px;
+    font-size: 0;
     color: #666;
   }
 
+  &__score-value {
+    font-size: 14px;
+  }
+
   &__score-sign {
+    font-size: 14px;
     vertical-align: 1px;
   }
 

web/app/render.js

@@ -2,6 +2,8 @@ import tmpl from 'blueimp-tmpl';
 
 import { nodeId } from './settings';
 
+import fetcher from './fetcher';
+
 let node = null;
 let afterInit = null;
 
@@ -23,12 +25,51 @@ function initNode () {
   }
 }
 
+function handleClick(rootNode, e) {
+  if (!e.target) return;
+
+  if (e.target && e.target.classList.contains('remark42__vote')) {
+    handleVote(rootNode, e);
+  }
+}
+
+function handleVote(rootNode, e) {
+  const { target: node } = e;
+
+  if (node.classList.contains('remark42__vote_selected')) return;
+
+  const commentId = node.closest('.remark42__comment').dataset.id;
+
+  if (node.classList.contains('remark42__vote_type_up')) {
+    console.log('+1');
+    changeScore(rootNode, 1);
+    fetcher.put(`/vote/${commentId}?url=https://radio-t.com/p/2017/12/16/podcast-576/&vote=1`);
+  } else {
+    console.log('-1');
+    changeScore(rootNode, -1);
+    fetcher.put(`/vote/${commentId}?url=https://radio-t.com/p/2017/12/16/podcast-576/&vote=-1`);
+  }
+
+  node.classList.add('remark42__vote_selected');
+}
+
+function changeScore(rootNode, delta) {
+  const valueNode = rootNode.querySelector('.remark42__score-value');
+  const currentValue = parseInt(valueNode.dataset.value);
+  const newValue = currentValue + delta;
+
+  valueNode.dataset.value = newValue;
+  valueNode.textContent = Math.abs(newValue);
+}
+
 export default data => {
   // TODO: link to profile?
   // TODO: link to comment?
   // TODO: add photo?
   const templateComment = `
-<div class="remark42__comment remark42__comment_level_{%= o.mods.level %} {%= o.mods.view ? ('remark42__comment_view_'  + o.mods.view) : '' %}">  
+<div
+  class="remark42__comment remark42__comment_level_{%= o.mods.level %} {%= o.mods.view ? ('remark42__comment_view_'  + o.mods.view) : '' %}"
+  data-id="{%= o.id %}">  
   <img src="{%= o.user.picture %}" alt="" class="remark42__avatar">
   
   <div class="remark42__content">
@@ -37,7 +78,8 @@ export default data => {
       
       <span class="remark42__score">
         <a href="#" class="remark42__vote remark42__vote_type_up">vote up</a>
-          <span class="remark42__score-sign">{%= o.scoreSign %}</span>{%= o.score %}
+          <span class="remark42__score-sign">{%= o.score.sign %}</span>
+          <span class="remark42__score-value" data-value="{%= o.score.rawValue %}">{%= o.score.value %}</span>
         <a href="#" class="remark42__vote remark42__vote_type_down">vote down</a>
       </span>
       
@@ -59,9 +101,12 @@ export default data => {
     const timeStr = `${time.toLocaleDateString()} ${time.toLocaleTimeString()}`;
     const data = {
       ...comment,
-      scoreSign: comment.score > 0 ? '+' : (comment.score < 0 ? '−' : ''),
-      score: Math.abs(comment.score),
       time: timeStr,
+      score: {
+        rawValue: comment.score,
+        value: Math.abs(comment.score),
+        sign: comment.score > 0 ? '+' : (comment.score < 0 ? '−' : ''),
+      },
       mods: {
         level: level > 5 ? 5 : level,
         view: comment.user.admin ? 'admin' : '', // TODO: add default view or don't?
@@ -86,6 +131,8 @@ export default data => {
 
     node.className = 'remark42';
     node.innerHTML = result;
+
+    node.addEventListener('click', handleClick.bind(null, node));
   };
 
   if (node) {