refactor: improve donation tabs code organization
- 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:
parent
cea38b4219
commit
b44f353208
5 changed files with 65 additions and 60 deletions
51
assets/js/script.js
Normal file
51
assets/js/script.js
Normal 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);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue