MediaWiki:Script/Map.js

Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac)
• Google Chrome : appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac)
• Internet Explorer : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5
• Opera : allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d’exploration → Images et fichiers en cache.

function createForm(emplacement, listNames) {
  
  var categories = {'Monstre': '--Choisir un monstre--', 'Boss': '--Choisir un boss--', 'Metin': '--Choisir une Metin--'};
  var form = document.createElement('form');
  var emplacementDataset = emplacement.dataset
  emplacement.appendChild(form);
  
  for (var attribute in emplacementDataset) {
    form.style[attribute] = emplacementDataset[attribute];
    delete emplacementDataset[attribute]
  }
  
  for (var i in categories) {
    
    var optionValue = 0;
    
    if (listNames[i].length !== 0) {
      
      var select = document.createElement('select');
      var option = document.createElement('option');
      
      option.value = "";
      option.textContent = categories[i];
      select.name = i;
      select.appendChild(option);
      
      listNames[i].forEach(function(obj){
        
        var option = document.createElement('option');
        
        option.value = optionValue;
        option.textContent = obj['name'];
        select.appendChild(option);
        optionValue += 1;
      })
      
      form.appendChild(select);
    }
  }
  
  return form
}


function createListNames(allMonsters) {
  
  var listNames = {'Monstre': [], 'Boss': [], 'Metin': []}
  
  allMonsters.forEach(function(monster){
    
    var name = monster.querySelector('.name-mob > a');
    var type;
    
    switch (monster.dataset.rank) {
      case undefined:
        type = 'Metin';
        break;
      case '5':
      case '6':
        type = 'Boss';
        break;
      default:
        type = 'Monstre';
        break;
    }
    
    listNames[type].push({'name': name.title, 'spawn': monster.dataset.spawn, 'link': name.href});
  });
  
  return listNames
}


function changeImage(dataList, mapLink, mapImage) {
  
  mapImage.src = dataList['spawn'];
  mapImage.alt = dataList['spawn'].split("/").slice(-1);
  mapLink.href = dataList['link'];
  mapLink.title = dataList['name'];
  
}


function getFormValues(form, listNames, mapLocation) {
  
  var mapLink = mapLocation.firstElementChild;
  var mapImage = mapLink.firstElementChild;
  var initialValues = {'spawn': mapImage.src, 'link': mapLink.href, 'name': mapLink.title}
  var prevSelect = '';
  
  form.addEventListener("submit", function(e) {
    e.preventDefault()
  });
  
  form.addEventListener("change", function(e) {
    
    var currentSelect = e.target;
    
    if (currentSelect.name !== prevSelect.name) {
      prevSelect.selectedIndex = 0;
      prevSelect = currentSelect;
    }
    
    if (e.target.value !== '') {
      changeImage(listNames[currentSelect.name][currentSelect.value], mapLink, mapImage);
    } else {
      changeImage(initialValues, mapLink, mapImage);
    }
  });
}


(function(){
  
  var emplacement = document.getElementById('create-form');
  var mobContainer = document.getElementById('mob-container')
  var allMonsters = mobContainer.querySelectorAll("[data-spawn]");
  var mapLocation = document.getElementById('map-location');
  
  var listNames = createListNames(allMonsters);
  var form = createForm(emplacement, listNames);
  getFormValues(form, listNames, mapLocation);
  
})();