MediaWiki:Script/Loot.js

function addFormElements(context) {

 var divCreate = context.children[0];
 var form = document.createElement("form");
 var input = document.createElement("input");
 var select = document.createElement("select");
 var optionValues = ["Tous", "1", "2", "3", "4"]
 
 for (var i of optionValues) {
   var option = document.createElement("option");
   option.value = i;
   option.textContent = i;
   select.appendChild(option);
 }
 
 select.name = "rank";
 select.id = "select";
 
 input.id = "input";
 input.name = "level";
 input.type = "number";
 input.min = "1";
 input.max = "120";
 
 divCreate.children[0].appendChild(input)
 divCreate.children[1].appendChild(select)
 
 context.insertBefore(form, context.firstChild);
 form.appendChild(divCreate);
 
 return [form, input, select]

}

function createGlobalArray(list) {

 var globalArray = {};
 
 list.forEach(function(e){
   var elDataset = e.dataset;
   globalArray[e.id] = {
     "level": [parseInt(elDataset.levelMin), parseInt(elDataset.levelMax)],
     "rank": elDataset.rank.split(",")
   }
 });
 
 return globalArray

}

function displayByRankAndLevel(divList, list, rank, level) {

 divList.forEach(function(div){
   
   var divData = list[div.id]
   var bolRank = rank === "Todos";
   var bolLevel = level === "";
   
   if (!bolRank) {
     var bolRank = (divData["rank"].indexOf(rank)) !== -1;
   }

   if (!bolLevel) {
     var bolLevel = (level >= divData["level"][0]) && (level <= divData["level"][1]);
   }
   
   if (!bolRank || !bolLevel) {
     div.classList.add("tabber-noactive");
   } else {
     div.classList.remove("tabber-noactive");
   }
 });

}

function getFormValues(listForm, allDiv, globalArray) {

 var values = {"rank": "Tous", "level": ""}
 var form = listForm[0];
 var button = listForm[0].querySelector(".button");
 
 form.addEventListener("submit", function(e) {
   e.preventDefault()
 })
 
 button.addEventListener("click", function() {
   listForm[1].value = "";
   listForm[2].value = "Tous";
   values["rank"] = "Tous";
   values["level"] = "";
   displayByRankAndLevel(allDiv, globalArray, "Tous", "");
 });
 
 form.addEventListener("change", function(e) {
   values[e.target.name] = e.target.value;
   displayByRankAndLevel(allDiv, globalArray, values["rank"], values["level"]);
 });

}

(function(){

 var commonLoots = document.getElementById("common-loot");
 var allDiv = commonLoots.querySelectorAll("div[data-rank]"); 
 var listForm = addFormElements(commonLoots);   
 var globalArray = createGlobalArray(allDiv);
 
 getFormValues(listForm, allDiv, globalArray);
    

})();