path: root/static/js/shobon.js

var are_filters = false;
var hide_word = new Set();
var hide_name = new Set();
var hide_id = new Set();

var shobon_ver = "v0.4+";
function shobon() {
  boardName = document.body.dataset.brd;
  var where = document.body.classList;
  var inThread = where.contains("threadpage");

  if (!inThread) {
    /* Create settings link */
    var box = document.getElementsByClassName("links")[0];
    box.appendChild(document.createTextNode(" | "));
    var slnk = document.createElement("a");
    slnk.href = "#";
    slnk.innerHTML = "<b>Configuración</b>";
    slnk.addEventListener("click", shobonSettings);
    box.appendChild(slnk);
  }

  if (localStorage.getItem("shobon_on") == "false") return;
  else console.log("Running shobon " + shobon_ver);

  var newRepliesCounter = 0;

  // dejar barra superior fija
  if (localStorage.getItem("shobon_navbar") == "true") {
    fixedNav();
  }

  var shobon_time = localStorage.getItem("shobon_time");
  if (shobon_time != "false") {
    if (boardName == "world")
      week = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
    else if (boardName == "2d")
      week = ["日", "月", "火", "水", "木", "金", "土"];
    else week = ["dom", "lun", "mar", "mie", "jue", "vie", "sab"];
  }

  if (where == "threads") {
    if (shobon_time != "false") {
      var dt = document.getElementsByClassName("date");
      for (var i = 0; i < dt.length; i++) {
        dt[i].addEventListener("mouseover", function(e) {
          this.title = "Hace " + timeAgo(this.dataset.unix);
        });
        dt[i].textContent = localTime(dt[i].dataset.unix);
      }
    }
    return;
  }

  if (localStorage.getItem("shobon_usefilters") != "false") {
    loadFilters();
  }

  var threadList = document.getElementsByClassName("thread");
  for (var i = 0; i < threadList.length; i++) {
    var threadId;
    var thread = threadList[i];
    var replyList = thread.getElementsByClassName("reply");
    if (inThread) {
      threadId = document.getElementsByName("parent")[0].value;
    } else {
      threadId = thread.getElementsByTagName("input").parent.value;
    }

    var lastReplyN = replyList[replyList.length - 1].attributes["data-n"].value;
    if (
      localStorage.getItem("shobon_newposts") == "true" &&
      localStorage.getItem(boardName + "_" + threadId) == null
    ) {
      localStorage.setItem(boardName + "_" + threadId, lastReplyN);
    }
    var lastSeen = localStorage.getItem(boardName + "_" + threadId);
    var newRepliesInThread = 0;

    for (var e = 0; e < replyList.length; e++) {
      var reply = replyList[e];
      var message = reply.getElementsByClassName("msg")[0];

      if (shobon_time != "false") {
        var date = reply.getElementsByClassName("date")[0];
        date.addEventListener("mouseover", function(e) {
          this.title = "Hace " + timeAgo(this.dataset.unix);
        });
        if (date.textContent.includes("ID:"))
          var id = date.textContent.split(" ")[1];
        date.textContent = localTime(date.dataset.unix, id);
      }

      if (localStorage.getItem("shobon_newposts") == "true") {
        var replyId = reply.attributes["data-n"].value;
        var isNewReply = parseInt(lastSeen) < parseInt(replyId);

        if (isNewReply) {
          newRepliesCounter++;
          newRepliesInThread++;
          reply.children[0].innerHTML +=
            " <span class='shobonNew' style='color:#CC6666; font-weight:bold;'>Nuevo!</span>";
        }
      }

      // ocultar mensajes que coinciden con lista negra
      if (are_filters) {
        checkBlackList(reply);
      }
      // reemplazar ISO 3166-1 alpha-2 por nombres completos
      if (
        localStorage.getItem("shobon_country") == "true" &&
        boardName == "world"
      ) {
        replaceCountryName(reply);
      }
      // colorear IDs
      if (localStorage.getItem("shobon_ids") != "false") {
        paintIds(reply);
      }
      // insertar imágenes
      if (localStorage.getItem("shobon_embedimg") == "true") {
        embedImg(reply);
      }
    }
    if (newRepliesInThread > 0 && !inThread) {
      var btnNew = document.createElement("span");
      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.onclick = function() {
        localStorage.setItem(this.dataset.id, this.dataset.last);
        this.hidden = true;
      };
      thread.getElementsByClassName("threadlinks")[0].appendChild(btnNew);
    }
  }
  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.textContent = "Nuevas respuestas: " + newRepliesCounter;
    document.body.appendChild(banner);
  }

  if (localStorage.getItem("shobon_newposts") == "true" && inThread) {
    localStorage.setItem(boardName + "_" + threadId, lastReplyN);
  }
}

