MediaWiki:Script/Tabber.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 onTabClick(){

  var parent = this.parentElement;
  var buttonList = parent.children;
  var contentList = parent.nextElementSibling.children;
  var position = this.dataset.position;
  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;
    if (activePosition == position) {
      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(context){
  
  var buttonList = context.querySelectorAll(".button");
  var targetButton = context.querySelector(".button:target");
    
  buttonList.forEach(function(button) {
    button.addEventListener("click", onTabClick, false);
  });
  if (targetButton !== null) {
    onTabClick.call(targetButton);
  }
}

(function(){
  var tabberContainers = document.querySelectorAll("div#mw-content-text div.tabber-container");
  tabberContainers.forEach(function(tabberContainer){
    buttonTabber(tabberContainer);
  });
})();