MediaWiki:Common.js : Différence entre versions

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

/*Favicon*/

$('link[rel="shortcut icon"]').attr('href', 'https://gf1.geo.gfsrv.net/cdn98/191b803adbf82f4b8febe3a2c38c2c.ico');

/*Tabber*/

function onTabClick(){

  var parent = this.parentElement;
  var buttonList = parent.children;
  var contentList = parent.nextElementSibling.children;
  var position = this.dataset.position; // position du bouton sélectionné
  var activeButton = parent.querySelector(".tabber-active");

  if (activeButton == null) {
    
    this.classList.add("tabber-active");
    contentList[position].classList.add("tabber-active");
    
  } else {
    
    var activePosition = activeButton.dataset.position; // position du bouton actif
    
    if (activePosition == position) {
      
      // lorsque la fonction est appelé par le target
      if (event.currentTarget==this) {
        
        this.classList.remove("tabber-active");
        contentList[position].classList.remove("tabber-active");
      }
      
    } else {
 
      this.classList.add("tabber-active");
      contentList[position].classList.add("tabber-active");
      
      activeButton.classList.remove("tabber-active");
      contentList[activePosition].classList.remove("tabber-active");
    }
  }
}

function buttonTabber(content){
  
  var buttonList = content.querySelectorAll(".button");
  var targetButton = content.querySelector(".button:target");
    
  buttonList.forEach(function(button) {
      
    button.addEventListener("click", onTabClick, false);
  });
  
  if (targetButton !== null) {
    onTabClick.call(targetButton);
  }
}

/*Calcul*/

function createInput(content){
  
  //sélectionne toutes les div contenant les futurs input
  var allInput = content.querySelectorAll("div#inputCalcul");
  
  //sélectionne les div qui contiendront les input du résultat du calcul
  var resultatCalc = content.querySelectorAll("div#inputResult");

  //parcourt tous les input 
  allInput.forEach(function(e){
    
    //insert les input à l'intérieur des associées
    e.insertAdjacentHTML('afterbegin','<input id="entree" type="number" required>');
  });
  
  //parcourt les input résultat
  resultatCalc.forEach(function(e){
    
    //insert les input résultat à l'intérieur des div associées
    e.insertAdjacentHTML('afterbegin','<input id="sortie" type="number" required>');
  });
}

function formule(tabValue,tabCoeff,formuleNumber){
  
  if(formuleNumber === 0){
    
    var value = 0;
    var n = tabValue.length;
    
    if (n*(n+1)/2 != tabCoeff.length){
      return 0;
    } else {
      var c = 0;
      for(var i=0; i < n; i++){
        for(var j=0; j < n-i; j++){
          value += parseFloat(tabCoeff[c])*tabValue[i]*tabValue[i+j];
          c += 1;
        }
      }
      return Math.floor(value);
    }
  } else {
    switch(formuleNumber) {
      case 1:
        return 0;
    }
  }
}

function calculWiki(content){
  
  //sélectionne la div qui contient les coefficients de la formule
  var coeffDOM = content.querySelector("div#coeffFormule");
    
  if (coeffDOM != null){
      
    //crée le tableau des coefficients de la formule
    var tabCoeff = coeffDOM.textContent.split(",");
      
  } else {
    
    //sélectionne le numéro de la formule à utiliser
    var formuleNumberDOM = content.querySelector("div#formuleNumber");
    var formuleNumber = parseInt(formuleNumberDOM.textContent);
  }
 
  //séléectionne le bouton assoicié aux calculs
  var bouttonCalcul = content.querySelector("#buttonCalcul");
  
  //exécute une fonction à chaque clic sur le bouton
  bouttonCalcul.addEventListener("click", function(){
    
    var value = 0;
    
    //sélectionne tous les input d'entrée
    var allRealInput = content.querySelectorAll("input#entree");
    
    //sélectionne tous les input de sortie
    var allRealInputOut = content.querySelectorAll("input#sortie");
    
    var tableauInput = [1];
 
    //stocke toutes les valeurs des inputs dans tableauInput
    allRealInput.forEach(function(e){
      if (e.value != ""){
        tableauInput.push(parseFloat((e.value)));
      }
    });
    
    if(tabCoeff != undefined){
      value = formule(tableauInput,tabCoeff,0);
    } else {
      value = formule(tableauInput,[],formuleNumber);
    }
    
    //parcourt tous les input de sortie en leur donnant la valeur calculée précédemment 
    allRealInputOut.forEach(function(e){
      e.value=value;
    });
  });   
}

