studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: improve donation tabs code organization

Browse source 
- Extract logic into dedicated functions for better readability
- Create handleDonationIntervalChange() as main click handler
- Separate concerns: updateLinkInterval, updateAmountDisplay, switchActiveTab
- Remove unnecessary comments in favor of clear function names
- Update footer to link script.js instead of donation-tabs.js

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown 2025-11-04 16:32:53 +01:00
parent cea38b4219
commit b44f353208
5 changed files with 65 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

59
assets/js/donation-tabs.js
View file

@ -1,59 +0,0 @@
/**
* Gestion des onglets de donation (ponctuel / mensuel)
*/
document.addEventListener('DOMContentLoaded', function() {
const tabButtons = document.querySelectorAll('.nav--tabs__btn');
const donationLinks = document.querySelectorAll('.btn--donation[data-amount]');
if (tabButtons.length === 0 || donationLinks.length === 0) return;
tabButtons.forEach(button => {
button.addEventListener('click', function() {
// Retirer la classe is-selected de tous les boutons
tabButtons.forEach(btn => btn.classList.remove('is-selected'));
// Ajouter la classe is-selected au bouton cliqué
this.classList.add('is-selected');
// Récupérer l'intervalle (o = ponctuel, m = mensuel)
const interval = this.getAttribute('data-interval');
// Mettre à jour les liens de donation
donationLinks.forEach(link => {
const amount = link.getAttribute('data-amount');
const currentHref = link.getAttribute('href');
// Remplacer l'intervalle dans l'URL
const newHref = currentHref.replace(
/default_interval=[om]/,
`default_interval=${interval}`
);
link.setAttribute('href', newHref);
// Mettre à jour le texte (ajouter /mois pour mensuel)
const amountSpan = link.querySelector('.amount-value');
const boldText = link.querySelector('.bold');
if (amountSpan && boldText) {
if (interval === 'm') {
boldText.innerHTML = `<span class="amount-value">${amount}</span>€/mois`;
} else {
boldText.innerHTML = `<span class="amount-value">${amount}</span>€`;
}
}
});
// Mettre à jour aussi le lien "Montant libre"
const freeAmountLink = document.querySelector('.btn--donation:not([data-amount])');
if (freeAmountLink) {
const currentHref = freeAmountLink.getAttribute('href');
const newHref = currentHref.replace(
/default_interval=[om]/,
`default_interval=${interval}`
);
freeAmountLink.setAttribute('href', newHref);
}
});
});
});

51
assets/js/script.js Normal file
View file

@ -0,0 +1,51 @@
function updateLinkInterval(link, interval) {
const currentHref = link.getAttribute("href");
const newHref = currentHref.replace(
/default_interval=[om]/,
`default_interval=${interval}`
);
link.setAttribute("href", newHref);
}
function updateAmountDisplay(link, amount, interval) {
const boldText = link.querySelector(".bold");
if (!boldText) return;
const suffix = interval === "m" ? "€/mois" : "€";
boldText.innerHTML = `<span class="amount-value">${amount}</span>${suffix}`;
}
function switchActiveTab(clickedButton, allButtons) {
allButtons.forEach((btn) => btn.classList.remove("is-selected"));
clickedButton.classList.add("is-selected");
}
function handleDonationIntervalChange(interval) {
const donationLinks = document.querySelectorAll(".btn--donation[data-amount]");
const freeAmountLink = document.querySelector(".btn--donation:not([data-amount])");
donationLinks.forEach((link) => {
const amount = link.getAttribute("data-amount");
updateLinkInterval(link, interval);
updateAmountDisplay(link, amount, interval);
});
if (freeAmountLink) {
updateLinkInterval(freeAmountLink, interval);
}
}
document.addEventListener("DOMContentLoaded", function () {
const tabButtons = document.querySelectorAll(".nav--tabs__btn");
const donationLinks = document.querySelectorAll(".btn--donation[data-amount]");
if (tabButtons.length === 0 || donationLinks.length === 0) return;
tabButtons.forEach((button) => {
button.addEventListener("click", function () {
const interval = this.getAttribute("data-interval");
switchActiveTab(this, tabButtons);
handleDonationIntervalChange(interval);
});
});
});