From ef3831545238d89f681392c36b5136cdd62d6cf5 Mon Sep 17 00:00:00 2001
From: Revertron <r@revertron.com>
Date: Sun, 25 Apr 2021 19:54:36 +0200
Subject: [PATCH] Added dropdown close on blur for zones dropdown. Added zones
 sorting in dropdown menu.

---
 src/webview/index.html |  4 ++--
 src/webview/scripts.js | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/webview/index.html b/src/webview/index.html
index 7b54da0..896e3ab 100644
--- a/src/webview/index.html
+++ b/src/webview/index.html
@@ -87,9 +87,9 @@
 
                 <!-- Zones -->
                 <div class="control">
-                    <div class="dropdown" onclick="toggle(this, event);" title="Select your TLD - Top Level Domain">
+                    <div class="dropdown" id="zones-dropdown" onclick="toggle(this, event);" title="Select your TLD - Top Level Domain">
                         <div class="dropdown-trigger">
-                            <button class="button" aria-haspopup="true" aria-controls="zones-menu">
+                            <button class="button" aria-haspopup="true" aria-controls="zones-menu" onblur="closeZonesDropdown()">
                                 <span id="zones-current-name">Select zone</span>
                                 <span class="icon is-small">
                                     <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
diff --git a/src/webview/scripts.js b/src/webview/scripts.js
index 33d0f28..5ee1535 100644
--- a/src/webview/scripts.js
+++ b/src/webview/scripts.js
@@ -432,8 +432,25 @@ function keystoreChanged(path, pub_key, hash) {
     new_zone_difficulty.disabled = false;
 }
 
+function closeZonesDropdown() {
+    // If we close this right on blur we loose item clicks
+    setTimeout(function(){
+        document.getElementById("zones-dropdown").className = "dropdown";
+    }, 100);
+}
+
 function refreshZonesList() {
     var buf = "";
+    availableZones.sort(function compare(rhs, lhs) {
+        if (rhs.name < lhs.name) {
+            return -1;
+        } else if (rhs.name > lhs.name) {
+            return 1;
+        } else {
+            return 0;
+        }
+    });
+
     availableZones.forEach(function(value, index, array) {
         var zone = value.name + " (" + value.difficulty + "🔥)";
         var add_class = "";