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 LOCAL_STORAGE_KEY = "recentInstances";
const RECENT_INSTANCES_SIZE = 5;
const $form = document.querySelector("#js-s2f-form");
const $instance = document.querySelector("#instance"); const $instance = document.querySelector("#instance");
/** /**
@ -54,31 +52,6 @@ function getRecentInstances() {
return JSON.parse(storedValue); 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]; let prefillInstance = getRecentInstances()[0];
const URLParameters = window.location.search.slice(1).split("&"); const URLParameters = window.location.search.slice(1).split("&");
@ -96,5 +69,3 @@ for (const URLParameter of URLParameters) {
if (prefillInstance != undefined) { if (prefillInstance != undefined) {
$instance.value = normalizeUrl(prefillInstance); $instance.value = normalizeUrl(prefillInstance);
} }
$form.addEventListener("submit", onFormSubmit);

View file

@ -12,7 +12,7 @@ try {
<datalist id="instanceDatalist"> <datalist id="instanceDatalist">
{instances.map((instance) => <option value={instance} />)} {instances.map((instance) => <option value={instance} />)}
</datalist> </datalist>
<label> <label id="s2f-instanceContainer">
Mastodon, Pleroma, or GNU Social instance Mastodon, Pleroma, or GNU Social instance
<div class="instance-input"> <div class="instance-input">
<span id="https-label">https://</span> <span id="https-label">https://</span>
@ -38,12 +38,19 @@ try {
</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;
@ -61,10 +68,13 @@ try {
</style> </style>
<script> <script>
import { extractHost } from "../util"; import { extractHost, normalizeURL } from "../util";
const LOCAL_STORAGE_KEY = "recentInstances"; 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 $instance: HTMLInputElement = document.querySelector("#instance");
const getSavedInstances = (): Array<string> => { const getSavedInstances = (): Array<string> => {
@ -76,8 +86,51 @@ try {
return JSON.parse(storageValue); return JSON.parse(storageValue);
}; };
const savedInstance = getSavedInstances()[0]; const savedInstances = getSavedInstances();
if (savedInstance) {
$instance.value = extractHost(savedInstance); 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> </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 => { export const extractHost = (url: string): string => {
if (!(url.startsWith("https://") || url.startsWith("http://"))) { if (!(url.startsWith("https://") || url.startsWith("http://"))) {
url = "https://" + url; url = "https://" + url;