/*Modal*/

function modal(content){
  
  //sélectionne le bouton, le modal et le close à l'intérieur de l'id modalContainer
  var boutonModal = content.querySelector(".button");
  var modalContent = content.querySelector(".modal");
  var boutonClose = content.querySelector(".close");
  
  //exécute la fonction suivante lorsqu'on clique sur le bouton
  boutonModal.addEventListener("click", function(){
    
    //ajoute la classe active au bouton
    boutonModal.className += " tabber-active";
    
    //affiche le modal
    modalContent.style.display = "block";
    
    //ferme le modal lorsqu'on clique sur le bouton close
    boutonClose.addEventListener("click", function(){
      modalContent.style.display = "none";
      boutonModal.className = boutonModal.className.replace("tabber-active", "")
    });
    
    //ferme le modal lorsqu'on clique en dehors du modal
    window.addEventListener("click", function(e){
      if (e.target == modalContent) {
        modalContent.style.display = "none";
        boutonModal.className = boutonModal.className.replace("tabber-active", "")
      }
    });
  });
}

/*switch de contenu*/

function switchDiv(content){
  
  //sélectionne le bouton à l'intérieur de l'id buttonContainer
  var boutonSwitch = content.querySelector(".button");
  
  //exécute la fonction suivante à chaque clique sur le bouton
  boutonSwitch.addEventListener("click", function(){
    
    //sélectionne toutes les div avec l'id change
    var changeDiv = content.querySelectorAll("div#change");
    var n = changeDiv.length;
    
    //fais disparaître la div affichée et fais apparaître la div suivante
    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){
  
  //sélectionne le bouton à l'intérieur de l'id buttonContainer
  var boutonSwitch = content.querySelector(".button");
  
  var frereList = content.nextElementSibling;
  
  //exécute la fonction suivante à chaque clique sur le bouton
  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');
    }
  });
}

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");
        }
      });
    });    
  });
}

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");

  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
    });
  });
}

//s'exécute une fois au chargement de chaque page
(function(){
  
  //sélectionne toutes les div contenant un tabber à l'intérieur du contenu de chaque page
  var tabberContainer = document.querySelectorAll("div#mw-content-text div.tabber-container");
  
  //parcourt chaque div contenant un tabber, rien si vide
  tabberContainer.forEach(function(e){
    
    //exécute la fonction buttonTabber
    buttonTabber(e);
    });
  
  //sélectionne toutes les div contenant un calcul à l'intérieur du contenu de chaque page
  var containerCalcul = document.querySelectorAll("div#mw-content-text div#container-calcul");
  
  //parcourt chaque div contenant un calcul, rien si vide
  containerCalcul.forEach(function(e){
    
    //exécute les fonctions createInput et calculWiki
    createInput(e);
    calculWiki(e);
  });
  
  //sélectionne toutes les div contenant un modal à l'intérieur du contenu de chaque page
  var modalContainer = document.querySelectorAll("div#mw-content-text div#modalContainer");
  
  //parcourt chaque div contenant un modal, rien si vide
  modalContainer.forEach(function(e){
    
    //exécute la fonction modal
    modal(e);
  });
  
  //sélectionne toutes les div contenant un bouton pour switch à l'intérieur du contenu de chaque page
  var bcontainer = document.querySelectorAll("div#mw-content-text #buttonContainer"); 
  
  //parcourt chaque div contenant un bouton pour switch, rien si vide
  bcontainer.forEach(function(e){
    
    //exécute la fonction switchDiv
    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)
  });

  addButtonTop();
  buttonTop();

})();

/* Pour les cookies */

(function () {
    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();
})();