mirror of
https://github.com/wukko/cobalt.git
synced 2025-02-28 05:58:48 +01:00
447 lines
13 KiB
Svelte
447 lines
13 KiB
Svelte
<script lang="ts">
|
|
import settings from "$lib/state/settings";
|
|
|
|
import { donate } from "$lib/env";
|
|
import { device } from "$lib/device";
|
|
import { t } from "$lib/i18n/translations";
|
|
|
|
import DonateCardContainer from "$components/donate/DonateCardContainer.svelte";
|
|
import DonationOption from "$components/donate/DonationOption.svelte";
|
|
|
|
import IconCoin from "@tabler/icons-svelte/IconCoin.svelte";
|
|
import IconCalendarRepeat from "@tabler/icons-svelte/IconCalendarRepeat.svelte";
|
|
import IconCup from "@tabler/icons-svelte/IconCup.svelte";
|
|
import IconPizza from "@tabler/icons-svelte/IconPizza.svelte";
|
|
import IconToolsKitchen2 from "@tabler/icons-svelte/IconToolsKitchen2.svelte";
|
|
import IconPaperBag from "@tabler/icons-svelte/IconPaperBag.svelte";
|
|
import IconSoup from "@tabler/icons-svelte/IconSoup.svelte";
|
|
import IconFridge from "@tabler/icons-svelte/IconFridge.svelte";
|
|
import IconArmchair from "@tabler/icons-svelte/IconArmchair.svelte";
|
|
import IconDeviceLaptop from "@tabler/icons-svelte/IconDeviceLaptop.svelte";
|
|
import IconApple from "@tabler/icons-svelte/IconApple.svelte";
|
|
import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
|
|
import IconWorldWww from "@tabler/icons-svelte/IconWorldWww.svelte";
|
|
import IconBath from "@tabler/icons-svelte/IconBath.svelte";
|
|
|
|
import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
|
|
import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
|
|
|
|
let donateList: HTMLElement;
|
|
|
|
let customInput: HTMLInputElement;
|
|
let customInputValue: number | null;
|
|
let customFocused = false;
|
|
|
|
const PRESET_DONATION_AMOUNTS = {
|
|
5: IconCup,
|
|
10: IconPizza,
|
|
15: IconSoup,
|
|
30: IconToolsKitchen2,
|
|
50: IconPaperBag,
|
|
100: IconWorldWww,
|
|
200: IconFridge,
|
|
500: IconArmchair,
|
|
1599: IconDeviceLaptop,
|
|
4900: IconApple,
|
|
7398: IconDeviceLaptop,
|
|
8629: IconPhoto,
|
|
9433: IconBath,
|
|
};
|
|
|
|
type Processor = "stripe" | "liberapay";
|
|
let processor: Processor = "stripe";
|
|
|
|
const donationMethods: Record<Processor, (_: number) => string> = {
|
|
stripe: (amount: number) => {
|
|
const url = new URL(donate.stripe);
|
|
url.searchParams.set("__prefilled_amount", amount.toString());
|
|
return url.toString();
|
|
},
|
|
liberapay: (amount: number) => {
|
|
const url = new URL(donate.liberapay);
|
|
url.searchParams.set("currency", "USD");
|
|
url.searchParams.set("period", "monthly");
|
|
url.searchParams.set("amount", (amount / 100).toString());
|
|
return url.toString();
|
|
},
|
|
};
|
|
|
|
const sendCustom = () => {
|
|
if (!customInput.reportValidity()) {
|
|
return;
|
|
}
|
|
|
|
const amount = Math.floor(Number(customInputValue) * 100);
|
|
return window.open(donationMethods[processor](amount), "_blank");
|
|
};
|
|
|
|
const scrollBehavior = $settings.appearance.reduceMotion
|
|
? "instant"
|
|
: "smooth";
|
|
|
|
$: showLeftScroll = false;
|
|
$: showRightScroll = true;
|
|
|
|
const scroll = (direction: "left" | "right") => {
|
|
const currentPos = donateList.scrollLeft;
|
|
const maxPos = donateList.scrollWidth - donateList.getBoundingClientRect().width;
|
|
const newPos = direction === "left" ? currentPos - 150 : currentPos + 150;
|
|
|
|
donateList.scroll({
|
|
left: newPos,
|
|
behavior: scrollBehavior,
|
|
});
|
|
|
|
setTimeout(() => {
|
|
showLeftScroll = newPos > 0;
|
|
showRightScroll = newPos < maxPos && newPos !== maxPos;
|
|
}, 150)
|
|
};
|
|
</script>
|
|
|
|
<DonateCardContainer id="donation-box">
|
|
<div id="donation-types" role="tablist" aria-orientation="horizontal">
|
|
<button
|
|
id="donation-type-once"
|
|
class="donation-type"
|
|
on:click={() => (processor = "stripe")}
|
|
class:selected={processor === "stripe"}
|
|
aria-selected={processor === "stripe"}
|
|
role="tab"
|
|
>
|
|
<div class="donation-type-icon"><IconCoin /></div>
|
|
<div class="donation-type-text">
|
|
<div class="donate-card-title">{$t("donate.card.once")}</div>
|
|
<div class="donate-card-subtitle">
|
|
{$t("donate.card.processor", { value: "stripe" })}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
id="donation-type-recurring"
|
|
class="donation-type"
|
|
on:click={() => (processor = "liberapay")}
|
|
class:selected={processor === "liberapay"}
|
|
aria-selected={processor === "liberapay"}
|
|
role="tab"
|
|
>
|
|
<div class="donation-type-icon"><IconCalendarRepeat /></div>
|
|
<div class="donation-type-text">
|
|
<div class="donate-card-title">{$t("donate.card.recurring")}</div>
|
|
<div class="donate-card-subtitle">
|
|
{$t("donate.card.processor", { value: "liberapay" })}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
id="donation-options-container"
|
|
class:mask-both={!device.is.mobile && showLeftScroll && showRightScroll}
|
|
class:mask-left={!device.is.mobile && showLeftScroll && !showRightScroll}
|
|
class:mask-right={!device.is.mobile && showRightScroll && !showLeftScroll}
|
|
>
|
|
{#if !device.is.mobile}
|
|
<div id="donation-options-scroll" aria-hidden="true">
|
|
<button
|
|
class="scroll-button left"
|
|
class:hidden={!showLeftScroll}
|
|
on:click={() => {
|
|
scroll("left");
|
|
}}
|
|
>
|
|
<IconArrowLeft />
|
|
</button>
|
|
<button
|
|
class="scroll-button right"
|
|
class:hidden={!showRightScroll}
|
|
on:click={() => {
|
|
scroll("right");
|
|
}}
|
|
>
|
|
<IconArrowRight />
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
<div
|
|
id="donation-options"
|
|
bind:this={donateList}
|
|
on:wheel={() => {
|
|
const currentPos = donateList.scrollLeft;
|
|
const maxPos = donateList.scrollWidth - donateList.getBoundingClientRect().width - 5;
|
|
showLeftScroll = currentPos > 0;
|
|
showRightScroll = currentPos < maxPos && currentPos !== maxPos;
|
|
}}
|
|
>
|
|
{#each Object.entries(PRESET_DONATION_AMOUNTS) as [amount, icon]}
|
|
<DonationOption
|
|
price={+amount}
|
|
desc={$t(`donate.card.option.${amount}`)}
|
|
href={donationMethods[processor](+amount * 100)}
|
|
{icon}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="donation-custom">
|
|
<div id="input-container" class:focused={customFocused}>
|
|
{#if customInputValue || customInput?.validity.badInput}
|
|
<span id="input-dollar-sign">$</span>
|
|
{/if}
|
|
|
|
<input
|
|
id="donation-custom-input"
|
|
type="number"
|
|
min="2"
|
|
max="10000"
|
|
step=".01"
|
|
required
|
|
placeholder={$t("donate.card.custom")}
|
|
bind:this={customInput}
|
|
bind:value={customInputValue}
|
|
on:input={() => (customFocused = true)}
|
|
on:focus={() => (customFocused = true)}
|
|
on:blur={() => (customFocused = false)}
|
|
on:keydown={(e) => e.key === "Enter" && sendCustom()}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
id="donation-custom-submit"
|
|
on:click={sendCustom}
|
|
aria-label={$t("donate.card.custom.submit")}
|
|
type="submit"
|
|
>
|
|
<IconArrowRight />
|
|
</button>
|
|
</div>
|
|
</DonateCardContainer>
|
|
|
|
<style>
|
|
:global(#donation-box) {
|
|
min-width: 300px;
|
|
padding: var(--donate-card-main-padding) 0;
|
|
}
|
|
|
|
#donation-types,
|
|
#donation-options,
|
|
#donation-custom {
|
|
padding: 0 var(--donate-card-main-padding);
|
|
}
|
|
|
|
#donation-types {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: calc(var(--donate-card-main-padding) / 2);
|
|
overflow: scroll;
|
|
}
|
|
|
|
.donation-type {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
gap: 2px;
|
|
}
|
|
|
|
.donation-type-icon {
|
|
display: flex;
|
|
}
|
|
|
|
.donation-type-icon :global(svg) {
|
|
width: 28px;
|
|
height: 28px;
|
|
stroke-width: 1.8px;
|
|
}
|
|
|
|
.donation-type-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#donation-options {
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
gap: 6px;
|
|
mask-image: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 1) 3%,
|
|
rgba(0, 0, 0, 1) 50%,
|
|
rgba(0, 0, 0, 1) 97%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
}
|
|
|
|
#donation-custom {
|
|
display: flex;
|
|
gap: 6px;
|
|
overflow: scroll;
|
|
}
|
|
|
|
#input-container {
|
|
padding: 0 18px;
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
color: var(--white);
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
#input-dollar-sign {
|
|
animation: grow-in 0.05s linear;
|
|
display: block;
|
|
}
|
|
|
|
@keyframes grow-in {
|
|
from {
|
|
font-size: 0;
|
|
}
|
|
to {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
#input-container,
|
|
#donation-custom-input {
|
|
font-size: 13px;
|
|
}
|
|
|
|
#donation-custom-input {
|
|
flex: 1;
|
|
background-color: transparent;
|
|
color: var(--white);
|
|
border: none;
|
|
padding-block: 0;
|
|
padding-inline: 0;
|
|
padding: 12px 0;
|
|
appearance: textfield;
|
|
}
|
|
|
|
#donation-custom-input::placeholder {
|
|
color: var(--white);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#donation-custom-input:focus-visible {
|
|
box-shadow: unset !important;
|
|
}
|
|
|
|
#input-container.focused {
|
|
box-shadow: 0 0 0 2px var(--white) inset;
|
|
}
|
|
|
|
#donation-custom-submit {
|
|
color: var(--white);
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
aspect-ratio: 1/1;
|
|
padding: 0px 10px;
|
|
}
|
|
|
|
#donation-custom-submit :global(svg) {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
#donation-custom-input::-webkit-outer-spin-button,
|
|
#donation-custom-input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
#donation-options-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(var(--donate-card-main-padding) / 2);
|
|
position: relative;
|
|
}
|
|
|
|
#donation-options-scroll {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 3;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.scroll-button {
|
|
pointer-events: all;
|
|
color: white;
|
|
padding: 0 16px;
|
|
background-color: transparent;
|
|
height: 100%;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
#donation-options-container:hover #donation-options-scroll {
|
|
opacity: 1;
|
|
}
|
|
|
|
.scroll-button.hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
#donation-options-container.mask-both:hover #donation-options {
|
|
mask-image: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 1) 20%,
|
|
rgba(0, 0, 0, 1) 50%,
|
|
rgba(0, 0, 0, 1) 80%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
}
|
|
|
|
#donation-options-container.mask-left:hover #donation-options {
|
|
mask-image: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 1) 20%,
|
|
rgba(0, 0, 0, 1) 50%,
|
|
rgba(0, 0, 0, 1) 97%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
}
|
|
|
|
#donation-options-container.mask-right:hover #donation-options {
|
|
mask-image: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 1) 3%,
|
|
rgba(0, 0, 0, 1) 50%,
|
|
rgba(0, 0, 0, 1) 80%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
}
|
|
|
|
@media screen and (max-width: 550px) {
|
|
:global(#donation-box) {
|
|
--donate-card-main-padding: 14px;
|
|
min-width: unset;
|
|
}
|
|
|
|
:global(#donation-box .donate-card-title) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
:global(#donation-box .donate-card-subtitle) {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.donation-type-icon :global(svg) {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
}
|
|
</style>
|