MediaWiki:Script/Tabber.js

Nota: Após gravar, terá de limpar a cache do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Internet Explorer: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5
• Opera: Ir para Menu → Configurações (Opera → Preferências no Mac) e, em seguida, Privacidade e segurança → Limpar dados de navegação → Imagens e ficheiros em cache.

function changeDisplay(button, textContainer, method) {
  button.classList[method]("tabber-active");
  textContainer.children[button.dataset.position].classList[method]("tabber-active");
}

function globalChange(button, allButton, allText, toggleButton, changeUrl, bool = false) {
  var activeButton = allButton.querySelector(".tabber-active");
  if (toggleButton || button !== activeButton) {
    if (bool && changeUrl) {
      var newHash = "#"+button.id;
      history.pushState({}, "", newHash);
    }
    changeDisplay(button, allText, "toggle");
    if (button !== activeButton && activeButton !== null) {
      changeDisplay(activeButton, allText, "remove");
    }
  }
}

function updateTabber(buttonContainer, textContainer, toggleButton, changeUrl) {
  var targetButton = buttonContainer.querySelector(":target");
  if (targetButton !== null && targetButton.classList.contains("button")) {
    globalChange(targetButton, buttonContainer, textContainer, false, false);
  }
  buttonContainer.addEventListener("click", function(event) {
    var target = event.target.closest(".button");
    if (target) {
      globalChange(target, buttonContainer, textContainer, toggleButton, changeUrl, true);
    }
  });
}

function updateTabberWithUrlChange() {
  window.addEventListener("hashchange", function(e) {
  var newHash = e.target.location.hash;
  if (newHash !== "") {
    var targetButton = document.getElementById(newHash.slice(1));
    if (targetButton) {
      if (targetButton.classList.contains("button")) {
        var [buttonContainer, textContainer] = targetButton.parentElement.parentElement.children;
        globalChange(targetButton, buttonContainer, textContainer, false, false);
      }
    }
  }
  });
}

(function() {
  var tabberContainer = document.querySelectorAll("div.tabber-container");
  tabberContainer.forEach(function(tabber) {
    var [buttonContainer, textContainer] = tabber.children;
    var toggleButton = tabber.dataset.toggle === "1";
    var changeUrl = tabber.dataset.url === "1";
    updateTabber(buttonContainer, textContainer, toggleButton, changeUrl);
  });
  updateTabberWithUrlChange();
})();