From d4bf9e6456e4ba7561cecfd6547015d46a923da8 Mon Sep 17 00:00:00 2001
From: Andy Balaam <andybalaam@artificialworlds.net>
Date: Thu, 24 Sep 2020 10:03:42 +0100
Subject: [PATCH] Use an input with associatied datalist instead of select, for
 instances list

---
 src/index.pug       |  7 ++---
 src/script/index.js | 64 +++++++--------------------------------------
 2 files changed, 11 insertions(+), 60 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index 03d816c..9ea8041 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -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")
diff --git a/src/script/index.js b/src/script/index.js
index 4bfc09e..f042627 100644
--- a/src/script/index.js
+++ b/src/script/index.js
@@ -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) {