MediaWiki:Script/Tabber.js : Différence entre versions
(Annulation des modifications 78304 de Dexter (discussion)) (Balise : Annuler) |
|||
Ligne 20 : | Ligne 20 : | ||
} | } | ||
− | function updateTabber( | + | function updateTabber(buttonContainer, textContainer, activation, changeUrl) { |
− | |||
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; | |
− | + | 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); | 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( | + | 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();
})();