function on_checked(e) {
  localStorage.setItem(e.target.id, e.target.checked);
}
function createCheckbox(name, label, def) {
  var lbl = document.createElement("label");
  var chk = document.createElement("input");
  chk.type = "checkbox";
  chk.id = name;
  chk.onchange = on_checked;
  lbl.appendChild(chk);
  lbl.insertAdjacentHTML("beforeend", " " + label + " ");

  var checked = localStorage.getItem(name);
  if (checked !== null) {
    chk.checked = checked == "true";
  } else {
    chk.checked = def;
  }

  return lbl;
}
function createOption(name, label) {
  var opt = document.createElement("option");
  opt.value = name;
  opt.text = label;
  return opt;
}
function createButton(label, func) {
  var btn = document.createElement("button");
  btn.type = "button";
  btn.textContent = label;
  btn.onclick = func;
  return btn;
}
function createTh(label, w) {
  var th = document.createElement("th");
  th.textContent = label;
  th.width = w;
  return th;
}
function timeAgo(timestamp) {
  var time = Math.round(Date.now() / 1000);
  var el = time - timestamp;
  if (el == 0) return "un instante";
  else if (el == 1) return "un segundo";
  else if (el < 60) return el + " segundos";
  else if (el < 120) return "un minuto";
  else if (el < 3600) return Math.round(el / 60) + " minutos";
  else if (el < 7200) return "una hora";
  else if (el < 86400) return Math.round(el / 3600) + " horas";
  else if (el < 172800) return "un día";
  else if (el < 2628000) return Math.round(el / 86400) + " días";
  else if (el < 5256000) return "un mes";
  else if (el < 31536000) return Math.round(el / 2628000) + " meses";
  else if (el > 31535999) return "más de un año";
}
function localTime(timestamp, id) {
  id = id || 0;
  var lcl = new Date(timestamp * 1000);
  lcl =
    ("0" + lcl.getDate()).slice(-2) +
    "/" +
    ("0" + (lcl.getMonth() + 1)).slice(-2) +
    "/" +
    lcl
      .getFullYear()
      .toString()
      .slice(-2) +
    "(" +
    week[lcl.getDay()] +
    ")" +
    ("0" + lcl.getHours()).slice(-2) +
    ":" +
    ("0" + lcl.getMinutes()).slice(-2) +
    ":" +
    ("0" + lcl.getSeconds()).slice(-2);
  if (id) lcl = lcl + " " + id;
  return lcl;
}
function loadFilters() {
  var filters = JSON.parse(localStorage.getItem("shobon_filters"));

  if (filters) {
    are_filters = true;
    hide_word = new Set(filters.word);
    hide_name = new Set(filters.name);
    hide_id = new Set(filters.id);
  }
}
function saveFilters() {
  var filters = {
    word: Array.from(hide_word),
    name: Array.from(hide_name),
    id: Array.from(hide_id)
  };
  localStorage.setItem("shobon_filters", JSON.stringify(filters));
}
function deleteFilter(e) {
  var tr = this.parentElement.parentElement;
  var name = tr.dataset.name;
  var type = tr.dataset.type;
  switch (type) {
    case "word":
      hide_word.delete(name);
      break;
    case "name":
      hide_name.delete(name);
      break;
    case "id":
      hide_id.delete(name);
      break;
  }
  saveFilters();
  tr.remove();
}
function addFilter(e) {
  var name = document.getElementById("txt_filter").value;
  var type = document.getElementById("lst_type").value;
  if (!name) {
    return;
  }

  switch (type) {
    case "word":
      hide_word.add(name);
      break;
    case "name":
      hide_name.add(name);
      break;
    case "id":
      hide_id.add(name);
      break;
  }
  addToFilterTable(name, type);
  saveFilters();
  document.getElementById("txt_filter").value = "";
}

