Hacer click en una ID ahora ennegrece todas las IDs similares

2 files changed, 37 insertions, 20 deletions

diff --git a/static/css/txt/bbs.css b/static/css/txt/bbs.css
index 477309a..26b4d0a 100644
--- a/static/css/txt/bbs.css
+++ b/static/css/txt/bbs.css
@@ -17,7 +17,7 @@ input[type=submit]:active,input[type=button]:active,button:active{border-style:i
 .spoil{background:#000;color:#000}.spoil:hover{color:#fff}
 code{font-size:14px}
 pre{line-height:125%;margin:0;white-space:pre-wrap}
-#main_nav .cur_brd,#cur_stl,.locked{font-weight:bold}
+#main_nav .cur_brd,#cur_stl,.locked,.sel{font-weight:bold}
 #main_nav{font-size:14px;padding:4px 0;text-align:center;width:100%}
 #main_nav a,#thread_nav a,#threadlinks a,.threadlinks a,label{display:inline-block}
 .outerbox,.mainpage .thread,#footer,#content{margin:0 2.5% 1em}
diff --git a/static/js/shobon.js b/static/js/shobon.js
index 86faa53..02d3c71 100644
--- a/static/js/shobon.js
+++ b/static/js/shobon.js
@@ -5,7 +5,8 @@ var hide_id = new Set();
 
 var shobon_ver = "v0.4+";
 function shobon() {
-  console.log("Running shobon " + shobon_ver);
+  if(localStorage.getItem("shobon_on") == "false") return;
+  else console.log("Running shobon " + shobon_ver);
 
   boardName = document.getElementsByName("board")[0].value;
   var inThread = document.getElementsByTagName("body")[0].className == "threadpage";
@@ -22,17 +23,12 @@ function shobon() {
     box.appendChild(slnk);
   }
 
-  if(localStorage.getItem("shobon_on") == "false") {
-    console.log("Shutting down Shobon");
-    return;
-  }
-
   if (localStorage.getItem("shobon_usefilters") != "false") {
     loadFilters();
   }
 
   var threadList = document.getElementsByClassName("thread");
-  for (var i = 0; i < threadList.length; i++) {
+  for (var i=0; i<threadList.length; i++) {
     var threadId;
     var thread = threadList[i];
     var replyList = thread.getElementsByClassName("reply");
@@ -64,24 +60,24 @@ function shobon() {
         }
       }
 
-      // ocultar mensajes que tienen palabras en la blacklist
+      // ocultar mensajes que coinciden con lista negra
       if(are_filters) {
         checkBlackList(reply);
       }
 
-      // reemplaza los codigos iso de los paises por el nombre completo
+      // reemplazar ISO 3166-1 alpha-2 por nombres completos
       if (localStorage.getItem("shobon_country") == "true" && boardName == "world") {
         replaceCountryName(reply)
       }
-      // colorea los id's
+      // colorear IDs
       if(localStorage.getItem("shobon_ids") != "false") {
         paintIds(reply);
       }
-      // deja la barra superior fija
+      // dejar barra superior fija
       if(localStorage.getItem("shobon_navbar") == "true") {
         fixedNav();
       }
-      // incluye imagenes
+      // insertar imágenes
       if(localStorage.getItem("shobon_embedimg") == "true") {
         embedImg(reply);
       }
@@ -92,7 +88,7 @@ function shobon() {
       btnNew.dataset.id = boardName + "_" + threadId;
       btnNew.dataset.last = lastReplyN;
       btnNew.textContent = "Marcar como leído";
-      btnNew.setAttribute("style", "font-weight: bold; background: #81a2be; padding: 5px; border-radius: 5px; float: right; margin-bottom: 10px;");
+      btnNew.setAttribute("style", "font-weight:bold; background:#81a2be; padding:5px; border-radius:5px; float:right; margin-bottom:10px;");
       btnNew.onclick = function(){
         localStorage.setItem(this.dataset.id, this.dataset.last);
         this.hidden = true;
@@ -104,7 +100,7 @@ function shobon() {
   if (newRepliesCounter > 0 && !inThread) {
     var banner = document.createElement("span");
     banner.onclick = function() { this.hidden = true; };
-    banner.setAttribute("style", "font-weight: bold; background: #8c9440; padding: 8px; border-radius: 30px; float: right; position: fixed; bottom: 10px; right: 10px");
+    banner.setAttribute("style", "font-weight:bold; background:#8c9440; padding:8px; border-radius:30px; float:right; position:fixed; bottom:10px; right:10px");
     banner.textContent = "Nuevas respuestas: " + newRepliesCounter;
     document.body.appendChild(banner);
   }
@@ -251,7 +247,7 @@ function shobonSettings(e) {
    p.appendChild(createCheckbox("shobon_on", "<b>Activar extensión</b>", true));
    p.appendChild(createCheckbox("shobon_navbar", "Fijar barra superior", false));
    p.appendChild(createCheckbox("shobon_ids", "Colorear IDs", true));
-   p.appendChild(createCheckbox("shobon_embedimg", "Incluir imágenes miniatura", false));
+   p.appendChild(createCheckbox("shobon_embedimg", "Insertar imágenes miniatura", false));
    p.appendChild(createCheckbox("shobon_newposts", "Destacar mensajes nuevos", false));
    p.appendChild(createCheckbox("shobon_country", "Reemplazar códigos de país por nombres", false));
    p.appendChild(createCheckbox("shobon_time", "Convertir fechas a hora local", true));
@@ -365,6 +361,7 @@ function checkBlackList(reply) {
   }
 }
 
+var currentSel = null;
 function paintIds(reply) {
   var dateId = reply.getElementsByClassName("date")[0];
   if (dateId.innerText.includes("ID:")) {
@@ -373,7 +370,27 @@ function paintIds(reply) {
     var idColor = toHex(userId).substring(0, 6);
     var reverseColor = invertColor(idColor);
     var lastChar = userId.substring(userId.length-1, userId.length);
-    dateId.innerHTML = postDate + "<span style='background-color:#" + idColor + "; color:#" + reverseColor + "; padding:0 3px; border-radius:5px; font-size:0.9em; vertical-align:top;'>ID:" + userId + "</span>";
+    dateId.innerHTML = postDate + "<span class='uid ID_" + userId.slice(0,-1) + "' style='background-color:#" + idColor + ";color:#" + reverseColor + ";padding:0 3px;border-radius:5px; font-size:0.9em;vertical-align:top;'>ID:" + userId + "</span>";
+    dateId.getElementsByClassName("uid")[0].addEventListener("click", markId, false)
+  }
+}
+
+function markId(e) {
+  var uid = this.innerText.slice(0,-1).replace(":","_");
+  var sel = document.getElementsByClassName("sel");
+  var len = sel.length;
+  for (i=0; i<len; i++) {
+    var prev = String(sel[0].className);
+    sel[0].className = sel[0].className.toString().replace(/ sel/i,"");
+  }
+  if (currentSel == uid) {
+    currentSel = null;
+    return;
+  }
+  currentSel = uid;
+  var tosel = document.getElementsByClassName(uid);
+  for(j=0; j<tosel.length; j++) {
+    tosel[j].className = tosel[j].className + " sel";
   }
 }
 
@@ -396,7 +413,7 @@ function embedImg(reply) {
 
 function toHex(str) {
   var hex = '';
-  for (var i = 0; i < str.length; i++) {
+  for (var i=0; i<str.length; i++) {
     hex += '' + (str.charCodeAt(i) + 125).toString(16);
   }
   return hex;
@@ -431,8 +448,8 @@ function fixedNav() {
   if (document.body.className === "mainpage" || document.body.className === "threads") {
     document.getElementById("main_nav").style.position = "fixed";
     document.getElementById("main_nav").style.top = "0";
-     document.body.style.marginTop = "2em";
+    document.body.style.marginTop = "2em";
   }
 }
 
-document.addEventListener('DOMContentLoaded', shobon, false);
+document.addEventListener('DOMContentLoaded', shobon, false);
\ No newline at end of file