mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-15 14:18:04 +08:00
Add a thanks banner to the donation page's flow
This commit is contained in:
@@ -1,11 +1,4 @@
|
||||
const statisticsRequest = fetch("https://graphite.art/donate/sponsorship-stats").then((response) => response.json());
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
setUpAmountPresets();
|
||||
showStatistics();
|
||||
});
|
||||
|
||||
function setUpAmountPresets() {
|
||||
const amountField = /** @type {HTMLInputElement | null} */ (document.querySelector("[data-donation-amount]"));
|
||||
const presetButtons = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll("[data-amount]"));
|
||||
const githubOneTime = /** @type {HTMLAnchorElement | null} */ (document.querySelector("[data-github-one-time]"));
|
||||
@@ -16,7 +9,8 @@ function setUpAmountPresets() {
|
||||
|
||||
if (!githubOneTime) return;
|
||||
|
||||
const amount = Number(amountField.value);
|
||||
// GitHub accepts only whole-dollar amounts
|
||||
const amount = Math.round(Number(amountField.value));
|
||||
const suffix = Number.isFinite(amount) && amount > 0 ? `&amount=${amount}` : "";
|
||||
githubOneTime.href = `https://github.com/sponsors/GraphiteEditor/sponsorships?frequency=one-time${suffix}`;
|
||||
};
|
||||
@@ -30,31 +24,4 @@ function setUpAmountPresets() {
|
||||
amountField.addEventListener("input", syncAmount);
|
||||
|
||||
syncAmount();
|
||||
}
|
||||
|
||||
async function showStatistics() {
|
||||
const element = /** @type {HTMLElement | null} */ (document.querySelector("[data-statistics]"));
|
||||
const recurringElement = /** @type {HTMLElement | null} */ (document.querySelector("[data-statistics-recurring]"));
|
||||
const membersElement = /** @type {HTMLElement | null} */ (document.querySelector("[data-statistics-members]"));
|
||||
const oneTimeElement = /** @type {HTMLElement | null} */ (document.querySelector("[data-statistics-one-time]"));
|
||||
const donorsElement = /** @type {HTMLElement | null} */ (document.querySelector("[data-statistics-donors]"));
|
||||
if (!element || !recurringElement || !membersElement || !oneTimeElement || !donorsElement) return;
|
||||
|
||||
try {
|
||||
const json = await statisticsRequest;
|
||||
if (!json || !json.recurring || !json.one_time_prior_12_month_sum) throw new Error();
|
||||
|
||||
const number = (/** @type {number} */ value) => Math.round(value).toLocaleString("en-US", { useGrouping: "min2" });
|
||||
const dollars = (/** @type {number} */ value) => `$${number(value)}`;
|
||||
|
||||
recurringElement.innerText = dollars(parseInt(json.recurring.cents) / 100);
|
||||
membersElement.innerText = number(json.recurring.count);
|
||||
oneTimeElement.innerText = dollars(parseInt(json.one_time_prior_12_month_sum.cents) / 100);
|
||||
donorsElement.innerText = number(json.one_time_prior_12_month_sum.count);
|
||||
|
||||
// Force repaint to work around Safari bug <https://bugs.webkit.org/show_bug.cgi?id=286403> (remove this and its data attribute when the bug is fixed and widely deployed)
|
||||
element.style.transform = "scale(1)";
|
||||
} catch {
|
||||
element.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user