141 lines
2.8 KiB
Plaintext
141 lines
2.8 KiB
Plaintext
---
|
|
/*!
|
|
* © 2023 Nikita Karamov
|
|
* Licensed under AGPL v3 or later
|
|
*/
|
|
|
|
const { prefilledInstance } = Astro.props;
|
|
---
|
|
|
|
<datalist id="popular-instances"></datalist>
|
|
<label data-translate="instance">
|
|
Fediverse instance
|
|
<div class="instance-input">
|
|
<span id="https-label">https://</span>
|
|
<input
|
|
type="text"
|
|
name="instance"
|
|
id="instance"
|
|
list="popular-instances"
|
|
required
|
|
aria-describedby="https-label"
|
|
value={prefilledInstance}
|
|
/>
|
|
</div>
|
|
</label>
|
|
|
|
<div
|
|
id="saved-instances"
|
|
data-translate="previouslyUsed"
|
|
>
|
|
Previously used:
|
|
<div></div>
|
|
</div>
|
|
|
|
<label
|
|
for="remember"
|
|
data-translate="rememberInstance"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id="remember"
|
|
name="remember"
|
|
/>
|
|
Remember instance on this device
|
|
</label>
|
|
|
|
<style lang="scss">
|
|
.instance-input {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
input[type="text"] {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
width: 1%;
|
|
}
|
|
}
|
|
|
|
#saved-instances {
|
|
margin-bottom: 1rem;
|
|
|
|
> div {
|
|
display: inline-block;
|
|
}
|
|
|
|
: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 { $popularInstances } from "@stores/popular-instances";
|
|
import { $savedInstances, save } from "@stores/saved-instances";
|
|
|
|
const instanceElement = document.querySelector(
|
|
"#instance",
|
|
) as HTMLInputElement;
|
|
$savedInstances.subscribe((instances) => {
|
|
if (instances.size === 0) {
|
|
return;
|
|
}
|
|
|
|
const savedInstances = [...instances];
|
|
if (!instanceElement.value) {
|
|
instanceElement.value = getUrlDomain(savedInstances[0] as string);
|
|
}
|
|
|
|
document.querySelector("#saved-instances>div")!.replaceChildren(
|
|
...savedInstances
|
|
.flatMap((instance: string) => {
|
|
if (!instance) {
|
|
return [];
|
|
}
|
|
|
|
const host = getUrlDomain(instance);
|
|
const element = document.createElement("span");
|
|
element.textContent = host;
|
|
element.addEventListener("click", () => {
|
|
instanceElement.value = host;
|
|
});
|
|
return [element, ", "];
|
|
})
|
|
.slice(0, -1),
|
|
);
|
|
});
|
|
|
|
document.querySelector("#form")!.addEventListener("submit", (event) => {
|
|
const formData = new FormData(event.target as HTMLFormElement);
|
|
|
|
if (formData.get("remember")) {
|
|
save(normalizeURL(formData.get("instance") as string));
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
$popularInstances.subscribe((instances) => {
|
|
document.querySelector("#popular-instances")!.replaceChildren(
|
|
...instances.map((domain) => {
|
|
const option = document.createElement("option");
|
|
option.value = domain;
|
|
return option;
|
|
}),
|
|
);
|
|
});
|
|
</script>
|