function addToFilterTable(name, type) {
  var dict = { word: "Palabra", name: "Nombre/Tripcode", id: "ID" };
  var table = document.getElementById("tbl_filters");

  var td_type = document.createElement("td");
  td_type.textContent = dict[type];
  var td_name = document.createElement("td");
  td_name.textContent = name;
  var td_btn = document.createElement("td");
  td_btn.appendChild(createButton("X", deleteFilter));

  var tr = document.createElement("tr");
  tr.dataset.type = type;
  tr.dataset.name = name;
  tr.appendChild(td_type);
  tr.appendChild(td_name);
  tr.appendChild(td_btn);

  table.appendChild(tr);
}
function shobonSettings(e) {
  e.preventDefault();

  var titlebox = document.getElementById("titlebox");

  var box = document.getElementById("settings");
  if (box) {
    box.hidden = !box.hidden;
  } else {
    box = document.createElement("div");
    box.id = "settings";
    box.className = "innerbox";
    box.style.textAlign = "center";

    var p = document.createElement("div");
    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", "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)
    );
    p.appendChild(
      createCheckbox("shobon_backlink", "Mostrar quién ha citado un post", true)
    );
    p.appendChild(
      createCheckbox("shobon_preview", "Previsualizar citas", true)
    );
    p.appendChild(
      createCheckbox("shobon_usefilters", "Activar filtros", false)
    );
    /*var a = document.createElement("a");
   a.href = "#";
   a.textContent = "[Editar filtros]";
   a.addEventListener("click", function() {
    var x = document.getElementById("filters");
    x.hidden = !x.hidden;
   });
   p.appendChild(a);*/
    box.appendChild(p);

    var title2 = document.createElement("h6");
    title2.textContent = "Filtros";
    title2.style.fontSize = "18px";
    title2.style.margin = "0.5em 0";
    box.appendChild(title2);

    box.appendChild(document.createTextNode("Filtrar mensajes por: "));

    var lst_type = document.createElement("select");
    lst_type.id = "lst_type";
    lst_type.appendChild(createOption("word", "Palabra"));
    lst_type.appendChild(createOption("name", "Nombre/Tripcode"));
    lst_type.appendChild(createOption("id", "ID"));
    box.appendChild(lst_type);

    var txt_filter = document.createElement("input");
    txt_filter.id = "txt_filter";
    txt_filter.type = "text";
    box.appendChild(txt_filter);

    box.appendChild(createButton("Agregar", addFilter));

    var tbl_filters = document.createElement("table");
    tbl_filters.id = "tbl_filters";
    tbl_filters.border = "1";
    tbl_filters.style.margin = "0 auto";
    var row = document.createElement("tr");
    row.appendChild(createTh("Tipo", 150));
    row.appendChild(createTh("Filtro", 300));
    row.appendChild(createTh("", 75));
    tbl_filters.appendChild(row);
    box.appendChild(tbl_filters);

    var msg = document.createElement("a");
    msg.style.display = "block";
    msg.href = "#";
    msg.textContent = "Actualizar página para ver cambios";
    msg.style.marginTop = "1em";
    msg.addEventListener("click", function() {
      location.reload();
    });
    box.appendChild(msg);

    titlebox.appendChild(box);

    var i;
    hide_word.forEach(v => {
      addToFilterTable(v, "word");
    });
    hide_name.forEach(v => {
      addToFilterTable(v, "name");
    });
    hide_id.forEach(v => {
      addToFilterTable(v, "id");
    });
  }
}

