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

(Annulation des modifications 78304 de Dexter (discussion))
(Balise : Annuler)
Ligne 20 : Ligne 20 :
 
}
 
}
  
function updateTabber(tabber, activation, changeUrl) {
+
function updateTabber(buttonContainer, textContainer, activation, changeUrl) {
  var [buttonContainer, textContainer] = tabber.children;
 
 
   var targetButton = buttonContainer.querySelector(':target');
 
   var targetButton = buttonContainer.querySelector(':target');
 
   buttonContainer.addEventListener('click', function(event) {
 
   buttonContainer.addEventListener('click', function(event) {
Ligne 29 : Ligne 28 :
 
     globalChange(targetButton, buttonContainer, textContainer, false, false);
 
     globalChange(targetButton, buttonContainer, textContainer, false, false);
 
   }
 
   }
 +
}
 +
 +
function updateTabberWithUrlChange() {
 
   window.addEventListener('popstate', function(e) {
 
   window.addEventListener('popstate', function(e) {
    var newHash = e.target.location.hash;
+
  var newHash = e.target.location.hash;
    if (newHash !== '') {
+
  if (newHash !== '') {
      var targetButton = buttonContainer.querySelector(e.target.location.hash);
+
    var targetButton = document.getElementById(newHash.slice(1));
      if (targetButton !== null) {
+
    if (targetButton !== null) {
 +
      if (targetButton.classList.contains('.button')) {
 +
        var [buttonContainer, textContainer] = targetButton.parentElement.parentElement.children;
 
         globalChange(targetButton, buttonContainer, textContainer, false, false);
 
         globalChange(targetButton, buttonContainer, textContainer, false, false);
 
       }
 
       }
 
     }
 
     }
 +
  }
 
   });
 
   });
 
}
 
}
Ligne 43 : Ligne 48 :
 
   var tabberContainer = document.querySelectorAll('div.tabber-container');
 
   var tabberContainer = document.querySelectorAll('div.tabber-container');
 
   tabberContainer.forEach(function(tabber) {
 
   tabberContainer.forEach(function(tabber) {
     updateTabber(tabber, !tabber.dataset.activation, tabber.dataset.url);
+
    var [buttonContainer, textContainer] = tabber.children;
 +
     updateTabber(buttonContainer, textContainer, !tabber.dataset.activation, tabber.dataset.url);
 
   });
 
   });
 +
  updateTabberWithUrlChange();
 
})();
 
})();

Version du 20 octobre 2022 à 21:00

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

function globalChange(button, allButton, allText, activation, changeUrl, bool = false) {
  if (button.classList.contains('button')) {
    var activeButton = allButton.querySelector('.tabber-active');
    if (activation || 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, activation, changeUrl) {
  var targetButton = buttonContainer.querySelector(':target');
  buttonContainer.addEventListener('click', function(event) {
    globalChange(event.target, buttonContainer, textContainer, activation, changeUrl, true);
  });
  if (targetButton !== null) {
    globalChange(targetButton, buttonContainer, textContainer, false, false);
  }
}

function updateTabberWithUrlChange() {
  window.addEventListener('popstate', function(e) {
  var newHash = e.target.location.hash;
  if (newHash !== '') {
    var targetButton = document.getElementById(newHash.slice(1));
    if (targetButton !== null) {
      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;
    updateTabber(buttonContainer, textContainer, !tabber.dataset.activation, tabber.dataset.url);
  });
  updateTabberWithUrlChange();
})();