diff --git a/src/index.pug b/src/index.pug index a85c79c..03d816c 100644 --- a/src/index.pug +++ b/src/index.pug @@ -28,7 +28,11 @@ html(lang="en") label(for="text") Post text textarea#text(rows=6, name="text", required) section - label(for="instance") Mastodon instance URL + 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) section.remember @@ -43,4 +47,4 @@ html(lang="en") section a(href="https://github.com/NickKaramoff/toot") This project on GitHub - script(src="index.js") \ No newline at end of file + script(src="index.js") diff --git a/src/script/index.js b/src/script/index.js index e0a697c..3387cba 100644 --- a/src/script/index.js +++ b/src/script/index.js @@ -8,6 +8,8 @@ function normalizeUrl(url) { return url; } +const instance = document.getElementById('instance'); +const choose_instance = document.getElementById('choose_instance'); var prefillInstance = window.localStorage.getItem('mastodon_instance'); var paramPairs = window.location.search.substr(1).split('&'); @@ -24,10 +26,58 @@ for (var i = 0; i < paramPairsLength; i++) { delete i delete paramPair -if (prefillInstance != null) { - document.getElementById('instance').value = normalizeUrl(prefillInstance); +function add_instance(text, disabled, selected) { + const opt = document.createElement('option'); + opt.innerText = text; + if (disabled) { + opt.setAttribute('disabled', true); + } + if (selected) { + opt.setAttribute('selected', true); + } + choose_instance.appendChild(opt); } +if (prefillInstance != null) { + const url = normalizeUrl(prefillInstance); + instance.value = url; + add_instance(url.slice(8, url.length - 1), false, true); +} + +choose_instance.addEventListener('focus', function (e) { + if (choose_instance.children.length < 3) { + if (choose_instance.children.length > 1) { + choose_instance.children[1].remove(); + } + add_instance("... loading ...", true); + fetch('https://api.joinmastodon.org/servers') + .then(response => { + if (!response.ok) { + throw new Error('Failure response from joinmastodon.'); + } + return response.json(); + }) + .then(servers => { + choose_instance.children[1].remove(); + const domains = servers.map(obj => obj.domain); + domains.sort(); + for (const domain of domains) { + add_instance(domain); + } + }) + .catch(error => { + choose_instance.children[1].remove(); + add_instance("--LOADING FAILED--", true); + console.error( + 'Failed to fetch servers list from joinmastodon.', error); + }); + } +}) + +choose_instance.addEventListener('change', function (e) { + instance.value = `https://${choose_instance.value}`; +}); + document .getElementById('form') .addEventListener('submit', function (e) { @@ -42,4 +92,4 @@ document var shareUrl = instance + "share?text=" + encodeURIComponent(text); window.open(shareUrl, '_blank', 'noopener,noreferrer') -}) + }) diff --git a/src/style/main.scss b/src/style/main.scss index 556d920..e3eeccd 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -100,6 +100,7 @@ main { transition: background-color 300ms ease, border 300ms ease; } + select, textarea, input[type=url] { color: inherit;