«ميدياويكي:Script/Loot.js»: الفرق بين المراجعتين

(أنشأ الصفحة ب'function addFormElements(context) { var divCreate = context.children[0]; var form = document.createElement("form"); var input = document.createElement("input");...')
 
 
(مراجعة متوسطة واحدة بواسطة نفس المستخدم غير معروضة)
سطر ٥: سطر ٥:
 
   var input = document.createElement("input");
 
   var input = document.createElement("input");
 
   var select = document.createElement("select");
 
   var select = document.createElement("select");
   var optionValues = ["Tous", "1", "2", "3", "4"]
+
   var optionValues = ["الجميع", "1", "2", "3", "4"]
 
    
 
    
 
   for (var i of optionValues) {
 
   for (var i of optionValues) {

المراجعة الحالية بتاريخ ١٢:٥١، ٣٠ سبتمبر ٢٠٢٢

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 = ["الجميع", "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 === "Tous";
    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);
     
})();