MediaWiki:Script/Tabber.js : Différence entre versions

(Page créée avec « function onTabClick(){ var parent = this.parentElement; var buttonList = parent.children; var contentList = parent.nextElementSibling.children; var position = thi... »)
 
 
(7 révisions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
−
function onTabClick(){
+
function changeDisplay(button, textContainer, method) {
 +
  button.classList[method]("tabber-active");
 +
  textContainer.children[button.dataset.position].classList[method]("tabber-active");
 +
}
  
−
  var parent = this.parentElement;
+
function globalChange(button, allButton, allText, toggleButton, changeUrl, bool = false) {
−
  var buttonList = parent.children;
+
   var activeButton = allButton.querySelector(".tabber-active");
−
  var contentList = parent.nextElementSibling.children;
+
   if (toggleButton || button !== activeButton) {
−
  var position = this.dataset.position;
+
     if (bool && changeUrl) {
−
   var activeButton = parent.querySelector(".tabber-active");
+
       var newHash = "#"+button.id;
−
 
+
      history.pushState({}, "", newHash);
−
   if (activeButton == null) {
+
    }
−
    this.classList.add("tabber-active");
+
     changeDisplay(button, allText, "toggle");
−
    contentList[position].classList.add("tabber-active");
+
    if (button !== activeButton && activeButton !== null) {
−
  } else {
+
       changeDisplay(activeButton, allText, "remove");
−
    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){
+
function updateTabber(buttonContainer, textContainer, toggleButton, changeUrl) {
−
 
+
   var targetButton = buttonContainer.querySelector(":target");
−
   var buttonList = context.querySelectorAll(".button");
+
   if (targetButton !== null && targetButton.classList.contains("button")) {
−
   var targetButton = context.querySelector(".button:target");
+
    globalChange(targetButton, buttonContainer, textContainer, false, false);
−
   
+
  }
−
   buttonList.forEach(function(button) {
+
   buttonContainer.addEventListener("click", function(event) {
−
     button.addEventListener("click", onTabClick, false);
+
     var target = event.target.closest(".button");
 +
    if (target) {
 +
      globalChange(target, buttonContainer, textContainer, toggleButton, changeUrl, true);
 +
    }
 
   });
 
   });
−
   if (targetButton !== null) {
+
}
−
     onTabClick.call(targetButton);
+
 
 +
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(){
+
(function() {
−
   var tabberContainers = document.querySelectorAll("div#mw-content-text div.tabber-container");
+
   var tabberContainer = document.querySelectorAll("div.tabber-container");
−
   tabberContainers.forEach(function(tabberContainer){
+
   tabberContainer.forEach(function(tabber) {
−
     buttonTabber(tabberContainer);
+
     var [buttonContainer, textContainer] = tabber.children;
 +
    var toggleButton = tabber.dataset.toggle === "1";
 +
    var changeUrl = tabber.dataset.url === "1";
 +
    updateTabber(buttonContainer, textContainer, toggleButton, changeUrl);
 
   });
 
   });
 +
  updateTabberWithUrlChange();
 
})();
 
})();

Version actuelle datée du 25 mai 2024 à 19:22

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();
})();
Récupérée de « https://fr-wiki.metin2.gameforge.com/index.php?title=MediaWiki:Script/Tabber.js&oldid=102843 »