Simplify HTML

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

View file

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

View file

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