MinPluto/share2fedi
Archived
1
Fork 0
Code Issues Pull requests Activity

Simplify HTML

Browse source
This commit is contained in:
Nikita Karamov 2023-08-26 16:45:29 +02:00
parent e84fed7952
commit 9dc393e529
No known key found for this signature in database
GPG key ID: 41D6F71EE78E77CD
2 changed files with 44 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/form.astro
View file

@ -9,7 +9,7 @@ const { prefilledText, prefilledInstance } = Astro.props;
--- ---
<form <form
id="js-s2f-form" id="form"
action="/api/share" action="/api/share"
method="POST" method="POST"
> >

86
src/components/instance-select.astro
View file

@ -7,8 +7,8 @@
const { prefilledInstance } = Astro.props; const { prefilledInstance } = Astro.props;
--- ---
<datalist id="instances"></datalist> <datalist id="popular-instances"></datalist>
<label id="s2f-instanceContainer"> <label>
Fediverse instance Fediverse instance
<div class="instance-input"> <div class="instance-input">
<span id="https-label">https://</span> <span id="https-label">https://</span>
@ -17,7 +17,7 @@ const { prefilledInstance } = Astro.props;
name="instance" name="instance"
id="instance" id="instance"
placeholder="mastodon.social" placeholder="mastodon.social"
list="instances" list="popular-instances"
required required
aria-describedby="https-label" aria-describedby="https-label"
value={prefilledInstance} value={prefilledInstance}
@ -25,6 +25,8 @@ const { prefilledInstance } = Astro.props;
</div> </div>
</label> </label>
<div id="saved-instances"></div>
<label for="remember"> <label for="remember">
<input <input
type="checkbox" type="checkbox"
@ -35,19 +37,12 @@ const { prefilledInstance } = Astro.props;
</label> </label>
<style lang="scss"> <style lang="scss">
:global(.previously-used) {
color: var(--s2f-accent-color-contrast);
cursor: pointer;
text-decoration: 1px solid underline currentColor;
}
.instance-input { .instance-input {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: stretch; align-items: stretch;
width: 100%; width: 100%;
margin-bottom: 1rem;
span { span {
display: flex; display: flex;
@ -62,68 +57,73 @@ const { prefilledInstance } = Astro.props;
width: 1%; width: 1%;
} }
} }
#saved-instances {
margin-bottom: 1rem;
:global(span) {
color: var(--s2f-accent-color-contrast);
cursor: pointer;
text-decoration: 1px solid underline currentColor;
}
}
</style> </style>
<script> <script>
import { getUrlDomain, normalizeURL } from "@scripts/util"; import { getUrlDomain, normalizeURL } from "@scripts/util";
import { $savedInstances, save } from "@stores/saved-instances";
import { $popularInstances } from "@stores/popular-instances"; import { $popularInstances } from "@stores/popular-instances";
import { $savedInstances, save } from "@stores/saved-instances";
const $form = document.querySelector("#js-s2f-form") as HTMLFormElement; const instanceElement = document.querySelector(
const $instanceContainer = document.querySelector( "#instance",
"#s2f-instanceContainer", ) as HTMLInputElement;
) as HTMLLabelElement; $savedInstances.subscribe((instances) => {
const $instance = document.querySelector("#instance") as HTMLInputElement; if (instances.size === 0) {
return;
}
const savedInstances: Set<string> = $savedInstances.get(); const savedInstances = [...instances];
if (!instanceElement.value) {
instanceElement.value = getUrlDomain(savedInstances[0] as string);
}
if (savedInstances.size > 0) { document.querySelector("#saved-instances")!.replaceChildren(
$instanceContainer.append(
"Previously used: ", "Previously used: ",
...[...savedInstances] ...savedInstances
.flatMap((instance: string, index: number) => { .flatMap((instance: string) => {
if (!instance) { if (!instance) {
return []; return [];
} }
const host = getUrlDomain(instance); const host = getUrlDomain(instance);
if (index == 0 && !$instance.value) {
$instance.value = host;
}
const element = document.createElement("span"); const element = document.createElement("span");
element.textContent = host; element.textContent = host;
element.classList.add("previously-used");
element.addEventListener("click", () => { element.addEventListener("click", () => {
$instance.value = host; instanceElement.value = host;
}); });
return [element, ", "]; return [element, ", "];
}) })
.slice(0, -1), .slice(0, -1),
); );
} });
$form.addEventListener("submit", (event) => { document.querySelector("#form")!.addEventListener("submit", (event) => {
const formData = new FormData(event.target as HTMLFormElement); const formData = new FormData(event.target as HTMLFormElement);
if (formData.get("remember")) { if (formData.get("remember")) {
const instance = normalizeURL(formData.get("instance") as string); save(normalizeURL(formData.get("instance") as string));
save(instance);
} }
return true; return true;
}); });
const instancesElement = document.querySelector("#instances"); $popularInstances.subscribe((instances) => {
if (instancesElement != undefined) { document.querySelector("#popular-instances")!.replaceChildren(
$popularInstances.subscribe((instances) => { ...instances.map((domain) => {
instancesElement.replaceChildren( const option = document.createElement("option");
...instances.map((domain) => { option.value = domain;
const option = document.createElement("option"); return option;
option.value = domain; }),
return option; );
}), });
);
});
}
</script> </script>