path: root/static/js/weabot.js

var style_cookie = "weabot_style_ib";

function set_stylesheet(styletitle) {
  var css = document.getElementById("css");
  if (css) {
    css.href = "/static/css/" + styletitle.toLowerCase() + ".css";
    localStorage.setItem(style_cookie, styletitle);
  }
}

if (style_cookie && localStorage.hasOwnProperty(style_cookie)) {
  set_stylesheet(localStorage.getItem(style_cookie));
}

var hiddenthreads = Array();
/* IE/Opera fix, because they need to go learn a book on how to use indexOf with arrays */
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(elt /*, from*/) {
    var len = this.length;
    var from = Number(arguments[1]) || 0;
    from = from < 0 ? Math.ceil(from) : Math.floor(from);
    if (from < 0) from += len;
    for (; from < len; from++) {
      if (from in this && this[from] === elt) return from;
    }
    return -1;
  };
}

function postClick(num) {
  var sel = window.getSelection().toString();
  if (sel) sel = sel.replace(/^/gm, ">") + "\n";
  insert(">>" + num + "\n" + sel);
}

function insert(text) {
  var textarea = document.forms.postform.message;
  if (textarea) {
    if (textarea.createTextRange && textarea.caretPos) {
      // IE
      var caretPos = textarea.caretPos;
      caretPos.text =
        caretPos.text.charAt(caretPos.text.length - 1) == " " ? text + " " : text;
    } else if (textarea.setSelectionRange) {
      // Firefox
      var start = textarea.selectionStart;
      var end = textarea.selectionEnd;
      textarea.value =
        textarea.value.substr(0, start) + text + textarea.value.substr(end);
      textarea.setSelectionRange(start + text.length, start + text.length);
    } else {
      textarea.value += text + " ";
    }
    textarea.focus();
  }
  return false;
}

