MinPluto/share2fedi
Archived
1
Fork 0
Code Issues Pull requests Activity

Use an input with associatied datalist instead of select, for instances list

Browse source
This commit is contained in:
Andy Balaam 2020-09-24 10:03:42 +01:00
parent 7850cece52
commit d4bf9e6456
2 changed files with 11 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/index.pug
View file

@ -28,12 +28,9 @@ html(lang="en")
label(for="text") Post text
textarea#text(rows=6, name="text", required)
section
datalist#instances_list
label(for="choose_instance") Choose your Mastodon instance
select#choose_instance()
option(value="") -- Choose an instance --
section
label(for="instance") Or type the instance URL
input#instance(type="url", name="instance", placeholder="https://", required)
input#instance(type="url", name="instance", placeholder="https://", list="instances_list", required)
section.remember
input#remember(type="checkbox", name="remember")

64
src/script/index.js
View file

@ -9,12 +9,12 @@ function normalizeUrl(url) {
}
const instance = document.getElementById('instance');
const choose_instance = document.getElementById('choose_instance');
const instances_list = document.getElementById('instances_list');
var prefillInstance = window.localStorage.getItem('mastodon_instance');
var paramPairs = window.location.search.substr(1).split('&');
var paramPairsLength = paramPairs.length;
for (var i = 0; i < paramPairsLength; i++) {
var paramPair = paramPairs[i].split('=');
if (paramPair[0] === 'text') {
@ -26,43 +26,7 @@ for (var i = 0; i < paramPairsLength; i++) {
delete i
delete paramPair
function add_instance(text, disabled, selected, value) {
const opt = document.createElement('option');
opt.innerText = text;
if (disabled) {
opt.setAttribute('disabled', true);
}
if (selected) {
opt.setAttribute('selected', true);
}
if (value !== undefined) {
opt.value = value;
}
choose_instance.appendChild(opt);
}
function add_loading_instance() {
add_instance("... loading ...", true);
}
function remove_loading_instance() {
const last_index = choose_instance.children.length - 1;
const last_entry = choose_instance.children[last_index];
if (last_entry.innerText === "... loading ...") {
last_entry.remove();
}
}
function parseUrl(url) {
const parser = document.createElement('a');
parser.href = url;
return parser;
}
function instances_loading_error() {
choose_instance.innerHTML = "";
add_instance("-- LOADING FAILED! --", true, false, "");
console.error('Failed to fetch servers list from joinmastodon.');
}
@ -74,32 +38,26 @@ function instances_loaded() {
const servers = JSON.parse(this.responseText);
const chosen_instance = choose_instance.value;
const chosen_instance = instance.value;
const domains = servers.map(obj => obj.domain);
if (domains.indexOf(chosen_instance) === -1) {
domains.push(chosen_instance);
}
domains.sort();
choose_instance.innerHTML = "";
add_instance("-- Choose an instance --", false, false, "")
for (const domain of domains) {
const selected = (domain === chosen_instance);
add_instance(domain, false, selected);
const opt = document.createElement('option');
opt.value = normalizeUrl(domain);
instances_list.appendChild(opt);
}
}
if (prefillInstance != null) {
const url = normalizeUrl(prefillInstance);
instance.value = url;
add_instance(parseUrl(url).hostname, false, true);
instance.value = normalizeUrl(prefillInstance);
}
choose_instance.addEventListener('focus', function (e) {
if (choose_instance.children.length < 3) {
remove_loading_instance();
add_loading_instance();
instance.addEventListener('focus', function (e) {
if (instances_list.children.length === 0) {
const req = new XMLHttpRequest();
req.addEventListener('load', instances_loaded);
req.addEventListener('error', instances_loading_error);
@ -108,10 +66,6 @@ choose_instance.addEventListener('focus', function (e) {
}
})
choose_instance.addEventListener('change', function (e) {
instance.value = normalizeUrl(choose_instance.value);
});
document
.getElementById('form')
.addEventListener('submit', function (e) {