Re-implement saving instances

Also implements saving of multiple instances, which
closes https://github.com/kytta/share2fedi/issues/29
This commit is contained in:
Nikita Karamov 2023-03-17 23:52:42 +01:00
parent f2ba7d5324
commit 3de15b1b4c
No known key found for this signature in database
GPG key ID: 41D6F71EE78E77CD
3 changed files with 74 additions and 34 deletions

View file

@ -27,9 +27,7 @@
*/
const LOCAL_STORAGE_KEY = "recentInstances";
const RECENT_INSTANCES_SIZE = 5;
const $form = document.querySelector("#js-s2f-form");
const $instance = document.querySelector("#instance");
/**
@ -54,31 +52,6 @@ function getRecentInstances() {
return JSON.parse(storedValue);
}
function rememberInstance(instance) {
const recentInstances = getRecentInstances();
const index = recentInstances.indexOf(instance);
if (index >= 0) {
recentInstances.splice(index, 1);
}
recentInstances.unshift(instance);
recentInstances.length = RECENT_INSTANCES_SIZE;
window.localStorage.setItem(
LOCAL_STORAGE_KEY,
JSON.stringify(recentInstances),
);
}
function onFormSubmit(event) {
const formData = new FormData(event.target);
if (formData.get("remember")) {
rememberInstance(formData.get("instance"));
}
return true;
}
let prefillInstance = getRecentInstances()[0];
const URLParameters = window.location.search.slice(1).split("&");
@ -96,5 +69,3 @@ for (const URLParameter of URLParameters) {
if (prefillInstance != undefined) {
$instance.value = normalizeUrl(prefillInstance);
}
$form.addEventListener("submit", onFormSubmit);

View file

@ -12,7 +12,7 @@ try {
<datalist id="instanceDatalist">
{instances.map((instance) => <option value={instance} />)}
</datalist>
<label>
<label id="s2f-instanceContainer">
Mastodon, Pleroma, or GNU Social instance
<div class="instance-input">
<span id="https-label">https://</span>
@ -38,12 +38,19 @@ try {
</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;
@ -61,10 +68,13 @@ try {
</style>
<script>
import { extractHost } from "../util";
import { extractHost, normalizeURL } from "../util";
const LOCAL_STORAGE_KEY = "recentInstances";
const RECENT_INSTANCES_SIZE = 5;
const $form = document.querySelector("#js-s2f-form");
const $instanceContainer = document.querySelector("#s2f-instanceContainer");
const $instance: HTMLInputElement = document.querySelector("#instance");
const getSavedInstances = (): Array<string> => {
@ -76,8 +86,51 @@ try {
return JSON.parse(storageValue);
};
const savedInstance = getSavedInstances()[0];
if (savedInstance) {
$instance.value = extractHost(savedInstance);
const savedInstances = getSavedInstances();
if (savedInstances.length > 0) {
$instanceContainer.append(
"Previously used: ",
...savedInstances
.flatMap((instance, index) => {
if (!instance) {
return [];
}
const host = extractHost(instance);
if (index == 0) {
$instance.value = host;
}
const element = document.createElement("span");
element.textContent = host;
element.classList.add("previously-used");
element.addEventListener("click", () => {
$instance.value = host;
});
return [element, ", "];
})
.slice(0, -1),
);
}
$form.addEventListener("submit", (event) => {
const formData = new FormData(event.target as HTMLFormElement);
if (formData.get("remember")) {
const instance = normalizeURL(formData.get("instance") as string);
const index = savedInstances.indexOf(instance);
if (index >= 0) {
savedInstances.splice(index, 1);
}
savedInstances.unshift(instance);
savedInstances.length = RECENT_INSTANCES_SIZE;
window.localStorage.setItem(
LOCAL_STORAGE_KEY,
JSON.stringify(savedInstances),
);
}
return true;
});
</script>

View file

@ -1,3 +1,19 @@
/**
* Adds missing "https://" and ending slash to the URL
*
* @param url URL to normalize
* @return normalized URL
*/
export const normalizeURL = (url: string): string => {
if (!(url.startsWith("https://") || url.startsWith("http://"))) {
url = "https://" + url;
}
if (!url.endsWith("/")) {
url += "/";
}
return url;
};
export const extractHost = (url: string): string => {
if (!(url.startsWith("https://") || url.startsWith("http://"))) {
url = "https://" + url;