Dotdatabase.net Relics Search plugin

Description: the code injects an input into dotdatabase.net site to enable you to search for relics by name on the Titan Build screen

How to use:

Source code:

function create(sNode) {
  return document.createElement(sNode);
}

function byId(sId) {
  var node = document.getElementById(sId);
  if (!node) {
    node = document.getElementById("PAGE_CONTAINER").children[1].contentWindow.document.getElementById(sId);
  }
  return node;
}

function searchForRelics (nodeList, relicName) {
  if (nodeList.length === 0 ) return;


  for (var i = 0; i < nodeList.length; i++) {
    var sRelicTitle = nodeList[i].title.toLowerCase().trim();
    var sRelicName = relicName.toLowerCase().trim();
    if (sRelicTitle.indexOf(sRelicName) > -1 ){
      nodeList[i].parentNode.classList.remove("content_hide");
    } else {
      nodeList[i].parentNode.classList.add("content_hide");
    }
  }
}

function injectCSS() {
  var style = create("style");
  style.innerText = ".possibleRelicSearch { margin-top: .5rem; width: 100%; } .possibleRelicSearch label { font-size: 0.83em; font-weight: bold; padding-right: 0.83em;}";
  byId("TITAN_IFRAME").contentWindow.document.body.prepend(style);
}

function setAllRelicsVisible() {
  var nodeList = byId("TITAN_IFRAME").contentWindow.document.getElementById("POSSIBLE_RELICS").children;
  for (var i=0; i < nodeList.length; i++) {
    nodeList[i].classList.remove("content_hide");
  }
}

function createInput() {
  var iFrame = document.getElementById("TITAN_IFRAME");
  var parentNode = iFrame.contentWindow.document.getElementById("TITAN_RELICS");
  var div = create("div");
  div.setAttribute("id", "possibleRelicSearch");
  div.setAttribute("class", "possibleRelicSearch");
  var label = create("label");
  label.innerText = "Search relic ";
  var input = create("input");


  input.addEventListener("input", function(e) {
    var val = e.srcElement.value;
    var nodeList = iFrame.contentWindow.document.querySelectorAll("#POSSIBLE_RELICS .possible_relic_img");
    if (val.length < 2) {
      setAllRelicsVisible();
    } else {
      searchForRelics(nodeList, val);
    }
  });
  div.appendChild(label);
  div.appendChild(input);
  parentNode.insertBefore(div, iFrame.contentWindow.document.getElementById("POSSIBLE_RELICS"));
}

function removeInput() {
  byId("TITAN_IFRAME").contentWindow.document.getElementById("possibleRelicSearch").remove();
}

function enableRelicSearch() {
  if (!byId("TITAN_IFRAME") ||
    byId("TITAN_IFRAME").contentWindow.document.body.getAttribute("id") !== "TITAN") {
  return;
  }


  byId("PAGE_CONTAINER").children[1].focus();
  injectCSS();
  createInput();
}

enableRelicSearch();