path: root/static/js/weabot.js

var style_cookie = "weabot_style_ib";
if (localStorage.hasOwnProperty(style_cookie)) {
  var css = document.getElementById("css");
  if (css) {
    var style = localStorage.getItem(style_cookie).trim().toLowerCase();
    if (style != "") {
      css.href = "/static/css/" + style + ".css";
    } else {
      localStorage.removeItem(style_cookie);
    }
  }
}

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.setSelectionRange) {
      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("p" + post);
  if (reply) {
    reply.className = "reply highlight";
    var match = /^([^#]*)/.exec(document.location.toString());
    document.location = match[1] + "#" + post;
  }
}

function expandimg(e) {
  var imgw = parseInt(e.dataset.w);
  var imgh = parseInt(e.dataset.h);
  
  var pid = e.dataset.id;
  var cont = document.getElementById('thumb'+pid);
  var thumb = cont.firstElementChild;

  if (e.dataset.expanded == 'true') {
    cont.removeChild(cont.lastElementChild);
    thumb.removeAttribute('style');
    cont.removeAttribute('style');
    e.dataset.expanded = '';

    if (e.parentNode.parentNode.className != "thread") {
      var bq = cont.nextElementSibling;
      bq.style.marginLeft = (thumb.width + 40) + 'px';
    }
  } else {
    var imgurl = e.href;
    var format = imgurl.split('.').pop();

    var clientw = document.body.clientWidth;
    if (clientw > 600) {
      var marginr = 40;
    } else {
      var marginr = 15;
    }
    var maxw = clientw - thumb.getBoundingClientRect().left - marginr;

    if (imgw > maxw) {
      var ratio = maxw / imgw;
      imgw = maxw;
      imgh = imgh * ratio;
    }

    if (format.toLowerCase() == 'webm' || format.toLowerCase() == 'mp4') {
      var exp = document.createElement('video');
      exp.autoplay = true;
      exp.loop = true;
      exp.controls = true;
      exp.poster = thumb.src;
    } else {
      var exp = document.createElement('img');
    }

    exp.className = 'thumb';
    exp.alt = pid;
    exp.src = imgurl;
    exp.style.maxWidth = imgw + 'px';
    exp.style.maxHeight = imgh + 'px';
    cont.appendChild(exp);
    cont.style.display = 'table';
    thumb.style.display = 'none';
    e.dataset.expanded = 'true';

    if (e.parentNode.parentNode.className != "thread") {
      var bq = cont.nextElementSibling;
      bq.style.marginLeft = '';
    }
  }
}

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 id="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 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?!-_.";
  for (var i=0; i<10; i++) {
    pass += char[Math.floor(Math.random() * char.length)];
  }
  weabot.password = pass;
  localStorage.setItem("weabot", JSON.stringify(weabot));
  return pass;
}

function togglePost(e) {
  if (e.tagName == "DIV") {
    var post = e.parentElement;
  } else {
    var post = e.parentElement.parentElement;
  }
  
  var pid = post.id.slice(1);
  var typ = post.id.charAt(0);
  var itm = "hid-" + typ + "-" + board;
  
  var hidp = localStorage.getItem(itm);
  var hid = Array();
  if (hidp) { hid = hidp.split("!"); }
  
  if (post.classList.contains("hidden")) {
    if (hid.includes(pid)) {
      hid.splice(hid.indexOf(pid), 1);
    }
  } else {
    if (!hid.includes(pid)) {
      hid.push(pid);
    }
  }
  post.classList.toggle("hidden");

  localStorage.setItem(itm, hid.join("!"));
}

function checkHidden() {

}

document.addEventListener("DOMContentLoaded", function(e) {
  board = document.body.dataset.brd;
  checkhighlight();
  
  if (localStorage.hasOwnProperty("weabot")) {
    weabot = JSON.parse(localStorage.getItem("weabot"));
  } else {
    weabot = { name: null, email: null, password: null };
  }
  
  var blink = document.getElementById("b-" + board);
  if (blink) { blink.className = "cur_brd"; }

  var head = document.getElementById("main_nav");
  if (document.body.clientWidth < 600) {
    var navlink = head.getElementsByTagName("a");

    var sel = document.createElement("select");
    sel.id = head.id + "_sel";
    sel.addEventListener("change", function(e){
      window.location.href = this.value;
    });

    for (var i=1; i<navlink.length; i++) {
      var c = document.createElement("option");
      c.text = navlink[i].textContent;
      c.value = navlink[i].href;
      if (navlink[i].className == "cur_brd") {
        c.selected = true;
      }
      sel.options.add(c);
    }

    head.textContent = ""
    var home = document.createElement("a");
    home.text = "Bienvenido a Internet";
    home.href = "/home.html";
    head.appendChild(home);
    head.appendChild(document.createTextNode(" ★ "));
    head.appendChild(sel);

    head.className = "mob";
    document.body.style.marginTop = "1em";
  }

  for (var i=0; i<2; i++) {
    var type = "pt".charAt(i);
    var hidp = localStorage.getItem("hid-" + type + "-" + board);
    if (hidp) {
      var hid = hidp.split("!");
      for (var j = 0; j < hid.length; j++) {
        var post = document.getElementById(type+hid[j]);
        if (post) { post.classList.add("hidden"); }
      }
    }
  }

  if (document.getElementById("postform")) {
    setInputs("postform");
    if (postform.file) {
      postform.file.addEventListener("change", filePreview);
    }
  }

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

  var cat = document.getElementById("catalog");
  if (cat) {
    if (j > 0) { // hidden threads number
      document.getElementById("hid-label").removeAttribute("style");
      document.getElementById("hid-num").innerText = j;
    }
    
    document.getElementById("cat-size").addEventListener("click", function(e) {
      e.preventDefault();
      var thumb = cat.getElementsByTagName("img");
      if (cat.classList.contains("enlarged")) {
        for (var i = 0; i < thumb.length; i++) {
          thumb[i].src = thumb[i].src.replace("/thumb/", "/cat/");
        }
      } else {
        for (var i = 0; i < thumb.length; i++) {
          thumb[i].src = thumb[i].src.replace("/cat/", "/thumb/");
        }
      }
      cat.classList.toggle("enlarged");
      this.innerText = (this.innerText == "Pequeño") ? "Grande" : "Pequeño";
    });
    
    document.getElementById("hid-num").addEventListener("click", function(e) {
      e.preventDefault();
      cat.classList.toggle("showhid");
    });
  }  

	window.addEventListener("hashchange", checkhighlight);
});



window.addEventListener("load", function() {
	document.addEventListener("click", function(e) {
	  var cn = e.target.className;
	  if (cn == "num") {
	    e.preventDefault();
	    postClick(e.target.textContent);
	    return;
	  }
	  if (cn == "expimg") {
	    e.preventDefault();
	    expandimg(e.target);
	    return;
	  }
	  if (cn == "tt") {
	    e.preventDefault();
	    togglePost(e.target);
	    return;
	  }
	}, false);
	
	document.addEventListener("dblclick", function(e) {
	  if (e.target.closest(".info")) {
	    e.preventDefault();
	    togglePost(e.target.closest(".info"));
	    return;
	  }
		if (document.getElementById("catalog")) {
			if (e.target.className == 'subj') {
	    	e.preventDefault();
	    	togglePost(e.target.className == 'subj');
	    	return;
			}
		}
	}, false);
});