function replaceCountryName(reply) {
  var country = JSON.parse(
    '{"AF":"Afghanistan","AX":"A£land Islands","AL":"Albania","DZ":"Algeria","AS":"American Samoa","AD":"Andorra","AO":"Angola","AI":"Anguilla","AQ":"Antarctica","AG":"Antigua and Barbuda","AR":"Argentina","AM":"Armenia","AW":"Aruba","AU":"Australia","AT":"Austria","AZ":"Azerbaijan","BS":"Bahamas","BH":"Bahrain","BD":"Bangladesh","BB":"Barbados","BY":"Belarus","BE":"Belgium","BZ":"Belize","BJ":"Benin","BM":"Bermuda","BT":"Bhutan","BO":"Bolivia (Plurinational State of)","BQ":"Bonaire, Sint Eustatius and Saba","BA":"Bosnia and Herzegovina","BW":"Botswana","BV":"Bouvet Island","BR":"Brazil","IO":"British Indian Ocean Territory","BN":"Brunei Darussalam","BG":"Bulgaria","BF":"Burkina Faso","BI":"Burundi","KH":"Cambodia","CM":"Cameroon","CA":"Canada","CV":"Cabo Verde","KY":"Cayman Islands","CF":"Central African Republic","TD":"Chad","CL":"Chile","CN":"China","CX":"Christmas Island","CC":"Cocos (Keeling) Islands","CO":"Colombia","KM":"Comoros","CG":"Congo","CD":"Congo (Democratic Republic of the)","CK":"Cook Islands","CR":"Costa Rica","CI":"CAŒte d\'Ivoire","HR":"Croatia","CU":"Cuba","CW":"CuraAXao","CY":"Cyprus","CZ":"Czech Republic","DK":"Denmark","DJ":"Djibouti","DM":"Dominica","DO":"Dominican Republic","EC":"Ecuador","EG":"Egypt","SV":"El Salvador","GQ":"Equatorial Guinea","ER":"Eritrea","EE":"Estonia","ET":"Ethiopia","FK":"Falkland Islands (Malvinas)","FO":"Faroe Islands","FJ":"Fiji","FI":"Finland","FR":"France","GF":"French Guiana","PF":"French Polynesia","TF":"French Southern Territories","GA":"Gabon","GM":"Gambia","GE":"Georgia","DE":"Germany","GH":"Ghana","GI":"Gibraltar","GR":"Greece","GL":"Greenland","GD":"Grenada","GP":"Guadeloupe","GU":"Guam","GT":"Guatemala","GG":"Guernsey","GN":"Guinea","GW":"Guinea-Bissau","GY":"Guyana","HT":"Haiti","HM":"Heard Island and McDonald Islands","VA":"Holy See","HN":"Honduras","HK":"Hong Kong","HU":"Hungary","IS":"Iceland","IN":"India","ID":"Indonesia","IR":"Iran (Islamic Republic of)","IQ":"Iraq","IE":"Ireland","IM":"Isle of Man","IL":"Israel","IT":"Italy","JM":"Jamaica","JP":"Japan","JE":"Jersey","JO":"Jordan","KZ":"Kazakhstan","KE":"Kenya","KI":"Kiribati","KP":"Korea (Democratic People\'s Republic of)","KR":"Korea (Republic of)","KW":"Kuwait","KG":"Kyrgyzstan","LA":"Lao People\'s Democratic Republic","LV":"Latvia","LB":"Lebanon","LS":"Lesotho","LR":"Liberia","LY":"Libya","LI":"Liechtenstein","LT":"Lithuania","LU":"Luxembourg","MO":"Macao","MK":"Macedonia (the former Yugoslav Republic of)","MG":"Madagascar","MW":"Malawi","MY":"Malaysia","MV":"Maldives","ML":"Mali","MT":"Malta","MH":"Marshall Islands","MQ":"Martinique","MR":"Mauritania","MU":"Mauritius","YT":"Mayotte","MX":"Mexico","FM":"Micronesia (Federated States of)","MD":"Moldova (Republic of)","MC":"Monaco","MN":"Mongolia","ME":"Montenegro","MS":"Montserrat","MA":"Morocco","MZ":"Mozambique","MM":"Myanmar","NA":"Namibia","NR":"Nauru","NP":"Nepal","NL":"Netherlands","NC":"New Caledonia","NZ":"New Zealand","NI":"Nicaragua","NE":"Niger","NG":"Nigeria","NU":"Niue","NF":"Norfolk Island","MP":"Northern Mariana Islands","NO":"Norway","OM":"Oman","PK":"Pakistan","PW":"Palau","PS":"Palestine, State of","PA":"Panama","PG":"Papua New Guinea","PY":"Paraguay","PE":"Peru","PH":"Philippines","PN":"Pitcairn","PL":"Poland","PT":"Portugal","PR":"Puerto Rico","QA":"Qatar","RE":"RAcunion","RO":"Romania","RU":"Russian Federation","RW":"Rwanda","BL":"Saint BarthAclemy","SH":"Saint Helena, Ascension and Tristan da Cunha","KN":"Saint Kitts and Nevis","LC":"Saint Lucia","MF":"Saint Martin (French part)","PM":"Saint Pierre and Miquelon","VC":"Saint Vincent and the Grenadines","WS":"Samoa","SM":"San Marino","ST":"Sao Tome and Principe","SA":"Saudi Arabia","SN":"Senegal","RS":"Serbia","SC":"Seychelles","SL":"Sierra Leone","SG":"Singapore","SX":"Sint Maarten (Dutch part)","SK":"Slovakia","SI":"Slovenia","SB":"Solomon Islands","SO":"Somalia","ZA":"South Africa","GS":"South Georgia and the South Sandwich Islands","SS":"South Sudan","ES":"Spain","LK":"Sri Lanka","SD":"Sudan","SR":"Suriname","SJ":"Svalbard and Jan Mayen","SZ":"Swaziland","SE":"Sweden","CH":"Switzerland","SY":"Syrian Arab Republic","TW":"Taiwan, Province of China","TJ":"Tajikistan","TZ":"Tanzania, United Republic of","TH":"Thailand","TL":"Timor-Leste","TG":"Togo","TK":"Tokelau","TO":"Tonga","TT":"Trinidad and Tobago","TN":"Tunisia","TR":"Turkey","TM":"Turkmenistan","TC":"Turks and Caicos Islands","TV":"Tuvalu","UG":"Uganda","UA":"Ukraine","AE":"United Arab Emirates","GB":"United Kingdom of Great Britain and Northern Ireland","US":"United States of America","UM":"United States Minor Outlying Islands","UY":"Uruguay","UZ":"Uzbekistan","VU":"Vanuatu","VE":"Venezuela (Bolivarian Republic of)","VN":"Viet Nam","VG":"Virgin Islands (British)","VI":"Virgin Islands (U.S.)","WF":"Wallis and Futuna","EH":"Western Sahara","YE":"Yemen","ZM":"Zambia","ZW":"Zimbabwe"}'
  );
  var countryEM = reply.getElementsByTagName("em")[0];
  var newCountryStr = country[countryEM.textContent.substr(1, 2)];
  countryEM.textContent = "[" + newCountryStr + "]";
}

