Fixed dropdown menus behavior on linux.

This commit is contained in:
Revertron
2021-05-06 13:29:12 +02:00
parent 39f3df8b03
commit 0a1dc454be
2 changed files with 19 additions and 18 deletions
+2 -2
View File
@@ -166,7 +166,7 @@
<div class="control">
<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" onblur="closeZonesDropdown()">
<button class="button" aria-haspopup="true" aria-controls="zones-menu">
<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>
@@ -184,7 +184,7 @@
<div class="control">
<div class="dropdown" id="advanced-dropdown" onclick="toggle(this, event);">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="advanced-menu" onblur="closeAdvancedDropdown()">
<button class="button" aria-haspopup="true" aria-controls="advanced-menu">
<span>Advanced</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>
+17 -16
View File
@@ -5,6 +5,18 @@ var availableZones = [];
var myDomains = [];
var currentZone;
document.addEventListener('click', function (event) {
closeDropdowns();
});
function closeDropdowns() {
// Get all elements with class="dropdowns" and hide them
var dropdowns = document.getElementsByClassName("dropdown is-active");
for (i = 0; i < dropdowns.length; i++) {
dropdowns[i].classList.remove('is-active');
}
}
function addRecord(record) {
recordsBuffer.push(record);
refreshRecordsList();
@@ -187,6 +199,7 @@ function openTab(element, tabName) {
function toggle(element, event) {
event.stopPropagation();
closeDropdowns();
element.classList.toggle('is-active');
}
@@ -486,20 +499,6 @@ function keystoreChanged(path, pub_key, hash) {
var new_domain = document.getElementById("new_domain").disabled = false;
}
function closeZonesDropdown() {
var active = document.activeElement;
if (active == null || (active.id != 'zones-menu' && active.tagName != 'BODY')) {
document.getElementById("zones-dropdown").className = "dropdown";
}
}
function closeAdvancedDropdown() {
var active = document.activeElement;
if (active == null || (active.id != 'advanced-menu' && active.tagName != 'BODY')) {
document.getElementById("advanced-dropdown").className = "dropdown";
}
}
function refreshZonesList() {
var buf = "";
availableZones.sort(function compare(rhs, lhs) {
@@ -522,7 +521,7 @@ function refreshZonesList() {
if (typeof currentZone !== 'undefined' && currentZone.name == value.name) {
add_class = "is-active";
}
buf += "<a id=\"zone-{1}\" class=\"dropdown-item {2}\" onclick=\"changeZone('{3}');\">.{4}</a>"
buf += "<a id=\"zone-{1}\" class=\"dropdown-item {2}\" onclick=\"changeZone('{3}', event);\">.{4}</a>"
.replace("{1}", value.name)
.replace("{2}", add_class)
.replace("{3}", value.name)
@@ -545,7 +544,9 @@ function zonesChanged(text) {
refreshZonesList();
}
function changeZone(zone) {
function changeZone(zone, event) {
event.stopPropagation();
closeDropdowns();
availableZones.forEach(function(value, index, array) {
if (value.name == zone) {
currentZone = value;