function checkhighlight() {
  var match;
  if ((match = /#i([0-9]+)/.exec(document.location.toString()))) {
    if (!document.forms.postform.message.value)
      insert(">>" + match[1] + "\r\n");
  } else if ((match = /#([0-9]+)/.exec(document.location.toString()))) {
    highlight(match[1]);
  }
}

function highlight(post) {
  var hl = document.getElementsByClassName("reply highlight");
  if (hl.length) { hl[0].className = "reply"; }
  var reply = document.getElementById("reply" + post);
  if (reply) {
    reply.className = "reply highlight";
    var match = /^([^#]*)/.exec(document.location.toString());
    document.location = match[1] + "#" + post;
  }
}

function expandimg(e) {
  var post_id = e.dataset.id;
  var img_url = e.href;
  var thumb_url = e.dataset.thumb;
  var img_w = parseInt(e.dataset.w);
  var img_h = parseInt(e.dataset.h);
  var thumb_w = parseInt(e.dataset.tw);
  if (thumb_w < 1) return true;
  var thumb_h = parseInt(e.dataset.th);
  var format = img_url.substring(img_url.lastIndexOf(".") + 1, img_url.length);
  var exp_vid = 0;

  if (window.innerWidth > 900)
  var ratio = Math.min((window.innerWidth - 130) / img_w, 1);
  else var ratio = Math.min((window.innerWidth - 40) / img_w, 1);

  var img_cont = document.getElementById("thumb" + post_id);
  var post_block = img_cont.parentElement.parentElement.getElementsByTagName(
    "blockquote"
  )[0];
  var img;

  for (var i = 0; i < img_cont.childNodes.length; i++)
    if (img_cont.childNodes[i].nodeName.toLowerCase() == "img") {
      img = img_cont.childNodes[i];
    } else if (img_cont.childNodes[i].nodeName.toLowerCase() == "video") {
      img = img_cont.childNodes[i];
      exp_vid = 1;
    }

  if (img) {
    if (format == "webm" || format == "mp4" && exp_vid == 0)
      var new_img = document.createElement("video");
    else var new_img = document.createElement("img");
    
    new_img.setAttribute("class", "thumb");
    new_img.setAttribute("alt", "" + post_id);

    if (img.getAttribute("width") == "" + thumb_w &&
    img.getAttribute("height") == "" + thumb_h) {
      // thumbnail -> fullsize
      if (format == "webm" || format == "mp4") {
        new_img.setAttribute("controls", "");
        new_img.setAttribute("loop", "");
        new_img.setAttribute("autoplay", "");
      }
      new_img.setAttribute("src", "" + img_url);
      new_img.setAttribute("width", img_w);
      new_img.setAttribute("height", img_h);
      new_img.setAttribute("style", "max-width:" +
        Math.floor(img_w * ratio) + "px;max-height:" +
        Math.floor(img_h * ratio) + "px;");
      post_block.setAttribute("style", "");
      img_cont.style.display = "table";
    } else {
      // fullsize -> thumbnail
      if (format == "webm" || format == "mp4") {
        new_img.removeAttribute("controls");
        new_img.removeAttribute("loop");
        new_img.removeAttribute("autoplay");
      }
      new_img.setAttribute("src", "" + thumb_url);
      new_img.setAttribute("width", thumb_w);
      new_img.setAttribute("height", thumb_h);
      post_block.setAttribute("style", "margin-left:" +
        (parseInt(thumb_w) + 40) + "px;max-width:" +
        (1000 - parseInt(thumb_w)) + "px");
      img_cont.removeAttribute("style");
    }

    while (img_cont.lastChild) img_cont.removeChild(img_cont.lastChild);

    img_cont.appendChild(new_img);
  }
}

function filePreview(e) {
  var file = postform.file.files[0];
  var inpt = document.getElementById("file");
  var prev = document.getElementById("filepreview");
  var noimg = document.getElementById("noimage");
  if (noimg) noimg = document.getElementById("noimage").parentNode;
  var read = new FileReader();
  read.readAsDataURL(file);
  read.onload = function() {
    inpt.style.display = "none";
    if (noimg) noimg.style.display = "none";
    prev.removeAttribute("style");
    var fname =
      file.name.length < 20 ? file.name : file.name.substr(0, 19) + "…";
    if (file.type.startsWith("image"))
      prev.insertAdjacentHTML("beforeend",
        '<img class="thumbpreview" src="' + read.result + '" /> ' + fname);
    else prev.insertAdjacentHTML("beforeend", fname);
    prev.appendChild(document.createTextNode(" ["));
    var btn = document.createElement("a");
    btn.href = "#";
    btn.innerText = "Quitar";
    btn.addEventListener("click", function(e) {
      e.preventDefault();
      prev.innerHTML = "";
      prev.style.display = "none";
      inpt.removeAttribute("style");
      if (noimg) noimg.removeAttribute("style");
      inpt.value = "";
    });
    prev.appendChild(btn);
    prev.appendChild(document.createTextNode("] "));
  };
}

function togglethread(e) {
  if (e.parentElement.id.startsWith("unhide")) {
    var threadid = e.parentElement.id.substr(6);
  } else if (e.parentElement.parentElement.id.startsWith("thread")) {
    var threadid = e.parentElement.parentElement.id.substr(6);
  } else {
    return;
  }
  if (hiddenthreads.toString().indexOf(threadid) !== -1) {
    document.getElementById("unhide" + threadid).style.display = "none";
    document.getElementById("thread" + threadid).removeAttribute("style");
    hiddenthreads.splice(hiddenthreads.indexOf(threadid), 1);
  } else {
    document.getElementById("unhide" + threadid).removeAttribute("style");
    document.getElementById("thread" + threadid).style.display = "none";
    hiddenthreads.push(threadid);
  }
  if (hiddenthreads == "") localStorage.removeItem("hiddenthreads");
  else localStorage.setItem("hiddenthreads", hiddenthreads.join("!"));
}

function saveInputs(e) {
  var e = e || window.event;
  var form = e.target || e.srcElement;
  if (typeof form.fielda !== "undefined") weabot.name = form.fielda.value;
  if (typeof form.fielda !== "undefined") weabot.email = form.fieldb.value;
  localStorage.setItem("weabot", JSON.stringify(weabot));
}

function setInputs(id) {
  if (document.getElementById(id)) {
    with (document.getElementById(id)) {
      if (typeof fielda !== "undefined" && !fielda.value && weabot.name)
        fielda.value = weabot.name;
      if (typeof fielda !== "undefined" && !fieldb.value && weabot.email)
        fieldb.value = weabot.email;
      if (!password.value) password.value = getPassword();
      addEventListener("submit", saveInputs);
    }
  }
}

function getPassword() {
  if (weabot.password) return weabot.password;
  var pass = "";
  var char =
    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?!-_.";
  while (pass.length < 10) {
    pass += char[Math.floor(Math.random() * char.length)];
  }
  weabot.password = pass;
  localStorage.setItem("weabot", JSON.stringify(weabot));
  return pass;
}

function catSort(type) {
  for (var i = 0; i < srt.length; i++) srt[i].innerHTML = srt[i].innerText;
  srt[type].innerHTML = "<b>" + srt[type].innerText + "</b>";
  var cont = document.getElementById("catalog");
  var elem = document.getElementsByClassName("thread");
  var arr = Array.prototype.slice.call(elem);
  if (type == 0)
    arr.sort(function(a, b) { return a.dataset.num - b.dataset.num; });
  else if (type == 1)
    arr.sort(function(a, b) { return b.dataset.id - a.dataset.id; });
  else if (type == 2)
    arr.sort(function(a, b) { return a.dataset.id - b.dataset.id; });
  else if (type == 3)
    arr.sort(function(a, b) { return b.dataset.res - a.dataset.res; });
  else if (type == 4)
    arr.sort(function(a, b) { return a.dataset.res - b.dataset.res; });
  for (var j = 0; j < arr.length; j++) cont.appendChild(arr[j]);
  localStorage.setItem("catalog", JSON.stringify(opcs));
}

function catSearch() {
  var filter = document.getElementById("cat_search").value.toLowerCase();
  var nodes = document.getElementsByTagName("p");
  for (i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter))
      nodes[i].parentNode.removeAttribute("style");
    else nodes[i].parentNode.style.display = "none";
  }
}

function catThumbs(big) {
  var btn = document.getElementById("cat_size");
  var cat = document.getElementById("catalog");
  var threads = document.getElementsByClassName("thread");
  if (opcs.big) {
    cat.className = "enlarged";
    for (j = 0; j < threads.length; j++) {
      img = threads[j].getElementsByTagName("a")[0];
      img.innerHTML = img.innerHTML.replace("/cat/", "/thumb/");
    }
    btn.innerText = "Grande";
  } else {
    cat.removeAttribute("class");
    for (j = 0; j < threads.length; j++) {
      img = threads[j].getElementsByTagName("a")[0];
      img.innerHTML = img.innerHTML.replace("/thumb/", "/cat/");
    }
    btn.innerText = "Pequeño";
  }
  localStorage.setItem("catalog", JSON.stringify(opcs));
}

function catTeasers(teaser) {
  var btn = document.getElementById("cat_hide");
  if (!teaser) {
    var style = document.createElement("style");
    style.id = "teaser_style";
    style.type = "text/css";
    style.innerText = "#catalog p {display:none}";
    document.head.appendChild(style);
    btn.innerText = "Mostrar";
  } else {
    var style = document.getElementById("teaser_style");
    if (style) style.parentNode.removeChild(style);
    btn.innerText = "Ocultar";
  }
  localStorage.setItem("catalog", JSON.stringify(opcs));
}

function catMenu(e) {
  var brd = document.getElementsByName("board")[0].value;
  var id = this.dataset.id;
  this.insertAdjacentHTML("afterbegin",
    '<div id="thread_ctrl" style="margin-bottom:3px;">[<a href="/cgi/report/' +
    brd + "/" + id + '">Denunciar</a>] [<a href="#" class="hh">Ocultar</a>]');
  this.getElementsByClassName("hh")[0].addEventListener("click", function(e) {
    document.getElementById("cat" + id + brd).style.display = "none";
    hiddenthreads.push(id + brd);
    localStorage.setItem("hiddenthreads", hiddenthreads.join("!"));
    if (document.getElementById("hidden_label")) {
      hidden_num++;
      document.getElementById("hidden_num").innerText = hidden_num;
    } else {
      hidden_num = 1;
      catHidden();
    }
  });
}

function catMenuClose(e) {
  document.getElementById("thread_ctrl").remove();
}

function catHidden() {
  var menu = document.getElementById("ctrl");
  menu.insertAdjacentHTML(
    "beforeend",
    ' <span id="hidden_label">[Hilos ocultos: <span id="hidden_num">' +
      hidden_num +
      "</span> - "
  );
  var lbl = document.getElementById("hidden_label");
  var shw = document.createElement("a");
  shw.href = "#";
  shw.innerText = "Deshacer";
  shw.addEventListener("click", function(e) {
    e.preventDefault();
    for (var i = 0; i < hiddenthreads.length; i++) {
      try {
        document.getElementById("cat" + hiddenthreads[i]).removeAttribute("style");
      } catch (err) {
        continue;
      }
    }
    lbl.parentElement.removeChild(lbl);
    hidden_num = 0;
    var aux = hiddenthreads.join("!");
    var exp = new RegExp(
      "\\b[0-9]+" + document.getElementsByName("board")[0].value + "\\b",
      "g"
    );
    aux = aux.replace(exp, "!");
    aux = aux.replace(/!+/g, "!");
    aux = aux.replace(/(^!|!$)/g, "");
    if (aux == "") {
      localStorage.removeItem("hiddenthreads");
      hiddenthreads = [];
    } else {
      localStorage.setItem("hiddenthreads", aux);
      hiddenthreads = aux.split("!");
    }
  });
  lbl.appendChild(shw);
  lbl.appendChild(document.createTextNode("]"));
}

function applyTheme() {
  var newTheme = document.getElementById("styles").value;
  set_stylesheet(newTheme);
}

document.addEventListener("DOMContentLoaded", function(e) {
  checkhighlight();
  if (localStorage.hasOwnProperty("weabot"))
    weabot = JSON.parse(localStorage.getItem("weabot"));
  else weabot = { name: null, email: null, password: null };

  board = document.body.dataset.brd;
  var a = document.getElementById("main_nav").getElementsByTagName("a");
  for (var i = 0; i < a.length; i++) {
    if (a[i].getAttribute("href") == "/" + board + "/") {
      a[i].className = "cur_brd";
      break;
    }
  }

  if (localStorage.hasOwnProperty("hiddenthreads")) {
    hiddenthreads = localStorage.getItem("hiddenthreads").split("!");
    if (document.getElementById("catalog")) {
      hidden_num = 0;
      for (var i = 0; i < hiddenthreads.length; i++) {
        try {
          document.getElementById("cat" + hiddenthreads[i]).style.display = "none";
          hidden_num++;
        } catch (err) {
          continue;
        }
      }
      if (hidden_num) {
        catHidden();
      }
    } else {
      for (var i = 0; i < hiddenthreads.length; i++) {
        try {
          document.getElementById("unhide" + hiddenthreads[i]).removeAttribute("style");
          document.getElementById("thread" + hiddenthreads[i]).style.display = "none";
        } catch (err) {
          continue;
        }
      }
    }
  }

  var styleSelect = document.getElementById("styles");
  if (styleSelect) {
    styleSelect.addEventListener("change", applyTheme, false);
    styleSelect.value = localStorage.getItem(style_cookie);
  }
  
  if (document.getElementById("postform")) {
    setInputs("postform");
    postform.file.addEventListener("change", filePreview);
  }

  var del = document.getElementById("delform");
  if (del) del.password.value = weabot.password;

  window.addEventListener("hashchange", checkhighlight);

  if (document.getElementById("catalog")) {
    srt = document.getElementsByClassName("cat_sort");
    for (var i = 0; i < srt.length; i++) {
      srt[i].innerHTML = srt[i].innerText;
      srt[i].addEventListener("click", function(e) {
        e.preventDefault();
        opcs.sort = this.dataset.sort;
        catSort(opcs.sort);
      });
    }
    document.getElementById("cat_size").addEventListener("click", function(e) {
      e.preventDefault();
      opcs.big = !opcs.big;
      catThumbs(opcs.big);
    });
    document.getElementById("cat_hide").addEventListener("click", function(e) {
      e.preventDefault();
      opcs.teaser = !opcs.teaser;
      catTeasers(opcs.teaser);
    });
    document.getElementById("cat_search").addEventListener("keyup", catSearch);
    if (localStorage.hasOwnProperty("catalog")) {
      opcs = JSON.parse(localStorage.getItem("catalog"));
      if ((match = /\?sort=([0-9])/.exec(document.location.toString())))
        opcs.sort = match[1];
      catSort(opcs.sort);
      catThumbs(opcs.big);
      catTeasers(opcs.teaser);
    } else {
      opcs = { sort: 1, big: false, teaser: true };
      localStorage.setItem("catalog", JSON.stringify(opcs));
    }
    var thr = document.getElementsByClassName("thread");
    for (var i = 0; i < thr.length; i++) {
      thr[i].addEventListener("mouseenter", catMenu);
      thr[i].addEventListener("mouseleave", catMenuClose);
    }
  }
});
document.addEventListener("click", function(e) {
  var cn = e.target.className;
  if (cn == "num") {
    e.preventDefault();
    postClick(e.target.textContent);
    return;
  }
  if (cn == "tt") {
    e.preventDefault();
    togglethread(e.target);
    return;
  }
  if (cn == "expimg") {
    e.preventDefault();
    expandimg(e.target);
    return;
  }
}, false);