feat: replace JustGiving image buttons with donate modal on homepage
- Add vanilla JS donate modal with one-off/monthly toggle, amount chips, custom input, impact text, Gift Aid checkbox, and JustGiving redirect - Replace hero and yellow CTA bar JustGiving image links with styled Donate buttons (heart icon) that open the modal - Modal closes on overlay click or Escape key Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
455abb9411
commit
23c9bacc36
1 changed files with 457 additions and 20 deletions
|
|
@ -149,6 +149,223 @@ const ctaCards = [
|
||||||
.scroll-indicator { display: none; }
|
.scroll-indicator { display: none; }
|
||||||
.hero-donate { display: none; }
|
.hero-donate { display: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Donate modal ── */
|
||||||
|
.donate-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0,0,0,0.62);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
z-index: 1000;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.donate-overlay.open { display: flex; }
|
||||||
|
.donate-modal {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 14px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 24px 80px rgba(0,0,0,0.45);
|
||||||
|
}
|
||||||
|
.donate-header {
|
||||||
|
background: #1e2e1a;
|
||||||
|
padding: 22px 24px 18px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.donate-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 14px; right: 16px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: rgba(246,241,232,0.6);
|
||||||
|
font-size: 22px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 4px;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.donate-close:hover { color: #F6F1E8; }
|
||||||
|
.donate-body { padding: 24px; }
|
||||||
|
.donate-toggle {
|
||||||
|
display: flex;
|
||||||
|
background: #f0f0ee;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 3px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
.donate-toggle-btn {
|
||||||
|
flex: 1;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 8px 0;
|
||||||
|
font-family: 'Public Sans', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #555;
|
||||||
|
transition: background 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
.donate-toggle-btn.active {
|
||||||
|
background: #1e2e1a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.donate-chips {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.donate-chip {
|
||||||
|
border: 2px solid #e0e0de;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px 4px;
|
||||||
|
font-family: 'Merriweather', serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #1e2e1a;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
transition: border-color 0.15s, background 0.15s;
|
||||||
|
}
|
||||||
|
.donate-chip:hover { border-color: #7DA371; }
|
||||||
|
.donate-chip.selected { border-color: #7DA371; background: #edf4ec; }
|
||||||
|
.donate-custom-wrap {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.donate-custom-prefix {
|
||||||
|
position: absolute;
|
||||||
|
left: 14px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-family: 'Merriweather', serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1e2e1a;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.donate-custom-input {
|
||||||
|
width: 100%;
|
||||||
|
border: 2px solid #e0e0de;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 11px 14px 11px 28px;
|
||||||
|
font-family: 'Merriweather', serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1e2e1a;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.donate-custom-input:focus,
|
||||||
|
.donate-custom-input.selected { border-color: #7DA371; }
|
||||||
|
.donate-impact {
|
||||||
|
font-family: 'Public Sans', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #5a7a56;
|
||||||
|
min-height: 20px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.donate-giftaid {
|
||||||
|
background: #f9f7f0;
|
||||||
|
border: 1px solid #e8e4d4;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.donate-giftaid input[type=checkbox] {
|
||||||
|
margin-top: 2px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
accent-color: #7DA371;
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.donate-giftaid label {
|
||||||
|
font-family: 'Public Sans', sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #3a3a2e;
|
||||||
|
line-height: 1.5;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.donate-giftaid label strong { color: #1e2e1a; }
|
||||||
|
.donate-proceed-btn {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
background: #7DA371;
|
||||||
|
color: #1e2e1a;
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 14px 0;
|
||||||
|
font-family: 'Public Sans', sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 15px;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.donate-proceed-btn:hover { opacity: 0.88; }
|
||||||
|
.donate-step-pay { display: none; }
|
||||||
|
.donate-summary {
|
||||||
|
font-family: 'Merriweather', serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #1e2e1a;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.donate-summary-sub {
|
||||||
|
font-family: 'Public Sans', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.donate-jg-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
background: #1e2e1a;
|
||||||
|
color: #F6F1E8;
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 15px 0;
|
||||||
|
font-family: 'Public Sans', sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.donate-jg-btn:hover { opacity: 0.82; }
|
||||||
|
.donate-back-link {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Public Sans', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #888;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.donate-back-link:hover { color: #555; }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- Fixed nav wrapper — transparent until scrolled -->
|
<!-- Fixed nav wrapper — transparent until scrolled -->
|
||||||
|
|
@ -206,20 +423,16 @@ const ctaCards = [
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Donate button (absolute, hidden on mobile) -->
|
<!-- Donate button (absolute, hidden on mobile) -->
|
||||||
<a
|
<button
|
||||||
href="https://www.justgiving.com/charity/highlandgrouprda"
|
onclick="openDonateModal()"
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
class="absolute hero-donate"
|
class="absolute hero-donate"
|
||||||
style="bottom: 40px; right: 28px;"
|
style="bottom: 40px; right: 28px; display: flex; align-items: center; gap: 9px; background: #7DA371; color: #1e2e1a; border: none; border-radius: 999px; padding: 12px 22px 12px 18px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.05em; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,0.32); transition: opacity 0.2s;"
|
||||||
|
onmouseover="this.style.opacity='0.88'" onmouseout="this.style.opacity='1'"
|
||||||
|
aria-label="Open donation form"
|
||||||
>
|
>
|
||||||
<img
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
||||||
src="/Button.webp"
|
Donate
|
||||||
alt="Donate via JustGiving"
|
</button>
|
||||||
style="height: 46px; object-fit: contain; display: block;"
|
|
||||||
loading="eager"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<!-- Scroll indicator (absolute, hidden on mobile) -->
|
<!-- Scroll indicator (absolute, hidden on mobile) -->
|
||||||
<div
|
<div
|
||||||
|
|
@ -262,14 +475,15 @@ const ctaCards = [
|
||||||
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: #000; line-height: 1.4; max-width: 700px;">
|
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: #000; line-height: 1.4; max-width: 700px;">
|
||||||
Find out more about <a href="/about" style="text-decoration: underline; color: inherit;">who we are</a>, what we do, and <a href="/support-us" style="text-decoration: underline; color: inherit;">how you can support us</a> to help make a difference.
|
Find out more about <a href="/about" style="text-decoration: underline; color: inherit;">who we are</a>, what we do, and <a href="/support-us" style="text-decoration: underline; color: inherit;">how you can support us</a> to help make a difference.
|
||||||
</p>
|
</p>
|
||||||
<a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
|
<button
|
||||||
<img
|
onclick="openDonateModal()"
|
||||||
src="/Button.webp"
|
style="display: flex; align-items: center; gap: 9px; background: #1e2e1a; color: #F6F1E8; border: none; border-radius: 999px; padding: 13px 24px 13px 20px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.05em; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity 0.2s;"
|
||||||
alt="Donate via JustGiving"
|
onmouseover="this.style.opacity='0.82'" onmouseout="this.style.opacity='1'"
|
||||||
style="height: 46px; object-fit: contain; display: block;"
|
aria-label="Open donation form"
|
||||||
loading="lazy"
|
>
|
||||||
/>
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
||||||
</a>
|
Donate
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -390,6 +604,87 @@ const ctaCards = [
|
||||||
<SiteFooter fullBleedOnMobile />
|
<SiteFooter fullBleedOnMobile />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ── DONATE MODAL ── -->
|
||||||
|
<div id="donate-overlay" class="donate-overlay" role="dialog" aria-modal="true" aria-label="Donation form">
|
||||||
|
<div class="donate-modal">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="donate-header">
|
||||||
|
<button class="donate-close" onclick="closeDonateModal()" aria-label="Close">✕</button>
|
||||||
|
<p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:#7DA371;margin-bottom:6px;">Highland Group RDA</p>
|
||||||
|
<p style="font-family:'Merriweather',serif;font-weight:700;font-size:18px;color:#F6F1E8;line-height:1.25;margin:0;">Make a donation</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 1: Choose amount -->
|
||||||
|
<div class="donate-body" id="donate-step-amount">
|
||||||
|
<!-- One-off / Monthly toggle -->
|
||||||
|
<div class="donate-toggle" role="group" aria-label="Donation frequency">
|
||||||
|
<button class="donate-toggle-btn active" id="donate-btn-once" onclick="setFreq('once')">One-off</button>
|
||||||
|
<button class="donate-toggle-btn" id="donate-btn-monthly" onclick="setFreq('monthly')">Monthly</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Amount chips -->
|
||||||
|
<div class="donate-chips" id="donate-chips" role="group" aria-label="Donation amount">
|
||||||
|
<!-- filled by JS -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Custom amount -->
|
||||||
|
<div class="donate-custom-wrap">
|
||||||
|
<span class="donate-custom-prefix">£</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="donate-custom"
|
||||||
|
class="donate-custom-input"
|
||||||
|
placeholder="Other amount"
|
||||||
|
min="1"
|
||||||
|
step="1"
|
||||||
|
aria-label="Custom donation amount in pounds"
|
||||||
|
oninput="onCustomInput()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Impact text -->
|
||||||
|
<p class="donate-impact" id="donate-impact" aria-live="polite"></p>
|
||||||
|
|
||||||
|
<!-- Gift Aid -->
|
||||||
|
<div class="donate-giftaid">
|
||||||
|
<input type="checkbox" id="donate-giftaid-cb" />
|
||||||
|
<label for="donate-giftaid-cb">
|
||||||
|
<strong>Boost your donation by 25% at no extra cost.</strong><br>
|
||||||
|
I am a UK taxpayer and I understand that if I pay less Income Tax and/or Capital Gains Tax than the amount of Gift Aid claimed on all my donations, it is my responsibility to pay any difference.
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Proceed button -->
|
||||||
|
<button class="donate-proceed-btn" id="donate-proceed" onclick="proceedToCheckout()">
|
||||||
|
Continue →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 2: Checkout / JustGiving redirect -->
|
||||||
|
<div class="donate-body donate-step-pay" id="donate-step-pay">
|
||||||
|
<div style="text-align:center;margin-bottom:28px;">
|
||||||
|
<div style="width:56px;height:56px;background:#edf4ec;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;">
|
||||||
|
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#7DA371" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="donate-summary" id="donate-summary-amount"></p>
|
||||||
|
<p class="donate-summary-sub" id="donate-summary-sub"></p>
|
||||||
|
<a
|
||||||
|
id="donate-jg-link"
|
||||||
|
href="https://www.justgiving.com/charity/highlandgrouprda"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
class="donate-jg-btn"
|
||||||
|
onclick="closeDonateModal()"
|
||||||
|
>
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
||||||
|
Donate via JustGiving
|
||||||
|
</a>
|
||||||
|
<span class="donate-back-link" onclick="backToAmount()">← Change amount</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const nav = document.getElementById("site-nav");
|
const nav = document.getElementById("site-nav");
|
||||||
if (nav) {
|
if (nav) {
|
||||||
|
|
@ -397,5 +692,147 @@ const ctaCards = [
|
||||||
nav.classList.toggle("scrolled", window.scrollY > 40);
|
nav.classList.toggle("scrolled", window.scrollY > 40);
|
||||||
}, { passive: true });
|
}, { passive: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── Donate modal ──
|
||||||
|
const PRESETS = {
|
||||||
|
once: [
|
||||||
|
{ amt: 10, impact: "covers feed for one session" },
|
||||||
|
{ amt: 25, impact: "helps with grooming supplies" },
|
||||||
|
{ amt: 50, impact: "contributes towards farrier costs" },
|
||||||
|
{ amt: 100, impact: "supports a month of hay" },
|
||||||
|
],
|
||||||
|
monthly: [
|
||||||
|
{ amt: 5, impact: "provides a weekly treat for a pony" },
|
||||||
|
{ amt: 10, impact: "covers monthly grooming supplies" },
|
||||||
|
{ amt: 25, impact: "contributes to monthly vet care" },
|
||||||
|
{ amt: 50, impact: "supports monthly farrier visits" },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
let donateFreq = "once";
|
||||||
|
let donateSelected = 25; // default chip
|
||||||
|
let donateCustomActive = false;
|
||||||
|
|
||||||
|
function renderChips() {
|
||||||
|
const container = document.getElementById("donate-chips");
|
||||||
|
if (!container) return;
|
||||||
|
container.innerHTML = "";
|
||||||
|
PRESETS[donateFreq].forEach(({ amt }) => {
|
||||||
|
const btn = document.createElement("button");
|
||||||
|
btn.className = "donate-chip" + (!donateCustomActive && donateSelected === amt ? " selected" : "");
|
||||||
|
btn.textContent = "£" + amt;
|
||||||
|
btn.setAttribute("aria-pressed", String(!donateCustomActive && donateSelected === amt));
|
||||||
|
btn.onclick = () => selectChip(amt);
|
||||||
|
container.appendChild(btn);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getImpact() {
|
||||||
|
if (donateCustomActive) return "";
|
||||||
|
const preset = PRESETS[donateFreq].find(p => p.amt === donateSelected);
|
||||||
|
return preset ? "✦ £" + preset.amt + " " + preset.impact + "." : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateImpact() {
|
||||||
|
const el = document.getElementById("donate-impact");
|
||||||
|
if (el) el.textContent = getImpact();
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectChip(amt) {
|
||||||
|
donateSelected = amt;
|
||||||
|
donateCustomActive = false;
|
||||||
|
const input = document.getElementById("donate-custom");
|
||||||
|
if (input) { input.value = ""; input.classList.remove("selected"); }
|
||||||
|
renderChips();
|
||||||
|
updateImpact();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCustomInput() {
|
||||||
|
const input = document.getElementById("donate-custom");
|
||||||
|
if (!input) return;
|
||||||
|
donateCustomActive = !!input.value;
|
||||||
|
if (donateCustomActive) input.classList.add("selected");
|
||||||
|
else input.classList.remove("selected");
|
||||||
|
renderChips();
|
||||||
|
updateImpact();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setFreq(freq) {
|
||||||
|
donateFreq = freq;
|
||||||
|
document.getElementById("donate-btn-once").classList.toggle("active", freq === "once");
|
||||||
|
document.getElementById("donate-btn-monthly").classList.toggle("active", freq === "monthly");
|
||||||
|
// keep current selected amount if it exists in new presets, else default to first
|
||||||
|
const exists = PRESETS[freq].some(p => p.amt === donateSelected);
|
||||||
|
if (!exists) donateSelected = PRESETS[freq][1].amt;
|
||||||
|
donateCustomActive = false;
|
||||||
|
const input = document.getElementById("donate-custom");
|
||||||
|
if (input) { input.value = ""; input.classList.remove("selected"); }
|
||||||
|
renderChips();
|
||||||
|
updateImpact();
|
||||||
|
}
|
||||||
|
|
||||||
|
function proceedToCheckout() {
|
||||||
|
const customInput = document.getElementById("donate-custom");
|
||||||
|
const customVal = parseFloat(customInput?.value);
|
||||||
|
const amount = donateCustomActive && customVal > 0 ? customVal : donateSelected;
|
||||||
|
const giftAid = document.getElementById("donate-giftaid-cb")?.checked;
|
||||||
|
const freqLabel = donateFreq === "monthly" ? "per month" : "one-off gift";
|
||||||
|
|
||||||
|
const summaryAmt = document.getElementById("donate-summary-amount");
|
||||||
|
const summarySub = document.getElementById("donate-summary-sub");
|
||||||
|
if (summaryAmt) summaryAmt.textContent = "£" + (Number.isInteger(amount) ? amount : amount.toFixed(2));
|
||||||
|
if (summarySub) {
|
||||||
|
summarySub.textContent = freqLabel.charAt(0).toUpperCase() + freqLabel.slice(1)
|
||||||
|
+ (giftAid ? " · Gift Aid selected" : "")
|
||||||
|
+ "\nYou'll complete your payment securely via JustGiving.";
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("donate-step-amount").style.display = "none";
|
||||||
|
document.getElementById("donate-step-pay").style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
|
function backToAmount() {
|
||||||
|
document.getElementById("donate-step-pay").style.display = "none";
|
||||||
|
document.getElementById("donate-step-amount").style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
|
function openDonateModal() {
|
||||||
|
renderChips();
|
||||||
|
updateImpact();
|
||||||
|
// reset to amount step
|
||||||
|
const stepAmt = document.getElementById("donate-step-amount");
|
||||||
|
const stepPay = document.getElementById("donate-step-pay");
|
||||||
|
if (stepAmt) stepAmt.style.display = "block";
|
||||||
|
if (stepPay) stepPay.style.display = "none";
|
||||||
|
|
||||||
|
const overlay = document.getElementById("donate-overlay");
|
||||||
|
if (overlay) {
|
||||||
|
overlay.classList.add("open");
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDonateModal() {
|
||||||
|
const overlay = document.getElementById("donate-overlay");
|
||||||
|
if (overlay) overlay.classList.remove("open");
|
||||||
|
document.body.style.overflow = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close on overlay click
|
||||||
|
document.getElementById("donate-overlay")?.addEventListener("click", function(e) {
|
||||||
|
if (e.target === this) closeDonateModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close on Escape
|
||||||
|
document.addEventListener("keydown", function(e) {
|
||||||
|
if (e.key === "Escape") closeDonateModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Expose globally so onclick attributes work
|
||||||
|
Object.assign(window, { openDonateModal, closeDonateModal, setFreq, selectChip, onCustomInput, proceedToCheckout, backToAmount });
|
||||||
|
|
||||||
|
// Initial render
|
||||||
|
renderChips();
|
||||||
|
updateImpact();
|
||||||
</script>
|
</script>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue