MediaWiki:Common.js : Différence entre versions

/* Tout le JavaScript ici sera chargé avec chaque page accédée par n’importe quel utilisateur. */

/* =====================================
DECLARATIONS DES FONCTIONS ET PROCEDURES
======================================== */

/* Favicon */
function fixInsecureFavicon() {
  document.querySelector('link[rel="shortcut icon"]').href = "https://gf1.geo.gfsrv.net/cdn98/191b803adbf82f4b8febe3a2c38c2c.ico";
}

/* Modal */
function createModalInteraction(content){
  
  var boutonModal = content.querySelector(".button");
  var modalContent = content.querySelector(".modal");
  var boutonClose = content.querySelector(".close");
  
  boutonModal.addEventListener("click", function(){
    boutonModal.className += " tabber-active";
    modalContent.style.display = "block";
    
    boutonClose.addEventListener("click", function(){
      modalContent.style.display = "none";
      boutonModal.className = boutonModal.className.remove("tabber-active");
    });
    
    window.addEventListener("click", function(e){
      if (e.target == modalContent) {
        modalContent.style.display = "none";
        boutonModal.className = boutonModal.className.remove("tabber-active");
      }
    });
  });
}

/* CHANGEMENT DE CONTENU */
function switchDiv(content){
  
  var boutonSwitch = content.querySelector(".button");
  
  boutonSwitch.addEventListener("click", function(){
    
    var changeDiv = content.querySelectorAll("div#change");
    var n = changeDiv.length;
    
    for (var i = 0; i < n; i++) {
      if(getComputedStyle(changeDiv[i]).display == "block") {
        changeDiv[i].style.display="none";
        if(i<=n-2) {
          changeDiv[i+1].style.display="block";
        } else {
          changeDiv[0].style.display="block";
        }
        break;
      }
    }
  });
}

function changeDisplay(content){
  
  var boutonSwitch = content.querySelector(".button");
  var frereList = content.nextElementSibling;
  
  boutonSwitch.addEventListener("click", function(){
    if (this.classList.length == 1) {
      this.classList.add('tabber-active');
      frereList.classList.remove('tabber-noactive');
    } else {
      this.classList.remove('tabber-active');
      frereList.classList.add('tabber-noactive');
    }
  });
}

/* Liste des monstres */
function init(list){
  list.forEach(function(el){
    el.classList.remove("tabber-noactive");
  })
}

function displayTableMob(content) {
  
  var allMob = content.querySelectorAll('.card-mob');
  var buttons = content.querySelectorAll('div.button');
  
  init(allMob);
 
  buttons.forEach(function(button){
    
    button.addEventListener("click", function() {
      var activeButton = content.querySelector(".button.tabber-active");
      if (this === activeButton) {
        activeButton.classList.remove("tabber-active");
        init(allMob);
        return
      }
      if (activeButton !== null) {
        activeButton.classList.remove("tabber-active");
      }
      init(allMob);
      button.classList.add("tabber-active");
      var caract = Object.keys(this.dataset)[0]
      var value = this.dataset[caract];
      allMob.forEach(function(mob){
        if (mob.dataset[caract] !== value ) {
          mob.classList.add("tabber-noactive");
        }
      });
    });    
  });
}

/* BOUTON RETOUR VERS LE HAUT */
function addButtonTop() {
  
  var contentText = document.querySelector("div#mw-content-text");
  
  if (contentText !== null) {
    
    var divButtonTop = document.createElement("div");
    divButtonTop.classList.add("top-button");
    contentText.appendChild(divButtonTop);
  }
}

function buttonTop() {
  
  var balise = document.querySelector("div#mw-page-header-links");
  var topButton = document.querySelector(".top-button");
  
  if (balise !== null) {
    var options = {
      root: null,
      rootMargin: "0px",
      threshold: 0,
    };
  
    var observer = new IntersectionObserver(callback, options);
    observer.observe(balise);

    function callback(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          topButton.classList.remove("show-button");
        } else {
        topButton.classList.add("show-button");
        }
      });
    }

    topButton.addEventListener("click", function(){
      document.documentElement.scrollTo({
        top: 0
      });
    });
  }
}

/* Cookies */
function cookies() {
    var req = new XMLHttpRequest();
    req.addEventListener('load', function (ev) {
        if (this.status >= 200 && this.status < 300) {
            var data = JSON.parse(this.responseText);
            if (data.hasOwnProperty('version')) {
                var gdpr = document.createElement("script");
                gdpr.src = "https://s3-static.geo.gfsrv.net/cookiebanner/" + data.version + "/cookie.min.js";
                document.head.appendChild(gdpr);
            }
        }
    });
    req.open('GET', "https://s3-static.geo.gfsrv.net/cookiebanner/version.json");
    req.send();
}

/* =======================================
FONCTION GLOBALE
Exécutée une fois au chargement de la page
========================================== */

(function(){
  fixInsecureFavicon()
  
  var modalContainer = document.querySelectorAll("div#mw-content-text div#modalContainer");
  modalContainer.forEach(function(e){
    createModalInteraction(e);
  });
  
  var bcontainer = document.querySelectorAll("div#mw-content-text #buttonContainer"); 
  bcontainer.forEach(function(e){
    switchDiv(e);
  });

  var ccontainer = document.querySelectorAll("div#mw-content-text .list-equip");
  ccontainer.forEach(function(e){
    changeDisplay(e);
  });

  var mobContainers = document.querySelectorAll("div#mw-content-text div.mob-container");
  mobContainers.forEach( function(mobContainer) {
    displayTableMob(mobContainer)
  });

  var loadScripts = document.querySelectorAll("div[data-load-javascript]");
  
  /* Charge des scripts spécifiques au chargement de certaines pages */
  if (loadScripts.length) {
    var checkArray = new Array(0);
    loadScripts.forEach(function(loadScript){
      script = loadScript.dataset["loadJavascript"];
      if (checkArray.indexOf(script) === -1) {
        checkArray.push(script);
        switch (script) {
          case "tabber" : // charge le script pour utiliser les tabber
            mw.loader.load("/index.php?title=MediaWiki:Script/Tabber.js&action=raw&ctype=text/javascript");
            break;
          case "skills" : // charge le script pour utiliser le simulateur de compétence
            mw.loader.load("/index.php?title=MediaWiki:Script/Skills.js&action=raw&ctype=text/javascript");
            break;
        }
      }
    });
  }
  
  addButtonTop();
  buttonTop();
  cookies()
})();