function checkBlackList(reply) {
  var i;

  // Check words
  var low = reply.children[1].textContent.toLowerCase();
  hide_word.forEach(v => {
    console.log(v);
    if (low.includes(v.toLowerCase())) {
      hidepost(reply);
    }
  });

  // Check name/trip
  var msg_name = reply.firstElementChild
    .getElementsByClassName("name")[0]
    .textContent.toLowerCase();
  hide_name.forEach(v => {
    if (msg_name.includes(hide_name[i])) {
      hidepost(reply);
    }
  });

  // Check ID
  var date_div = reply.firstElementChild.getElementsByClassName("date")[0]
    .textContent;
  var id_index = date_div.indexOf("ID:");
  if (id_index != -1) {
    var id = date_div.substr(id_index + 3);

    hide_id.forEach(v => {
      if (id.includes(v)) {
        hidepost(reply);
      }
    });
  }
}

var currentSel = null;
function paintIds(reply) {
  var dateId = reply.getElementsByClassName("date")[0];
  if (dateId.textContent.includes("ID:")) {
    var postDate = dateId.textContent.split("ID:")[0];
    var userId = dateId.textContent.split("ID:")[1];
    var idColor = toHex(userId).substring(0, 6);
    var reverseColor = invertColor(idColor);
    var lastChar = userId.substring(userId.length - 1, userId.length);
    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.textContent.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";
  }
}

function embedImg(reply) {
  var links = reply.getElementsByTagName("a");
  for (i = 0; i < links.length && i < 5; i++) {
    var url = links[i].href;
    if (url.startsWith("https://i.imgur.com")) {
      var ext = url.lastIndexOf(".");
      var thumburl = url.slice(0, ext) + "s" + url.slice(ext);
    } else if (links[i].href.startsWith("https://pbs.twimg.com")) {
      var thumburl = links[i].href + ":thumb";
    } else continue;
    var thumb = document.createElement("img");
    thumb.src = thumburl;
    links[i].appendChild(document.createElement("br"));
    links[i].appendChild(thumb);
  }
}

function toHex(str) {
  var hex = "";
  for (var i = 0; i < str.length; i++) {
    hex += "" + (str.charCodeAt(i) + 125).toString(16);
  }
  return hex;
}

function invertColor(hex) {
  if (hex.indexOf("#") === 0) {
    hex = hex.slice(1);
  }
  // convert 3-digit hex to 6-digits.
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error("Invalid HEX color.");
  }
  // invert color components
  var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
    g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
    b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
  // pad each with zeros and return
  return padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
  len = len || 2;
  var zeros = new Array(len).join("0");
  return (zeros + str).slice(-len);
}

function fixedNav() {
  var bar = document.getElementById("main_nav");
  if (bar) document.body.className += " fix";
}

document.addEventListener("DOMContentLoaded", shobon, false);