Re-implement saving instances
Also implements saving of multiple instances, which closes https://github.com/kytta/share2fedi/issues/29
This commit is contained in:
parent
f2ba7d5324
commit
3de15b1b4c
3 changed files with 74 additions and 34 deletions
29
lib/main.js
29
lib/main.js
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
16
src/util.ts
16
src/util.ts
|
@ -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;
|
||||
|
|
Reference in a new issue