From c72f4251620c612c94a5579ce17196268bac2b67 Mon Sep 17 00:00:00 2001
From: theCrius <claudio.vallesi@gmail.com>
Date: Sat, 9 Jun 2018 07:55:22 +0100
Subject: [PATCH] Refresh labels after a vote/unvote actions in comments

https://github.com/theCrius/tildes-extended/issues/8
---
 package-lock.json          | 20 ++++++------
 src/scripts/users-label.js | 63 ++++++++++++++++++++++++++++----------
 2 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a16fd3d..1a8b9c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "tildes-extended",
-  "version": "0.1.0",
+  "version": "0.5.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2364,7 +2364,7 @@
       "requires": {
         "assert-plus": "0.2.0",
         "jsprim": "1.4.1",
-        "sshpk": "1.14.1"
+        "sshpk": "1.14.2"
       }
     },
     "iconv-lite": {
@@ -3284,15 +3284,14 @@
       "dev": true
     },
     "node-gyp": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz",
-      "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=",
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.7.0.tgz",
+      "integrity": "sha512-qDQE/Ft9xXP6zphwx4sD0t+VhwV7yFaloMpfbL2QnnDZcyaiakWlLdtFGGQfTAwpFHdpbRhRxVhIHN1OKAjgbg==",
       "dev": true,
       "requires": {
         "fstream": "1.0.11",
         "glob": "7.1.2",
         "graceful-fs": "4.1.11",
-        "minimatch": "3.0.4",
         "mkdirp": "0.5.1",
         "nopt": "3.0.6",
         "npmlog": "4.1.2",
@@ -3331,7 +3330,7 @@
         "meow": "3.7.0",
         "mkdirp": "0.5.1",
         "nan": "2.10.0",
-        "node-gyp": "3.6.2",
+        "node-gyp": "3.7.0",
         "npmlog": "4.1.2",
         "request": "2.79.0",
         "sass-graph": "2.2.4",
@@ -4482,9 +4481,9 @@
       "dev": true
     },
     "sshpk": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.1.tgz",
-      "integrity": "sha1-Ew9Zde3a2WPx1W+SuaxsUfqfg+s=",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz",
+      "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=",
       "dev": true,
       "requires": {
         "asn1": "0.2.3",
@@ -4494,6 +4493,7 @@
         "ecc-jsbn": "0.1.1",
         "getpass": "0.1.7",
         "jsbn": "0.1.1",
+        "safer-buffer": "2.1.2",
         "tweetnacl": "0.14.5"
       },
       "dependencies": {
diff --git a/src/scripts/users-label.js b/src/scripts/users-label.js
index 7909786..d43a53a 100644
--- a/src/scripts/users-label.js
+++ b/src/scripts/users-label.js
@@ -15,23 +15,7 @@ chrome.storage.local.get({
     }, function(res_labels) {
       // clog(res_labels);
       labels = res_labels.tildesExtendedUsersLabels ?  res_labels.tildesExtendedUsersLabels : {};
-      // Iterate through all users-link
-      $("a[class='link-user']").each( function() {
-        const labelInfo = labels[$(this).text()];
-        if(labelInfo) {
-          // IF a label exists in local storage THEN Append <span class="user-label bg-COLOR">TEXT</span>
-          $(this).after('<span id="TE_label'+ $(this).text() +'" class="user-label '+ labelInfo.color +'">'+ labelInfo.text +'</span>');
-        } else {
-          // ELSE show the label with just a '+'
-          $(this).after('<span id="TE_label'+ $(this).text() +'" class="user-label bg-none">+</span>');
-        }
-      });
-
-      // Determine dark/bright theme and adjusting the css accordingly
-      $("span[id^=TE_label]").colourBrightness();
-
-      // Listener on 'click' for labels
-      $("span[id^=TE_label]").on('click', (e) => editLabel(e));
+      populateLabels(labels);
 
       // Div for edit label mini-form
       $("body").append(`
@@ -67,6 +51,29 @@ chrome.storage.local.get({
   }
 });
 
+function populateLabels(labels) {
+  // Cleanup previously created labels
+  $("span[id^=TE_label]").remove();
+
+  // Iterate through all users-link
+  $("a[class='link-user']").each( function() {
+    const labelInfo = labels[$(this).text()];
+    if(labelInfo) {
+      // IF a label exists in local storage THEN Append <span class="user-label bg-COLOR">TEXT</span>
+      $(this).after('<span id="TE_label'+ $(this).text() +'" class="user-label '+ labelInfo.color +'">'+ labelInfo.text +'</span>');
+    } else {
+      // ELSE show the label with just a '+'
+      $(this).after('<span id="TE_label'+ $(this).text() +'" class="user-label bg-none">+</span>');
+    }
+  });
+
+  // Determine dark/bright theme and adjusting the css accordingly
+  $("span[id^=TE_label]").colourBrightness();
+
+  // Listener on 'click' for labels
+  $("span[id^=TE_label]").on('click', (e) => editLabel(e));
+}
+
 function editLabel(e) {
   e.preventDefault();
   $("#edit_label_id").val(e.currentTarget.id.split('TE_label').slice(-1));
@@ -168,4 +175,26 @@ $.fn.colourBrightness = function(){
     this.removeClass("text-dark").addClass("text-light");
   }
   return this;
+};
+
+// Workaround to reload the label after a vote/unvote of a comment
+// A better solution would be to listen for XHR requests and detect a response received but apparently
+// either it doesn't work with browser extension injected code or tildes.net use masked request
+const inTopic = window.location.pathname !== '/';
+addVoteListener();
+
+function addVoteListener() {
+  if(inTopic) {
+    $("a[name=vote]").on('click', () => refreshLabel());
+    $("a[name=unvote]").on('click', () => refreshLabel());
+  }
+}
+
+function refreshLabel() {
+  if(inTopic) {
+    setTimeout(() => {
+      addVoteListener();
+      populateLabels(labels);
+    }, 500); // after 500 msec refresh the labels. most request should complete in <200 msec
+  }
 }